Add dynamic data table on collection page

webapp/cypress/e2e/sampleTablePage.cy.js

@@ -31,14 +31,18 @@ let sample_ids = [
   "component4",
 ];
 
+let collection_ids = ["test_collection"];
+
 before(() => {
   cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
+  cy.removeAllTestCollections(collection_ids, true);
 });
 
 after(() => {
   cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
+  cy.removeAllTestCollections(collection_ids, true);
 });
 
 describe("Sample table page", () => {
@@ -301,4 +305,20 @@ describe.only("Advanced sample creation features", () => {
       .should("have.value", "100"); // eq(1) gets the second element that matches
     cy.get("#synthesis-information tbody tr:nth-of-type(3) input").eq(0).should("have.value", ""); // eq(1) gets the second element that matches
   });
+  it("selects a sample by checkbox, adds it to a new collection, then checks the collections page", () => {
+    // Insert 'component4' into new collection called 'test_collection'
+    let test_id = "component4";
+    cy.selectSampleCheckbox(test_id);
+    cy.findByText("Add to collection").click();
+    cy.findByLabelText("Insert into collection:").type("test_collection");
+    cy.findByText('Create new collection: "test_collection"').click();
+    cy.get('form[data-testid="add-to-collection-form"]').within(() => {
+      cy.findByText("Submit").click();
+    });
+    // Visit collections page and look for 'test_collection'
+    cy.visit("/collections");
+    // Visit edit page of collection and check that the sample is there
+    cy.findByText("test_collection").click();
+    cy.findByText(test_id).should("exist");
+  });
 });

webapp/cypress/support/commands.js

@@ -68,14 +68,18 @@ Cypress.Commands.add("verifySample", (item_id, name = null, date = null) => {
     });
 });
 
+Cypress.Commands.add("selectSampleCheckbox", (item_id) => {
+  cy.get("[data-testid=sample-table]")
+    .contains(item_id)
+    .parents("tr")
+    .find("input[type='checkbox']")
+    .click();
+});
+
 Cypress.Commands.add("deleteSamples", (items_id) => {
   cy.log("search for and delete: " + items_id);
   items_id.forEach((item_id) => {
-    cy.get("[data-testid=sample-table]")
-      .contains(new RegExp("^" + item_id + "$", "g"))
-      .parents("tr")
-      .find("input[type='checkbox']")
-      .click();
+    cy.selectSampleCheckbox(item_id);
   });
 
   cy.get("[data-testid=delete-selected-button]").click();
@@ -92,6 +96,15 @@ Cypress.Commands.add("deleteSamples", (items_id) => {
   });
 });
 
