# 109-2 Frontend
<small>[回MD首頁](https://hackmd.io/CSNbja7XTYCYquYxgq4Xow)</small>
## 3/2 討論結果
### 一、目標內容

* Profile
* position: change to icon, move to top-right?
* all information
* all posts with delete function
* Admin Mode
* 如果是管理員，就會顯示出來的擴充功能
* when clicked, all functions on NavBar will change
* Belows are functions:
* check all registrations
* for all users, add it to Admin/ delete user
* add/delete Columns
* add/delete Careers(recruitments, recomendation)
* Career
* All users can add recruitments, recomendations
* Study
* do it later XD

### 二、工作

找到適合那些頁面的版面設計，並以圖形化方式呈現。可參考bootstrap, material-UI的 Template 來看
記得註明使用哪些module

1. 管理員功能：
1. **管理註冊**： 應以條列撞顯示所有請求註冊審核的使用者資料，並附上同意與否的按鈕，類似臉書的申請
1. **新增使用者**：包含搜尋條與條列所有使用者，對每個使用者可執行新增管理員、去除管理員、刪去帳號
1. **新增專欄**：以條列式列出所有專欄，並在最上面有新增按鈕
1. **填寫專欄頁面**:按下新增按鈕後切換到此頁面，填入專欄的所有資訊

1. 一般使用者：
1. **職業**：block的形式，並在第一格為空格可加入新的
2. **profile**: 列出基本資訊與曾經的貼文並支援刪去

### 三、分別敘述

1. ##### 管理註冊
> https://codesandbox.io/s/multi-level-drawer-antd4131-forked-38co2
> * 參考下圖，左上角按鈕套用Badge顯示request數量
> 
> * 按下按鈕後，開啟Drawer，顯示申請人的概略資料
> 
> * 點擊人名，用Modal浮出詳細資料表
> 

2. ##### 新增使用者
> * 搜尋條可能配合搜尋邏輯設計會比較好，所以先沒有做
> 使用 Antd 的 Table 可以在列末加上按鈕，顯示也算清晰
> 

3. ##### 新增專欄
>https://www.creative-tim.com/product/material-dashboard-react?partner=104080
>

4. ##### 新增專欄頁面
> * 參考左邊表格類型，以下是我在線上履歷生成器中得到的靈感，我想我們不需要右邊的預覽模式，只要讓內容向左邊一樣即可
> * column block 的填寫大概像這樣
> 
> * 細項的話會是這種大型文字框，然後底下有add按鈕可以新增區塊
> 
> * 新增區塊後，會出現標題內文的表單
> 
> * 另外，內文的文字輸入對於高度有限制，超過則隱藏起來
> 
> * 最後底下加個tag的選項
> 
> ## 實作細節
> [表單範本連結](https://material-ui.com/getting-started/templates/)
> 裡面有checklist和表單滿像的
> 另外，material ui 的input textfeild 應該可以滿足大部分input 的要求
5. ##### 職業
>single block, toggle button and tab的實作
>[block1(from material ui)](https://material-ui.com/zh/components/cards/)
>[toggle button(from material ui)](https://material-ui.com/zh/components/cards/)
>[tab example(from ant'd)](https://ant.design/components/tabs/)

>在職業這裡，toggle button是要switch recuritment and recommendation
>[一個類似的網站，包含了toggle button和blocks](https://quantum-computing.ibm.com/systems?skip=0&systems=all)
>
>
>toggle button在all和yours:
>
>
>
>(也可以switch to table view)
>

>[an album-like interface](https://material-ui.com/zh/getting-started/templates/album/)
6. ##### profile

>* 側拉條放選項，可是中間好像都要換掉...
>出處: http://www.bootstrapmb.com/item/9366

>* 另一個是: https://startbootstrap.com/theme/resume
>這個比較漂亮，可是只有一頁的，我怕往如果要看自己貼文會不會頁面太大
>
>比較理想是兩個合在一起

>控制版型
https://demos.creative-tim.com/material-dashboard-react/#/admin/user

## 3/16 討論結果

### 討論
1. 能套模板就先套，風格差太多的話就之後再說
2. 模板除了bootstrap, material-ui, antd以外盡量不要自己安裝
3. 後端的api[連結](https://hackmd.io/XCiAXLMkTQal6L6AOARD-w#功能介紹)
### 工作
1. 學會寫react(arrow function, hook)

## 4/27 討論結果
### 實作方法
1. 使用NTUEE_plus_website 的server搭配frontend revised client使用（故前端程式要寫在frontendrevised）
2. API 使用方法在NTUEE_plus_website res的routes裡面
### 工作
**AgentSu** : implement User Management
**GinGerBread** : implement Add Column UI
**JamesYu** : add Axios function to Columnblock/ColumnText