選擇檔案操作控制

專案開發筆記

實作專案中，在做「選擇檔案操作控制」功能時，發現這部分要將複雜的步驟邏輯具像化比較複雜，所以寫這篇文章記錄。

Select File

這部分有 Create, Update, Import 三個不同的modal。這邊以 Create 為例，另外的多了一些顯示限制，不過主架構是相似的。

情境一：點選資料列(tr, 而非名稱)一下

點選資料列一下，會帶出下方Pipeline。這邊沒有用 on click主要因為其他情境有在同個位子on dblclick，如果直接用on click的話，會非常不好判斷。點下去，該row會有淺墨綠的反灰效果，告訴使用者選到哪一筆資料，在同樣的區塊(tr)再做一次同樣的動作，即是deselect該筆資料。deselect時，下方的pipeline會清空，而反灰效果會被移除。

情境二：點選資料名稱(非tr)一下

點選資料名稱一下，會帶出下方Pipeline，且鑽入下一層。這邊比較特別的是 table-item-file-name 這個class寫在資料名稱上(而非資料列)，所以跟情境一做出區分。進入下一層，如果沒有資料，會顯示一個空的table。上方的file breadcrumb也有做相對應的改變(鑽入下一層)。在這邊進入下一層有資料，會呼叫一支API，傳回要顯示的資料表。

情境三：點選資料列(tr, 而非名稱)兩下

這邊用on dblclick，點選資料列兩下，會帶出下方Pipeline，且鑽入下一層。進入下一層，如果沒有資料，會顯示一個空的table。上方的file breadcrumb也有做相對應的改變(鑽入下一層)。在這邊進入下一層有資料，會呼叫一支API，傳回要顯示的資料表。

File Breadcrumb

從專案中截圖

有關File Breadcrumb的部分，在路徑過長的情境，會出現下拉式選單。下拉選單的最後一個檔案位子，會出現在畫面上，不會收進摺疊選單中。

開發過程，利用錄製操作影片還有條列出各樣情況對應步驟，一一做確認。實作的細節很多，本篇只有整理主要點選檔案的三種情境跟檔案路徑的function。方便未來有使用到類似功能時可以查找，或是在設計操作動作時可以參考。