Add UI button to datatable selections for adding items to collections

Fix button still clickable after deleting a sample

Remove Optional inside AddToCollectionModal

webapp/src/components/AddToCollectionModal.vue

@@ -0,0 +1,95 @@
+<template>
+  <form class="modal-enclosure" data-testid="create-equipment-form" @submit.prevent="submitForm">
+    <Modal :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
+      <template #header> Add to collections </template>
+      <template #body>
+        <div class="form-row">
+          <div class="form-group col-md-8">
+            <label for="items-selected" class="col-form-label">Items Selected:</label>
+            <div id="items-selected" class="dynamic-input">
+              <FormattedItemName
+                v-for="(item, index) in itemsSelected"
+                :key="index"
+                :item_id="item.item_id"
+                :item-type="item.type"
+                enable-click
+              />
+            </div>
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="col-md-12 form-group">
+            <label for="collection-select">Insert into collection:</label>
+            <CollectionSelect
+              id="collection-select"
+              v-model="startInCollection"
+              aria-labelledby="startInCollection"
+              multiple
+            />
+          </div>
+        </div>
+      </template>
+    </Modal>
+  </form>
+</template>
+
+<script>
+import Modal from "@/components/Modal.vue";
+import FormattedItemName from "@/components/FormattedItemName";
+import CollectionSelect from "@/components/CollectionSelect.vue";
+
+import { addItemsToCollection } from "@/server_fetch_utils";
+
+export default {
+  name: "AddToCollectionsModal",
+  components: {
+    Modal,
+    FormattedItemName,
+    CollectionSelect,
+  },
+  props: {
+    modelValue: Boolean,
+    itemsSelected: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue", "itemsUpdated"],
+  data() {
+    return {
+      startInCollection: [],
+    };
+  },
+  methods: {
+    async submitForm() {
+      try {
+        const collectionIds = this.startInCollection.map((collection) => collection.immutable_id);
+        const refcodes = this.itemsSelected.map((item) => item.refcode);
+
+        for (const collectionId of collectionIds) {
+          await addItemsToCollection(collectionId, refcodes);
+        }
+        this.$emit("itemsUpdated");
+
+        console.log("Items added successfully.");
+        this.$emit("update:modelValue", false);
+      } catch (error) {
+        console.error("Error adding items to collections:", error);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dynamic-input {
+  display: flex;
+  flex-wrap: wrap;
+  border: 1px solid #ced4da;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.25rem;
+  max-width: 100%;
+  box-sizing: border-box;
+  gap: 0.2em;
+}
+</style>

webapp/src/components/SampleTablePrime.vue

@@ -32,18 +32,27 @@
 
       <template #header>
         <div class="button-group d-flex justify-content-between align-items-center">
-          <div class="button-left">
+          <div>
             <button class="btn btn-default" @click="createItemModalIsOpen = true">
               Add an item
             </button>
-            <button class="btn btn-default ml-2" @click="batchCreateItemModalIsOpen = true">
+            <button class="btn btn-default" @click="batchCreateItemModalIsOpen = true">
               Add batch of samples
             </button>
           </div>
-          <div class="button-right d-flex">
+          <div>
             <button
               v-if="itemsSelected.length > 0"
-              class="btn btn-default ml-2"
+              class="btn btn-default"
+              :disabled="itemsSelected.length === 0"
+              @click="addToCollectionModalIsOpen = true"
+            >
+              Add to collection
+            </button>
+            <button
+              v-if="itemsSelected.length > 0"
+              class="btn btn-default"
+              :disabled="itemsSelected.length === 0"
               @click="deleteSelectedItems"
             >
               Delete selected
@@ -111,11 +120,17 @@
   </div>
   <CreateItemModal v-model="createItemModalIsOpen" />
   <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
+  <AddToCollectionModal
+    v-model="addToCollectionModalIsOpen"
+    :items-selected="itemsSelected"
+    @items-updated="refreshDataTable"
+  />
 </template>
 
 <script>
 import CreateItemModal from "@/components/CreateItemModal";
 import BatchCreateItemModal from "@/components/BatchCreateItemModal";
+import AddToCollectionModal from "@/components/AddToCollectionModal";
 
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
@@ -135,6 +150,7 @@ export default {
   components: {
     CreateItemModal,
     BatchCreateItemModal,
+    AddToCollectionModal,
     DataTable,
     Column,
     IconField,
@@ -149,6 +165,7 @@ export default {
     return {
       createItemModalIsOpen: false,
       batchCreateItemModalIsOpen: false,
+      addToCollectionModalIsOpen: false,
       isSampleFetchError: false,
       itemsSelected: [],
       expandedRows: [],
@@ -226,8 +243,12 @@ export default {
         idsSelected.forEach((item_id) => {
           deleteSample(item_id);
         });
+        this.itemsSelected = [];
       }
     },
+    refreshDataTable() {
+      this.getSamples();
+    },
   },
 };
 </script>
@@ -244,7 +265,8 @@ export default {
   visibility: visible !important;
 }
 
-.button-right {
+.button-group > * {
+  display: flex;
   gap: 0.5em;
 }
 </style>

webapp/src/server_fetch_utils.js

@@ -704,3 +704,22 @@ export function getBlocksInfos() {
       throw error;
     });
 }
+
+export function addItemsToCollection(collectionId, refcodes) {
+  return fetch_post(`${API_URL}/collections/${collectionId}`, {
+    data: { refcodes },
+  })
+    .then(function (response_json) {
+      if (response_json.status === "success") {
+        console.log("Items added to collection successfully!");
+        return response_json;
+      } else {
+        console.error("Failed to add items to collection.");
+        throw new Error("Failed to add items to collection.");
+      }
+    })
+    .catch(function (error) {
+      alert("Error adding items to collection: ", error);
+      throw error;
+    });
+}