# Practice-demo

Hello Nick, Ocean兩位好：

首先感謝你們給予肯定，我很高興有這個機會可以在將來與你們還有團隊一起共事!

也很感謝你們願意協助我在就職前這段時間能稍微先熟悉工作相關技能，文件的部分我陸續有在閱讀，並且同步進行作業的部分，然後以下是我針對這個作業做的簡單規格理解與規劃，如果在規劃部分或是code有需要改進的地方可以隨時跟我說！

以下是我目前進度的demo ─
> [demo連結](https://junefish1414.github.io/Practice-Demo/#/)
> (最新更新時間 2021/12/02)
:::warning
※ 備註：似乎沒有看到文件內 API 提供，所以我是先以之前自己申請的作為練習，目前帳號部分只接受一隻做實體登入，所以登入請麻煩幫我使用以下帳密先做測試：
>**email**： [e-mail] </br>
>**password** : test123456
:::

</br>

## 作業：
[作業網站架構](https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1&title=%E9%9D%A2%E8%A9%A6%E4%BD%9C%E6%A5%AD.drawio#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D1-UolVAEu0NkuY5UQhH03VpKNjEhtD5Qe%26export%3Ddownload)

**作業內容：**
1. 請先針對規格需求，列出自己每個階段要完成的功能項目，並列在 github project todolist。
2. 每完成一個功能項目，請發出 PR 給 Nick 和阿海。
3. 完成規格文件上提到的條件，可正常操作。

**期望能從中間學到**
1. 資料結構設計。
2. 共用元件設計。
3. Vue 的特性。
4. VueRouter, Vuex 的掌握。

</br>

## Todolist
依照目前網站架構做的功能項目規劃(目前條列項目可能視實際製作調整、修改)
- [x] A. [前置作業(環境架設、Bootstrap 引入)](#A-前置作業)
- [x] B. [串接 API 登入頁實作](#B-介接-API-登入頁實作)
- [X] C. [側邊 Navbar 製作與巢狀路由管理](#C-側邊-Navbar-製作與巢狀路由管理)
- [x] D. [帳號列表頁](#D-帳號列表頁)
- [x] 1. 搜尋帳號功能
- [x] 2. 項目編輯(修改、刪除)
- [x] 3. 分頁顯示
- [x] 4. 讀取效果
- [x] E. [新增帳號](#E-新增帳號)
- [x] 1. 帳號為正確email格式
- [X] 2. 帳號密碼必填
- [X] 3. 密碼至少8字元，不得填入特殊符號
- [X] 4. 確認密碼與密碼相符
- [x] F. [產品列表頁](#F-產品列表頁)
- [x] 1. 產品列表
- [x] 2. 項目編輯(修改、刪除)
- [x] G. [產品新增頁](#Ｇ-產品新增頁)
- [x] 1. 必須填入產品
- [x] 2. 價格為數字
- [x] 3. 點擊 ↑↓ 按鈕可以移動菜單順序
- [x] 4. 項目編輯(修改、刪除)
- [X] H. 登出製作

</br>

## 規格需求詳細說明
### A. 前置作業
1. 環境架設：Vue CLI - Vue3 / ESLint (standard) / Router / Vuex / CSS Pre-processors (SCSS)
2. 樣式設定：Bootstrap 引入
3. 自定義 Bootstrap 變數 (路徑：src>assets>helpers>_variables.scss)
4. Axios 插件安裝

> **使用**
> 1. Vue CLI 建置專案
> 2. Bootstrap 基本版型
> 3. Axios 串接

:::warning
※備註：我依目前的架構畫面看起來似乎都是bootstrap的樣式，如有需要手刻可以再請我調整
:::

---

### B. 介接 API 登入頁實作
1. 串接 API
2. 登入畫面有：`帳號 / 密碼` 輸入
3. 登入後切換頁面顯示 `帳號列表` 之資訊

> **使用**
> 1. Axios 串接 API
> 2. Login 後 VueRouter 跳接切換到 Account 列表頁面

:::warning
※備註：似乎沒有看到文件內 API 提供，所以我是先以之前自己申請的作為練習，目前帳號部分只接受一隻做實體登入，所以登入請麻煩幫我使用以下帳密先做測試：
>**email**： [e-mail] </br>
>**password** : test123456
:::
---

### C. 側邊 Navbar 製作與巢狀路由管理
1. 側邊 Navbar 製作，使用 bootstrap 的 直立式 Navbar 版型
2. 路由管理
3. 登出功能設定，點下登出時跳轉回到 `login` 畫面

> **使用**
> 1. Component
> 2. Vue Router 的 index.js 管理路徑
---

### D. 帳號列表頁
1. 帳號搜尋功能，即時改變顯示清單。
2. 帳號列表，將遠端預設帳號載入。
3. 帳號的編輯 Modal，點選編輯時跳出，因為是管理方，所以包含密碼等預設資料都是可見狀態。選擇 `save` 則保存變更資料，`close` 則取消變更。
4. 帳號的刪除 Modal，點選刪除時跳出，使用紅色警告，選擇 `確認刪除` 才將資料刪除，選擇 `取消` 則保留資料。
5. 分頁功能，正確帶入 `目前資料頁數` 與 `所在頁碼`。
6. 讀取效果，有轉圈圖案提示使用者正在載入資料。

> **使用**
> 1. 使用 computed，比對搜尋欄輸入文字，搜尋帳號時可以即時改變顯示清單
> 2. 使用 v-for 將遠端的15個預設帳號載入
> 3. 另建編輯與刪除 modal 的 component，透過 props 跟 emit 傳遞資料
> 4. 另建分頁 pagination 的 component
> 5. 讀取中的效果使用 npm 套件 - [vue3-loading-overlay Component](https://www.npmjs.com/package/vue3-loading-overlay)

---
### E. 新增帳號
1. 帳號為正確email格式
2. 帳號密碼必填
3. 密碼至少8字元，不得填入特殊符號
4. 確認密碼與密碼相符
5. 所有輸入確認無誤後，跳出新增通知並清空欄位。

> **使用**
> 1. `input type="email"`，並加上` required 屬性`，讓填寫時預設就必須是 email 格式
> 2. 上述格式皆確認無誤後再一次發送 `post` 請求，將完整資料送回帳號資料列表。

:::warning
※ 這是我第一次手寫處理帳號驗證程序，如有疏漏再請前輩給予糾正。
:::

---

### F. 產品列表頁
1. 讓新增完成的產品列表可以疊加顯示
2. 每筆資料都有`新增`與`刪除`的選項

> **使用**
> 1. 把資料存到`localstorage`，每次再從`localstorage`再把資料撈回來，把東西疊加新增上去 </br>
(因為六角沒有可以套用的API了，所以不把資料傳送到遠端，而是改以`localstorage`存放)
> 2. 注意兩頁都應該有預設資料，避免進去頁面的時候呈現空白

---
### Ｇ. 產品新增頁
1. 可以新增產品與其價格，新增後在下方先匯合成一個`List`，點選`送出`後再將資料上傳到`localStorage`
2. localStorage的轉出Ｎ

> **使用**
> 1. 把資料存到`localstorage`，每次再從`localstorage`再把資料撈回來，把東西疊加新增上去 </br>
(因為六角沒有可以套用的API了，所以不把資料傳送到遠端，而是改以`localstorage`存放)
> 2. 注意兩頁都應該有預設資料，避免進去頁面的時候呈現空白

---

</br></br>

## 作業修改與調整
- [ ] 1. 加入使用者回饋：toast 與 spinner
- [x] 2. list 加入 write time 當排序
- [ ] 3. 新增功能 component 化，在 **[帳號列表頁面]** 加入一個新增按鈕
- [x] 4. search 按鈕修改
- [ ] 5. vue router 的 hook 修改
- [ ] 6. 不要使用 watch
- [ ] 7. 使用 vuex ，並使用單向資料流。
- [ ] 8. 不要使用 import Modal from 'bootstrap/js/dist/modal'
- [x] 9. 不要使用 v-modal
- [x] 10. AccountModal 修改
- [X] 11. ESLint 加裝
- [X] 12. 六角購物車 API 整理

### 知識觀念
* map 與 forEach 的不同
> → map 原陣列不動，輸出一個新的陣列</br>
> → forEach 直接原陣列修改</br>
[參考文章](https://ithelp.ithome.com.tw/articles/10215281)
*

---
### OTHERS
**閱讀文件統整**
1. [如何寫一個 Git Commit Message](https://blog.louie.lu/2017/03/21/%E5%A6%82%E4%BD%95%E5%AF%AB%E4%B8%80%E5%80%8B-git-commit-message/#rules03)
2. [如何撰好的 Git Commit Message](https://heidiliu2020.github.io/git-commit-message/)
3. [讓我們來了解 GitHub Flow 吧！](https://medium.com/@trylovetom/%E8%AE%93%E6%88%91%E5%80%91%E4%BE%86%E4%BA%86%E8%A7%A3-github-flow-%E5%90%A7-4144caf1f1bf)
4. [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript#introduction)
5. [enum觀念](https://ithelp.ithome.com.tw/articles/10184794)
6. [CSS - 運用 Stylelint 養成好習慣](https://dotblogs.com.tw/explooosion/2018/09/30/141005)
7. [與其它開發者的互動 - 使用 Pull Request（PR）
](https://gitbook.tw/chapters/github/pull-request)

**更多參考**
* [ Git 基礎 - 檢視提交的歷史記錄(Git log) ](https://git-scm.com/book/zh-tw/v2/Git-%E5%9F%BA%E7%A4%8E-%E6%AA%A2%E8%A6%96%E6%8F%90%E4%BA%A4%E7%9A%84%E6%AD%B7%E5%8F%B2%E8%A8%98%E9%8C%84)
* [Pro Git(繁中) ](https://git-scm.com/book/zh-tw/v2)