Use removeItemsFromCollection instead of saveItem to remove item from collection

Author: BenjaminCharmes

webapp/src/components/CollectionSelect.vue

@@ -39,7 +39,11 @@
 <script>
 import vSelect from "vue-select";
 import FormattedCollectionName from "@/components/FormattedCollectionName.vue";
-import { searchCollections, createNewCollection } from "@/server_fetch_utils.js";
+import {
+  searchCollections,
+  createNewCollection,
+  removeItemsFromCollection,
+} from "@/server_fetch_utils.js";
 import { validateEntryID } from "@/field_utils.js";
 import { debounceTime } from "@/resources.js";
 
@@ -65,6 +69,7 @@ export default {
       collections: [],
       isSearchFetchError: false,
       searchQuery: "",
+      pendingRemovals: [],
     };
   },
   computed: {
@@ -74,6 +79,14 @@ export default {
         return this.modelValue;
       },
       set(newValue) {
+        const oldIds = this.modelValue?.map((c) => c.collection_id) || [];
+        const newIds = newValue?.map((c) => c.collection_id) || [];
+        const removedIds = oldIds.filter((id) => !newIds.includes(id));
+
+        if (removedIds.length > 0) {
+          this.pendingRemovals.push(...removedIds);
+        }
+
         this.$emit("update:modelValue", newValue);
       },
     },
@@ -151,6 +164,19 @@ export default {
         }
       }
     },
+    async processPendingRemovals() {
+      if (this.pendingRemovals.length > 0) {
+        const item_id = this.item_id;
+        for (const collection_id of this.pendingRemovals) {
+          try {
+            await removeItemsFromCollection(collection_id, [item_id]);
+          } catch (error) {
+            console.error("Error removing item from collection:", error);
+          }
+        }
+        this.pendingRemovals = [];
+      }
+    },
   },
 };
 </script>

webapp/src/components/SampleInformation.vue

@@ -33,7 +33,11 @@
             <ToggleableCreatorsFormGroup v-model="ItemCreators" :refcode="Refcode" />
           </div>
           <div class="col-md-6 col-sm-7 pr-2">
-            <ToggleableCollectionFormGroup v-model="Collections" />
+            <ToggleableCollectionFormGroup
+              ref="collectionsFormGroup"
+              v-model="Collections"
+              :item_id="item_id"
+            />
           </div>
         </div>
         <div class="form-row">

webapp/src/components/ToggleableCollectionFormGroup.vue

@@ -25,7 +25,14 @@
         :options="{ ignore: [outerDivRef] }"
         @trigger="isEditingCollections = false"
       >
-        <CollectionSelect v-model="value" aria-labelledby="collections" multiple @click.stop />
+        <CollectionSelect
+          ref="collectionSelect"
+          v-model="value"
+          aria-labelledby="collections"
+          :item_id="item_id"
+          multiple
+          @click.stop
+        />
       </OnClickOutside>
     </div>
   </div>

webapp/src/views/EditPage.vue

@@ -61,8 +61,11 @@
 
   <!-- Item-type header information goes here -->
   <div class="editor-body">
-    <component :is="itemTypeEntry?.itemInformationComponent" :item_id="item_id" />
-
+    <component
+      :is="itemTypeEntry?.itemInformationComponent"
+      ref="sampleInformation"
+      :item_id="item_id"
+    />
     <FileList :item_id="item_id" :stored_files="stored_files" />
 
     <div class="container">