Add dynamic data table on collection page

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"
@@ -160,6 +161,11 @@ export default {
       type: Array,
       required: true,
     },
+    showButtons: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -222,9 +228,9 @@ export default {
         event.originalEvent.metaKey ||
         event.originalEvent.altKey
       ) {
-        window.open(`/edit/${row.item_id}`, "_blank");
+        window.open(`/${this.editPageRoutePrefix}/${row.item_id}`, "_blank");
       } else {
-        this.$router.push(`/edit/${row.item_id}`);
+        this.$router.push(`/${this.editPageRoutePrefix}/${row.item_id}`);
       }
     },
     getComponentProps(componentName, data) {