+Cypress.Commands.add("deleteCollectionViaAPI", (collection_id) => {
+  cy.log("search for and delete: " + collection_id);
+  cy.request({
+    method: "DELETE",
+    url: API_URL + "/collections/" + collection_id,
+    failOnStatusCode: false,
+  });
+});
+
 Cypress.Commands.add("deleteSampleViaAPI", (item_id) => {
   cy.log("search for and delete: " + item_id);
   cy.request({
@@ -216,3 +229,16 @@ Cypress.Commands.add("removeAllTestSamples", (item_ids, check_sample_table) => {
     });
   }
 });
+
+Cypress.Commands.add("removeAllTestCollections", (collection_ids, check_collection_table) => {
+  collection_ids.forEach((collection_id) => {
+    cy.deleteCollectionViaAPI(collection_id);
+  });
+
+  if (check_collection_table) {
+    cy.visit("/collections").then(() => {
+      // The test ID of the collection table is still 'sample table'
+      cy.get("[data-testid=sample-table] > tbody > tr").should("have.length", 0);
+    });
+  }
+});

webapp/src/components/AddToCollectionModal.vue

@@ -19,11 +19,11 @@
         </div>
         <div class="form-row">
           <div class="col-md-12 form-group">
-            <label for="collection-select">Insert into collection:</label>
+            <label id="addToCollectionLabel">Insert into collection:</label>
             <CollectionSelect
               id="collection-select"
-              v-model="startInCollection"
-              aria-labelledby="startInCollection"
+              v-model="addToCollection"
+              aria-labelledby="addToCollectionLabel"
               multiple
             />
           </div>
@@ -62,13 +62,13 @@ export default {
   emits: ["update:modelValue", "itemsUpdated"],
   data() {
     return {
-      startInCollection: [],
+      addToCollection: [],
     };
   },
   methods: {
     async submitForm() {
       try {
-        const collectionIds = this.startInCollection.map((collection) => collection.collection_id);
+        const collectionIds = this.addToCollection.map((collection) => collection.collection_id);
         const refcodes = this.itemsSelected.map((item) => item.refcode);
 
         for (const collectionId of collectionIds) {

webapp/src/components/CollectionInformation.vue

@@ -31,20 +31,30 @@
         <CollectionRelationshipVisualization :collection_id="collection_id" />
       </div>
     </div>
+    <DynamicDataTable
+      :data="children"
+      :columns="collectionTableColumns"
+      :data-type="'samples'"
+      :global-filter-fields="['item_id', 'type', 'name', 'chemform', 'creatorsList', 'nblocks']"
+      :show-buttons="false"
+    />
   </div>
 </template>
 
 <script>
 import { createComputedSetterForCollectionField } from "@/field_utils.js";
+import { getCollectionSampleList } from "@/server_fetch_utils";
 import TinyMceInline from "@/components/TinyMceInline";
 import Creators from "@/components/Creators";
 import CollectionRelationshipVisualization from "@/components/CollectionRelationshipVisualization";
+import DynamicDataTable from "@/components/DynamicDataTable";
 
 export default {
   components: {
     TinyMceInline,
     Creators,
     CollectionRelationshipVisualization,
+    DynamicDataTable,
   },
   props: {
     collection_id: {
@@ -58,6 +68,41 @@ export default {
     Title: createComputedSetterForCollectionField("title"),
     Name: createComputedSetterForCollectionField("name"),
     CollectionCreators: createComputedSetterForCollectionField("creators"),
+    children() {
+      return this.$store.state.all_collection_children[this.collection_id] || [];
+    },
+  },
+  created() {
+    this.getCollectionChildren();
+  },
+  data() {
+    return {
+      collectionTableColumns: [
+        {
+          field: "item_id",
+          header: "ID",
+          body: "FormattedItemName",
+          filter: true,
+        },
+        { field: "type", header: "Type", filter: true },
+        { field: "name", header: "Sample name" },
+        { field: "chemform", header: "Formula", body: "ChemicalFormula" },
+        { field: "date", header: "Date" },
+        { field: "creators", header: "Creators", body: "Creators" },
+        { field: "nblocks", header: "# of blocks" },
+      ],
+    };
+  },
+  methods: {
+    getCollectionChildren() {
+      getCollectionSampleList(this.collection_id)
+        .then(() => {
+          this.tableIsReady = true;
+        })
+        .catch(() => {
+          this.fetchError = true;
+        });
+    },
   },
 };
 </script>

webapp/src/components/CollectionTable.vue

@@ -4,6 +4,7 @@
     :data="collections"
     :data-type="'collections'"
     :global-filter-fields="['collection_id', 'title', 'creatorsList']"
+    :edit-page-route-prefix="'collections'"
   />
 </template>
 

webapp/src/components/DynamicButtonDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="button-group d-flex justify-content-between align-items-center">
+  <div v-if="showButtons" class="button-group d-flex justify-content-between align-items-center">
     <div class="button-left">
       <button
         v-if="dataType === 'samples'"
@@ -115,6 +115,12 @@ export default {
       required: false,
       default: false,
     },
+    // Global toggle for all buttons and search bar
+    showButtons: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   emits: [
     "open-create-item-modal",

webapp/src/components/DynamicDataTable.vue

@@ -30,6 +30,7 @@
           :items-selected="itemsSelected"
           :filters="filters"
           :editable-inventory="editable_inventory"
+          :show-buttons="showButtons"
           @open-create-item-modal="createItemModalIsOpen = true"
           @open-batch-create-item-modal="batchCreateItemModalIsOpen = true"
           @open-qr-scanner-modal="qrScannerModalIsOpen = true"
@@ -42,7 +43,7 @@
       <template #empty> No data found. </template>
       <template #loading> Loading data. Please wait. </template>
 
-      <Column class="checkbox" selection-mode="multiple"></Column>
+      <Column v-if="showButtons" class="checkbox" selection-mode="multiple"></Column>
 
       <!-- <Column expander style="width: 5rem" /> -->
       <Column
@@ -160,6 +161,16 @@ export default {
       type: Array,
       required: true,
     },
+    showButtons: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    editPageRoutePrefix: {
+      type: String,
+      required: false,
+      default: "edit",
+    },
   },
   data() {
     return {
@@ -212,6 +223,14 @@ export default {
   methods: {
     goToEditPage(event) {
       const row = event.data;
+      let row_id = null;
+
+      // Check if the row has an item ID, otherwise default to collection ID
+      if (!row.item_id && row.collection_id) {
+        row_id = row.collection_id;
+      } else {
+        row_id = row.item_id;
+      }
 
       if (event.originalEvent.target.classList.contains("checkbox")) {
         return null;
@@ -222,9 +241,9 @@ export default {
         event.originalEvent.metaKey ||
         event.originalEvent.altKey
       ) {
-        window.open(`/edit/${row.item_id}`, "_blank");
+        window.open(`/${this.editPageRoutePrefix}/${row_id}`, "_blank");
       } else {
-        this.$router.push(`/edit/${row.item_id}`);
+        this.$router.push(`/${this.editPageRoutePrefix}/${row_id}`);
       }
     },
     getComponentProps(componentName, data) {