Add hierarchical file picker

upload/frontend/table/init_upload_table.js

@@ -1,8 +1,7 @@
 import { addFiles } from './on_files_change.js';
 import { onFilesChange } from './on_files_change.js';
 import { onFolderChange } from './on_folder_change.js';
-import { render } from './render.js';
-import { setStatus } from './set_status.js';
+import { findNode, flattenFiles, render } from './render.js';
 
 export function initUploadTable(cfg) {
   const elements = {
@@ -11,24 +10,39 @@ export function initUploadTable(cfg) {
     tableBodyEl: cfg.tableBodyEl,
     countEl: cfg.countEl,
   };
-  const state = { files: [], fileMeta: new Map(), overNames: new Set(), busy: false };
+  const state = { nodes: [], fileMeta: new Map(), busy: false };
   elements.fileInputEl.addEventListener('change', onFilesChange(state, cfg, elements));
   elements.folderInputEl.addEventListener('change', onFolderChange(state, cfg, elements));
+  elements.tableBodyEl.addEventListener('click', (event) => {
+    const toggle = event.target.closest('[data-toggle]');
+    if (toggle) {
+      const found = findNode(state.nodes, toggle.dataset.toggle);
+      if (found) found.node.expanded = !found.node.expanded;
+      render(state, elements);
+      return;
+    }
+    const remove = event.target.closest('[data-remove]');
+    if (remove) {
+      const found = findNode(state.nodes, remove.dataset.remove);
+      if (found) found.nodes.splice(found.nodes.indexOf(found.node), 1);
+      render(state, elements);
+    }
+  });
 
   const api = {
     pickFiles: () => elements.fileInputEl.click(),
     pickFolder: () => elements.folderInputEl.click(),
     addFiles: (files) => addFiles(state, cfg, files, elements),
-    getFiles: () => state.files
-      .filter((file) => !state.overNames.has(file.name))
-      .map((file) => ({ path: file.name, name: file.name, size: file.size, file })),
-    getOverNames: () => new Set(state.overNames),
-    setStatus: (path, html) => setStatus(path, html, state, elements),
+    getFiles: () => flattenFiles(state.nodes),
+    remove: (id) => {
+      const found = findNode(state.nodes, id);
+      if (found) found.nodes.splice(found.nodes.indexOf(found.node), 1);
+      render(state, elements);
+    },
     render: () => render(state, elements),
     clear: () => {
-      state.files = [];
+      state.nodes = [];
       state.fileMeta.clear();
-      state.overNames.clear();
       render(state, elements);
     },
     setBusy: (busy) => {