From 2ca2e5f88c2e4dea5de432526830ba8b5e2ff005 Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Fri, 18 Oct 2024 00:42:35 +0100
Subject: [PATCH] Rework of the app file store to be scoped per item

- fix a few issue

Co-authored-by: Benjamin Charmes <BenjaminCharmes@users.noreply.github.com>
---
 webapp/src/components/FileList.vue           | 30 +++++++------------
 webapp/src/components/FileSelectDropdown.vue | 11 ++++---
 webapp/src/file_upload.js                    | 31 ++++----------------
 webapp/src/server_fetch_utils.js             | 21 ++++---------
 webapp/src/store/index.js                    | 16 +++++-----
 webapp/src/views/EditPage.vue                | 11 +++----
 6 files changed, 40 insertions(+), 80 deletions(-)

diff --git a/webapp/src/components/FileList.vue b/webapp/src/components/FileList.vue
index 7c5d90258..c9b58eb69 100644
--- a/webapp/src/components/FileList.vue
+++ b/webapp/src/components/FileList.vue
@@ -3,43 +3,39 @@
     <label class="mr-2">Files</label>
     <div class="card">
       <div id="filearea" class="card-body overflow-auto">
-        <div v-for="file_id in file_ids" :key="file_id" class="file-group">
+        <div v-for="(file, file_id) in stored_files" :key="file_id" class="file-group">
           <a @click="deleteFile($event, file_id)">
             <font-awesome-icon icon="times" fixed-width class="delete-file-button" />
           </a>
-          <a
-            class="filelink"
-            target="_blank"
-            :href="`${$API_URL}/files/${file_id}/${stored_files[file_id].name}`"
-          >
-            {{ stored_files[file_id].name }}
+          <a class="filelink" target="_blank" :href="`${$API_URL}/files/${file_id}/${file.name}`">
+            {{ file.name }}
           </a>
           <font-awesome-icon
-            v-if="stored_files[file_id].is_live == true"
+            v-if="file.is_live == true"
             v-show="true"
             class="link-icon"
             :icon="['fa', 'link']"
           />
           <font-awesome-icon
-            v-else-if="stored_files[file_id].source_server_name != null"
+            v-else-if="file.source_server_name != null"
             v-show="true"
             class="unlink-icon"
             :icon="['fa', 'unlink']"
           />
-          <span v-if="stored_files[file_id].source_server_name != null">
+          <span v-if="file.source_server_name != null">
             <span class="server-name">
               <font-awesome-icon :icon="['fas', 'hdd']" class="toplevel-icon" />
