109-2 Frontend

回MD首頁

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

  2. 一般使用者：

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

三、分別敘述

  1. 管理註冊

https://codesandbox.io/s/multi-level-drawer-antd4131-forked-38co2

  • 參考下圖，左上角按鈕套用Badge顯示request數量
  • 按下按鈕後，開啟Drawer，顯示申請人的概略資料
  • 點擊人名，用Modal浮出詳細資料表
  1. 新增使用者
  • 搜尋條可能配合搜尋邏輯設計會比較好，所以先沒有做
    使用 Antd 的 Table 可以在列末加上按鈕，顯示也算清晰
  1. 新增專欄

https://www.creative-tim.com/product/material-dashboard-react?partner=104080

  1. 新增專欄頁面
  • 參考左邊表格類型，以下是我在線上履歷生成器中得到的靈感，我想我們不需要右邊的預覽模式，只要讓內容向左邊一樣即可
  • column block 的填寫大概像這樣
  • 細項的話會是這種大型文字框，然後底下有add按鈕可以新增區塊
  • 新增區塊後，會出現標題內文的表單
  • 另外，內文的文字輸入對於高度有限制，超過則隱藏起來
  • 最後底下加個tag的選項

實作細節

表單範本連結
裡面有checklist和表單滿像的
另外，material ui 的input textfeild 應該可以滿足大部分input 的要求

  1. 職業

single block, toggle button and tab的實作
block1(from material ui)
toggle button(from material ui)
tab example(from ant'd)

在職業這裡，toggle button是要switch recuritment and recommendation
一個類似的網站，包含了toggle button和blocks

toggle button在all和yours:

(也可以switch to table view)

an album-like interface

  1. profile

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

3/16 討論結果

討論

  1. 能套模板就先套，風格差太多的話就之後再說
  2. 模板除了bootstrap, material-ui, antd以外盡量不要自己安裝
  3. 後端的api連結

工作

  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

Select a repo