The ncku_trans's discuss from jiaantw

升級material UI至5.1

重構sideBar

Scope

Description

目前左邊sideBar程式碼都塞在一起，應該要將每個不同功能獨立出來

Screenshot(if this is a bug)

Expected result/Spec

[Frontend] 改善多重modal的操作行為，以及在批准心得時即時更新狀態。

Scope

Page
- /study
- /major

Description

現在modal的狀態由一組state控制，若再開啟其他的modal會無法分開控制，關閉其中一個時會造成全部的modal被關閉。
批准心得時會關閉modal重新fetch資料及歸零scroll的offset，在數量多的時候會不方便操作。

Screenshot(if this is a bug)

Expected result/Spec

改用stack儲存狀態
在不關閉modal的狀態下更新資料

[Frontend][study] 通用學業心得 - 文章閱讀器

Description

做一個專屬學業心得的閱讀器(不要修改舊的轉輔心得閱讀器)
「編輯類別」可以先不用做UI，預留空間就好，這裡應該可以重複利用 #42 的元件。
左右兩側切換文章的按鈕，實際上可以點選的高度應該要和整個閱讀器一樣高。
在後臺點選編輯時，應該要跳轉到心得表單頁面，且自動填入該心得原有的資料(仍然是修改該心得，並不是新增新心得。需要等 #46 完成)。

前台

prototype:
- PC版link
- Mobile版link
spec(css參考):
- PC版link
- Mobile版link
screen shot:

後台

prototype: link
spec(css參考): link
screen shot:

[Frontend] 通用學業心得 - 心得表單

Description

重新設計目前的選擇心得類別頁面
新增學業心得的填寫流程，資料流必須整合進Redux。
轉輔心得填寫流程和UI照舊。
送出心得後的頁面照舊。
搜尋元件UI不在此issue範圍內(但是搜尋tag的資料流在此issue內)。應該要重複利用 #45 製作的元件。
文章閱讀器不在此issue範圍內。應該要重複利用 #44 製作的元件。

前台

prototype: link
spec(css參考): link
screen shot:

[QA] 分享心得第一步驟按下返回會進入空白頁面

Description

分享心得第一步驟按下返回會進入空白頁面，建議第一步驟可以不用「返回」

Reproduce

點擊側邊選單
點擊「我要分享」進入「分享心得」畫面
點擊「返回」後會進入「空白頁面」

Screenshots

video0.mp4

Platform

macOS Big Sur v11.2.3
- Chrome v91.0.4472.114 (Official Build) (x86_64)
- Safari version 14.0.3 (16610.4.3.1.7)
iPhone 11 Pro iOS 14.6
- Chrome v92.0.4515.90
- Safari

修改header的顯示方式

Scope

Page
Browser/Device(if this is a bug)
- PC
- mobile

Description

PC
- 移除menu的burger icon。請參考 spec
mobile
- 將標題移到burger icon的右側，移除原本標題所在區域

Screenshot(if this is a bug)

Expected result/Spec

https://www.figma.com/file/Cf0I6JZmwyZBFpbv97YFCn/%E6%88%90%E5%A4%A7%E8%BD%89%E7%B3%BB%E7%94%9F%E5%BF%83%E5%BE%97%E5%B9%B3%E5%8F%B0?node-id=511%3A702

[Frontend][study] 通用學業心得 - 資料流優化

Scope

Page
- /post

Description

重構這一段
https://github.com/JiaAnTW/NCKU_Trans/pull/82/files#diff-1bb4a12123c2eb0b473eb5c25b22edea5f11a35867981e8908de248a0184a75bR74-R98

Screenshot(if this is a bug)

Expected result/Spec

[Frontend] 通用學業心得 - 資料流

串接後端
Redux中的study資料流處理。應該要包含

action	說明
SET_STUDY_FILTER	設定study文章的篩選統計條件
CLEAR_STUDY_FILTER	清除所有study文章的篩選統計條件
ADD_STUDY_STAT	新增統計項目(後台)
UPDATE_STUDY_STAT	更新已存在的統計項目(後台)
DELETE_STUDY_STAT	刪除已存在的篩選項目(後台)

後端API資訊

[Frontend][study] 通用學業心得 - 串接GET心得API

Scope

Page
- /
Browser/Device(if this is a bug)
- Chrome/PC

Description

依照後端文件，串接取得心得的API，將資料存入Redux中。
讓文章卡片可以顯示對應的資料List
點擊單一卡片時，開啟文章閱讀器、顯示對應內容。

Redux資料如下:

action	說明
INIT_STUDY	將backend獲得的資料存入store

Screenshot(if this is a bug)

Expected result/Spec

[Backend] 如果回傳 fail 先前有些儲存的資料尚未被刪除

Scope

Description

在創建 study 時，如果偵測到錯誤時，會直接回傳 status : fail 。
沒有清理掉一些先前創建的分類項目，造成資料庫一些資料永遠
沒辦法刪除，除非進到資料庫手動刪除。

Screenshot(if this is a bug)

Expected result/Spec

[Backend][Study] 支援「其他」統計資料

Description

Task 1

當create study包含「其他」種類統計資料時，要能儲存進DB(不須管理者權限)
必要時，可以修改目前createStudy的body需要傳的參數內容

Task 2

提供一支新的API，讓管理者可以將某個心得的「其他」種類統計資料轉換成已存在的統計資料種類。如果型態轉換失敗，則回傳錯誤訊息

Screenshot(if this is a bug)

Expected result/Spec

分離進入頁面的component

Scope

Description

現在FE進入每個頁面幾乎都會先預設顯示loading，等request都結束再顯示一般頁面。

請將這個行為分離成共用component。

Screenshot(if this is a bug)

Expected result/Spec

[Frontend][Study] 加入搜尋元件到心得頁面

Description

加入搜尋元件到心得頁面，當enter的時候才觸發添加搜尋
prototype: link
spec(css參考): link
screen shot:

[後台] 學系學院編輯功能

[Frontend] 文章預覽器太長

Scope

Page
- /post

Description

在1706.67 * 801.78px縮放比例125%底下，文章預覽器太長

Screenshot(if this is a bug)

Expected result/Spec

待決定

前端重構 - 資料流

把資料流轉成使用Redux
轉換轉系心得資料流
轉換QA資料流
預留雙輔資料流

[後台] 心得編輯功能

User Flow

1. 心得閱讀器

點擊右下角編輯，導向2 (編輯頁面，以原填寫心得頁面擴充)

2. 編輯頁面

點擊返回會回到 admin/major
點擊下一步會進入3

預覽畫面

點擊返回會回到2
點擊送出會回到 admin/major

升級React至React 17.0.2

[Frontend][study] 通用學業心得 - 搜尋元件

Description

搜尋元件的UI(不包含資料流)
prototype: link
spec(css參考): link
screen shot:

整合Router

Scope

Page
- all

Description

pharse1

將頁面資料常數拉出component區域

pharse2

統一管理所有的router，應該要包含以下資訊:
path: url path
name: 顯示名稱
component: 對應的page component

Screenshot(if this is a bug)

Expected result/Spec

[QA] 不論選取那一種類別的「通過率(官方數據)」

Reproduce

進入「轉系/輔系/雙主修心得」頁面
點擊「類別」下拉選單並選取每一種類別
觀察畫面上的「通過率(官方數據)」

Screenshots

Platform

macOS Big Sur v11.2.3
- Chrome v91.0.4472.114 (Official Build) (x86_64)
- Safari version 14.0.3 (16610.4.3.1.7)
iPhone 11 Pro iOS 14.6
- Chrome v92.0.4515.90
- Safari

[Backend][major] 優化轉雙輔心得列表API

Scope

Page
- /major

Description

Call 下面這兩隻API時，要在backend對文章做反轉排序(新的要在陣列前面，舊的要在後面)

url	method	params	authentication	說明
`/api//get/major`	GET	-		回傳已審核通過的major心得
`/api//get/major/all`	GET		V	回傳所有major心得

cc @vacantron

Screenshot(if this is a bug)

Expected result/Spec

[前台][bug] 篩選器沒有被清除

頁面

https://nckustudy.com/#/

描述

在心得頁面篩選器有選取篩選條件下，離開心得頁面並進入其他頁面後，再回到心得頁面時，顯示的文章是進入其他頁面前有篩選過的結果，但篩選器UI顯示目前沒有篩選條件(全部學院、全部年分.....)

應預期結果

離開心得頁面時篩選條件應被清除，重新回到心得頁面時，要顯示所有文章。

[Frontend] Support SSR part.1

Scope

Page
- /

Description

請根據 feat/seo-php 這個branch繼續實作SEO相關的support。目前大部分的功能 #59 實作完了。剩下還沒做的包含

meta和title
- 初次進入頁面時，meta和title應該要是
  - title: NCKU STUDY・成大學業分享
  - meta(description): NCKU STUDY | 一個讓成大學生匿名分享轉系、輔修、雙主修...等各式學業心得的平台。希望以更透明的資訊幫助成大學生規劃自己學業的方向。(原NCKUTRANS)
- 關掉文章閱讀器時，meta和title要切到
  - title: NCKU STUDY・成大學業分享
  - meta(description): NCKU STUDY | 一個讓成大學生匿名分享轉系、輔修、雙主修...等各式學業心得的平台。希望以更透明的資訊幫助成大學生規劃自己學業的方向。(原NCKUTRANS)
- 打開文章閱讀器、按下左右切換文章的按鈕時，meta和title要切到
  - title: 成功大學 XXX年XX系OO 申請心得 | NCKU STUDY (OO是類別)
  - meta(description): 心得內文的前86個字
如果進入/的時候url帶有id參數，要把對應id的文章閱讀器打開

有些像wording等tool處理在 #59 有做了，可以參考一下避免從頭造輪子。

Screenshot(if this is a bug)

Expected result/Spec

[Frontend][study] 通用學業心得 - 項目篩選器

Description

前台

prototype: link
spec(css參考): link
screen shot:

後台

prototype: link
spec(css參考): link
screen shot:

[Frontend][study] 通用學業心得 - 分享心得預覽

Scope

Page
- /post
Browser/Device(if this is a bug)
- Chrome/PC

Description

讓分享心得的輸入結果轉換到文章閱讀器內，提供給使用者預覽

Screenshot(if this is a bug)

Expected result/Spec

[Backend][Study] 取得study心得數據統計結果

Description

(這個優先權最低，如果來不及的話先做 #128 )
提供一個API

Input: 篩選條件(同 #128 )
Output: 輸出所有符合條件的心得的數據統計(只算int和float)
- 平均數字(若為字串則回傳空字串)
- 最小數字(若為字串則回傳空字串)

Screenshot(if this is a bug)

Expected result/Spec

[前台][後台] 公告系統

架構調整

redux加入re-select，分離selector

前端重構 - 文章閱讀器

把content.js轉成function component
把content.js拆成原子和中子
讓content.js能自適應資料
把style 拆分出來

[Design] 心得內容彈窗的內容寬度可以拉寬

Reproduce

進入「轉系/輔系/雙主修心得」頁面
點擊任一篇心得區塊會出現心得內容彈窗
觀察畫面

Screenshots

[前台] 加入申請表單

頁面

全部頁面

描述

在這裡新增一個按鈕，以新分頁開啟申請加入的表單連結

文字: 加入開發
連結: https://forms.gle/yeExmp2STenwZVFL7

使用的icon:

import CodeIcon from '@material-ui/icons/Code';

[Frontend][study] 通用學業心得 - 以第一個心得的id參數進入頁面時不會開啟Modal

Scope

Page
- /major

Description

以第一個心得的id參數進入頁面時不會開啟Modal

Screenshot(if this is a bug)

Expected result/Spec

[Backend][Study] 建立通用心得DB seed

Scope

Description

分兩階段

階段一(已完成)
- @yellow-hank 先建立開發使用的study/studyStat/studyCategory 假資料，完成後在DC跟開發者說明如何下指令。之後就可以把issue轉給 @JiaAnTW
階段二
- @JiaAnTW 在2.2更板前，把該資料改為prod初次更版要先顯示的資料

Screenshot(if this is a bug)

Expected result/Spec

[Backend] SSR

Scope

All

Description

Option1: Next.js + sequelize
Option2: V8 in PHP + React v.18

Screenshot(if this is a bug)

Expected result/Spec

[Frontend][Study] 通用心得表單 - 增加預設題型

Scope

Page
- /post

Description

在通用心得表單增加

在輸入第一頁預設增加「心得標題」題型。
- 輸入題型: 一般文字輸入
在輸入第二頁增加預覽「心得標題」。
在統計資料選擇器上方，增加 #45 中做好的原件。當onChange的時候，下方顯示可供選擇的統計資料也要改變(只顯示包含input中文字的項目)
spec
prototype

Screenshot(if this is a bug)

後端架構調整

用Laravel Eloquent api重構controller和model

修改cardList捲動方式

Scope

Page

/

Description

PC
- 捲動範圍改為
Mobile
- 捲動範圍改為

Screenshot(if this is a bug)

Expected result/Spec

心得的id改為uuid

[Frontend] 通用心得數據分析

Description

有選擇「要篩選的數據項目」時才顯示這個元件。
顯示的數據是「有選擇的篩選的數據項目」
統計範圍是所有「經過篩選數據&搜尋結果後的文章」。

Spec

prototype:
- PC版link
- Mobile版link
spec(css參考):
- PC版link
- Mobile版link
screen shot:

[Backend][study] 實作通用心得DB table的CRUD

Description

在 #77 後。實作DB的CRUD。最後應該要提供以下API:

url	method	params	authentication	說明	目前進度
`/api/get/study?from={id}&num={num}`	GET	-		回傳 confirm equal true 從id為`{id}`的心得以前`{num}`筆心得資料。若少於`{num}`筆則剩下的全部回傳。	V
`/api/get/study/all?from={id}&num={num}`	GET	-	V	回傳從id為`{id}`的心得以前`{num}`筆心得資料。若少於`{num}`筆則剩下的全部回傳。	V
`/api/post/study`	POST	同study心得schema		新增一筆study心得資料	V
`/api/patch/study?id={id}`	PATCH	confirm: `true/false`	V	更新id為`{id}`的心得的confirm	V
`/api/post/study?id={id}`	UPDATE	同study心得schema	V	更新id為`{id}`的心得的所有資料	V
`/api/delete/study?id={id}`	DELETE	-	V	刪除id為`{id}`的心得	V
`/api/get/studyType`	GET	TBD		取得所有study類別	V
`/api/post/studyType`	POST	TBD		新增一個新的study類別	V
`/api/post/studyType?id={id}`	UPDATE	TBD	V	更新id為`{id}`的study類別	V
`/api/delete/studyType?id={id}`	DELETE	-	V	刪除id為`{id}`的study類別	V
`/api/get/studyStat`	GET	TBD		取得所有study項目	V
`/api/post/studyStat`	POST	TBD		新增一個新的study統計項目	V
`/api/post/studyStat?id={id}`	UPDATE	TBD	V	更新id為`{id}`的study統計項目	V
`/api/delete/studyStat?id={id}`	DELETE	-	V	刪除id為`{id}`的study統計項目	V

Screenshot(if this is a bug)

Expected result/Spec

[Frontend][study] 通用學業心得 - 分享心得UI與Spec不符

Scope

Page
- /post
Browser/Device(if this is a bug)
- Chrome/PC

Description

修正分享心得目前和spec有出入的地方
將「目前選取的心得類別」改成黃色，「未選取的類別」改為白色+黃色外框(現在這兩個是相反)

Screenshot(if this is a bug)

Expected result/Spec

[Backend][study] 通用心得Schema設計

Description

設計通用心得的Schema。應該要能夠支援以下功能

心得類別
- 可讓管理員新增/修改/刪除filter項目
filter:
- 可讓管理員新增/修改/刪除filter項目
- 可以設定該filter的格式。包含
  - 資料型態: 整數/小數/字母(A~Z)
  - 資料上下限範圍
- 會有一個篩選項目是填寫心得者建議的項目 。請參考[spec]
- 排序依照時間，越上面越越新的(https://www.figma.com/proto/Cf0I6JZmwyZBFpbv97YFCn/%E6%88%90%E5%A4%A7%E8%BD%89%E7%B3%BB%E7%94%9F%E5%BF%83%E5%BE%97%E5%B9%B3%E5%8F%B0?node-id=787%3A4261&starting-point-node-id=566%3A5500&show-proto-sidebar=1)

注意: 在Schema設計完成後，請先用mock data讓前端可以call http GET到資料，再到#47 更新Schema資訊，接著再開始實作真正的細節。

Screenshot(if this is a bug)

Expected result/Spec

[Frontend][study] 通用學業心得 - 預覽列表卡片

Description

必須使用react window來顯示卡片列表
- 轉輔心得的列表也要改用react window
卡片上方區塊顯示該心得的類別
卡片上方區塊顯示該心得具有的統計資料
當文章內文超出卡片範圍時，超出的內容改為(...)
[注意] 在後台時，尚未審核通過的心得的background-color和其他心得不同。請見spec
在手機版時，卡片寬度需填滿畫面
請將這一頁的版面區域切版完成(設定好篩選器、統計區域應該要在的位置)

前台

prototype:
- PC版link
- Mobile版link
spec(css參考):
- PC版link
- Mobile版link
screen shot:

後台

prototype: link
spec(css參考): link
screen shot:

[QA] 全部年份以外的「通過率(官方數據)」會無法呈現

Reproduce

進入「轉系/輔系/雙主修心得」頁面
點擊「年份」下拉選單並選取「全部年份」以外的各個年份
觀察畫面上的「通過率(官方數據)」

Screenshots

Platform

macOS Big Sur v11.2.3
- Chrome v91.0.4472.114 (Official Build) (x86_64)
- Safari version 14.0.3 (16610.4.3.1.7)
iPhone 11 Pro iOS 14.6
- Chrome v92.0.4515.90
- Safari

[Design] 分享心得的進度條都是勾勾無法區分是否完成

Reproduce

點擊左上角的選單按鈕
點擊「我要分享」進入「分享心得」畫面
點擊「下一步」並觀察上方進度條

Screenshots

[前台][後台] 重構useFilter

Scope

Page
- /

Description

這東西太髒了，需要重構。
如果能整理進去reselect就盡量
https://github.com/JiaAnTW/NCKU_Trans/blob/master/resources/assets/js/page/Major/EssayFilter/useFilter.js

Screenshot(if this is a bug)

Expected result/Spec

[Frontend][study] 通用學業心得 - 串接創create/update心得API

Scope

Page
- /post
Browser/Device(if this is a bug)
- Chrome/PC

Description

-API資訊

Screenshot(if this is a bug)

Expected result/Spec

[Backend][Study] 在取得study心得的API加上篩選條件功能

Description

第一階段

讓GET study的API可以透過url傳入要篩選的類別、資料(有就好，不需要比較大小)

input ex: ?typeFilter=a001,b002?statFilter=c001,d002
output ex: 輸出是類別uuid是a001或b002或是有資料uuid是c001或d002的心得(全部都是聯集，只要有任一就輸出)

第二階段

讓GET study的API可以透過url傳入要篩選的關鍵字

input ex: ?p=分享
output ex: 輸出標題/內文包含分享字串的心得(全部都是聯集，只要有任一就輸出)

jiaantw / ncku_trans Goto Github PK

ncku_trans's Issues

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

Description

前台

後台

Description

前台

Description

Reproduce

Screenshots

Platform

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

後端API資訊

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

Description

Task 1

Task 2

Screenshot(if this is a bug)

Expected result/Spec

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

Description

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

User Flow

1. 心得閱讀器

2. 編輯頁面

預覽畫面

Description

Scope

Description

pharse1

pharse2

Screenshot(if this is a bug)

Expected result/Spec

Reproduce

Screenshots

Platform

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

頁面

描述

應預期結果

Scope

Description

Screenshot(if this is a bug)

Expected result/Spec

Description

前台

後台

Scope

Description