-              {{ stored_files[file_id].source_server_name }}
+              {{ file.source_server_name }}
             </span>
             <span class="last-updated-text">
               (updated
               {{
-                formatDistance(new Date(stored_files[file_id].last_modified_remote), new Date(), {
+                formatDistance(new Date(file.last_modified_remote), new Date(), {
                   addSuffix: true,
                 })
               }}, last synced
               {{
-                formatDistance(new Date(stored_files[file_id].last_modified), new Date(), {
+                formatDistance(new Date(file.last_modified), new Date(), {
                   addSuffix: true,
                 })
               }})
@@ -48,7 +44,7 @@
           <span v-else class="last-updated-text">
             (uploaded
             {{
-              formatDistance(new Date(stored_files[file_id].last_modified), new Date(), {
+              formatDistance(new Date(file.last_modified), new Date(), {
                 addSuffix: true,
               })
             }})
@@ -81,10 +77,6 @@ export default {
       type: String,
       required: true,
     },
-    file_ids: {
-      type: Array,
-      default: () => [],
-    },
     stored_files: {
       type: Object,
       default: () => ({}),
@@ -98,8 +90,6 @@ export default {
   methods: {
     formatDistance,
     deleteFile(event, file_id) {
-      console.log(`delete file button clicked!`);
-      console.log(event);
       deleteFileFromSample(this.item_id, file_id);
       return false;
     },
diff --git a/webapp/src/components/FileSelectDropdown.vue b/webapp/src/components/FileSelectDropdown.vue
index 85aafc608..77268113a 100644
--- a/webapp/src/components/FileSelectDropdown.vue
+++ b/webapp/src/components/FileSelectDropdown.vue
@@ -3,7 +3,7 @@
     <label class="mr-4"><b>Select a file:</b></label>
     <select class="form-control file-select-dropdown" :value="modelValue" @input="handleInput">
       <option v-for="file_id in available_file_ids" :key="file_id" :value="file_id">
-        {{ all_files[file_id].name }}
+        {{ all_files_name(file_id) }}
       </option>
       <option disabled>
         Accepted filetypes:
@@ -43,14 +43,14 @@ export default {
   emits: ["update:modelValue"],
   computed: {
     all_files() {
-      return this.$store.state.files;
+      return this.$store.state.all_item_data[this.item_id].files;
     },
     available_file_ids() {
       let sample_files = this.$store.state.all_item_data[this.item_id].file_ObjectIds;
       return sample_files.filter((file_id) => {
-        let filename = this.all_files[file_id].name;
+        let filename = this.all_files_name(file_id);
         return this.extensions
-          .map((extension) => filename.endsWith(extension))
+          .map((extension) => filename?.endsWith(extension))
           .some((element) => element); // check if the extension is any of the extensions
       });
     },
@@ -65,6 +65,9 @@ export default {
     },
   },
   methods: {
+    all_files_name(file_id) {
+      return this.all_files.find((file) => file.immutable_id === file_id)?.name || "File not found";
+    },
     handleInput(event) {
       this.$emit("update:modelValue", event.target.value);
       if (this.updateBlockOnChange) {
diff --git a/webapp/src/file_upload.js b/webapp/src/file_upload.js
index 172ee7aed..75476fa23 100644
--- a/webapp/src/file_upload.js
+++ b/webapp/src/file_upload.js
@@ -12,7 +12,6 @@ import { API_URL, UPPY_MAX_NUMBER_OF_FILES, UPPY_MAX_TOTAL_FILE_SIZE } from "@/r
 // file-upload loaded
 
 export default function setupUppy(item_id, trigger_selector, reactive_file_list) {
-  console.log("setupUppy called with: " + trigger_selector);
   var uppy = new Uppy({
     restrictions: {
       // Somewhat arbitrary restrictions that prevent numbers that would break the server in one go -- the API should also refuse files when 'full'
@@ -26,36 +25,21 @@ export default function setupUppy(item_id, trigger_selector, reactive_file_list)
       inline: false,
       trigger: trigger_selector,
       close_after_finish: true,
-      metaFields: [
-        {
-          id: "blahblah",
-          name: "Blah",
-          placeholder: "Metadata can be added here",
-        },
-      ],
     })
     .use(Webcam, { target: Dashboard })
     .use(XHRUpload, {
-      //someday, try to upgrade this to Tus
+      //someday, try to upgrade this to Tus for resumable uploads
       headers: headers,
       endpoint: `${API_URL}/upload-file/`,
       FormData: true, // send as form
       fieldName: "files[]", // default, think about whether or not to change this
       showProgressDetails: true,
       withCredentials: true,
-      // getResponseData(responseText, response) {
-      // 	console.log("Uppy response text:")
-      // 	console.log(responseText)
-      // 	console.log("Uppy response:")
-      // 	console.log(response)
-      // }
     });
 
   uppy.on("file-added", (file) => {
-    console.log("searching for matching files for: " + file.name);
     var matching_file_id = null;
     for (const file_id in reactive_file_list) {
-      // console.log(`evaluating ${reactive_file_list[file_id].name} vs ${file.name}`)
       if (reactive_file_list[file_id].name == file.name) {
         alert(
           "A file with this name already exists in the sample. If you upload this, it will be duplicated on the current item.",
@@ -71,21 +55,16 @@ export default function setupUppy(item_id, trigger_selector, reactive_file_list)
   });
 
   uppy.on("complete", function (result) {
-    console.log("Upload complete! We’ve uploaded these files:", result.successful);
-    console.log("There were errors with these files:", result.failed);
     result.successful.forEach(function (f) {
-      console.log("file upload response:");
-      console.log(f.response);
       var response_body = f.response.body;
-      store.commit("updateFiles", {
-        [response_body.file_id]: response_body.file_information,
-      });
-      console.log("Added file to store. Response_body:");
-      console.log(response_body);
       if (!response_body.is_update) {
         store.commit("addFileToSample", {
           item_id: item_id,
           file_id: response_body.file_id,
+          file_info: {
+            ...response_body.file_information,
+            immutable_id: response_body.file_information.immutable_id.$oid,
+          },
         });
       }
     });
diff --git a/webapp/src/server_fetch_utils.js b/webapp/src/server_fetch_utils.js
index e3e932fd8..a30ba2744 100644
--- a/webapp/src/server_fetch_utils.js
+++ b/webapp/src/server_fetch_utils.js
@@ -423,7 +423,6 @@ export async function getItemData(item_id) {
         child_items: response_json.child_items,
         parent_items: response_json.parent_items,
       });
-      store.commit("updateFiles", response_json.files_data);
 
       return "success";
     })
@@ -440,8 +439,6 @@ export async function getItemByRefcode(refcode) {
         child_items: response_json.child_items,
         parent_items: response_json.parent_items,
       });
-      store.commit("updateFiles", response_json.files_data);
-
       return "success";
     })
     .catch((error) => alert("Error getting item data: " + error));
@@ -602,19 +599,15 @@ export function deleteBlock(item_id, block_id) {
 }
 
 export function deleteFileFromSample(item_id, file_id) {
-  console.log("deleteFileFromSample called with item_id and file_id:");
-  console.log(item_id);
-  console.log(file_id);
   fetch_post(`${API_URL}/delete-file-from-sample/`, {
     item_id: item_id,
     file_id: file_id,
   })
-    .then(function (response_json) {
+    .then(function () {
       store.commit("removeFileFromSample", {
         item_id: item_id,
         file_id: file_id,
       });
-      store.commit("updateFiles", response_json.new_file_obj);
     })
     .catch((error) => alert(`Delete unsuccessful :(\n error: ${error}`));
 }
@@ -641,22 +634,20 @@ export async function fetchRemoteTree(invalidate_cache) {
 }
 
 export async function addRemoteFileToSample(file_entry, item_id) {
-  console.log("loadSelectedRemoteFiles");
   return fetch_post(`${API_URL}/add-remote-file-to-sample/`, {
     file_entry: file_entry,
     item_id: item_id,
   })
     .then(function (response_json) {
-      //handle response
-      console.log("received remote sample!");
-      console.log(response_json);
-      store.commit("updateFiles", {
-        [response_json.file_id]: response_json.file_information,
-      });
+      //store.commit("updateFiles", {
+      //  [response_json.file_id]: response_json.file_information,
+      //});
       if (!response_json.is_update) {
+        console.log("Adding file to sample", response_json.file_information);
         store.commit("addFileToSample", {
           item_id: item_id,
           file_id: response_json.file_id,
+          file_info: response_json.file_information,
         });
       }
     })
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
index 8b28cd6c5..28180da1a 100644
--- a/webapp/src/store/index.js
+++ b/webapp/src/store/index.js
@@ -23,7 +23,6 @@ export default createStore({
     updatingDelayed: {},
     remoteDirectoryTree: {},
     remoteDirectoryTreeSecondsSinceLastUpdate: null,
-    files: {},
     itemGraphData: null,
     remoteDirectoryTreeIsLoading: false,
     fileSelectModalIsOpen: false,
@@ -134,19 +133,20 @@ export default createStore({
     setCollectionSampleList(state, payload) {
       state.all_collection_children[payload.collection_id] = payload.child_items;
     },
-    updateFiles(state, files_data) {
-      // payload should be an object with file ids as key and file data as values
-      // Note: this will overwrite any entries with the same file_ids
-      Object.assign(state.files, files_data);
-    },
     addFileToSample(state, payload) {
       state.all_item_data[payload.item_id].file_ObjectIds.push(payload.file_id);
+      console.log("adding file to sample with:", payload.file_info);
+      state.all_item_data[payload.item_id].files.push(payload.file_info);
     },
     removeFileFromSample(state, payload) {
-      var file_ids = state.all_item_data[payload.item_id].file_ObjectIds;
-      const index = file_ids.indexOf(payload.file_id);
+      const { item_id, file_id } = payload;
+      const files = state.all_item_data[item_id].files;
+      const file_ids = state.all_item_data[item_id].file_ObjectIds;
+      const index = files.findIndex((file) => file.immutable_id === file_id);
+
       if (index > -1) {
         file_ids.splice(index, 1);
+        files.splice(index, 1);
       }
     },
     setRemoteDirectoryTree(state, remoteDirectoryTree) {
diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
index 72f1e8c1a..399f5a6aa 100644
--- a/webapp/src/views/EditPage.vue
+++ b/webapp/src/views/EditPage.vue
@@ -60,7 +60,7 @@
   <div class="editor-body">
     <component :is="itemTypeEntry?.itemInformationComponent" :item_id="item_id" />
 
-    <FileList :item_id="item_id" :file_ids="file_ids" :stored_files="stored_files" />
+    <FileList :item_id="item_id" :stored_files="stored_files" />
 
     <div class="container">
       <hr />
@@ -179,13 +179,10 @@ export default {
       return allBlocksAreSaved && this.$store.state.saved_status_items[this.item_id];
     },
     files() {
-      return this.item_data.files;
-    },
-    file_ids() {
-      return this.item_data.file_ObjectIds;
+      return this.item_data.files || [];
     },
     stored_files() {
-      return this.$store.state.files;
+      return Object.fromEntries(this.files.map((file) => [file.immutable_id, file]));
     },
     blocksInfos() {
       return this.$store.state.blocksInfos;
@@ -227,7 +224,7 @@ export default {
     // this.updateRemoteTree()
 
     // setup the uppy instsance
-    setupUppy(this.item_id, "#uppy-trigger", this.stored_files);
+    setupUppy(this.item_id, "#uppy-trigger", {});
   },
   beforeUnmount() {
     document.removeEventListener("keydown", this._keyListener);