From f686d1ecc9e50442bce8216820f836a2a6c4d3c6 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 30 Aug 2024 11:18:52 +0100
Subject: [PATCH 01/19] Modification of the number of items per row

---
 webapp/src/components/SampleTablePrime.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/SampleTablePrime.vue b/webapp/src/components/SampleTablePrime.vue
index 9e9b66d30..eff8eee20 100644
--- a/webapp/src/components/SampleTablePrime.vue
+++ b/webapp/src/components/SampleTablePrime.vue
@@ -10,7 +10,7 @@
       selection-mode="multiple"
       :value="samples"
       paginator
-      :rows="10"
+      :rows="20"
       :rows-per-page-options="[10, 20, 50, 100]"
       filter-display="menu"
       :global-filter-fields="[

From 57f2f96cb2bf8a171ce29f4a24e906ab285ce413 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 30 Aug 2024 16:20:32 +0100
Subject: [PATCH 02/19] Add a dynamic datatable using prime for Samples,
 Collections, Inventory and Equipment

Fix global-filter-fields for creators and collections

Add dynamic prime table for starting materials + some cleaning

Add dynamic prime table for equipments

New ButtonPrimeTable component

Fix deleteCollection

Fix button still clickable after deleting a sample

Add API tests for collections/<collection_id> POST route
---
 webapp/src/components/ButtonPrimeTable.vue    | 191 +++++++++++++
 .../src/components/CollectionsPrimeTable.vue  |  42 +++
 .../src/components/CreateEquipmentModal.vue   |   4 +-
 webapp/src/components/EquipmentPrimeTable.vue |  44 +++
 webapp/src/components/Navbar.vue              |   4 +
 webapp/src/components/PrimeTable.vue          | 251 ++++++++++++++++++
 webapp/src/components/SamplesPrimeTable.vue   |  56 ++++
 .../StartingMaterialsPrimeTable.vue           |  42 +++
 webapp/src/router/index.js                    |  26 ++
 webapp/src/store/index.js                     |   2 +-
 webapp/src/views/TestPrime.vue                |  38 +++
 webapp/src/views/TestPrime2.vue               |  38 +++
 webapp/src/views/TestPrime3.vue               |  38 +++
 webapp/src/views/TestPrime4.vue               |  38 +++
 14 files changed, 812 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/components/ButtonPrimeTable.vue
 create mode 100644 webapp/src/components/CollectionsPrimeTable.vue
 create mode 100644 webapp/src/components/EquipmentPrimeTable.vue
 create mode 100644 webapp/src/components/PrimeTable.vue
 create mode 100644 webapp/src/components/SamplesPrimeTable.vue
 create mode 100644 webapp/src/components/StartingMaterialsPrimeTable.vue
 create mode 100644 webapp/src/views/TestPrime.vue
 create mode 100644 webapp/src/views/TestPrime2.vue
 create mode 100644 webapp/src/views/TestPrime3.vue
 create mode 100644 webapp/src/views/TestPrime4.vue

diff --git a/webapp/src/components/ButtonPrimeTable.vue b/webapp/src/components/ButtonPrimeTable.vue
new file mode 100644
index 000000000..73394250a
--- /dev/null
+++ b/webapp/src/components/ButtonPrimeTable.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="button-group d-flex justify-content-between align-items-center">
+    <div class="button-left">
+      <button
+        v-if="dataType === 'samples'"
+        class="btn btn-default"
+        @click="$emit('open-create-item-modal')"
+      >
+        Add an item
+      </button>
+      <button
+        v-if="dataType === 'samples'"
+        class="btn btn-default ml-2"
+        @click="$emit('open-batch-create-item-modal')"
+      >
+        Add batch of samples
+      </button>
+      <button
+        v-if="dataType === 'collections'"
+        class="btn btn-default"
+        @click="$emit('open-create-collection-modal')"
+      >
+        Create new collection
+      </button>
+      <button
+        v-if="dataType === 'startingMaterials' && editableInventory"
+        class="btn btn-default"
+        :disabled="itemsSelected.length === 0"
+        @click="$emit('open-create-item-modal')"
+      >
+        Add a starting material
+      </button>
+      <button
+        v-if="dataType === 'equipments'"
+        class="btn btn-default"
+        @click="$emit('open-create-equipment-modal')"
+      >
+        Add an item
+      </button>
+    </div>
+    <div class="button-right d-flex">
+      <button
+        v-if="itemsSelected.length > 0 && dataType != 'collections'"
+        class="btn btn-default"
+        :disabled="itemsSelected.length === 0"
+        @click="$emit('open-add-to-collection-modal')"
+      >
+        Add to collection
+      </button>
+      <button
+        v-if="itemsSelected.length > 0"
+        class="btn btn-default ml-2"
+        :disabled="itemsSelected.length === 0"
+        @click="confirmDeletion"
+      >
+        Delete selected
+      </button>
+
+      <IconField>
+        <InputIcon>
+          <i class="pi pi-search"></i>
+        </InputIcon>
+        <InputText
+          v-model="localFilters.global.value"
+          placeholder="Search"
+          @input="updateFilters"
+        />
+      </IconField>
+    </div>
+  </div>
+</template>
+
+<script>
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import InputText from "primevue/inputtext";
+import "primeicons/primeicons.css";
+
+import {
+  deleteSample,
+  deleteCollection,
+  deleteStartingMaterial,
+  deleteEquipment,
+} from "@/server_fetch_utils.js";
+
+export default {
+  components: {
+    IconField,
+    InputIcon,
+    InputText,
+  },
+  props: {
+    dataType: {
+      type: String,
+      required: true,
+    },
+    itemsSelected: {
+      type: Array,
+      required: true,
+    },
+    filters: {
+      type: Object,
+      required: true,
+    },
+    editableInventory: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: [
+    "open-create-item-modal",
+    "open-batch-create-item-modal",
+    "open-create-collection-modal",
+    "open-create-equipment-modal",
+    "open-add-to-collection-modal",
+    "delete-selected-items",
+    "update:filters",
+  ],
+  data() {
+    return {
+      localFilters: { ...this.filters },
+    };
+  },
+  methods: {
+    updateFilters() {
+      this.$emit("update:filters", this.localFilters);
+    },
+    confirmDeletion() {
+      if (this.dataType === "samples") {
+        this.deleteSamples();
+      } else if (this.dataType === "collections") {
+        this.deleteCollections();
+      } else if (this.dataType === "startingMaterials") {
+        this.deleteStartingMaterials();
+      } else if (this.dataType === "equipments") {
+        this.deleteEquipments();
+      }
+      this.$emit("delete-selected-items");
+    },
+    deleteSamples() {
+      const idsSelected = this.itemsSelected.map((x) => x.item_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected sample(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((item_id) => {
+          deleteSample(item_id);
+        });
+      }
+    },
+    deleteCollections() {
+      const idsSelected = this.itemsSelected.map((x) => x.collection_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected collection(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((collection_id) => {
+          deleteCollection(collection_id, collection_id);
+        });
+      }
+    },
+    deleteStartingMaterials() {
+      const idsSelected = this.itemsSelected.map((x) => x.item_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected starting material(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((item_id) => {
+          deleteStartingMaterial(item_id);
+        });
+      }
+    },
+    deleteEquipments() {
+      const idsSelected = this.itemsSelected.map((x) => x.item_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected equipment(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((item_id) => {
+          deleteEquipment(item_id);
+        });
+      }
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/CollectionsPrimeTable.vue b/webapp/src/components/CollectionsPrimeTable.vue
new file mode 100644
index 000000000..491baa5f6
--- /dev/null
+++ b/webapp/src/components/CollectionsPrimeTable.vue
@@ -0,0 +1,42 @@
+<template>
+  <PrimeTable
+    :columns="collectionColumn"
+    :data="collections"
+    :data-type="'collections'"
+    :global-filter-fields="['collection_id', 'title', 'creatorsList']"
+  />
+</template>
+
+<script>
+import PrimeTable from "@/components/PrimeTable";
+import { getCollectionList } from "@/server_fetch_utils.js";
+
+export default {
+  components: { PrimeTable },
+  data() {
+    return {
+      collectionColumn: [
+        { field: "collection_id", header: "ID", body: "FormattedItemName", filter: true },
+        { field: "title", header: "Title" },
+        { field: "creators", header: "Creators", body: "Creators" },
+      ],
+    };
+  },
+  computed: {
+    collections() {
+      return this.$store.state.collection_list.map((sample) => ({
+        ...sample,
+        creatorsList: sample.creators.map((creator) => creator.display_name).join(", "),
+      }));
+    },
+  },
+  created() {
+    this.getCollections();
+  },
+  methods: {
+    getCollections() {
+      getCollectionList();
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/CreateEquipmentModal.vue b/webapp/src/components/CreateEquipmentModal.vue
index cd784f304..d90ae74ad 100644
--- a/webapp/src/components/CreateEquipmentModal.vue
+++ b/webapp/src/components/CreateEquipmentModal.vue
@@ -187,7 +187,9 @@ export default {
       )
         .then(() => {
           this.$emit("update:modelValue", false); // close this modal
-          document.getElementById(this.item_id).scrollIntoView({ behavior: "smooth" });
+          if (document.getElementById(this.item_id)) {
+            document.getElementById(this.item_id).scrollIntoView({ behavior: "smooth" });
+          }
           this.item_id = null;
           this.name = null;
           this.date = this.now(); // reset date to the new current time
diff --git a/webapp/src/components/EquipmentPrimeTable.vue b/webapp/src/components/EquipmentPrimeTable.vue
new file mode 100644
index 000000000..fa1f48de9
--- /dev/null
+++ b/webapp/src/components/EquipmentPrimeTable.vue
@@ -0,0 +1,44 @@
+<template>
+  <PrimeTable
+    :columns="equipmentColumn"
+    :data="equipments"
+    :data-type="'equipments'"
+    :global-filter-fields="['item_id', 'name', 'location', 'creatorsList']"
+  />
+</template>
+
+<script>
+import PrimeTable from "@/components/PrimeTable";
+import { getEquipmentList } from "@/server_fetch_utils.js";
+
+export default {
+  components: { PrimeTable },
+  data() {
+    return {
+      equipmentColumn: [
+        { field: "item_id", header: "ID", body: "FormattedItemName", filter: true },
+        { field: "name", header: "Name", filter: true },
+        { field: "date", header: "Date" },
+        { field: "location", header: "Location" },
+        { field: "creators", header: "Maintainers", body: "Creators" },
+      ],
+    };
+  },
+  computed: {
+    equipments() {
+      return this.$store.state.equipment_list.map((equipment) => ({
+        ...equipment,
+        // creatorsList: equipment.creators.map((creator) => creator.display_name).join(", "),
+      }));
+    },
+  },
+  mounted() {
+    this.getEquipment();
+  },
+  methods: {
+    getEquipment() {
+      getEquipmentList();
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/Navbar.vue b/webapp/src/components/Navbar.vue
index ecfda7916..837b48d00 100644
--- a/webapp/src/components/Navbar.vue
+++ b/webapp/src/components/Navbar.vue
@@ -22,9 +22,13 @@
   <div id="nav">
     <router-link to="/about">About</router-link> |
     <router-link to="/samples">Samples</router-link> |
+    <router-link to="/test">Test PrimeSamples</router-link> |
     <router-link to="/collections">Collections</router-link> |
+    <router-link to="/test2">Test PrimeCollections</router-link> |
     <router-link to="/starting-materials">Inventory</router-link> |
+    <router-link to="/test3">Test PrimeStartMats</router-link> |
     <router-link to="/equipment">Equipment</router-link> |
+    <router-link to="/test4">Test PrimeEquip</router-link> |
     <router-link to="/item-graph"
       ><font-awesome-icon icon="project-diagram" />&nbsp;Graph View</router-link
     >
diff --git a/webapp/src/components/PrimeTable.vue b/webapp/src/components/PrimeTable.vue
new file mode 100644
index 000000000..84d06d948
--- /dev/null
+++ b/webapp/src/components/PrimeTable.vue
@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <div v-if="isSampleFetchError" class="alert alert-danger">
+      Server Error. Sample list not retrieved.
+    </div>
+
+    <DataTable
+      v-model:filters="filters"
+      v-model:selection="itemsSelected"
+      selection-mode="multiple"
+      :value="data"
+      paginator
+      :rows="20"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      filter-display="menu"
+      :global-filter-fields="globalFilterFields"
+      removable-sort
+      sort-mode="multiple"
+      @row-click="goToEditPage"
+    >
+      <!-- v-model:expandedRows="expandedRows" -->
+
+      <template #header>
+        <ButtonPrimeTable
+          :data-type="dataType"
+          :items-selected="itemsSelected"
+          :filters="filters"
+          :editable-inventory="editable_inventory"
+          @open-create-item-modal="createItemModalIsOpen = true"
+          @open-batch-create-item-modal="batchCreateItemModalIsOpen = true"
+          @open-create-collection-modal="createCollectionModalIsOpen = true"
+          @open-create-equipment-modal="createEquipmentModalIsOpen = true"
+          @open-add-to-collection-modal="addToCollectionModalIsOpen = true"
+          @delete-selected-items="deleteSelectedItems"
+        />
+      </template>
+      <template #empty> No data found. </template>
+      <template #loading> Loading data. Please wait. </template>
+
+      <Column selection-mode="multiple"></Column>
+      <!-- <Column expander style="width: 5rem" /> -->
+      <Column
+        v-for="column in columns"
+        :key="column.field"
+        :field="column.field"
+        :header="column.header"
+        sortable
+      >
+        <!-- <template v-if="column.field === 'item_id'" #body="slotProps">
+          <component
+            :is="column.body"
+            v-bind="{
+              item_id: slotProps.data.item_id,
+              item_type: slotProps.data.type,
+              enable_click: true,
+            }"
+        /></template> -->
+
+        <template v-if="column.body && editable_inventory" #body="slotProps">
+          <component :is="column.body" v-bind="getComponentProps(column.body, slotProps.data)" />
+        </template>
+        <template v-else-if="column.field === 'date'" #body="slotProps">
+          {{ $filters.IsoDatetimeToDate(slotProps.data[column.field]) }}
+        </template>
+        <template v-else #body="slotProps">
+          {{ slotProps.data[column.field] }}
+        </template>
+        <template v-if="column.filter" #filter="{ filterModel }">
+          <InputText
+            v-model="filterModel.value"
+            type="text"
+            :placeholder="'Search by ' + column.header"
+          />
+        </template>
+      </Column>
+
+      <!-- <template #expansion="slotProps">
+        <div class="p-4">
+          <h5>Test Expandable {{ slotProps.data.item_id }}</h5>
+        </div>
+      </template> -->
+    </DataTable>
+  </div>
+  <CreateItemModal
+    v-model="createItemModalIsOpen"
+    :allowed-types="dataType == 'startingMaterials' ? allowedTypes : undefined"
+  />
+  <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
+  <CreateCollectionModal v-model="createCollectionModalIsOpen" />
+  <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
+  <AddToCollectionModal
+    v-model="addToCollectionModalIsOpen"
+    :items-selected="itemsSelected"
+    @items-updated="refreshDataTable"
+  />
+</template>
+
+<script>
+import ButtonPrimeTable from "@/components/ButtonPrimeTable";
+import CreateItemModal from "@/components/CreateItemModal";
+import BatchCreateItemModal from "@/components/BatchCreateItemModal";
+import CreateCollectionModal from "@/components/CreateCollectionModal";
+import CreateEquipmentModal from "@/components/CreateEquipmentModal";
+import AddToCollectionModal from "@/components/AddToCollectionModal";
+
+import { INVENTORY_TABLE_TYPES, EDITABLE_INVENTORY } from "@/resources.js";
+import { getSampleList } from "@/server_fetch_utils.js";
+
+import FormattedItemName from "@/components/FormattedItemName";
+import ChemicalFormula from "@/components/ChemicalFormula";
+import CollectionList from "@/components/CollectionList";
+import Creators from "@/components/Creators";
+
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+
+export default {
+  components: {
+    ButtonPrimeTable,
+    CreateItemModal,
+    BatchCreateItemModal,
+    CreateCollectionModal,
+    CreateEquipmentModal,
+    AddToCollectionModal,
+    DataTable,
+    Column,
+    FormattedItemName,
+    ChemicalFormula,
+    CollectionList,
+    Creators,
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    dataType: {
+      type: String,
+      required: true,
+    },
+    globalFilterFields: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      createItemModalIsOpen: false,
+      batchCreateItemModalIsOpen: false,
+      createCollectionModalIsOpen: false,
+      createEquipmentModalIsOpen: false,
+      addToCollectionModalIsOpen: false,
+      isSampleFetchError: false,
+      itemsSelected: [],
+      filters: {
+        global: { value: null },
+      },
+      allowedTypes: INVENTORY_TABLE_TYPES,
+    };
+  },
+  created() {
+    this.editable_inventory = EDITABLE_INVENTORY;
+  },
+  methods: {
+    goToEditPage(event) {
+      const { item_id, collection_id } = event.data;
+
+      if (item_id) {
+        window.open(`/edit/${item_id}`, "_blank");
+      } else if (collection_id) {
+        window.open(`/collections/${collection_id}`, "_blank");
+      }
+    },
+    getComponentProps(componentName, data) {
+      const propsConfig = {
+        FormattedItemName: {
+          item_id: data.item_id !== undefined ? "item_id" : "collection_id",
+          itemType: "type",
+          enableClick: true,
+        },
+        ChemicalFormula: {
+          formula: "chemform",
+        },
+        CollectionList: {
+          collections: "collections",
+        },
+        Creators: {
+          creators: "creators",
+        },
+      };
+
+      const config = propsConfig[componentName] || {};
+
+      const props = Object.entries(config).reduce((acc, [prop, dataKey]) => {
+        if (dataKey !== true) {
+          if (prop === "itemType") {
+            acc[prop] = data.type !== undefined ? data.type : "starting_materials";
+          } else if (data[dataKey] !== undefined) {
+            acc[prop] = data[dataKey];
+          }
+        }
+        return acc;
+      }, {});
+
+      Object.keys(config).forEach((prop) => {
+        if (config[prop] === true) {
+          props[prop] = true;
+        }
+      });
+
+      return props;
+    },
+    deleteSelectedItems() {
+      this.itemsSelected = [];
+    },
+    getSamples() {
+      getSampleList()
+        .then(() => {
+          console.log("sample list received!");
+        })
+        .catch(() => {
+          this.isSampleFetchError = true;
+        });
+    },
+    refreshDataTable() {
+      this.getSamples();
+    },
+  },
+};
+</script>
+
+<style>
+.customize-table .ag-header {
+  font-size: 1rem;
+}
+
+.p-datatable-column-header-content .p-datatable-sort-icon {
+  visibility: hidden !important;
+}
+.p-datatable-column-header-content:hover .p-datatable-sort-icon {
+  visibility: visible !important;
+}
+
+.button-right {
+  gap: 0.5em;
+}
+</style>
diff --git a/webapp/src/components/SamplesPrimeTable.vue b/webapp/src/components/SamplesPrimeTable.vue
new file mode 100644
index 000000000..73b6d79ad
--- /dev/null
+++ b/webapp/src/components/SamplesPrimeTable.vue
@@ -0,0 +1,56 @@
+<template>
+  <PrimeTable
+    :columns="sampleColumns"
+    :data="samples"
+    :data-type="'samples'"
+    :global-filter-fields="[
+      'item_id',
+      'type',
+      'name',
+      'chemform',
+      'collectionsList',
+      'creatorsList',
+      'nblocks',
+    ]"
+  />
+</template>
+
+<script>
+import PrimeTable from "@/components/PrimeTable";
+import { getSampleList } from "@/server_fetch_utils.js";
+
+export default {
+  components: { PrimeTable },
+  data() {
+    return {
+      sampleColumns: [
+        { 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: "collections", header: "Collections", body: "CollectionList" },
+        { field: "creators", header: "Creators", body: "Creators" },
+        { field: "nblocks", header: "# of blocks" },
+      ],
+    };
+  },
+  computed: {
+    samples() {
+      return this.$store.state.sample_list.map((sample) => ({
+        ...sample,
+        collectionsList: sample.collections.join(", "),
+        creatorsList: sample.creators.map((creator) => creator.display_name).join(", "),
+      }));
+    },
+  },
+  mounted() {
+    this.getSamples();
+  },
+  methods: {
+    getSamples() {
+      getSampleList();
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/StartingMaterialsPrimeTable.vue b/webapp/src/components/StartingMaterialsPrimeTable.vue
new file mode 100644
index 000000000..07c7c0782
--- /dev/null
+++ b/webapp/src/components/StartingMaterialsPrimeTable.vue
@@ -0,0 +1,42 @@
+<template>
+  <PrimeTable
+    :columns="startingMaterialColumn"
+    :data="startingMaterials"
+    :data-type="'startingMaterials'"
+    :global-filter-fields="['item_id', 'name', 'chemform', 'chemical_purity', 'nblocks']"
+  />
+</template>
+
+<script>
+import PrimeTable from "@/components/PrimeTable";
+import { getStartingMaterialList } from "@/server_fetch_utils.js";
+
+export default {
+  components: { PrimeTable },
+  data() {
+    return {
+      startingMaterialColumn: [
+        { field: "item_id", header: "ID", body: "FormattedItemName", filter: true },
+        { field: "name", header: "Name", filter: true },
+        { field: "chemform", header: "Formula", body: "ChemicalFormula" },
+        { field: "date", header: "Date" },
+        { field: "chemical_purity", header: "Purity" },
+        { field: "nblocks", header: "# of blocks" },
+      ],
+    };
+  },
+  computed: {
+    startingMaterials() {
+      return this.$store.state.starting_material_list;
+    },
+  },
+  mounted() {
+    this.getStartingMaterials();
+  },
+  methods: {
+    getStartingMaterials() {
+      getStartingMaterialList();
+    },
+  },
+};
+</script>
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 502a8bff0..b52b62556 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -11,6 +11,12 @@ import CollectionPage from "../views/CollectionPage.vue";
 import ExampleGraph from "@/views/ExampleGraph.vue";
 import ItemGraphPage from "@/views/ItemGraphPage.vue";
 import Admin from "@/views/Admin.vue";
+
+import TestPrime from "../views/TestPrime.vue";
+import TestPrime2 from "../views/TestPrime2.vue";
+import TestPrime3 from "../views/TestPrime3.vue";
+import TestPrime4 from "../views/TestPrime4.vue";
+
 const routes = [
   {
     path: "/about",
@@ -26,6 +32,26 @@ const routes = [
     alias: "/",
     component: Samples,
   },
+  {
+    path: "/test",
+    name: "test",
+    component: TestPrime,
+  },
+  {
+    path: "/test2",
+    name: "test2",
+    component: TestPrime2,
+  },
+  {
+    path: "/test3",
+    name: "test3",
+    component: TestPrime3,
+  },
+  {
+    path: "/test4",
+    name: "test4",
+    component: TestPrime4,
+  },
   {
     path: "/equipment",
     name: "equipment",
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
index b565c613c..8f9afe4c5 100644
--- a/webapp/src/store/index.js
+++ b/webapp/src/store/index.js
@@ -97,7 +97,7 @@ export default createStore({
       }
     },
     deleteFromCollectionList(state, collection_summary) {
-      const index = state.collection_list.indexOf(collection_summary);
+      const index = state.collection_list.map((e) => e.item_id).indexOf(collection_summary.item_id);
       if (index > -1) {
         state.collection_list.splice(index, 1);
       } else {
diff --git a/webapp/src/views/TestPrime.vue b/webapp/src/views/TestPrime.vue
new file mode 100644
index 000000000..9c403e502
--- /dev/null
+++ b/webapp/src/views/TestPrime.vue
@@ -0,0 +1,38 @@
+<template>
+  <Navbar />
+
+  <div id="tableContainer" class="container">
+    <div class="row">
+      <div class="col-sm-12 mx-auto">
+        <SamplesPrimeTable />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Navbar from "@/components/Navbar";
+import SamplesPrimeTable from "@/components/SamplesPrimeTable";
+
+export default {
+  name: "TestPrime",
+  components: {
+    Navbar,
+    SamplesPrimeTable,
+  },
+};
+</script>
+
+<style scoped>
+#tableContainer.overlay:after {
+  content: "";
+  display: block;
+  position: fixed; /* could also be absolute */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/webapp/src/views/TestPrime2.vue b/webapp/src/views/TestPrime2.vue
new file mode 100644
index 000000000..8dd938b60
--- /dev/null
+++ b/webapp/src/views/TestPrime2.vue
@@ -0,0 +1,38 @@
+<template>
+  <Navbar />
+
+  <div id="tableContainer" class="container">
+    <div class="row">
+      <div class="col-sm-12 mx-auto">
+        <CollectionsPrimeTable />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Navbar from "@/components/Navbar";
+import CollectionsPrimeTable from "@/components/CollectionsPrimeTable";
+
+export default {
+  name: "TestPrime",
+  components: {
+    Navbar,
+    CollectionsPrimeTable,
+  },
+};
+</script>
+
+<style scoped>
+#tableContainer.overlay:after {
+  content: "";
+  display: block;
+  position: fixed; /* could also be absolute */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/webapp/src/views/TestPrime3.vue b/webapp/src/views/TestPrime3.vue
new file mode 100644
index 000000000..769050242
--- /dev/null
+++ b/webapp/src/views/TestPrime3.vue
@@ -0,0 +1,38 @@
+<template>
+  <Navbar />
+
+  <div id="tableContainer" class="container">
+    <div class="row">
+      <div class="col-sm-12 mx-auto">
+        <StartingMaterialsPrimeTable />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Navbar from "@/components/Navbar";
+import StartingMaterialsPrimeTable from "@/components/StartingMaterialsPrimeTable";
+
+export default {
+  name: "TestPrime",
+  components: {
+    Navbar,
+    StartingMaterialsPrimeTable,
+  },
+};
+</script>
+
+<style scoped>
+#tableContainer.overlay:after {
+  content: "";
+  display: block;
+  position: fixed; /* could also be absolute */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/webapp/src/views/TestPrime4.vue b/webapp/src/views/TestPrime4.vue
new file mode 100644
index 000000000..a899f2ae2
--- /dev/null
+++ b/webapp/src/views/TestPrime4.vue
@@ -0,0 +1,38 @@
+<template>
+  <Navbar />
+
+  <div id="tableContainer" class="container">
+    <div class="row">
+      <div class="col-sm-12 mx-auto">
+        <EquipmentPrimeTable />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Navbar from "@/components/Navbar";
+import EquipmentPrimeTable from "@/components/EquipmentPrimeTable";
+
+export default {
+  name: "TestPrime",
+  components: {
+    Navbar,
+    EquipmentPrimeTable,
+  },
+};
+</script>
+
+<style scoped>
+#tableContainer.overlay:after {
+  content: "";
+  display: block;
+  position: fixed; /* could also be absolute */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>

From b90e1b72c991502f87f4ffecdaf09d7f1d560486 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Wed, 11 Sep 2024 15:11:00 +0100
Subject: [PATCH 03/19] Add UI button to datatable selections for adding items
 to collections

---
 webapp/src/components/PrimeTable.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webapp/src/components/PrimeTable.vue b/webapp/src/components/PrimeTable.vue
index 84d06d948..ad6abb3df 100644
--- a/webapp/src/components/PrimeTable.vue
+++ b/webapp/src/components/PrimeTable.vue
@@ -113,6 +113,7 @@ import Creators from "@/components/Creators";
 
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
+import InputText from "primevue/inputtext";
 
 export default {
   components: {
@@ -124,6 +125,7 @@ export default {
     AddToCollectionModal,
     DataTable,
     Column,
+    InputText,
     FormattedItemName,
     ChemicalFormula,
     CollectionList,

From 230f6892aa12d5a0aef66d69b942237ac8e743b7 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Thu, 12 Sep 2024 12:03:07 +0100
Subject: [PATCH 04/19] Allow creation of a new collection based on the
 selection

---
 webapp/src/components/CollectionSelect.vue | 47 ++++++++++++++++++++--
 webapp/src/components/PrimeTable.vue       |  5 ++-
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/CollectionSelect.vue b/webapp/src/components/CollectionSelect.vue
index 2b5b9a318..b3038eb53 100644
--- a/webapp/src/components/CollectionSelect.vue
+++ b/webapp/src/components/CollectionSelect.vue
@@ -2,7 +2,7 @@
   <vSelect
     ref="selectComponent"
     v-model="value"
-    :options="collections"
+    :options="collectionOrNewCollection"
     multiple
     label="collection_id"
     :filterable="false"
@@ -14,11 +14,15 @@
     </template>
     <template #option="{ collection_id, title }">
       <FormattedCollectionName
+        v-if="collection_id"
         :collection_id="collection_id"
         :title="title"
         enable-modified-click
         :max-length="formattedItemNameMaxLength"
       />
+      <div v-else @click.prevent="handleCreateNewCollection">
+        {{ title }}
+      </div>
     </template>
     <template #selected-option="{ collection_id }">
       <FormattedCollectionName
@@ -33,7 +37,7 @@
 <script>
 import vSelect from "vue-select";
 import FormattedCollectionName from "@/components/FormattedCollectionName.vue";
-import { searchCollections } from "@/server_fetch_utils.js";
+import { searchCollections, createNewCollection } from "@/server_fetch_utils.js";
 import { debounceTime } from "@/resources.js";
 
 export default {
@@ -43,8 +47,8 @@ export default {
   },
   props: {
     modelValue: {
-      type: String,
-      default: "",
+      type: Array,
+      default: () => [],
     },
     formattedItemNameMaxLength: {
       type: Number,
@@ -57,6 +61,7 @@ export default {
       debounceTimeout: null,
       collections: [],
       isSearchFetchError: false,
+      searchQuery: "",
     };
   },
   computed: {
@@ -69,12 +74,28 @@ export default {
         this.$emit("update:modelValue", newValue);
       },
     },
+    collectionOrNewCollection() {
+      if (
+        this.searchQuery &&
+        !this.collections.some((item) => item.collection_id === this.searchQuery)
+      ) {
+        return [
+          ...this.collections,
+          {
+            collection_id: null,
+            title: `Create new collection: "${this.searchQuery}"`,
+          },
+        ];
+      }
+      return this.collections;
+    },
   },
   methods: {
     async debouncedAsyncSearch(query, loading) {
       // if (query == "") {
       //   return;
       // }
+      this.searchQuery = query;
       loading(true);
       clearTimeout(this.debounceTimeout); // reset the timer
       // start the timer
@@ -97,6 +118,24 @@ export default {
         loading(false);
       }, debounceTime);
     },
+    async handleCreateNewCollection() {
+      try {
+        let collection_id = this.searchQuery;
+        const newCollection = await createNewCollection(this.searchQuery);
+        if (newCollection) {
+          this.value = [
+            ...this.value.filter((item) => item.collection_id !== null),
+            {
+              collection_id: collection_id,
+            },
+          ];
+        }
+        await this.debouncedAsyncSearch(this.searchQuery, () => {});
+      } catch (error) {
+        console.error("Error:", error);
+        alert("An error occurred while creating the collection. Please try again.");
+      }
+    },
   },
 };
 </script>
diff --git a/webapp/src/components/PrimeTable.vue b/webapp/src/components/PrimeTable.vue
index ad6abb3df..a9f2bd1b7 100644
--- a/webapp/src/components/PrimeTable.vue
+++ b/webapp/src/components/PrimeTable.vue
@@ -91,7 +91,7 @@
   <AddToCollectionModal
     v-model="addToCollectionModalIsOpen"
     :items-selected="itemsSelected"
-    @items-updated="refreshDataTable"
+    @items-updated="handleItemsUpdated"
   />
 </template>
 
@@ -228,7 +228,8 @@ export default {
           this.isSampleFetchError = true;
         });
     },
-    refreshDataTable() {
+    handleItemsUpdated() {
+      this.itemsSelected = [];
       this.getSamples();
     },
   },

From bad0711d0909105d36616300667fbdd5018fbdd7 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Thu, 12 Sep 2024 15:19:21 +0100
Subject: [PATCH 05/19] Fix deleteFromCollectionList deleting the wrong
 collection in the store

---
 webapp/src/components/ButtonPrimeTable.vue |  2 +-
 webapp/src/components/PrimeTable.vue       | 11 -----------
 webapp/src/store/index.js                  |  4 +++-
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/ButtonPrimeTable.vue b/webapp/src/components/ButtonPrimeTable.vue
index 73394250a..6000c24ec 100644
--- a/webapp/src/components/ButtonPrimeTable.vue
+++ b/webapp/src/components/ButtonPrimeTable.vue
@@ -158,7 +158,7 @@ export default {
         )
       ) {
         idsSelected.forEach((collection_id) => {
-          deleteCollection(collection_id, collection_id);
+          deleteCollection(collection_id, { collection_id: collection_id });
         });
       }
     },
diff --git a/webapp/src/components/PrimeTable.vue b/webapp/src/components/PrimeTable.vue
index a9f2bd1b7..9531d3499 100644
--- a/webapp/src/components/PrimeTable.vue
+++ b/webapp/src/components/PrimeTable.vue
@@ -104,7 +104,6 @@ import CreateEquipmentModal from "@/components/CreateEquipmentModal";
 import AddToCollectionModal from "@/components/AddToCollectionModal";
 
 import { INVENTORY_TABLE_TYPES, EDITABLE_INVENTORY } from "@/resources.js";
-import { getSampleList } from "@/server_fetch_utils.js";
 
 import FormattedItemName from "@/components/FormattedItemName";
 import ChemicalFormula from "@/components/ChemicalFormula";
@@ -219,18 +218,8 @@ export default {
     deleteSelectedItems() {
       this.itemsSelected = [];
     },
-    getSamples() {
-      getSampleList()
-        .then(() => {
-          console.log("sample list received!");
-        })
-        .catch(() => {
-          this.isSampleFetchError = true;
-        });
-    },
     handleItemsUpdated() {
       this.itemsSelected = [];
-      this.getSamples();
     },
   },
 };
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
index 8f9afe4c5..8b28cd6c5 100644
--- a/webapp/src/store/index.js
+++ b/webapp/src/store/index.js
@@ -97,7 +97,9 @@ export default createStore({
       }
     },
     deleteFromCollectionList(state, collection_summary) {
-      const index = state.collection_list.map((e) => e.item_id).indexOf(collection_summary.item_id);
+      const index = state.collection_list
+        .map((e) => e.collection_id)
+        .indexOf(collection_summary.collection_id);
       if (index > -1) {
         state.collection_list.splice(index, 1);
       } else {

From ea4fb351e8596d2a4143c0ba41eabff5fd4dafa6 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 13 Sep 2024 11:44:04 +0100
Subject: [PATCH 06/19] PrimeDataTable becomes the default version and lots of
 cleanup

Rename navbar link
---
 .../src/components/AddToCollectionModal.vue   |  15 ++-
 webapp/src/components/CollectionTable.vue     | 106 ---------------
 ...onsPrimeTable.vue => CollectionsTable.vue} |   6 +-
 ...meTable.vue => DynamicButtonDataTable.vue} |   0
 .../{PrimeTable.vue => DynamicDataTable.vue}  |   6 +-
 webapp/src/components/EquipmentTable.vue      | 105 ---------------
 ...mentPrimeTable.vue => EquipmentsTable.vue} |   6 +-
 .../components/FancyStartingMaterialTable.vue | 122 ------------------
 webapp/src/components/Navbar.vue              |   6 +-
 webapp/src/components/SampleTable.vue         | 116 -----------------
 ...SamplesPrimeTable.vue => SamplesTable.vue} |   6 +-
 .../src/components/StartingMaterialTable.vue  |  93 -------------
 ...meTable.vue => StartingMaterialsTable.vue} |   6 +-
 webapp/src/router/index.js                    |  41 +-----
 webapp/src/views/Collections.vue              |  23 +---
 webapp/src/views/Equipment.vue                |  53 --------
 .../views/{TestPrime.vue => Equipments.vue}   |   8 +-
 webapp/src/views/Samples.vue                  |  35 +----
 webapp/src/views/StartingMaterials.vue        |  31 +----
 webapp/src/views/StartingMaterialsNext.vue    |  22 ----
 webapp/src/views/TestPrime2.vue               |  38 ------
 webapp/src/views/TestPrime3.vue               |  38 ------
 webapp/src/views/TestPrime4.vue               |  38 ------
 23 files changed, 48 insertions(+), 872 deletions(-)
 delete mode 100644 webapp/src/components/CollectionTable.vue
 rename webapp/src/components/{CollectionsPrimeTable.vue => CollectionsTable.vue} (88%)
 rename webapp/src/components/{ButtonPrimeTable.vue => DynamicButtonDataTable.vue} (100%)
 rename webapp/src/components/{PrimeTable.vue => DynamicDataTable.vue} (98%)
 delete mode 100644 webapp/src/components/EquipmentTable.vue
 rename webapp/src/components/{EquipmentPrimeTable.vue => EquipmentsTable.vue} (89%)
 delete mode 100644 webapp/src/components/FancyStartingMaterialTable.vue
 delete mode 100644 webapp/src/components/SampleTable.vue
 rename webapp/src/components/{SamplesPrimeTable.vue => SamplesTable.vue} (91%)
 delete mode 100644 webapp/src/components/StartingMaterialTable.vue
 rename webapp/src/components/{StartingMaterialsPrimeTable.vue => StartingMaterialsTable.vue} (89%)
 delete mode 100644 webapp/src/views/Equipment.vue
 rename webapp/src/views/{TestPrime.vue => Equipments.vue} (79%)
 delete mode 100644 webapp/src/views/StartingMaterialsNext.vue
 delete mode 100644 webapp/src/views/TestPrime2.vue
 delete mode 100644 webapp/src/views/TestPrime3.vue
 delete mode 100644 webapp/src/views/TestPrime4.vue

diff --git a/webapp/src/components/AddToCollectionModal.vue b/webapp/src/components/AddToCollectionModal.vue
index 874cedb61..a4418cf95 100644
--- a/webapp/src/components/AddToCollectionModal.vue
+++ b/webapp/src/components/AddToCollectionModal.vue
@@ -38,7 +38,12 @@ import Modal from "@/components/Modal.vue";
 import FormattedItemName from "@/components/FormattedItemName";
 import CollectionSelect from "@/components/CollectionSelect.vue";
 
-import { addItemsToCollection } from "@/server_fetch_utils";
+import {
+  addItemsToCollection,
+  getSampleList,
+  getStartingMaterialList,
+  getEquipmentList,
+} from "@/server_fetch_utils";
 
 export default {
   name: "AddToCollectionsModal",
@@ -70,7 +75,13 @@ export default {
           await addItemsToCollection(collectionId, refcodes);
         }
         this.$emit("itemsUpdated");
-
+        if (this.itemsSelected.some((item) => item.type === "samples")) {
+          getSampleList();
+        } else if (this.itemsSelected.some((item) => item.type === "startingMaterials")) {
+          getStartingMaterialList();
+        } else if (this.itemsSelected.some((item) => item.type === "equipments")) {
+          getEquipmentList();
+        }
         console.log("Items added successfully.");
         this.$emit("update:modelValue", false);
       } catch (error) {
diff --git a/webapp/src/components/CollectionTable.vue b/webapp/src/components/CollectionTable.vue
deleted file mode 100644
index 6a57eb5df..000000000
--- a/webapp/src/components/CollectionTable.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div v-if="isFetchError" class="alert alert-danger">
-    Server Error. Collection list not retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="collection-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Title</th>
-        <th scope="col">Creators</th>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="collection in collections"
-        :id="collection.collection_id"
-        :key="collection.collection_id"
-        @click.exact="goToEditPage(collection.collection_id)"
-        @click.meta="openEditPageInNewTab(collection.collection_id)"
-        @click.ctrl="openEditPageInNewTab(collection.collection_id)"
-      >
-        <td align="left">
-          <FormattedItemName
-            :item_id="collection.collection_id"
-            :item-type="collection.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="left">{{ collection.title }}</td>
-        <td align="center"><Creators :creators="collection.creators" /></td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteCollection(collection)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import { getCollectionList, deleteCollection } from "@/server_fetch_utils.js";
-import FormattedItemName from "@/components/FormattedItemName";
-import Creators from "@/components/Creators";
-import { GRAVATAR_STYLE } from "@/resources.js";
-
-export default {
-  components: {
-    FormattedItemName,
-    Creators,
-  },
-  data() {
-    return {
-      isFetchError: false,
-      gravatar_style: GRAVATAR_STYLE,
-    };
-  },
-  computed: {
-    collections() {
-      return this.$store.state.collection_list;
-    },
-  },
-  created() {
-    this.getCollections();
-  },
-  methods: {
-    goToEditPage(collection_id) {
-      this.$router.push(`/collections/${collection_id}`);
-    },
-    openEditPageInNewTab(collection_id) {
-      window.open(`/collections/${collection_id}`, "_blank");
-    },
-    // should also check response.OK? And retry if
-    getCollections() {
-      getCollectionList().catch(() => {
-        this.isFetchError = true;
-      });
-    },
-    deleteCollection(collection) {
-      if (
-        confirm(
-          `Are you sure you want to delete collection "${collection.collection_id}"?\nThis will not delete any items.`,
-        )
-      ) {
-        deleteCollection(collection.collection_id, collection);
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.avatar {
-  border: 2px solid grey;
-  border-radius: 50%;
-}
-.avatar:hover {
-  border: 2px solid skyblue;
-}
-</style>
diff --git a/webapp/src/components/CollectionsPrimeTable.vue b/webapp/src/components/CollectionsTable.vue
similarity index 88%
rename from webapp/src/components/CollectionsPrimeTable.vue
rename to webapp/src/components/CollectionsTable.vue
index 491baa5f6..0e4583b42 100644
--- a/webapp/src/components/CollectionsPrimeTable.vue
+++ b/webapp/src/components/CollectionsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <PrimeTable
+  <DynamicDataTable
     :columns="collectionColumn"
     :data="collections"
     :data-type="'collections'"
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import PrimeTable from "@/components/PrimeTable";
+import DynamicDataTable from "@/components/DynamicDataTable";
 import { getCollectionList } from "@/server_fetch_utils.js";
 
 export default {
-  components: { PrimeTable },
+  components: { DynamicDataTable },
   data() {
     return {
       collectionColumn: [
diff --git a/webapp/src/components/ButtonPrimeTable.vue b/webapp/src/components/DynamicButtonDataTable.vue
similarity index 100%
rename from webapp/src/components/ButtonPrimeTable.vue
rename to webapp/src/components/DynamicButtonDataTable.vue
diff --git a/webapp/src/components/PrimeTable.vue b/webapp/src/components/DynamicDataTable.vue
similarity index 98%
rename from webapp/src/components/PrimeTable.vue
rename to webapp/src/components/DynamicDataTable.vue
index 9531d3499..a3b1cfcfb 100644
--- a/webapp/src/components/PrimeTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -21,7 +21,7 @@
       <!-- v-model:expandedRows="expandedRows" -->
 
       <template #header>
-        <ButtonPrimeTable
+        <DynamicButtonDataTable
           :data-type="dataType"
           :items-selected="itemsSelected"
           :filters="filters"
@@ -96,7 +96,7 @@
 </template>
 
 <script>
-import ButtonPrimeTable from "@/components/ButtonPrimeTable";
+import DynamicButtonDataTable from "@/components/DynamicButtonDataTable";
 import CreateItemModal from "@/components/CreateItemModal";
 import BatchCreateItemModal from "@/components/BatchCreateItemModal";
 import CreateCollectionModal from "@/components/CreateCollectionModal";
@@ -116,7 +116,7 @@ import InputText from "primevue/inputtext";
 
 export default {
   components: {
-    ButtonPrimeTable,
+    DynamicButtonDataTable,
     CreateItemModal,
     BatchCreateItemModal,
     CreateCollectionModal,
diff --git a/webapp/src/components/EquipmentTable.vue b/webapp/src/components/EquipmentTable.vue
deleted file mode 100644
index 2dcfb2eba..000000000
--- a/webapp/src/components/EquipmentTable.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div v-if="isEquipmentFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Equipment list could not be
-    retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="equipment-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Name</th>
-        <th class="text-center" scope="col">Date created</th>
-        <th class="text-center" scope="col">Location</th>
-        <th class="text-left" scope="col">Maintainers</th>
-
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="equipment in equipments"
-        :id="equipment.item_id"
-        :key="equipment.item_id"
-        @click.exact="goToEditPage(equipment.item_id)"
-        @click.meta="openEditPageInNewTab(equipment.item_id)"
-        @click.ctrl="openEditPageInNewTab(equipment.item_id)"
-      >
-        <td align="left" class="table-item-id">
-          <FormattedItemName
-            :item_id="equipment.item_id"
-            :item-type="equipment?.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="left">{{ equipment.name }}</td>
-        <td class="text-center">{{ $filters.IsoDatetimeToDate(equipment.date) }}</td>
-        <td class="left">{{ equipment.location }}</td>
-        <td align="center"><Creators :creators="equipment.creators" /></td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteEquipment(equipment)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import FormattedItemName from "@/components/FormattedItemName";
-import Creators from "@/components/Creators";
-import { getEquipmentList, deleteEquipment } from "@/server_fetch_utils.js";
-import { itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    FormattedItemName,
-    Creators,
-  },
-  data() {
-    return {
-      isEquipmentFetchError: false,
-      itemTypes: itemTypes,
-    };
-  },
-  computed: {
-    equipments() {
-      return this.$store.state.equipment_list;
-    },
-  },
-  created() {
-    this.getEquipment();
-  },
-  methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    getEquipment() {
-      getEquipmentList().catch(() => {
-        this.isEquipmentFetchError = true;
-      });
-    },
-    deleteEquipment(equipment) {
-      if (confirm(`Are you sure you want to delete equipment "${equipment.item_id}"?`)) {
-        console.log("deleting...");
-        deleteEquipment(equipment.item_id);
-      }
-      console.log("delete cancelled...");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.clickable {
-  cursor: pointer;
-}
-</style>
diff --git a/webapp/src/components/EquipmentPrimeTable.vue b/webapp/src/components/EquipmentsTable.vue
similarity index 89%
rename from webapp/src/components/EquipmentPrimeTable.vue
rename to webapp/src/components/EquipmentsTable.vue
index fa1f48de9..67ebd0897 100644
--- a/webapp/src/components/EquipmentPrimeTable.vue
+++ b/webapp/src/components/EquipmentsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <PrimeTable
+  <DynamicDataTable
     :columns="equipmentColumn"
     :data="equipments"
     :data-type="'equipments'"
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import PrimeTable from "@/components/PrimeTable";
+import DynamicDataTable from "@/components/DynamicDataTable";
 import { getEquipmentList } from "@/server_fetch_utils.js";
 
 export default {
-  components: { PrimeTable },
+  components: { DynamicDataTable },
   data() {
     return {
       equipmentColumn: [
diff --git a/webapp/src/components/FancyStartingMaterialTable.vue b/webapp/src/components/FancyStartingMaterialTable.vue
deleted file mode 100644
index d3f37a805..000000000
--- a/webapp/src/components/FancyStartingMaterialTable.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <div v-if="isFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server error: inventory could not be
-    retrieved.
-  </div>
-  <div class="form-inline ml-auto col-3 mb-2">
-    <div class="form-group">
-      <label for="sample-table-search" class="sr-only">Search items</label>
-      <input
-        id="sample-table-search"
-        v-model="searchValue"
-        type="text"
-        class="form-control"
-        placeholder="search"
-      />
-    </div>
-  </div>
-
-  <Vue3EasyDataTable
-    :headers="headers"
-    :items="startingMaterials"
-    :search-value="searchValue"
-    table-class-name="customize-table"
-    header-class-name="customize-table-header"
-    buttons-pagination
-    @click-row="goToEditPage"
-  >
-    <template #item-item_id="item">
-      <FormattedItemName
-        :item_id="item.item_id"
-        :item-type="item?.type || 'starting_materials'"
-        enable-modified-click
-      />
-    </template>
-    <template #item-chemform="item">
-      <ChemicalFormula :formula="item.chemform" />
-    </template>
-
-    <template #item-date="item">
-      {{ $filters.IsoDatetimeToDate(item.date) }}
-    </template>
-  </Vue3EasyDataTable>
-</template>
-
-<script>
-import Vue3EasyDataTable from "vue3-easy-data-table";
-import "vue3-easy-data-table/dist/style.css";
-
-import ChemicalFormula from "@/components/ChemicalFormula";
-import FormattedItemName from "@/components/FormattedItemName";
-import { getStartingMaterialList } from "@/server_fetch_utils.js";
-
-export default {
-  components: {
-    ChemicalFormula,
-    FormattedItemName,
-    Vue3EasyDataTable,
-  },
-  data() {
-    return {
-      isFetchError: false,
-      searchValue: "",
-      headers: [
-        { text: "ID", value: "item_id", sortable: true },
-        { text: "Name", value: "name", sortable: true },
-        { text: "Formula", value: "chemform", sortable: true },
-        { text: "Date Acquired", value: "date", sortable: true },
-        { text: "# of blocks", value: "nblocks", sortable: true },
-      ],
-    };
-  },
-  computed: {
-    startingMaterials() {
-      return this.$store.state.starting_material_list;
-    },
-  },
-  created() {
-    this.getStartingMaterials();
-  },
-  methods: {
-    goToEditPage(row, event) {
-      // don't actually go to editpage is this click is in the select column, because
-      // that is easy to accidentally do. in future, could try to actuate the checkbox, too.
-      if (event.target.querySelector(".easy-checkbox")) {
-        return null;
-      }
-      // if using a modifier key (ctr, meta, alt), open in new tab
-      // otherwise, go in this tab
-      if (event.ctrl || event.metaKey || event.altKey) {
-        window.open(`/edit/${row.item_id}`, "_blank");
-      } else {
-        this.$router.push(`/edit/${row.item_id}`);
-      }
-    },
-    getStartingMaterials() {
-      getStartingMaterialList().catch(() => {
-        this.isFetchError = true;
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.customize-table th {
-  --easy-table-row-border: 2px solid #dee2e6;
-  border-top: 0.5px solid #dee2e6 !important;
-}
-
-.customize-table tr {
-  cursor: pointer;
-}
-
-.customize-table {
-  --easy-table-border: none;
-  --easy-table-row-border: 1px solid #dee2e6;
-  --easy-table-header-font-size: 1rem;
-  --easy-table-body-row-font-size: 1rem;
-  --easy-table-footer-font-size: 1rem;
-  --easy-table-message-font-size: 1rem;
-}
-</style>
diff --git a/webapp/src/components/Navbar.vue b/webapp/src/components/Navbar.vue
index 837b48d00..83e28883b 100644
--- a/webapp/src/components/Navbar.vue
+++ b/webapp/src/components/Navbar.vue
@@ -22,13 +22,9 @@
   <div id="nav">
     <router-link to="/about">About</router-link> |
     <router-link to="/samples">Samples</router-link> |
-    <router-link to="/test">Test PrimeSamples</router-link> |
     <router-link to="/collections">Collections</router-link> |
-    <router-link to="/test2">Test PrimeCollections</router-link> |
     <router-link to="/starting-materials">Inventory</router-link> |
-    <router-link to="/test3">Test PrimeStartMats</router-link> |
-    <router-link to="/equipment">Equipment</router-link> |
-    <router-link to="/test4">Test PrimeEquip</router-link> |
+    <router-link to="/equipments">Equipment</router-link> |
     <router-link to="/item-graph"
       ><font-awesome-icon icon="project-diagram" />&nbsp;Graph View</router-link
     >
diff --git a/webapp/src/components/SampleTable.vue b/webapp/src/components/SampleTable.vue
deleted file mode 100644
index 670331805..000000000
--- a/webapp/src/components/SampleTable.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div v-if="isSampleFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Sample list could not be
-    retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="sample-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Type</th>
-        <th scope="col">Sample name</th>
-        <th scope="col">Formula</th>
-        <th class="text-center" scope="col">Date</th>
-        <th scope="col">Collections</th>
-        <th class="text-center" scope="col">Creators</th>
-        <th class="text-center" scope="col"># of blocks</th>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="sample in samples"
-        :id="sample.item_id"
-        :key="sample.item_id"
-        @click.exact="goToEditPage(sample.item_id)"
-        @click.meta="openEditPageInNewTab(sample.item_id)"
-        @click.ctrl="openEditPageInNewTab(sample.item_id)"
-      >
-        <td align="left" class="table-item-id">
-          <FormattedItemName
-            :item_id="sample.item_id"
-            :item-type="sample?.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="center">{{ itemTypes[sample.type].display }}</td>
-        <td align="left">{{ sample.name }}</td>
-        <td><ChemicalFormula :formula="sample.chemform" /></td>
-        <td class="text-center">{{ $filters.IsoDatetimeToDate(sample.date) }}</td>
-        <td><CollectionList :collections="sample.collections" /></td>
-        <td align="center"><Creators :creators="sample.creators" /></td>
-        <td class="text-right">{{ sample.nblocks }}</td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteSample(sample)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import ChemicalFormula from "@/components/ChemicalFormula";
-import FormattedItemName from "@/components/FormattedItemName";
-import CollectionList from "@/components/CollectionList";
-import Creators from "@/components/Creators";
-import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
-import { itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    ChemicalFormula,
-    FormattedItemName,
-    Creators,
-    CollectionList,
-  },
-  data() {
-    return {
-      isSampleFetchError: false,
-      itemTypes: itemTypes,
-    };
-  },
-  computed: {
-    samples() {
-      return this.$store.state.sample_list;
-    },
-  },
-  created() {
-    this.getSamples();
-  },
-  methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    // should also check response.OK? And retry if
-    getSamples() {
-      getSampleList().catch(() => {
-        this.isSampleFetchError = true;
-      });
-    },
-    deleteSample(sample) {
-      if (confirm(`Are you sure you want to delete sample "${sample.item_id}"?`)) {
-        console.log("deleting...");
-        deleteSample(sample.item_id);
-      }
-      console.log("delete cancelled...");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.table-item-id {
-  font-size: 1.2em;
-  font-weight: normal;
-}
-</style>
diff --git a/webapp/src/components/SamplesPrimeTable.vue b/webapp/src/components/SamplesTable.vue
similarity index 91%
rename from webapp/src/components/SamplesPrimeTable.vue
rename to webapp/src/components/SamplesTable.vue
index 73b6d79ad..e21961999 100644
--- a/webapp/src/components/SamplesPrimeTable.vue
+++ b/webapp/src/components/SamplesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <PrimeTable
+  <DynamicDataTable
     :columns="sampleColumns"
     :data="samples"
     :data-type="'samples'"
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import PrimeTable from "@/components/PrimeTable";
+import DynamicDataTable from "@/components/DynamicDataTable";
 import { getSampleList } from "@/server_fetch_utils.js";
 
 export default {
-  components: { PrimeTable },
+  components: { DynamicDataTable },
   data() {
     return {
       sampleColumns: [
diff --git a/webapp/src/components/StartingMaterialTable.vue b/webapp/src/components/StartingMaterialTable.vue
deleted file mode 100644
index d81020d03..000000000
--- a/webapp/src/components/StartingMaterialTable.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div v-if="isFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server error: inventory could not be
-    retrieved.
-  </div>
-  <table class="table table-hover table-sm">
-    <thead>
-      <tr align="center">
-        <th scope="col">ID</th>
-        <th scope="col">Name</th>
-        <th scope="col">Formula</th>
-        <th scope="col">Date acquired</th>
-        <th scope="col">Purity</th>
-        <th scope="col"># of blocks</th>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="item in startingMaterials"
-        :id="item.item_id"
-        :key="item.item_id"
-        @click.exact="goToEditPage(item.item_id)"
-        @click.meta="openEditPageInNewTab(item.item_id)"
-        @click.ctrl="openEditPageInNewTab(item.item_id)"
-      >
-        <td>
-          <FormattedItemName
-            :item_id="item.item_id"
-            :item-type="item?.type || 'starting_materials'"
-            enable-modified-click
-          />
-        </td>
-        <td>{{ item.name }}</td>
-        <td><ChemicalFormula :formula="item.chemform" /></td>
-        <td>{{ $filters.IsoDatetimeToDate(item.date) }}</td>
-        <td>{{ item.chemical_purity }}</td>
-        <td>{{ item.nblocks }}</td>
-        <td align="right">
-          <button type="button" class="close" aria-label="delete" @click.stop="deleteItem(item)">
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import ChemicalFormula from "@/components/ChemicalFormula";
-import FormattedItemName from "@/components/FormattedItemName";
-import { getStartingMaterialList, deleteStartingMaterial } from "@/server_fetch_utils.js";
-
-export default {
-  components: {
-    ChemicalFormula,
-    FormattedItemName,
-  },
-  data() {
-    return {
-      isFetchError: false,
-    };
-  },
-  computed: {
-    startingMaterials() {
-      return this.$store.state.starting_material_list;
-    },
-  },
-  created() {
-    this.getStartingMaterials();
-  },
-  methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    getStartingMaterials() {
-      getStartingMaterialList().catch(() => {
-        this.isFetchError = true;
-      });
-    },
-    deleteItem(item) {
-      if (confirm(`Are you sure you want to delete starting material "${item.item_id}"?`)) {
-        console.log("deleting...");
-        deleteStartingMaterial(item.item_id);
-      }
-      console.log("delete cancelled.");
-    },
-  },
-};
-</script>
diff --git a/webapp/src/components/StartingMaterialsPrimeTable.vue b/webapp/src/components/StartingMaterialsTable.vue
similarity index 89%
rename from webapp/src/components/StartingMaterialsPrimeTable.vue
rename to webapp/src/components/StartingMaterialsTable.vue
index 07c7c0782..882208c9d 100644
--- a/webapp/src/components/StartingMaterialsPrimeTable.vue
+++ b/webapp/src/components/StartingMaterialsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <PrimeTable
+  <DynamicDataTable
     :columns="startingMaterialColumn"
     :data="startingMaterials"
     :data-type="'startingMaterials'"
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import PrimeTable from "@/components/PrimeTable";
+import DynamicDataTable from "@/components/DynamicDataTable";
 import { getStartingMaterialList } from "@/server_fetch_utils.js";
 
 export default {
-  components: { PrimeTable },
+  components: { DynamicDataTable },
   data() {
     return {
       startingMaterialColumn: [
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index b52b62556..c7f635149 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -1,9 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Samples from "../views/Samples.vue";
-import Equipment from "../views/Equipment.vue";
-import SamplePrime from "../views/SamplePrime.vue";
+import Equipments from "../views/Equipments.vue";
 import StartingMaterials from "../views/StartingMaterials.vue";
-import StartingMaterialsNext from "../views/StartingMaterialsNext.vue";
 import Collections from "@/views/Collections.vue";
 import NotFound from "../views/NotFound.vue";
 import EditPage from "../views/EditPage.vue";
@@ -12,11 +10,6 @@ import ExampleGraph from "@/views/ExampleGraph.vue";
 import ItemGraphPage from "@/views/ItemGraphPage.vue";
 import Admin from "@/views/Admin.vue";
 
-import TestPrime from "../views/TestPrime.vue";
-import TestPrime2 from "../views/TestPrime2.vue";
-import TestPrime3 from "../views/TestPrime3.vue";
-import TestPrime4 from "../views/TestPrime4.vue";
-
 const routes = [
   {
     path: "/about",
@@ -33,32 +26,11 @@ const routes = [
     component: Samples,
   },
   {
-    path: "/test",
-    name: "test",
-    component: TestPrime,
-  },
-  {
-    path: "/test2",
-    name: "test2",
-    component: TestPrime2,
-  },
-  {
-    path: "/test3",
-    name: "test3",
-    component: TestPrime3,
-  },
-  {
-    path: "/test4",
-    name: "test4",
-    component: TestPrime4,
-  },
-  {
-    path: "/equipment",
-    name: "equipment",
+    path: "/equipments",
+    name: "equipments",
     alias: "/",
-    component: Equipment,
+    component: Equipments,
   },
-  { path: "/next/samples", name: "samples-next", alias: "/next", component: SamplePrime },
   {
     path: "/edit/:id",
     name: "edit",
@@ -74,11 +46,6 @@ const routes = [
     name: "starting-materials",
     component: StartingMaterials,
   },
-  {
-    path: "/next/starting-materials",
-    name: "starting-materials-next",
-    component: StartingMaterialsNext,
-  },
   {
     path: "/collections",
     name: "collections",
diff --git a/webapp/src/views/Collections.vue b/webapp/src/views/Collections.vue
index aaa615fd7..cee68bcdc 100644
--- a/webapp/src/views/Collections.vue
+++ b/webapp/src/views/Collections.vue
@@ -3,37 +3,22 @@
 
   <div id="tableContainer" class="container">
     <div class="row">
-      <div class="col-sm-10 mx-auto mb-3">
-        <button class="btn btn-default" @click="createCollectionModalIsOpen = true">
-          Create new collection
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-10 mx-auto">
-        <CollectionTable />
+      <div class="col-sm-12 mx-auto">
+        <CollectionsTable />
       </div>
     </div>
   </div>
-  <CreateCollectionModal v-model="createCollectionModalIsOpen" />
 </template>
 
 <script>
 import Navbar from "@/components/Navbar";
-import CollectionTable from "@/components/CollectionTable";
-import CreateCollectionModal from "@/components/CreateCollectionModal";
+import CollectionsTable from "@/components/CollectionsTable";
 
 export default {
   name: "Collections",
   components: {
     Navbar,
-    CollectionTable,
-    CreateCollectionModal,
-  },
-  data() {
-    return {
-      createCollectionModalIsOpen: false,
-    };
+    CollectionsTable,
   },
 };
 </script>
diff --git a/webapp/src/views/Equipment.vue b/webapp/src/views/Equipment.vue
deleted file mode 100644
index 72ad32b4d..000000000
--- a/webapp/src/views/Equipment.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createEquipmentModalIsOpen = true">
-          Add an item
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <EquipmentTable />
-      </div>
-    </div>
-  </div>
-  <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import EquipmentTable from "@/components/EquipmentTable";
-import CreateEquipmentModal from "@/components/CreateEquipmentModal";
-
-export default {
-  name: "Equipments",
-  components: {
-    Navbar,
-    EquipmentTable,
-    CreateEquipmentModal,
-  },
-  data() {
-    return {
-      createEquipmentModalIsOpen: false,
-    };
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
diff --git a/webapp/src/views/TestPrime.vue b/webapp/src/views/Equipments.vue
similarity index 79%
rename from webapp/src/views/TestPrime.vue
rename to webapp/src/views/Equipments.vue
index 9c403e502..b61f10101 100644
--- a/webapp/src/views/TestPrime.vue
+++ b/webapp/src/views/Equipments.vue
@@ -4,7 +4,7 @@
   <div id="tableContainer" class="container">
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <SamplesPrimeTable />
+        <EquipmentsTable />
       </div>
     </div>
   </div>
@@ -12,13 +12,13 @@
 
 <script>
 import Navbar from "@/components/Navbar";
-import SamplesPrimeTable from "@/components/SamplesPrimeTable";
+import EquipmentsTable from "@/components/EquipmentsTable";
 
 export default {
-  name: "TestPrime",
+  name: "Equipments",
   components: {
     Navbar,
-    SamplesPrimeTable,
+    EquipmentsTable,
   },
 };
 </script>
diff --git a/webapp/src/views/Samples.vue b/webapp/src/views/Samples.vue
index c67d00272..42789bd99 100644
--- a/webapp/src/views/Samples.vue
+++ b/webapp/src/views/Samples.vue
@@ -2,52 +2,23 @@
   <Navbar />
 
   <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createItemModalIsOpen = true">Add an item</button>
-        <button class="btn btn-default ml-2" @click="batchCreateItemModalIsOpen = true">
-          Add batch of items
-        </button>
-        <button class="btn btn-default ml-2" @click="qrScannerModalisOpen = true">
-          <font-awesome-icon icon="qrcode" /> Scan QR
-        </button>
-      </div>
-    </div>
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <SampleTable />
+        <SamplesTable />
       </div>
     </div>
   </div>
-  <CreateItemModal v-model="createItemModalIsOpen" :allowed-types="allowedTypes" />
-  <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
-  <QRScannerModal v-model="qrScannerModalisOpen" />
 </template>
 
 <script>
 import Navbar from "@/components/Navbar";
-import SampleTable from "@/components/SampleTable";
-import CreateItemModal from "@/components/CreateItemModal";
-import BatchCreateItemModal from "@/components/BatchCreateItemModal";
-import QRScannerModal from "@/components/QRScannerModal";
-import { SAMPLE_TABLE_TYPES } from "@/resources.js";
+import SamplesTable from "@/components/SamplesTable";
 
 export default {
   name: "Samples",
   components: {
     Navbar,
-    SampleTable,
-    CreateItemModal,
-    BatchCreateItemModal,
-    QRScannerModal,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      batchCreateItemModalIsOpen: false,
-      qrScannerModalisOpen: false,
-      allowedTypes: SAMPLE_TABLE_TYPES,
-    };
+    SamplesTable,
   },
 };
 </script>
diff --git a/webapp/src/views/StartingMaterials.vue b/webapp/src/views/StartingMaterials.vue
index 8208f2b8d..4d39a204b 100644
--- a/webapp/src/views/StartingMaterials.vue
+++ b/webapp/src/views/StartingMaterials.vue
@@ -1,47 +1,24 @@
 <template>
   <Navbar />
+
   <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button
-          v-if="editable_inventory"
-          class="btn btn-default"
-          @click="createItemModalIsOpen = true"
-        >
-          Add a starting material
-        </button>
-      </div>
-    </div>
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <StartingMaterialTable></StartingMaterialTable>
+        <StartingMaterialsTable />
       </div>
     </div>
   </div>
-  <CreateItemModal v-model="createItemModalIsOpen" :allowed-types="allowedTypes" />
 </template>
 
 <script>
 import Navbar from "@/components/Navbar";
-import StartingMaterialTable from "@/components/StartingMaterialTable";
-import CreateItemModal from "@/components/CreateItemModal";
-import { INVENTORY_TABLE_TYPES, EDITABLE_INVENTORY } from "@/resources.js";
+import StartingMaterialsTable from "@/components/StartingMaterialsTable";
 
 export default {
   name: "StartingMaterials",
   components: {
     Navbar,
-    StartingMaterialTable,
-    CreateItemModal,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      allowedTypes: INVENTORY_TABLE_TYPES,
-    };
-  },
-  created() {
-    this.editable_inventory = EDITABLE_INVENTORY;
+    StartingMaterialsTable,
   },
 };
 </script>
diff --git a/webapp/src/views/StartingMaterialsNext.vue b/webapp/src/views/StartingMaterialsNext.vue
deleted file mode 100644
index c34976e7c..000000000
--- a/webapp/src/views/StartingMaterialsNext.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <Navbar />
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-10 mx-auto">
-        <FancyStartingMaterialTable />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import FancyStartingMaterialTable from "@/components/FancyStartingMaterialTable";
-
-export default {
-  components: {
-    Navbar,
-    FancyStartingMaterialTable,
-  },
-};
-</script>
diff --git a/webapp/src/views/TestPrime2.vue b/webapp/src/views/TestPrime2.vue
deleted file mode 100644
index 8dd938b60..000000000
--- a/webapp/src/views/TestPrime2.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <CollectionsPrimeTable />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import CollectionsPrimeTable from "@/components/CollectionsPrimeTable";
-
-export default {
-  name: "TestPrime",
-  components: {
-    Navbar,
-    CollectionsPrimeTable,
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
diff --git a/webapp/src/views/TestPrime3.vue b/webapp/src/views/TestPrime3.vue
deleted file mode 100644
index 769050242..000000000
--- a/webapp/src/views/TestPrime3.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <StartingMaterialsPrimeTable />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import StartingMaterialsPrimeTable from "@/components/StartingMaterialsPrimeTable";
-
-export default {
-  name: "TestPrime",
-  components: {
-    Navbar,
-    StartingMaterialsPrimeTable,
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
diff --git a/webapp/src/views/TestPrime4.vue b/webapp/src/views/TestPrime4.vue
deleted file mode 100644
index a899f2ae2..000000000
--- a/webapp/src/views/TestPrime4.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <EquipmentPrimeTable />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import EquipmentPrimeTable from "@/components/EquipmentPrimeTable";
-
-export default {
-  name: "TestPrime",
-  components: {
-    Navbar,
-    EquipmentPrimeTable,
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>

From b7d94a3a92b6764ddf58615d11db870d7d2b4668 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 13 Sep 2024 14:06:19 +0100
Subject: [PATCH 07/19] wrapping of item names

---
 webapp/src/components/DynamicDataTable.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index a3b1cfcfb..d328b8bb9 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -237,6 +237,21 @@ export default {
   visibility: visible !important;
 }
 
+.p-datatable .p-datatable-tbody > tr > td {
+  min-width: 1em;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.p-datatable .p-datatable-thead > tr > th {
+  min-width: 1em;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .button-right {
   gap: 0.5em;
 }

From 4494e440b455831a94e815a02ae8bc0c96488424 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 13 Sep 2024 14:46:24 +0100
Subject: [PATCH 08/19] Move QR code scanner inside Dynamic DataTable

---
 webapp/src/components/DynamicButtonDataTable.vue | 8 ++++++++
 webapp/src/components/DynamicDataTable.vue       | 5 +++++
 2 files changed, 13 insertions(+)

diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue
index 6000c24ec..3ce18581e 100644
--- a/webapp/src/components/DynamicButtonDataTable.vue
+++ b/webapp/src/components/DynamicButtonDataTable.vue
@@ -15,6 +15,13 @@
       >
         Add batch of samples
       </button>
+      <button
+        v-if="dataType === 'samples'"
+        class="btn btn-default ml-2"
+        @click="$emit('open-qr-scanner-modal')"
+      >
+        <font-awesome-icon icon="qrcode" /> Scan QR
+      </button>
       <button
         v-if="dataType === 'collections'"
         class="btn btn-default"
@@ -111,6 +118,7 @@ export default {
   emits: [
     "open-create-item-modal",
     "open-batch-create-item-modal",
+    "open-qr-scanner-modal",
     "open-create-collection-modal",
     "open-create-equipment-modal",
     "open-add-to-collection-modal",
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index d328b8bb9..ca440016b 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -28,6 +28,7 @@
           :editable-inventory="editable_inventory"
           @open-create-item-modal="createItemModalIsOpen = true"
           @open-batch-create-item-modal="batchCreateItemModalIsOpen = true"
+          @open-qr-scanner-modal="qrScannerModalIsOpen = true"
           @open-create-collection-modal="createCollectionModalIsOpen = true"
           @open-create-equipment-modal="createEquipmentModalIsOpen = true"
           @open-add-to-collection-modal="addToCollectionModalIsOpen = true"
@@ -86,6 +87,7 @@
     :allowed-types="dataType == 'startingMaterials' ? allowedTypes : undefined"
   />
   <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
+  <QRScannerModal v-model="qrScannerModalIsOpen" />
   <CreateCollectionModal v-model="createCollectionModalIsOpen" />
   <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
   <AddToCollectionModal
@@ -99,6 +101,7 @@
 import DynamicButtonDataTable from "@/components/DynamicButtonDataTable";
 import CreateItemModal from "@/components/CreateItemModal";
 import BatchCreateItemModal from "@/components/BatchCreateItemModal";
+import QRScannerModal from "@/components/QRScannerModal";
 import CreateCollectionModal from "@/components/CreateCollectionModal";
 import CreateEquipmentModal from "@/components/CreateEquipmentModal";
 import AddToCollectionModal from "@/components/AddToCollectionModal";
@@ -119,6 +122,7 @@ export default {
     DynamicButtonDataTable,
     CreateItemModal,
     BatchCreateItemModal,
+    QRScannerModal,
     CreateCollectionModal,
     CreateEquipmentModal,
     AddToCollectionModal,
@@ -152,6 +156,7 @@ export default {
     return {
       createItemModalIsOpen: false,
       batchCreateItemModalIsOpen: false,
+      qrScannerModalIsOpen: false,
       createCollectionModalIsOpen: false,
       createEquipmentModalIsOpen: false,
       addToCollectionModalIsOpen: false,

From 1ce390d0cf987de6ddac2d6606264e22f72acd5b Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 13 Sep 2024 15:34:58 +0100
Subject: [PATCH 09/19] Cleaning up

---
 .../src/components/DynamicButtonDataTable.vue |   2 +-
 .../components/FancyCollectionSampleTable.vue | 169 -----------
 webapp/src/components/FancySampleTable.vue    | 179 ------------
 webapp/src/components/SampleTablePrime.vue    | 272 ------------------
 webapp/src/views/SamplePrime.vue              |  38 ---
 webapp/src/views/SamplesNext.vue              |  58 ----
 6 files changed, 1 insertion(+), 717 deletions(-)
 delete mode 100644 webapp/src/components/FancyCollectionSampleTable.vue
 delete mode 100644 webapp/src/components/FancySampleTable.vue
 delete mode 100644 webapp/src/components/SampleTablePrime.vue
 delete mode 100644 webapp/src/views/SamplePrime.vue
 delete mode 100644 webapp/src/views/SamplesNext.vue

diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue
index 3ce18581e..ae9c18356 100644
--- a/webapp/src/components/DynamicButtonDataTable.vue
+++ b/webapp/src/components/DynamicButtonDataTable.vue
@@ -13,7 +13,7 @@
         class="btn btn-default ml-2"
         @click="$emit('open-batch-create-item-modal')"
       >
-        Add batch of samples
+        Add batch of items
       </button>
       <button
         v-if="dataType === 'samples'"
diff --git a/webapp/src/components/FancyCollectionSampleTable.vue b/webapp/src/components/FancyCollectionSampleTable.vue
deleted file mode 100644
index cec79e755..000000000
--- a/webapp/src/components/FancyCollectionSampleTable.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div v-if="isSampleFetchError" class="alert alert-danger">
-    Server Error. Sample list could not be retreived for collection.
-  </div>
-
-  <div class="form-inline mb-2 ml-auto mt-2">
-    <div class="form-group">
-      <label for="sample-table-search" class="sr-only">Search items</label>
-      <input
-        id="sample-table-search"
-        v-model="searchValue"
-        type="text"
-        class="form-control"
-        placeholder="Search within collection"
-      />
-    </div>
-  </div>
-
-  <Vue3EasyDataTable
-    :headers="headers"
-    :items="samples"
-    :loading="!sampleTableIsReady"
-    :no-hover="true"
-    :expand-column-width="40"
-    :search-value="searchValue"
-    table-class-name="customize-table"
-    header-class-name="customize-table-header"
-    buttons-pagination
-    @click-row="goToEditPage"
-  >
-    <template #empty-message>Collection is empty.</template>
-
-    <template #item-item_id="item">
-      <FormattedItemName :item_id="item.item_id" :item-type="item?.type" enable-modified-click />
-    </template>
-
-    <template #item-type="item">
-      {{ itemTypes[item.type].display }}
-    </template>
-
-    <template #item-chemform="item">
-      <ChemicalFormula :formula="item.chemform" />
-    </template>
-
-    <template #item-date="item">
-      {{ $filters.IsoDatetimeToDate(item.date) }}
-    </template>
-
-    <template #item-creators="item">
-      <Creators :creators="item.creators" />
-    </template>
-  </Vue3EasyDataTable>
-</template>
-
-<script>
-import Vue3EasyDataTable from "vue3-easy-data-table";
-import "vue3-easy-data-table/dist/style.css";
-import FormattedItemName from "@/components/FormattedItemName";
-import ChemicalFormula from "@/components/ChemicalFormula";
-import Creators from "@/components/Creators";
-import { getCollectionSampleList } from "@/server_fetch_utils.js";
-// eslint-disable-next-line no-unused-vars
-import { itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    Vue3EasyDataTable,
-    ChemicalFormula,
-    Creators,
-    FormattedItemName,
-  },
-  props: {
-    collection_id: {
-      type: String,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      isSampleFetchError: false,
-      itemTypes: itemTypes,
-      sampleTableIsReady: false,
-      itemsSelected: [],
-      headers: [
-        { text: "ID", value: "item_id", sortable: true },
-        { text: "Type", value: "type", sortable: true },
-        { text: "Name", value: "name", sortable: true },
-        { text: "Formula", value: "chemform", sortable: true },
-        { text: "Date", value: "date", sortable: true },
-        { text: "Creators", value: "creators", sortable: true },
-        { text: "# of blocks", value: "nblocks", sortable: true },
-      ],
-      searchValue: "",
-    };
-  },
-  computed: {
-    samples() {
-      return this.$store.state.all_collection_children[this.collection_id] || [];
-    },
-  },
-  created() {
-    this.getCollectionSamples();
-  },
-  methods: {
-    getCollectionSamples() {
-      getCollectionSampleList(this.collection_id)
-        .then(() => {
-          this.sampleTableIsReady = true;
-        })
-        .catch(() => {
-          this.isSampleFetchError = true;
-        });
-    },
-    goToEditPage(row, event) {
-      // don't actually go to editpage is this click is in the select column, because
-      // that is easy to accidentally do. in future, could try to actuate the checkbox, too.
-      if (event.target.querySelector(".easy-checkbox")) {
-        return null;
-      }
-      // if using a modifier key (ctr, meta, alt), open in new tab
-      // otherwise, go in this tab
-      if (event.ctrl || event.metaKey || event.altKey) {
-        window.open(`/edit/${row.item_id}`, "_blank");
-      } else {
-        this.$router.push(`/edit/${row.item_id}`);
-      }
-    },
-    deleteSelectedItems() {
-      const idsSelected = this.itemsSelected.map((x) => x.item_id);
-      if (
-        confirm(
-          `Are you sure you want to remove ${this.itemsSelected.length} selected items (${idsSelected}) from this collection?`,
-        )
-      ) {
-        console.log("deleting...");
-        idsSelected.forEach((item_id) => {
-          console.log(`deleting item ${item_id}`);
-        });
-      } else {
-        console.log("delete cancelled...");
-      }
-    },
-  },
-};
-</script>
-
-<style>
-.customize-table th {
-  --easy-table-row-border: 2px solid #dee2e6;
-  border-top: 0.5px solid #dee2e6 !important;
-}
-
-.customize-table tr {
-  cursor: pointer;
-}
-
-.customize-table {
-  --easy-table-border: none;
-  --easy-table-row-border: 1px solid #dee2e6;
-  --easy-table-header-font-size: 1rem;
-  --easy-table-body-row-font-size: 1rem;
-  --easy-table-footer-font-size: 1rem;
-  --easy-table-message-font-size: 1rem;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-}
-</style>
diff --git a/webapp/src/components/FancySampleTable.vue b/webapp/src/components/FancySampleTable.vue
deleted file mode 100644
index c99d8511d..000000000
--- a/webapp/src/components/FancySampleTable.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <div v-if="isSampleFetchError" class="alert alert-danger">
-    Server Error. Sample list not retreived.
-  </div>
-
-  <div class="form-inline mb-2 ml-auto">
-    <button
-      class="btn btn-default ml-auto mr-2"
-      :disabled="!Boolean(itemsSelected.length)"
-      @click="deleteSelectedItems"
-    >
-      Delete selected...
-    </button>
-    <div class="form-group">
-      <label for="sample-table-search" class="sr-only">Search items</label>
-      <input
-        id="sample-table-search"
-        v-model="searchValue"
-        type="text"
-        class="form-control"
-        placeholder="search"
-      />
-    </div>
-  </div>
-
-  <Vue3EasyDataTable
-    v-model:items-selected="itemsSelected"
-    :headers="headers"
-    :items="samples"
-    :search-value="searchValue"
-    table-class-name="customize-table"
-    header-class-name="customize-table-header"
-    buttons-pagination
-    @click-row="goToEditPage"
-  >
-    <template #item-item_id="item">
-      <FormattedItemName :item_id="item.item_id" :item-type="item?.type" enable-modified-click />
-    </template>
-
-    <template #item-type="item">
-      {{ itemTypes[item.type].display }}
-    </template>
-
-    <template #item-chemform="item">
-      <ChemicalFormula :formula="item.chemform" />
-    </template>
-
-    <template #item-date="item">
-      {{ $filters.IsoDatetimeToDate(item.date) }}
-    </template>
-
-    <template #item-creators="item">
-      <Creators :creators="item.creators" />
-    </template>
-  </Vue3EasyDataTable>
-</template>
-
-<script>
-import Vue3EasyDataTable from "vue3-easy-data-table";
-import "vue3-easy-data-table/dist/style.css";
-import FormattedItemName from "@/components/FormattedItemName";
-import ChemicalFormula from "@/components/ChemicalFormula";
-import Creators from "@/components/Creators";
-// eslint-disable-next-line no-unused-vars
-import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
-import { GRAVATAR_STYLE, itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    Vue3EasyDataTable,
-    ChemicalFormula,
-    Creators,
-    FormattedItemName,
-  },
-  data() {
-    return {
-      isSampleFetchError: false,
-      gravatar_style: GRAVATAR_STYLE,
-      itemTypes: itemTypes,
-      sampleTableIsReady: false,
-      itemsSelected: [],
-      headers: [
-        { text: "ID", value: "item_id", sortable: true },
-        { text: "type", value: "type", sortable: true },
-        { text: "Sample name", value: "name", sortable: true },
-        { text: "Formula", value: "chemform", sortable: true },
-        { text: "Date", value: "date", sortable: true },
-        { text: "Creators", value: "creators", sortable: true },
-        { text: "# of blocks", value: "nblocks", sortable: true },
-      ],
-      searchValue: "",
-    };
-  },
-  computed: {
-    samples() {
-      return this.$store.state.sample_list;
-    },
-  },
-  created() {
-    this.getSamples();
-  },
-  methods: {
-    goToEditPage(row, event) {
-      // don't actually go to editpage is this click is in the select column, because
-      // that is easy to accidentally do. in future, could try to actuate the checkbox, too.
-      if (event.target.querySelector(".easy-checkbox")) {
-        return null;
-      }
-      // if using a modifier key (ctr, meta, alt), open in new tab
-      // otherwise, go in this tab
-      if (event.ctrl || event.metaKey || event.altKey) {
-        window.open(`/edit/${row.item_id}`, "_blank");
-      } else {
-        this.$router.push(`/edit/${row.item_id}`);
-      }
-    },
-    getSamples() {
-      getSampleList()
-        .then(() => {
-          console.log("sample list received!");
-          this.sampleTableIsReady = true;
-        })
-        .catch(() => {
-          this.isSampleFetchError = true;
-        });
-    },
-    deleteSelectedItems() {
-      const idsSelected = this.itemsSelected.map((x) => x.item_id);
-      if (
-        confirm(
-          `Are you sure you want to delete ${this.itemsSelected.length} selected items (${idsSelected})?`,
-        )
-      ) {
-        console.log("deleting...");
-        idsSelected.forEach((item_id) => {
-          console.log(`deleting item ${item_id}`);
-          deleteSample(item_id);
-        });
-      } else {
-        console.log("delete cancelled...");
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.avatar {
-  border: 2px solid grey;
-  border-radius: 50%;
-}
-.avatar:hover {
-  border: 2px solid skyblue;
-}
-</style>
-
-<style>
-.customize-table th {
-  --easy-table-row-border: 2px solid #dee2e6;
-  border-top: 0.5px solid #dee2e6 !important;
-}
-
-.customize-table tr {
-  cursor: pointer;
-}
-
-.customize-table {
-  --easy-table-border: none;
-  --easy-table-row-border: 1px solid #dee2e6;
-  --easy-table-header-font-size: 1rem;
-  --easy-table-body-row-font-size: 1rem;
-  --easy-table-footer-font-size: 1rem;
-  --easy-table-message-font-size: 1rem;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-}
-</style>
diff --git a/webapp/src/components/SampleTablePrime.vue b/webapp/src/components/SampleTablePrime.vue
deleted file mode 100644
index eff8eee20..000000000
--- a/webapp/src/components/SampleTablePrime.vue
+++ /dev/null
@@ -1,272 +0,0 @@
-<template>
-  <div>
-    <div v-if="isSampleFetchError" class="alert alert-danger">
-      Server Error. Sample list not retrieved.
-    </div>
-
-    <DataTable
-      v-model:filters="filters"
-      v-model:selection="itemsSelected"
-      selection-mode="multiple"
-      :value="samples"
-      paginator
-      :rows="20"
-      :rows-per-page-options="[10, 20, 50, 100]"
-      filter-display="menu"
-      :global-filter-fields="[
-        'item_id',
-        'type',
-        'name',
-        'chemform',
-        'collectionsList',
-        'creatorsList',
-        'nblocks',
-      ]"
-      removable-sort
-      sort-mode="multiple"
-      @v-on:filter="onFilter"
-      @filter="onFilter"
-      @row-click="goToEditPage"
-    >
-      <!-- v-model:expandedRows="expandedRows" -->
-
-      <template #header>
-        <div class="button-group d-flex justify-content-between align-items-center">
-          <div>
-            <button class="btn btn-default" @click="createItemModalIsOpen = true">
-              Add an item
-            </button>
-            <button class="btn btn-default" @click="batchCreateItemModalIsOpen = true">
-              Add batch of samples
-            </button>
-          </div>
-          <div>
-            <button
-              v-if="itemsSelected.length > 0"
-              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
-            </button>
-            <IconField>
-              <InputIcon>
-                <i class="pi pi-search"></i>
-              </InputIcon>
-              <InputText v-model="filters['global'].value" placeholder="Search" />
-            </IconField>
-          </div>
-        </div>
-      </template>
-      <template #empty> No samples found. </template>
-      <template #loading> Loading samples data. Please wait. </template>
-
-      <Column selection-mode="multiple"></Column>
-      <!-- <Column expander style="width: 5rem" /> -->
-      <Column field="item_id" header="ID" sortable>
-        <template #body="slotProps">
-          <FormattedItemName
-            :item_id="slotProps.data.item_id"
-            :item-type="slotProps.data.type"
-            enable-click
-          />
-        </template>
-        <template #filter="{ filterModel }">
-          <InputText v-model="filterModel.value" type="text" placeholder="Search by ID" />
-        </template>
-      </Column>
-      <Column field="type" header="Type" sortable>
-        <template #filter="{ filterModel }">
-          <InputText v-model="filterModel.value" type="text" placeholder="Search by type" />
-        </template>
-      </Column>
-      <Column field="name" header="Sample name" sortable> </Column>
-      <Column field="chemform" header="Formula" sortable>
-        <template #body="slotProps">
-          <ChemicalFormula :formula="slotProps.data.chemform" />
-        </template>
-      </Column>
-      <Column field="date" header="Date" sortable>
-        <template #body="slotProps">
-          {{ $filters.IsoDatetimeToDate(slotProps.data.date) }}
-        </template>
-      </Column>
-      <Column field="collectionsList" header="Collections" sortable>
-        <template #body="slotProps">
-          <CollectionList :collections="slotProps.data.collections" />
-        </template>
-      </Column>
-      <Column field="creatorsList" header="Creators" sortable>
-        <template #body="slotProps">
-          <Creators :creators="slotProps.data.creators" />
-        </template>
-      </Column>
-      <Column field="nblocks" header="# of blocks" sortable> ></Column>
-
-      <!-- <template #expansion="slotProps">
-        <div class="p-4">
-          <h5>Test Expandable {{ slotProps.data.item_id }}</h5>
-        </div>
-      </template> -->
-    </DataTable>
-  </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";
-import IconField from "primevue/iconfield";
-import InputIcon from "primevue/inputicon";
-import InputText from "primevue/inputtext";
-import { FilterMatchMode, FilterOperator } from "@primevue/core/api";
-import "primeicons/primeicons.css";
-
-import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
-import FormattedItemName from "@/components/FormattedItemName";
-import ChemicalFormula from "@/components/ChemicalFormula";
-import CollectionList from "@/components/CollectionList";
-import Creators from "@/components/Creators";
-
-export default {
-  components: {
-    CreateItemModal,
-    BatchCreateItemModal,
-    AddToCollectionModal,
-    DataTable,
-    Column,
-    IconField,
-    InputIcon,
-    InputText,
-    FormattedItemName,
-    ChemicalFormula,
-    CollectionList,
-    Creators,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      batchCreateItemModalIsOpen: false,
-      addToCollectionModalIsOpen: false,
-      isSampleFetchError: false,
-      itemsSelected: [],
-      expandedRows: [],
-      availableColumns: [
-        { field: "item_id", header: "ID" },
-        { field: "type", header: "Type" },
-        { field: "name", header: "Sample name" },
-        { field: "chemform", header: "Formula" },
-        { field: "date", header: "Date" },
-        {
-          field: "collections",
-          header: "Collections",
-        },
-        { field: "creators", header: "Creators" },
-        { field: "nblocks", header: "# of blocks" },
-      ],
-      filters: {
-        global: { value: null },
-        item_id: {
-          operator: FilterOperator.AND,
-          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
-        },
-        type: {
-          operator: FilterOperator.AND,
-          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
-        },
-      },
-    };
-  },
-  computed: {
-    samplesWithComputedFields() {
-      return this.$store.state.sample_list.map((sample) => ({
-        ...sample,
-        collectionsList: sample.collections.map((collection) => collection.collection_id).join(" "),
-        creatorsList: sample.creators.map((creator) => creator.display_name).join(" "),
-      }));
-    },
-    samples() {
-      return this.samplesWithComputedFields;
-    },
-  },
-  mounted() {
-    this.getSamples();
-  },
-  methods: {
-    onFilter: function (event) {
-      console.log(event.filteredValue);
-    },
-    goToEditPage(event) {
-      const item_id = event.data.item_id;
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    getSamples() {
-      getSampleList()
-        .then(() => {
-          console.log("sample list received!");
-        })
-        .catch(() => {
-          this.isSampleFetchError = true;
-        });
-    },
-    applyFilter() {
-      this.gridOptions.api.setQuickFilter(this.searchValue);
-    },
-    onSelectionChanged(event) {
-      this.itemsSelected = event.api.getSelectedRows();
-    },
-    deleteSelectedItems() {
-      const idsSelected = this.itemsSelected.map((x) => x.item_id);
-      if (
-        confirm(
-          `Are you sure you want to delete ${this.itemsSelected.length} selected items (${idsSelected})?`,
-        )
-      ) {
-        idsSelected.forEach((item_id) => {
-          deleteSample(item_id);
-        });
-        this.itemsSelected = [];
-      }
-    },
-    refreshDataTable() {
-      this.getSamples();
-    },
-  },
-};
-</script>
-
-<style>
-.customize-table .ag-header {
-  font-size: 1rem;
-}
-
-.p-datatable-column-header-content .p-datatable-sort-icon {
-  visibility: hidden !important;
-}
-.p-datatable-column-header-content:hover .p-datatable-sort-icon {
-  visibility: visible !important;
-}
-
-.button-group > * {
-  display: flex;
-  gap: 0.5em;
-}
-</style>
diff --git a/webapp/src/views/SamplePrime.vue b/webapp/src/views/SamplePrime.vue
deleted file mode 100644
index cb4769bec..000000000
--- a/webapp/src/views/SamplePrime.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <SampleTablePrime />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import SampleTablePrime from "@/components/SampleTablePrime";
-
-export default {
-  name: "Samples",
-  components: {
-    Navbar,
-    SampleTablePrime,
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
diff --git a/webapp/src/views/SamplesNext.vue b/webapp/src/views/SamplesNext.vue
deleted file mode 100644
index 0be36955f..000000000
--- a/webapp/src/views/SamplesNext.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createItemModalIsOpen = true">Add an item</button>
-        <button class="btn btn-default ml-2" @click="BatchCreateItemModalIsOpen = true">
-          Add batch of samples
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <FancySampleTable />
-      </div>
-    </div>
-  </div>
-  <CreateItemModal v-model="createItemModalIsOpen" />
-  <BatchCreateItemModal v-model="BatchCreateItemModalIsOpen" />
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import FancySampleTable from "@/components/FancySampleTable";
-import CreateItemModal from "@/components/CreateItemModal";
-import BatchCreateItemModal from "@/components/BatchCreateItemModal";
-
-export default {
-  name: "Samples",
-  components: {
-    Navbar,
-    FancySampleTable,
-    CreateItemModal,
-    BatchCreateItemModal,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      BatchCreateItemModalIsOpen: false,
-    };
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>

From 9d3e8142f063c18f5516988ae54c7de1c310f220 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Mon, 16 Sep 2024 13:17:53 +0200
Subject: [PATCH 10/19] Re-add old components to run cypress e2e tests on /old
 routes

Fix editPage.cy e2e test

Fix NavbarTest.cy component test

Fix NavbarTest.cy component test
---
 webapp/cypress/component/NavbarTest.cy.jsx    |   6 +-
 webapp/cypress/e2e/batchSampleFeature.cy.js   |  44 ++++---
 webapp/cypress/e2e/editPage.cy.js             |  14 ++-
 webapp/cypress/e2e/equipment.cy.js            |  14 +--
 webapp/cypress/e2e/sampleTablePage.cy.js      |   8 +-
 webapp/cypress/support/commands.js            |   2 +-
 .../src/components/CollectionInformation.vue  |   3 -
 webapp/src/components/DynamicDataTable.vue    |   1 +
 webapp/src/components/OldEquipmentTable.vue   | 105 ++++++++++++++++
 webapp/src/components/OldSampleTable.vue      | 116 ++++++++++++++++++
 webapp/src/router/index.js                    |  15 +++
 webapp/src/views/OldEquipments.vue            |  53 ++++++++
 webapp/src/views/OldSamples.vue               |  67 ++++++++++
 13 files changed, 408 insertions(+), 40 deletions(-)
 create mode 100644 webapp/src/components/OldEquipmentTable.vue
 create mode 100644 webapp/src/components/OldSampleTable.vue
 create mode 100644 webapp/src/views/OldEquipments.vue
 create mode 100644 webapp/src/views/OldSamples.vue

diff --git a/webapp/cypress/component/NavbarTest.cy.jsx b/webapp/cypress/component/NavbarTest.cy.jsx
index 0a009b297..a928b7629 100644
--- a/webapp/cypress/component/NavbarTest.cy.jsx
+++ b/webapp/cypress/component/NavbarTest.cy.jsx
@@ -21,7 +21,7 @@ describe("Navbar", () => {
         { path: "/samples", name: "Samples" },
         { path: "/collections", name: "Collections" },
         { path: "/starting-materials", name: "Inventory" },
-        { path: "/equipment", name: "Equipment" },
+        { path: "/equipments", name: "Equipment" },
         { path: "/item-graph", name: "GraphView" },
       ],
     });
@@ -91,7 +91,7 @@ describe("Navbar", () => {
       cy.contains("Samples").should("have.attr", "href", "/samples");
       cy.contains("Collections").should("have.attr", "href", "/collections");
       cy.contains("Inventory").should("have.attr", "href", "/starting-materials");
-      cy.contains("Equipment").should("have.attr", "href", "/equipment");
+      cy.contains("Equipment").should("have.attr", "href", "/equipments");
       cy.contains("Graph View").should("have.attr", "href", "/item-graph");
     });
   });
@@ -116,7 +116,7 @@ describe("Navbar", () => {
     cy.url().should("include", "/starting-materials");
 
     cy.contains("Equipment").click();
-    cy.url().should("include", "/equipment");
+    cy.url().should("include", "/equipments");
 
     cy.contains("Graph View").click();
     cy.url().should("include", "/item-graph");
diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js
index c01802dc1..fdb8c98e4 100644
--- a/webapp/cypress/e2e/batchSampleFeature.cy.js
+++ b/webapp/cypress/e2e/batchSampleFeature.cy.js
@@ -70,18 +70,18 @@ let sample_ids = [
 ];
 
 before(() => {
-  cy.visit("/");
+  cy.visit("/old-sample");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 after(() => {
-  cy.visit("/");
+  cy.visit("/old-sample");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 describe("Batch sample creation", () => {
   beforeEach(() => {
-    cy.visit("/");
+    cy.visit("/old-sample");
   });
   it("Adds 3 valid samples", () => {
     cy.contains("Add batch of items").click();
@@ -162,7 +162,8 @@ describe("Batch sample creation", () => {
     cy.get(".datablock-content div").first().type("a comment is added here.");
 
     cy.get(".fa-save").click();
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
   });
 
   it("modifies some data in the second sample", () => {
@@ -185,7 +186,8 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).type("100");
 
     cy.get(".fa-save").click();
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
   });
 
   it("makes samples copied from others", () => {
@@ -223,7 +225,8 @@ describe("Batch sample creation", () => {
     cy.findByLabelText("Name").should("have.value", "a copied sample");
     cy.findByText("this is a description of baseA.");
     cy.findByText("a comment is added here.");
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
 
     cy.contains(/^baseB_copy$/).click();
     cy.findByText("this is a description of baseB.");
@@ -236,7 +239,8 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input")
       .eq(0)
       .should("have.value", "100");
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
 
     cy.findByText("baseB_copy2").click();
     cy.findByText("this is a description of baseB.");
@@ -249,7 +253,8 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input")
       .eq(0)
       .should("have.value", "100");
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
   });
 
   it("creates samples using components", () => {
@@ -324,7 +329,8 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information table").contains("component2");
     cy.get("#synthesis-information tbody tr:nth-of-type(1) input").eq(0).should("have.value", "");
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).should("have.value", "");
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
 
     cy.contains("test102").click();
     cy.findByLabelText("Name").should(
@@ -337,7 +343,8 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(1) input").eq(0).should("have.value", "");
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).should("have.value", "");
     cy.findByText("a comment is added here.");
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
 
     cy.contains("test103").click();
     cy.findByLabelText("Name").should(
@@ -370,7 +377,8 @@ describe("Batch sample creation", () => {
 
     cy.findByText("a comment is added here.");
     cy.findByText("a second comment is added here.");
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
 
     cy.contains("test104").click();
     cy.findByLabelText("Name").should(
@@ -412,7 +420,8 @@ describe("Batch sample creation", () => {
     cy.findByText("a comment is added here.");
     cy.findByText("a second comment is added here.");
 
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
   });
 
   it("uses the template id", () => {
@@ -539,7 +548,8 @@ describe("Batch sample creation", () => {
 
       cy.findByText("a comment is added here.");
       cy.findByText("a second comment is added here.");
-      cy.findByText("Home").click();
+      // cy.findByText("Home").click();
+      cy.visit("/old-sample");
     }
 
     checkCreatedSample("test_1");
@@ -645,7 +655,8 @@ describe("Batch sample creation", () => {
 
       cy.findByText("a comment is added here.");
       cy.findByText("a second comment is added here.");
-      cy.findByText("Home").click();
+      // cy.findByText("Home").click();
+      cy.visit("/old-sample");
     }
 
     cy.verifySample("test1", "name1");
@@ -716,7 +727,7 @@ describe("Batch sample creation", () => {
 
 describe("Batch cell creation", () => {
   beforeEach(() => {
-    cy.visit("/");
+    cy.visit("/old-sample");
   });
 
   it("creates a simple batch of cells", () => {
@@ -841,7 +852,8 @@ describe("Batch cell creation", () => {
 
       cy.get("#neg-electrode-table").contains("comp2");
 
-      cy.findByText("Home").click();
+      // cy.findByText("Home").click();
+      cy.visit("/old-sample");
     }
 
     checkCreatedCell("cell_1");
diff --git a/webapp/cypress/e2e/editPage.cy.js b/webapp/cypress/e2e/editPage.cy.js
index 404c2a47f..6d236c99e 100644
--- a/webapp/cypress/e2e/editPage.cy.js
+++ b/webapp/cypress/e2e/editPage.cy.js
@@ -9,18 +9,18 @@ Cypress.on("window:before:load", (win) => {
 let item_ids = ["editable_sample", "component1", "component2"];
 
 before(() => {
-  cy.visit("/");
+  cy.visit("/old-sample");
   cy.removeAllTestSamples(item_ids, true);
 });
 
 after(() => {
-  cy.visit("/");
+  cy.visit("/old-sample");
   cy.removeAllTestSamples(item_ids, true);
 });
 
 describe("Edit Page", () => {
   beforeEach(() => {
-    cy.visit("/");
+    cy.visit("/old-sample");
   });
 
   it("Loads the main page without any errors", () => {
@@ -51,12 +51,13 @@ describe("Edit Page", () => {
     cy.findByText("Unsaved changes");
     cy.get(".fa-save").click();
     cy.contains("Unsaved changes").should("not.exist");
-    cy.contains("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
 
     cy.findByText("editable_sample");
     cy.findByText("This is a sample name");
     cy.findByText("1990-01-07");
-    cy.get("tbody tr:nth-of-type(3)").contains("NaCoO2"); // sorta check the formula
+    cy.findByText("NaCoO2"); // sorta check the formula
   });
 
   it("adds a chemical formula to component1", () => {
@@ -236,7 +237,8 @@ describe("Edit Page", () => {
     cy.get(".fa-save").click();
     cy.contains("Unsaved changes").should("not.exist");
 
-    cy.findByText("Home").click();
+    // cy.findByText("Home").click();
+    cy.visit("/old-sample");
     cy.get("[data-testid=sample-table] tr:nth-of-type(3) > td:nth-of-type(8)").contains(2); // 2 blocks are present
   });
 });
diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js
index d74ec3ca5..a0fac2b71 100644
--- a/webapp/cypress/e2e/equipment.cy.js
+++ b/webapp/cypress/e2e/equipment.cy.js
@@ -9,24 +9,24 @@ Cypress.on("window:before:load", (win) => {
 let item_ids = ["test_e1", "test_e2", "test_e3", "123equipment", "test_e3_copy"];
 
 before(() => {
-  cy.visit("/equipment");
+  cy.visit("/old-equipment");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/equipment").then(() => {
+  cy.visit("/old-equipment").then(() => {
     cy.get("[data-testid='equipment-table'] > tbody > tr").should("have.length", 0);
   });
 });
 
 after(() => {
-  cy.visit("/equipment");
+  cy.visit("/old-equipment");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/equipment").then(() => {
+  cy.visit("/old-equipment").then(() => {
     cy.get("[data-testid='equipment-table'] > tbody > tr").should("have.length", 0);
   });
 });
 
 describe("Equipment table page", () => {
   beforeEach(() => {
-    cy.visit("/equipment");
+    cy.visit("/old-equipment");
   });
 
   it("Loads the equipment page without any errors", () => {
@@ -113,7 +113,7 @@ describe("Equipment table page", () => {
 
 describe("Equipment edit page", () => {
   beforeEach(() => {
-    cy.visit("/equipment/");
+    cy.visit("/old-equipment/");
   });
 
   it("Checks the equipment edit page", () => {
@@ -135,7 +135,7 @@ describe("Equipment edit page", () => {
     cy.get(".datablock-content div").first().type("a comment is added here.");
 
     cy.get(".fa-save").click();
-    cy.visit("/equipment");
+    cy.visit("/old-equipment");
     cy.verifyEquipment("test_e3", "my inst", "2000-01-01T00:00", "room 101");
   });
 });
diff --git a/webapp/cypress/e2e/sampleTablePage.cy.js b/webapp/cypress/e2e/sampleTablePage.cy.js
index ef45a14d0..e6dec2e23 100644
--- a/webapp/cypress/e2e/sampleTablePage.cy.js
+++ b/webapp/cypress/e2e/sampleTablePage.cy.js
@@ -32,18 +32,18 @@ let sample_ids = [
 ];
 
 before(() => {
-  cy.visit("/");
+  cy.visit("/old-sample");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 after(() => {
-  cy.visit("/");
+  cy.visit("/old-sample");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 describe("Sample table page", () => {
   beforeEach(() => {
-    cy.visit("/");
+    cy.visit("/old-sample");
   });
 
   it("Loads the main page without any errors", () => {
@@ -183,7 +183,7 @@ describe("Sample table page", () => {
 
 describe.only("Advanced sample creation features", () => {
   beforeEach(() => {
-    cy.visit("/");
+    cy.visit("/old-sample");
   });
   it("Adds some valid samples", () => {
     cy.createSample("testA", "the first test sample");
diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js
index 4de1d85ab..f29d4e806 100644
--- a/webapp/cypress/support/commands.js
+++ b/webapp/cypress/support/commands.js
@@ -199,7 +199,7 @@ Cypress.Commands.add("removeAllTestSamples", (item_ids, check_sample_table) => {
     cy.deleteSampleViaAPI(item_id);
   });
   if (check_sample_table) {
-    cy.visit("/").then(() => {
+    cy.visit("/old-sample").then(() => {
       cy.get("[data-testid=sample-table] > tbody > tr").should("have.length", 0);
     });
   }
diff --git a/webapp/src/components/CollectionInformation.vue b/webapp/src/components/CollectionInformation.vue
index f12dacbdd..04660715d 100644
--- a/webapp/src/components/CollectionInformation.vue
+++ b/webapp/src/components/CollectionInformation.vue
@@ -31,13 +31,11 @@
         <CollectionRelationshipVisualization :collection_id="collection_id" />
       </div>
     </div>
-    <FancyCollectionSampleTable :collection_id="collection_id" />
   </div>
 </template>
 
 <script>
 import { createComputedSetterForCollectionField } from "@/field_utils.js";
-import FancyCollectionSampleTable from "@/components/FancyCollectionSampleTable";
 import TinyMceInline from "@/components/TinyMceInline";
 import Creators from "@/components/Creators";
 import CollectionRelationshipVisualization from "@/components/CollectionRelationshipVisualization";
@@ -45,7 +43,6 @@ import CollectionRelationshipVisualization from "@/components/CollectionRelation
 export default {
   components: {
     TinyMceInline,
-    FancyCollectionSampleTable,
     Creators,
     CollectionRelationshipVisualization,
   },
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index ca440016b..47a9633e5 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -7,6 +7,7 @@
     <DataTable
       v-model:filters="filters"
       v-model:selection="itemsSelected"
+      data-testid="sample-table"
       selection-mode="multiple"
       :value="data"
       paginator
diff --git a/webapp/src/components/OldEquipmentTable.vue b/webapp/src/components/OldEquipmentTable.vue
new file mode 100644
index 000000000..2dcfb2eba
--- /dev/null
+++ b/webapp/src/components/OldEquipmentTable.vue
@@ -0,0 +1,105 @@
+<template>
+  <div v-if="isEquipmentFetchError" class="alert alert-danger">
+    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Equipment list could not be
+    retreived.
+  </div>
+  <table class="table table-hover table-sm" data-testid="equipment-table">
+    <thead>
+      <tr>
+        <th scope="col">ID</th>
+        <th scope="col">Name</th>
+        <th class="text-center" scope="col">Date created</th>
+        <th class="text-center" scope="col">Location</th>
+        <th class="text-left" scope="col">Maintainers</th>
+
+        <th scope="col"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="equipment in equipments"
+        :id="equipment.item_id"
+        :key="equipment.item_id"
+        @click.exact="goToEditPage(equipment.item_id)"
+        @click.meta="openEditPageInNewTab(equipment.item_id)"
+        @click.ctrl="openEditPageInNewTab(equipment.item_id)"
+      >
+        <td align="left" class="table-item-id">
+          <FormattedItemName
+            :item_id="equipment.item_id"
+            :item-type="equipment?.type"
+            enable-modified-click
+          />
+        </td>
+        <td align="left">{{ equipment.name }}</td>
+        <td class="text-center">{{ $filters.IsoDatetimeToDate(equipment.date) }}</td>
+        <td class="left">{{ equipment.location }}</td>
+        <td align="center"><Creators :creators="equipment.creators" /></td>
+        <td align="right">
+          <button
+            type="button"
+            class="close"
+            aria-label="delete"
+            @click.stop="deleteEquipment(equipment)"
+          >
+            <span aria-hidden="true" style="color: grey">&times;</span>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import FormattedItemName from "@/components/FormattedItemName";
+import Creators from "@/components/Creators";
+import { getEquipmentList, deleteEquipment } from "@/server_fetch_utils.js";
+import { itemTypes } from "@/resources.js";
+
+export default {
+  components: {
+    FormattedItemName,
+    Creators,
+  },
+  data() {
+    return {
+      isEquipmentFetchError: false,
+      itemTypes: itemTypes,
+    };
+  },
+  computed: {
+    equipments() {
+      return this.$store.state.equipment_list;
+    },
+  },
+  created() {
+    this.getEquipment();
+  },
+  methods: {
+    goToEditPage(item_id) {
+      this.$router.push(`/edit/${item_id}`);
+    },
+    openEditPageInNewTab(item_id) {
+      window.open(`/edit/${item_id}`, "_blank");
+    },
+    getEquipment() {
+      getEquipmentList().catch(() => {
+        this.isEquipmentFetchError = true;
+      });
+    },
+    deleteEquipment(equipment) {
+      if (confirm(`Are you sure you want to delete equipment "${equipment.item_id}"?`)) {
+        console.log("deleting...");
+        deleteEquipment(equipment.item_id);
+      }
+      console.log("delete cancelled...");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.clickable {
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/OldSampleTable.vue b/webapp/src/components/OldSampleTable.vue
new file mode 100644
index 000000000..670331805
--- /dev/null
+++ b/webapp/src/components/OldSampleTable.vue
@@ -0,0 +1,116 @@
+<template>
+  <div v-if="isSampleFetchError" class="alert alert-danger">
+    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Sample list could not be
+    retreived.
+  </div>
+  <table class="table table-hover table-sm" data-testid="sample-table">
+    <thead>
+      <tr>
+        <th scope="col">ID</th>
+        <th scope="col">Type</th>
+        <th scope="col">Sample name</th>
+        <th scope="col">Formula</th>
+        <th class="text-center" scope="col">Date</th>
+        <th scope="col">Collections</th>
+        <th class="text-center" scope="col">Creators</th>
+        <th class="text-center" scope="col"># of blocks</th>
+        <th scope="col"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="sample in samples"
+        :id="sample.item_id"
+        :key="sample.item_id"
+        @click.exact="goToEditPage(sample.item_id)"
+        @click.meta="openEditPageInNewTab(sample.item_id)"
+        @click.ctrl="openEditPageInNewTab(sample.item_id)"
+      >
+        <td align="left" class="table-item-id">
+          <FormattedItemName
+            :item_id="sample.item_id"
+            :item-type="sample?.type"
+            enable-modified-click
+          />
+        </td>
+        <td align="center">{{ itemTypes[sample.type].display }}</td>
+        <td align="left">{{ sample.name }}</td>
+        <td><ChemicalFormula :formula="sample.chemform" /></td>
+        <td class="text-center">{{ $filters.IsoDatetimeToDate(sample.date) }}</td>
+        <td><CollectionList :collections="sample.collections" /></td>
+        <td align="center"><Creators :creators="sample.creators" /></td>
+        <td class="text-right">{{ sample.nblocks }}</td>
+        <td align="right">
+          <button
+            type="button"
+            class="close"
+            aria-label="delete"
+            @click.stop="deleteSample(sample)"
+          >
+            <span aria-hidden="true" style="color: grey">&times;</span>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import ChemicalFormula from "@/components/ChemicalFormula";
+import FormattedItemName from "@/components/FormattedItemName";
+import CollectionList from "@/components/CollectionList";
+import Creators from "@/components/Creators";
+import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
+import { itemTypes } from "@/resources.js";
+
+export default {
+  components: {
+    ChemicalFormula,
+    FormattedItemName,
+    Creators,
+    CollectionList,
+  },
+  data() {
+    return {
+      isSampleFetchError: false,
+      itemTypes: itemTypes,
+    };
+  },
+  computed: {
+    samples() {
+      return this.$store.state.sample_list;
+    },
+  },
+  created() {
+    this.getSamples();
+  },
+  methods: {
+    goToEditPage(item_id) {
+      this.$router.push(`/edit/${item_id}`);
+    },
+    openEditPageInNewTab(item_id) {
+      window.open(`/edit/${item_id}`, "_blank");
+    },
+    // should also check response.OK? And retry if
+    getSamples() {
+      getSampleList().catch(() => {
+        this.isSampleFetchError = true;
+      });
+    },
+    deleteSample(sample) {
+      if (confirm(`Are you sure you want to delete sample "${sample.item_id}"?`)) {
+        console.log("deleting...");
+        deleteSample(sample.item_id);
+      }
+      console.log("delete cancelled...");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.table-item-id {
+  font-size: 1.2em;
+  font-weight: normal;
+}
+</style>
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index c7f635149..8ab4b3e85 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -10,6 +10,9 @@ import ExampleGraph from "@/views/ExampleGraph.vue";
 import ItemGraphPage from "@/views/ItemGraphPage.vue";
 import Admin from "@/views/Admin.vue";
 
+import OldSample from "../views/OldSamples.vue";
+import OldEquipment from "../views/OldEquipments.vue";
+
 const routes = [
   {
     path: "/about",
@@ -74,6 +77,18 @@ const routes = [
     alias: "/",
     component: Admin,
   },
+  {
+    path: "/old-sample",
+    name: "old-sample",
+    alias: "/",
+    component: OldSample,
+  },
+  {
+    path: "/old-equipment",
+    name: "old-equipment",
+    alias: "/",
+    component: OldEquipment,
+  },
 ];
 
 const router = createRouter({
diff --git a/webapp/src/views/OldEquipments.vue b/webapp/src/views/OldEquipments.vue
new file mode 100644
index 000000000..a50ae25ea
--- /dev/null
+++ b/webapp/src/views/OldEquipments.vue
@@ -0,0 +1,53 @@
+<template>
+  <Navbar />
+
+  <div id="tableContainer" class="container">
+    <div class="row">
+      <div class="col-sm-12 mx-auto mb-3">
+        <button class="btn btn-default" @click="createEquipmentModalIsOpen = true">
+          Add an item
+        </button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 mx-auto">
+        <OldEquipmentTable />
+      </div>
+    </div>
+  </div>
+  <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
+</template>
+
+<script>
+import Navbar from "@/components/Navbar";
+import OldEquipmentTable from "@/components/OldEquipmentTable";
+import CreateEquipmentModal from "@/components/CreateEquipmentModal";
+
+export default {
+  name: "Equipments",
+  components: {
+    Navbar,
+    OldEquipmentTable,
+    CreateEquipmentModal,
+  },
+  data() {
+    return {
+      createEquipmentModalIsOpen: false,
+    };
+  },
+};
+</script>
+
+<style scoped>
+#tableContainer.overlay:after {
+  content: "";
+  display: block;
+  position: fixed; /* could also be absolute */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/webapp/src/views/OldSamples.vue b/webapp/src/views/OldSamples.vue
new file mode 100644
index 000000000..2f2a4d9ef
--- /dev/null
+++ b/webapp/src/views/OldSamples.vue
@@ -0,0 +1,67 @@
+<template>
+  <Navbar />
+
+  <div id="tableContainer" class="container">
+    <div class="row">
+      <div class="col-sm-12 mx-auto mb-3">
+        <button class="btn btn-default" @click="createItemModalIsOpen = true">Add an item</button>
+        <button class="btn btn-default ml-2" @click="batchCreateItemModalIsOpen = true">
+          Add batch of items
+        </button>
+        <button class="btn btn-default ml-2" @click="qrScannerModalisOpen = true">
+          <font-awesome-icon icon="qrcode" /> Scan QR
+        </button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 mx-auto">
+        <OldSampleTable />
+      </div>
+    </div>
+  </div>
+  <CreateItemModal v-model="createItemModalIsOpen" :allowed-types="allowedTypes" />
+  <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
+  <QRScannerModal v-model="qrScannerModalisOpen" />
+</template>
+
+<script>
+import Navbar from "@/components/Navbar";
+import OldSampleTable from "@/components/OldSampleTable";
+import CreateItemModal from "@/components/CreateItemModal";
+import BatchCreateItemModal from "@/components/BatchCreateItemModal";
+import QRScannerModal from "@/components/QRScannerModal";
+import { SAMPLE_TABLE_TYPES } from "@/resources.js";
+
+export default {
+  name: "Samples",
+  components: {
+    Navbar,
+    OldSampleTable,
+    CreateItemModal,
+    BatchCreateItemModal,
+    QRScannerModal,
+  },
+  data() {
+    return {
+      createItemModalIsOpen: false,
+      batchCreateItemModalIsOpen: false,
+      qrScannerModalisOpen: false,
+      allowedTypes: SAMPLE_TABLE_TYPES,
+    };
+  },
+};
+</script>
+
+<style scoped>
+#tableContainer.overlay:after {
+  content: "";
+  display: block;
+  position: fixed; /* could also be absolute */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>

From 57cdaf0d5e11e3c41ab679db8b5bce17d12cdc6e Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Tue, 17 Sep 2024 10:47:22 +0200
Subject: [PATCH 11/19] Update e2e cypress tests to work with new datatable

---
 webapp/cypress/e2e/batchSampleFeature.cy.js | 44 ++++++++-------------
 webapp/cypress/e2e/editPage.cy.js           | 12 +++---
 webapp/cypress/e2e/equipment.cy.js          | 14 +++----
 webapp/cypress/e2e/sampleTablePage.cy.js    |  8 ++--
 webapp/cypress/support/commands.js          |  2 +-
 5 files changed, 33 insertions(+), 47 deletions(-)

diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js
index fdb8c98e4..c01802dc1 100644
--- a/webapp/cypress/e2e/batchSampleFeature.cy.js
+++ b/webapp/cypress/e2e/batchSampleFeature.cy.js
@@ -70,18 +70,18 @@ let sample_ids = [
 ];
 
 before(() => {
-  cy.visit("/old-sample");
+  cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 after(() => {
-  cy.visit("/old-sample");
+  cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 describe("Batch sample creation", () => {
   beforeEach(() => {
-    cy.visit("/old-sample");
+    cy.visit("/");
   });
   it("Adds 3 valid samples", () => {
     cy.contains("Add batch of items").click();
@@ -162,8 +162,7 @@ describe("Batch sample creation", () => {
     cy.get(".datablock-content div").first().type("a comment is added here.");
 
     cy.get(".fa-save").click();
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
   });
 
   it("modifies some data in the second sample", () => {
@@ -186,8 +185,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).type("100");
 
     cy.get(".fa-save").click();
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
   });
 
   it("makes samples copied from others", () => {
@@ -225,8 +223,7 @@ describe("Batch sample creation", () => {
     cy.findByLabelText("Name").should("have.value", "a copied sample");
     cy.findByText("this is a description of baseA.");
     cy.findByText("a comment is added here.");
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
 
     cy.contains(/^baseB_copy$/).click();
     cy.findByText("this is a description of baseB.");
@@ -239,8 +236,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input")
       .eq(0)
       .should("have.value", "100");
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
 
     cy.findByText("baseB_copy2").click();
     cy.findByText("this is a description of baseB.");
@@ -253,8 +249,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input")
       .eq(0)
       .should("have.value", "100");
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
   });
 
   it("creates samples using components", () => {
@@ -329,8 +324,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information table").contains("component2");
     cy.get("#synthesis-information tbody tr:nth-of-type(1) input").eq(0).should("have.value", "");
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).should("have.value", "");
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
 
     cy.contains("test102").click();
     cy.findByLabelText("Name").should(
@@ -343,8 +337,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(1) input").eq(0).should("have.value", "");
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).should("have.value", "");
     cy.findByText("a comment is added here.");
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
 
     cy.contains("test103").click();
     cy.findByLabelText("Name").should(
@@ -377,8 +370,7 @@ describe("Batch sample creation", () => {
 
     cy.findByText("a comment is added here.");
     cy.findByText("a second comment is added here.");
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
 
     cy.contains("test104").click();
     cy.findByLabelText("Name").should(
@@ -420,8 +412,7 @@ describe("Batch sample creation", () => {
     cy.findByText("a comment is added here.");
     cy.findByText("a second comment is added here.");
 
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
   });
 
   it("uses the template id", () => {
@@ -548,8 +539,7 @@ describe("Batch sample creation", () => {
 
       cy.findByText("a comment is added here.");
       cy.findByText("a second comment is added here.");
-      // cy.findByText("Home").click();
-      cy.visit("/old-sample");
+      cy.findByText("Home").click();
     }
 
     checkCreatedSample("test_1");
@@ -655,8 +645,7 @@ describe("Batch sample creation", () => {
 
       cy.findByText("a comment is added here.");
       cy.findByText("a second comment is added here.");
-      // cy.findByText("Home").click();
-      cy.visit("/old-sample");
+      cy.findByText("Home").click();
     }
 
     cy.verifySample("test1", "name1");
@@ -727,7 +716,7 @@ describe("Batch sample creation", () => {
 
 describe("Batch cell creation", () => {
   beforeEach(() => {
-    cy.visit("/old-sample");
+    cy.visit("/");
   });
 
   it("creates a simple batch of cells", () => {
@@ -852,8 +841,7 @@ describe("Batch cell creation", () => {
 
       cy.get("#neg-electrode-table").contains("comp2");
 
-      // cy.findByText("Home").click();
-      cy.visit("/old-sample");
+      cy.findByText("Home").click();
     }
 
     checkCreatedCell("cell_1");
diff --git a/webapp/cypress/e2e/editPage.cy.js b/webapp/cypress/e2e/editPage.cy.js
index 6d236c99e..28aac74db 100644
--- a/webapp/cypress/e2e/editPage.cy.js
+++ b/webapp/cypress/e2e/editPage.cy.js
@@ -9,18 +9,18 @@ Cypress.on("window:before:load", (win) => {
 let item_ids = ["editable_sample", "component1", "component2"];
 
 before(() => {
-  cy.visit("/old-sample");
+  cy.visit("/");
   cy.removeAllTestSamples(item_ids, true);
 });
 
 after(() => {
-  cy.visit("/old-sample");
+  cy.visit("/");
   cy.removeAllTestSamples(item_ids, true);
 });
 
 describe("Edit Page", () => {
   beforeEach(() => {
-    cy.visit("/old-sample");
+    cy.visit("/");
   });
 
   it("Loads the main page without any errors", () => {
@@ -51,8 +51,7 @@ describe("Edit Page", () => {
     cy.findByText("Unsaved changes");
     cy.get(".fa-save").click();
     cy.contains("Unsaved changes").should("not.exist");
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
 
     cy.findByText("editable_sample");
     cy.findByText("This is a sample name");
@@ -237,8 +236,7 @@ describe("Edit Page", () => {
     cy.get(".fa-save").click();
     cy.contains("Unsaved changes").should("not.exist");
 
-    // cy.findByText("Home").click();
-    cy.visit("/old-sample");
+    cy.findByText("Home").click();
     cy.get("[data-testid=sample-table] tr:nth-of-type(3) > td:nth-of-type(8)").contains(2); // 2 blocks are present
   });
 });
diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js
index a0fac2b71..d0b8b3445 100644
--- a/webapp/cypress/e2e/equipment.cy.js
+++ b/webapp/cypress/e2e/equipment.cy.js
@@ -9,24 +9,24 @@ Cypress.on("window:before:load", (win) => {
 let item_ids = ["test_e1", "test_e2", "test_e3", "123equipment", "test_e3_copy"];
 
 before(() => {
-  cy.visit("/old-equipment");
+  cy.visit("/equipments");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/old-equipment").then(() => {
+  cy.visit("/equipments").then(() => {
     cy.get("[data-testid='equipment-table'] > tbody > tr").should("have.length", 0);
   });
 });
 
 after(() => {
-  cy.visit("/old-equipment");
+  cy.visit("/equipments");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/old-equipment").then(() => {
+  cy.visit("/equipments").then(() => {
     cy.get("[data-testid='equipment-table'] > tbody > tr").should("have.length", 0);
   });
 });
 
 describe("Equipment table page", () => {
   beforeEach(() => {
-    cy.visit("/old-equipment");
+    cy.visit("/equipments");
   });
 
   it("Loads the equipment page without any errors", () => {
@@ -113,7 +113,7 @@ describe("Equipment table page", () => {
 
 describe("Equipment edit page", () => {
   beforeEach(() => {
-    cy.visit("/old-equipment/");
+    cy.visit("/equipments");
   });
 
   it("Checks the equipment edit page", () => {
@@ -135,7 +135,7 @@ describe("Equipment edit page", () => {
     cy.get(".datablock-content div").first().type("a comment is added here.");
 
     cy.get(".fa-save").click();
-    cy.visit("/old-equipment");
+    cy.visit("/equipments");
     cy.verifyEquipment("test_e3", "my inst", "2000-01-01T00:00", "room 101");
   });
 });
diff --git a/webapp/cypress/e2e/sampleTablePage.cy.js b/webapp/cypress/e2e/sampleTablePage.cy.js
index e6dec2e23..ef45a14d0 100644
--- a/webapp/cypress/e2e/sampleTablePage.cy.js
+++ b/webapp/cypress/e2e/sampleTablePage.cy.js
@@ -32,18 +32,18 @@ let sample_ids = [
 ];
 
 before(() => {
-  cy.visit("/old-sample");
+  cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 after(() => {
-  cy.visit("/old-sample");
+  cy.visit("/");
   cy.removeAllTestSamples(sample_ids, true);
 });
 
 describe("Sample table page", () => {
   beforeEach(() => {
-    cy.visit("/old-sample");
+    cy.visit("/");
   });
 
   it("Loads the main page without any errors", () => {
@@ -183,7 +183,7 @@ describe("Sample table page", () => {
 
 describe.only("Advanced sample creation features", () => {
   beforeEach(() => {
-    cy.visit("/old-sample");
+    cy.visit("/");
   });
   it("Adds some valid samples", () => {
     cy.createSample("testA", "the first test sample");
diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js
index f29d4e806..4de1d85ab 100644
--- a/webapp/cypress/support/commands.js
+++ b/webapp/cypress/support/commands.js
@@ -199,7 +199,7 @@ Cypress.Commands.add("removeAllTestSamples", (item_ids, check_sample_table) => {
     cy.deleteSampleViaAPI(item_id);
   });
   if (check_sample_table) {
-    cy.visit("/old-sample").then(() => {
+    cy.visit("/").then(() => {
       cy.get("[data-testid=sample-table] > tbody > tr").should("have.length", 0);
     });
   }

From 051a4a72436ae2b6b010a916fb84ad810965b2e4 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Wed, 18 Sep 2024 09:45:06 +0200
Subject: [PATCH 12/19] Update cypress e2e tests to run on the new DataTable
 and remove /old routes

---
 webapp/cypress.config.ts                      |   1 +
 webapp/cypress/e2e/batchSampleFeature.cy.js   |  19 ++-
 webapp/cypress/e2e/editPage.cy.js             |  11 +-
 webapp/cypress/e2e/equipment.cy.js            |  19 ++-
 webapp/cypress/support/commands.js            |  32 +++--
 .../src/components/AddToCollectionModal.vue   |   2 +-
 .../src/components/DynamicButtonDataTable.vue |   2 +
 webapp/src/components/DynamicDataTable.vue    |  18 ++-
 webapp/src/components/OldEquipmentTable.vue   | 105 ----------------
 webapp/src/components/OldSampleTable.vue      | 116 ------------------
 webapp/src/components/SamplesTable.vue        |   7 +-
 webapp/src/views/OldEquipments.vue            |  53 --------
 webapp/src/views/OldSamples.vue               |  67 ----------
 13 files changed, 81 insertions(+), 371 deletions(-)
 delete mode 100644 webapp/src/components/OldEquipmentTable.vue
 delete mode 100644 webapp/src/components/OldSampleTable.vue
 delete mode 100644 webapp/src/views/OldEquipments.vue
 delete mode 100644 webapp/src/views/OldSamples.vue

diff --git a/webapp/cypress.config.ts b/webapp/cypress.config.ts
index 1c8625e90..f79ca653b 100644
--- a/webapp/cypress.config.ts
+++ b/webapp/cypress.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
     baseUrl: "http://localhost:8080",
     apiUrl: "http://localhost:5001",
     experimentalMemoryManagement: true,
+    numTestsKeptInMemory: 0,
     defaultCommandTimeout: 10000,
   },
   component: {
diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js
index c01802dc1..2a4d7cc27 100644
--- a/webapp/cypress/e2e/batchSampleFeature.cy.js
+++ b/webapp/cypress/e2e/batchSampleFeature.cy.js
@@ -103,9 +103,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("testB", "this sample has a name");
     cy.verifySample("testC");
 
-    cy.deleteSample("testA");
-    cy.deleteSample("testB");
-    cy.deleteSample("testC");
+    cy.deleteSamples(["testA", "testB", "testC"]);
   });
 
   it("adds two valid samples", () => {
@@ -154,6 +152,7 @@ describe("Batch sample creation", () => {
   });
 
   it("modifies some data in the first sample", () => {
+    cy.get('[data-testid="search-input"]').type("baseA");
     cy.findByText("baseA").click();
     cy.findByLabelText("Description").type("this is a description of baseA.");
     cy.findByText("Add a block").click();
@@ -166,6 +165,7 @@ describe("Batch sample creation", () => {
   });
 
   it("modifies some data in the second sample", () => {
+    cy.get('[data-testid="search-input"]').type("baseB");
     cy.findByText("baseB").click();
     cy.findByLabelText("Description").type("this is a description of baseB.");
     cy.findByText("Add a block").click();
@@ -437,9 +437,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test_2", "testing 1,2");
     cy.verifySample("test_3", "testing 1,2,3");
 
-    cy.deleteSample("test_1");
-    cy.deleteSample("test_2");
-    cy.deleteSample("test_3");
+    cy.deleteSamples(["test_1", "test_2", "test_3"]);
   });
 
   it("uses the template id, name, and date", () => {
@@ -462,9 +460,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test_6", "this is the test sample #6", "1980-02-01T05:35");
     cy.verifySample("test_7", "this is the test sample #7", "1980-02-01T05:35");
 
-    cy.deleteSample("test_5");
-    cy.deleteSample("test_6");
-    cy.deleteSample("test_7");
+    cy.deleteSamples(["test_5", "test_6", "test_7"]);
   });
 
   it("uses the template id, name, date, copyFrom, and components", () => {
@@ -522,6 +518,7 @@ describe("Batch sample creation", () => {
     cy.get("[data-testid=batch-modal-container]").contains("Close").click();
 
     function checkCreatedSample(item_id) {
+      cy.get('[data-testid="search-input"]').type(item_id);
       cy.contains(item_id).click();
       cy.contains("this is a description of baseB.");
       cy.get("#synthesis-information table").contains("component3");
@@ -652,8 +649,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test2", "name2");
     checkCreatedSample("test1");
     checkCreatedSample("test2");
-    cy.deleteSample("test1");
-    cy.deleteSample("test2");
+    cy.deleteSamples(["test1", "test2"]);
   });
 
   it("checks errors on the row", () => {
@@ -832,6 +828,7 @@ describe("Batch cell creation", () => {
     cy.verifySample("cell_3", "this is the test cell #3", "1980-02-01T23:59");
 
     function checkCreatedCell(item_id) {
+      cy.get('[data-testid="search-input"]').type(item_id);
       cy.contains(item_id).click();
       cy.get("#pos-electrode-table").contains("comp1");
       cy.get("#pos-electrode-table").contains("tagged");
diff --git a/webapp/cypress/e2e/editPage.cy.js b/webapp/cypress/e2e/editPage.cy.js
index 28aac74db..2b08f3f1f 100644
--- a/webapp/cypress/e2e/editPage.cy.js
+++ b/webapp/cypress/e2e/editPage.cy.js
@@ -35,7 +35,7 @@ describe("Edit Page", () => {
 
   it("Adds a valid sample", () => {
     cy.createSample("editable_sample", "This is a sample name", "1990-01-07T00:00");
-    cy.get("tr>td").eq(7).contains(0); // 0 blocks are present
+    cy.get("tr>td").eq(8).contains(0); // 0 blocks are present
   });
 
   it("Add some more samples, to use as components", () => {
@@ -44,6 +44,7 @@ describe("Edit Page", () => {
   });
 
   it("Checks editing the sample edit page", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
     cy.findByLabelText("Chemical formula").type("NaCoO2", { force: true });
@@ -53,6 +54,7 @@ describe("Edit Page", () => {
     cy.contains("Unsaved changes").should("not.exist");
     cy.findByText("Home").click();
 
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample");
     cy.findByText("This is a sample name");
     cy.findByText("1990-01-07");
@@ -69,6 +71,7 @@ describe("Edit Page", () => {
   });
 
   it("adds some synthesis information", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information .vs__search").first().type("component1");
     cy.get(".vs__dropdown-menu").contains(".badge", "component1").click();
@@ -122,6 +125,7 @@ describe("Edit Page", () => {
   });
 
   it("deletes synthesis components and re-adds them", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) .close").click();
     cy.get("#synthesis-information tbody > tr").should("have.length", 2);
@@ -160,6 +164,7 @@ describe("Edit Page", () => {
   });
 
   it("tries to add a non-numeric value into quantity", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) td:nth-of-type(2) input").type(
       "100.001",
@@ -196,6 +201,7 @@ describe("Edit Page", () => {
   });
 
   it("Add some blocks to the sample and checks unsaved warning behavior", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
 
@@ -237,6 +243,7 @@ describe("Edit Page", () => {
     cy.contains("Unsaved changes").should("not.exist");
 
     cy.findByText("Home").click();
-    cy.get("[data-testid=sample-table] tr:nth-of-type(3) > td:nth-of-type(8)").contains(2); // 2 blocks are present
+    cy.get('[data-testid="search-input"]').type("editable_sample");
+    cy.get("[data-testid=sample-table] tr:nth-of-type(1) > td:nth-of-type(9)").contains(2); // 2 blocks are present
   });
 });
diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js
index d0b8b3445..410b2ce38 100644
--- a/webapp/cypress/e2e/equipment.cy.js
+++ b/webapp/cypress/e2e/equipment.cy.js
@@ -73,7 +73,10 @@ describe("Equipment table page", () => {
 
   it("Attempts to Add an item with the same name", () => {
     cy.findByText("Add an item").click();
-    cy.findByLabelText("ID:").type("test_e3");
+    cy.get('[data-testid="create-equipment-form"]').within(() => {
+      cy.findByText("Add equipment").should("exist");
+      cy.findByLabelText("ID:").type("test_e3");
+    });
 
     cy.contains("already in use").should("exist");
     cy.get(".form-error a").contains("test_e3");
@@ -82,7 +85,19 @@ describe("Equipment table page", () => {
   });
 
   it("Deletes an item", function () {
-    cy.get("tr#test_e2 button.close").click();
+    cy.get("[data-testid=equipment-table]")
+      .contains(new RegExp("^" + "test_e2" + "$", "g"))
+      .parents("tr")
+      .find("input[type='checkbox']")
+      .click();
+
+    cy.get("[data-testid=delete-selected-button]").click();
+
+    cy.on("window:confirm", (text) => {
+      expect(text).to.contains("test_e2");
+      return true;
+    });
+
     cy.contains("test_e2").should("not.exist");
 
     cy.request({ url: `${API_URL}/get-item-data/test_e2`, failOnStatusCode: false }).then(
diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js
index 4de1d85ab..2aaf92865 100644
--- a/webapp/cypress/support/commands.js
+++ b/webapp/cypress/support/commands.js
@@ -68,17 +68,28 @@ Cypress.Commands.add("verifySample", (item_id, name = null, date = null) => {
     });
 });
 
-Cypress.Commands.add("deleteSample", (item_id) => {
-  cy.log("search for and delete: " + item_id);
-  cy.get("[data-testid=sample-table]")
-    .contains(new RegExp("^" + item_id + "$", "g"))
-    .parents("tr")
-    .find("button.close")
-    .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.get("[data-testid=sample-table]")
-    .contains(new RegExp("^" + item_id + "$", "g"))
-    .should("not.exist");
+  cy.get("[data-testid=delete-selected-button]").click();
+
+  cy.on("window:confirm", (text) => {
+    expect(text).to.contains(items_id);
+    return true;
+  });
+
+  items_id.forEach((item_id) => {
+    cy.get("[data-testid=sample-table]")
+      .contains(new RegExp("^" + item_id + "$", "g"))
+      .should("not.exist");
+  });
 });
 
 Cypress.Commands.add("deleteSampleViaAPI", (item_id) => {
@@ -103,6 +114,7 @@ Cypress.Commands.add("searchAndSelectItem", (search_text, selector, clickPlus =
 
 Cypress.Commands.add("createEquipment", (item_id, name = null, date = null) => {
   cy.findByText("Add an item").click();
+
   cy.get('[data-testid="create-equipment-form"]').within(() => {
     cy.findByText("Add equipment").should("exist");
     cy.findByLabelText("ID:").type(item_id);
diff --git a/webapp/src/components/AddToCollectionModal.vue b/webapp/src/components/AddToCollectionModal.vue
index a4418cf95..a8086f103 100644
--- a/webapp/src/components/AddToCollectionModal.vue
+++ b/webapp/src/components/AddToCollectionModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="modal-enclosure" data-testid="create-equipment-form" @submit.prevent="submitForm">
+  <form class="modal-enclosure" data-testid="add-to-collection-form" @submit.prevent="submitForm">
     <Modal :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
       <template #header> Add to collections </template>
       <template #body>
diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue
index ae9c18356..58c425a82 100644
--- a/webapp/src/components/DynamicButtonDataTable.vue
+++ b/webapp/src/components/DynamicButtonDataTable.vue
@@ -57,6 +57,7 @@
       <button
         v-if="itemsSelected.length > 0"
         class="btn btn-default ml-2"
+        data-testid="delete-selected-button"
         :disabled="itemsSelected.length === 0"
         @click="confirmDeletion"
       >
@@ -69,6 +70,7 @@
         </InputIcon>
         <InputText
           v-model="localFilters.global.value"
+          data-testid="search-input"
           placeholder="Search"
           @input="updateFilters"
         />
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index 47a9633e5..0e6c00f42 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -7,9 +7,9 @@
     <DataTable
       v-model:filters="filters"
       v-model:selection="itemsSelected"
-      data-testid="sample-table"
       selection-mode="multiple"
       :value="data"
+      :data-testid="computedDataTestId"
       paginator
       :rows="20"
       :rows-per-page-options="[10, 20, 50, 100]"
@@ -169,15 +169,27 @@ export default {
       allowedTypes: INVENTORY_TABLE_TYPES,
     };
   },
+  computed: {
+    computedDataTestId() {
+      const dataTestIdMap = {
+        samples: "sample-table",
+        collections: "collection-table",
+        startingMaterials: "starting-material-table",
+        equipments: "equipment-table",
+      };
+      return dataTestIdMap[this.dataType] || "default-table";
+    },
+  },
   created() {
     this.editable_inventory = EDITABLE_INVENTORY;
   },
+
   methods: {
     goToEditPage(event) {
       const { item_id, collection_id } = event.data;
 
       if (item_id) {
-        window.open(`/edit/${item_id}`, "_blank");
+        this.$router.push(`/edit/${item_id}`);
       } else if (collection_id) {
         window.open(`/collections/${collection_id}`, "_blank");
       }
@@ -187,7 +199,7 @@ export default {
         FormattedItemName: {
           item_id: data.item_id !== undefined ? "item_id" : "collection_id",
           itemType: "type",
-          enableClick: true,
+          enableModifiedClick: true,
         },
         ChemicalFormula: {
           formula: "chemform",
diff --git a/webapp/src/components/OldEquipmentTable.vue b/webapp/src/components/OldEquipmentTable.vue
deleted file mode 100644
index 2dcfb2eba..000000000
--- a/webapp/src/components/OldEquipmentTable.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div v-if="isEquipmentFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Equipment list could not be
-    retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="equipment-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Name</th>
-        <th class="text-center" scope="col">Date created</th>
-        <th class="text-center" scope="col">Location</th>
-        <th class="text-left" scope="col">Maintainers</th>
-
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="equipment in equipments"
-        :id="equipment.item_id"
-        :key="equipment.item_id"
-        @click.exact="goToEditPage(equipment.item_id)"
-        @click.meta="openEditPageInNewTab(equipment.item_id)"
-        @click.ctrl="openEditPageInNewTab(equipment.item_id)"
-      >
-        <td align="left" class="table-item-id">
-          <FormattedItemName
-            :item_id="equipment.item_id"
-            :item-type="equipment?.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="left">{{ equipment.name }}</td>
-        <td class="text-center">{{ $filters.IsoDatetimeToDate(equipment.date) }}</td>
-        <td class="left">{{ equipment.location }}</td>
-        <td align="center"><Creators :creators="equipment.creators" /></td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteEquipment(equipment)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import FormattedItemName from "@/components/FormattedItemName";
-import Creators from "@/components/Creators";
-import { getEquipmentList, deleteEquipment } from "@/server_fetch_utils.js";
-import { itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    FormattedItemName,
-    Creators,
-  },
-  data() {
-    return {
-      isEquipmentFetchError: false,
-      itemTypes: itemTypes,
-    };
-  },
-  computed: {
-    equipments() {
-      return this.$store.state.equipment_list;
-    },
-  },
-  created() {
-    this.getEquipment();
-  },
-  methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    getEquipment() {
-      getEquipmentList().catch(() => {
-        this.isEquipmentFetchError = true;
-      });
-    },
-    deleteEquipment(equipment) {
-      if (confirm(`Are you sure you want to delete equipment "${equipment.item_id}"?`)) {
-        console.log("deleting...");
-        deleteEquipment(equipment.item_id);
-      }
-      console.log("delete cancelled...");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.clickable {
-  cursor: pointer;
-}
-</style>
diff --git a/webapp/src/components/OldSampleTable.vue b/webapp/src/components/OldSampleTable.vue
deleted file mode 100644
index 670331805..000000000
--- a/webapp/src/components/OldSampleTable.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div v-if="isSampleFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Sample list could not be
-    retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="sample-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Type</th>
-        <th scope="col">Sample name</th>
-        <th scope="col">Formula</th>
-        <th class="text-center" scope="col">Date</th>
-        <th scope="col">Collections</th>
-        <th class="text-center" scope="col">Creators</th>
-        <th class="text-center" scope="col"># of blocks</th>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="sample in samples"
-        :id="sample.item_id"
-        :key="sample.item_id"
-        @click.exact="goToEditPage(sample.item_id)"
-        @click.meta="openEditPageInNewTab(sample.item_id)"
-        @click.ctrl="openEditPageInNewTab(sample.item_id)"
-      >
-        <td align="left" class="table-item-id">
-          <FormattedItemName
-            :item_id="sample.item_id"
-            :item-type="sample?.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="center">{{ itemTypes[sample.type].display }}</td>
-        <td align="left">{{ sample.name }}</td>
-        <td><ChemicalFormula :formula="sample.chemform" /></td>
-        <td class="text-center">{{ $filters.IsoDatetimeToDate(sample.date) }}</td>
-        <td><CollectionList :collections="sample.collections" /></td>
-        <td align="center"><Creators :creators="sample.creators" /></td>
-        <td class="text-right">{{ sample.nblocks }}</td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteSample(sample)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import ChemicalFormula from "@/components/ChemicalFormula";
-import FormattedItemName from "@/components/FormattedItemName";
-import CollectionList from "@/components/CollectionList";
-import Creators from "@/components/Creators";
-import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
-import { itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    ChemicalFormula,
-    FormattedItemName,
-    Creators,
-    CollectionList,
-  },
-  data() {
-    return {
-      isSampleFetchError: false,
-      itemTypes: itemTypes,
-    };
-  },
-  computed: {
-    samples() {
-      return this.$store.state.sample_list;
-    },
-  },
-  created() {
-    this.getSamples();
-  },
-  methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    // should also check response.OK? And retry if
-    getSamples() {
-      getSampleList().catch(() => {
-        this.isSampleFetchError = true;
-      });
-    },
-    deleteSample(sample) {
-      if (confirm(`Are you sure you want to delete sample "${sample.item_id}"?`)) {
-        console.log("deleting...");
-        deleteSample(sample.item_id);
-      }
-      console.log("delete cancelled...");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.table-item-id {
-  font-size: 1.2em;
-  font-weight: normal;
-}
-</style>
diff --git a/webapp/src/components/SamplesTable.vue b/webapp/src/components/SamplesTable.vue
index e21961999..7bfaa5ec1 100644
--- a/webapp/src/components/SamplesTable.vue
+++ b/webapp/src/components/SamplesTable.vue
@@ -24,7 +24,12 @@ export default {
   data() {
     return {
       sampleColumns: [
-        { field: "item_id", header: "ID", body: "FormattedItemName", filter: true },
+        {
+          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" },
diff --git a/webapp/src/views/OldEquipments.vue b/webapp/src/views/OldEquipments.vue
deleted file mode 100644
index a50ae25ea..000000000
--- a/webapp/src/views/OldEquipments.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createEquipmentModalIsOpen = true">
-          Add an item
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <OldEquipmentTable />
-      </div>
-    </div>
-  </div>
-  <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import OldEquipmentTable from "@/components/OldEquipmentTable";
-import CreateEquipmentModal from "@/components/CreateEquipmentModal";
-
-export default {
-  name: "Equipments",
-  components: {
-    Navbar,
-    OldEquipmentTable,
-    CreateEquipmentModal,
-  },
-  data() {
-    return {
-      createEquipmentModalIsOpen: false,
-    };
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
diff --git a/webapp/src/views/OldSamples.vue b/webapp/src/views/OldSamples.vue
deleted file mode 100644
index 2f2a4d9ef..000000000
--- a/webapp/src/views/OldSamples.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createItemModalIsOpen = true">Add an item</button>
-        <button class="btn btn-default ml-2" @click="batchCreateItemModalIsOpen = true">
-          Add batch of items
-        </button>
-        <button class="btn btn-default ml-2" @click="qrScannerModalisOpen = true">
-          <font-awesome-icon icon="qrcode" /> Scan QR
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <OldSampleTable />
-      </div>
-    </div>
-  </div>
-  <CreateItemModal v-model="createItemModalIsOpen" :allowed-types="allowedTypes" />
-  <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
-  <QRScannerModal v-model="qrScannerModalisOpen" />
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import OldSampleTable from "@/components/OldSampleTable";
-import CreateItemModal from "@/components/CreateItemModal";
-import BatchCreateItemModal from "@/components/BatchCreateItemModal";
-import QRScannerModal from "@/components/QRScannerModal";
-import { SAMPLE_TABLE_TYPES } from "@/resources.js";
-
-export default {
-  name: "Samples",
-  components: {
-    Navbar,
-    OldSampleTable,
-    CreateItemModal,
-    BatchCreateItemModal,
-    QRScannerModal,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      batchCreateItemModalIsOpen: false,
-      qrScannerModalisOpen: false,
-      allowedTypes: SAMPLE_TABLE_TYPES,
-    };
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>

From 1671fdca1d64b4ebbfb01dd0e9944285ad06aa9c Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Wed, 18 Sep 2024 09:51:46 +0200
Subject: [PATCH 13/19] Update cypress e2e tests to run on the new DataTable
 and remove /old routes

---
 webapp/src/router/index.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 8ab4b3e85..c7f635149 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -10,9 +10,6 @@ import ExampleGraph from "@/views/ExampleGraph.vue";
 import ItemGraphPage from "@/views/ItemGraphPage.vue";
 import Admin from "@/views/Admin.vue";
 
-import OldSample from "../views/OldSamples.vue";
-import OldEquipment from "../views/OldEquipments.vue";
-
 const routes = [
   {
     path: "/about",
@@ -77,18 +74,6 @@ const routes = [
     alias: "/",
     component: Admin,
   },
-  {
-    path: "/old-sample",
-    name: "old-sample",
-    alias: "/",
-    component: OldSample,
-  },
-  {
-    path: "/old-equipment",
-    name: "old-equipment",
-    alias: "/",
-    component: OldEquipment,
-  },
 ];
 
 const router = createRouter({

From 9a81e18d0bf225bd5f0db0dcb61fe19368018850 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Thu, 19 Sep 2024 10:18:01 +0200
Subject: [PATCH 14/19] Rename components with old names

---
 webapp/cypress/component/NavbarTest.cy.jsx                | 6 +++---
 webapp/src/components/AddToCollectionModal.vue            | 2 +-
 .../{CollectionsTable.vue => CollectionTable.vue}         | 0
 webapp/src/components/DynamicButtonDataTable.vue          | 4 ++--
 webapp/src/components/DynamicDataTable.vue                | 2 +-
 .../{EquipmentsTable.vue => EquipmentTable.vue}           | 6 +++---
 webapp/src/components/Navbar.vue                          | 2 +-
 .../src/components/{SamplesTable.vue => SampleTable.vue}  | 0
 ...artingMaterialsTable.vue => StartingMaterialTable.vue} | 0
 webapp/src/router/index.js                                | 8 ++++----
 webapp/src/views/Collections.vue                          | 6 +++---
 webapp/src/views/{Equipments.vue => Equipment.vue}        | 8 ++++----
 webapp/src/views/Samples.vue                              | 6 +++---
 webapp/src/views/StartingMaterials.vue                    | 6 +++---
 14 files changed, 28 insertions(+), 28 deletions(-)
 rename webapp/src/components/{CollectionsTable.vue => CollectionTable.vue} (100%)
 rename webapp/src/components/{EquipmentsTable.vue => EquipmentTable.vue} (93%)
 rename webapp/src/components/{SamplesTable.vue => SampleTable.vue} (100%)
 rename webapp/src/components/{StartingMaterialsTable.vue => StartingMaterialTable.vue} (100%)
 rename webapp/src/views/{Equipments.vue => Equipment.vue} (80%)

diff --git a/webapp/cypress/component/NavbarTest.cy.jsx b/webapp/cypress/component/NavbarTest.cy.jsx
index a928b7629..0a009b297 100644
--- a/webapp/cypress/component/NavbarTest.cy.jsx
+++ b/webapp/cypress/component/NavbarTest.cy.jsx
@@ -21,7 +21,7 @@ describe("Navbar", () => {
         { path: "/samples", name: "Samples" },
         { path: "/collections", name: "Collections" },
         { path: "/starting-materials", name: "Inventory" },
-        { path: "/equipments", name: "Equipment" },
+        { path: "/equipment", name: "Equipment" },
         { path: "/item-graph", name: "GraphView" },
       ],
     });
@@ -91,7 +91,7 @@ describe("Navbar", () => {
       cy.contains("Samples").should("have.attr", "href", "/samples");
       cy.contains("Collections").should("have.attr", "href", "/collections");
       cy.contains("Inventory").should("have.attr", "href", "/starting-materials");
-      cy.contains("Equipment").should("have.attr", "href", "/equipments");
+      cy.contains("Equipment").should("have.attr", "href", "/equipment");
       cy.contains("Graph View").should("have.attr", "href", "/item-graph");
     });
   });
@@ -116,7 +116,7 @@ describe("Navbar", () => {
     cy.url().should("include", "/starting-materials");
 
     cy.contains("Equipment").click();
-    cy.url().should("include", "/equipments");
+    cy.url().should("include", "/equipment");
 
     cy.contains("Graph View").click();
     cy.url().should("include", "/item-graph");
diff --git a/webapp/src/components/AddToCollectionModal.vue b/webapp/src/components/AddToCollectionModal.vue
index a8086f103..17ab1c56e 100644
--- a/webapp/src/components/AddToCollectionModal.vue
+++ b/webapp/src/components/AddToCollectionModal.vue
@@ -79,7 +79,7 @@ export default {
           getSampleList();
         } else if (this.itemsSelected.some((item) => item.type === "startingMaterials")) {
           getStartingMaterialList();
-        } else if (this.itemsSelected.some((item) => item.type === "equipments")) {
+        } else if (this.itemsSelected.some((item) => item.type === "equipment")) {
           getEquipmentList();
         }
         console.log("Items added successfully.");
diff --git a/webapp/src/components/CollectionsTable.vue b/webapp/src/components/CollectionTable.vue
similarity index 100%
rename from webapp/src/components/CollectionsTable.vue
rename to webapp/src/components/CollectionTable.vue
diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue
index 58c425a82..02329299e 100644
--- a/webapp/src/components/DynamicButtonDataTable.vue
+++ b/webapp/src/components/DynamicButtonDataTable.vue
@@ -38,7 +38,7 @@
         Add a starting material
       </button>
       <button
-        v-if="dataType === 'equipments'"
+        v-if="dataType === 'equipment'"
         class="btn btn-default"
         @click="$emit('open-create-equipment-modal')"
       >
@@ -143,7 +143,7 @@ export default {
         this.deleteCollections();
       } else if (this.dataType === "startingMaterials") {
         this.deleteStartingMaterials();
-      } else if (this.dataType === "equipments") {
+      } else if (this.dataType === "equipment") {
         this.deleteEquipments();
       }
       this.$emit("delete-selected-items");
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index 0e6c00f42..26a3435ba 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -175,7 +175,7 @@ export default {
         samples: "sample-table",
         collections: "collection-table",
         startingMaterials: "starting-material-table",
-        equipments: "equipment-table",
+        equipment: "equipment-table",
       };
       return dataTestIdMap[this.dataType] || "default-table";
     },
diff --git a/webapp/src/components/EquipmentsTable.vue b/webapp/src/components/EquipmentTable.vue
similarity index 93%
rename from webapp/src/components/EquipmentsTable.vue
rename to webapp/src/components/EquipmentTable.vue
index 67ebd0897..de3ac9bfc 100644
--- a/webapp/src/components/EquipmentsTable.vue
+++ b/webapp/src/components/EquipmentTable.vue
@@ -1,8 +1,8 @@
 <template>
   <DynamicDataTable
     :columns="equipmentColumn"
-    :data="equipments"
-    :data-type="'equipments'"
+    :data="equipment"
+    :data-type="'equipment'"
     :global-filter-fields="['item_id', 'name', 'location', 'creatorsList']"
   />
 </template>
@@ -25,7 +25,7 @@ export default {
     };
   },
   computed: {
-    equipments() {
+    equipment() {
       return this.$store.state.equipment_list.map((equipment) => ({
         ...equipment,
         // creatorsList: equipment.creators.map((creator) => creator.display_name).join(", "),
diff --git a/webapp/src/components/Navbar.vue b/webapp/src/components/Navbar.vue
index 83e28883b..ecfda7916 100644
--- a/webapp/src/components/Navbar.vue
+++ b/webapp/src/components/Navbar.vue
@@ -24,7 +24,7 @@
     <router-link to="/samples">Samples</router-link> |
     <router-link to="/collections">Collections</router-link> |
     <router-link to="/starting-materials">Inventory</router-link> |
-    <router-link to="/equipments">Equipment</router-link> |
+    <router-link to="/equipment">Equipment</router-link> |
     <router-link to="/item-graph"
       ><font-awesome-icon icon="project-diagram" />&nbsp;Graph View</router-link
     >
diff --git a/webapp/src/components/SamplesTable.vue b/webapp/src/components/SampleTable.vue
similarity index 100%
rename from webapp/src/components/SamplesTable.vue
rename to webapp/src/components/SampleTable.vue
diff --git a/webapp/src/components/StartingMaterialsTable.vue b/webapp/src/components/StartingMaterialTable.vue
similarity index 100%
rename from webapp/src/components/StartingMaterialsTable.vue
rename to webapp/src/components/StartingMaterialTable.vue
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index c7f635149..d2166daa8 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Samples from "../views/Samples.vue";
-import Equipments from "../views/Equipments.vue";
+import Equipment from "../views/Equipment.vue";
 import StartingMaterials from "../views/StartingMaterials.vue";
 import Collections from "@/views/Collections.vue";
 import NotFound from "../views/NotFound.vue";
@@ -26,10 +26,10 @@ const routes = [
     component: Samples,
   },
   {
-    path: "/equipments",
-    name: "equipments",
+    path: "/equipment",
+    name: "equipment",
     alias: "/",
-    component: Equipments,
+    component: Equipment,
   },
   {
     path: "/edit/:id",
diff --git a/webapp/src/views/Collections.vue b/webapp/src/views/Collections.vue
index cee68bcdc..15fde57a8 100644
--- a/webapp/src/views/Collections.vue
+++ b/webapp/src/views/Collections.vue
@@ -4,7 +4,7 @@
   <div id="tableContainer" class="container">
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <CollectionsTable />
+        <CollectionTable />
       </div>
     </div>
   </div>
@@ -12,13 +12,13 @@
 
 <script>
 import Navbar from "@/components/Navbar";
-import CollectionsTable from "@/components/CollectionsTable";
+import CollectionTable from "@/components/CollectionTable";
 
 export default {
   name: "Collections",
   components: {
     Navbar,
-    CollectionsTable,
+    CollectionTable,
   },
 };
 </script>
diff --git a/webapp/src/views/Equipments.vue b/webapp/src/views/Equipment.vue
similarity index 80%
rename from webapp/src/views/Equipments.vue
rename to webapp/src/views/Equipment.vue
index b61f10101..35b25106c 100644
--- a/webapp/src/views/Equipments.vue
+++ b/webapp/src/views/Equipment.vue
@@ -4,7 +4,7 @@
   <div id="tableContainer" class="container">
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <EquipmentsTable />
+        <EquipmentTable />
       </div>
     </div>
   </div>
@@ -12,13 +12,13 @@
 
 <script>
 import Navbar from "@/components/Navbar";
-import EquipmentsTable from "@/components/EquipmentsTable";
+import EquipmentTable from "@/components/EquipmentTable";
 
 export default {
-  name: "Equipments",
+  name: "Equipment",
   components: {
     Navbar,
-    EquipmentsTable,
+    EquipmentTable,
   },
 };
 </script>
diff --git a/webapp/src/views/Samples.vue b/webapp/src/views/Samples.vue
index 42789bd99..2879f3a1c 100644
--- a/webapp/src/views/Samples.vue
+++ b/webapp/src/views/Samples.vue
@@ -4,7 +4,7 @@
   <div id="tableContainer" class="container">
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <SamplesTable />
+        <SampleTable />
       </div>
     </div>
   </div>
@@ -12,13 +12,13 @@
 
 <script>
 import Navbar from "@/components/Navbar";
-import SamplesTable from "@/components/SamplesTable";
+import SampleTable from "@/components/SampleTable";
 
 export default {
   name: "Samples",
   components: {
     Navbar,
-    SamplesTable,
+    SampleTable,
   },
 };
 </script>
diff --git a/webapp/src/views/StartingMaterials.vue b/webapp/src/views/StartingMaterials.vue
index 4d39a204b..60c4f624d 100644
--- a/webapp/src/views/StartingMaterials.vue
+++ b/webapp/src/views/StartingMaterials.vue
@@ -4,7 +4,7 @@
   <div id="tableContainer" class="container">
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <StartingMaterialsTable />
+        <StartingMaterialTable />
       </div>
     </div>
   </div>
@@ -12,13 +12,13 @@
 
 <script>
 import Navbar from "@/components/Navbar";
-import StartingMaterialsTable from "@/components/StartingMaterialsTable";
+import StartingMaterialTable from "@/components/StartingMaterialTable";
 
 export default {
   name: "StartingMaterials",
   components: {
     Navbar,
-    StartingMaterialsTable,
+    StartingMaterialTable,
   },
 };
 </script>

From 71e18c62d980878997308ae8aee5edfc8466cb8d Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Thu, 19 Sep 2024 10:54:13 +0200
Subject: [PATCH 15/19] Fix cypress e2e equipment

---
 webapp/cypress/e2e/equipment.cy.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js
index 410b2ce38..6a38c1752 100644
--- a/webapp/cypress/e2e/equipment.cy.js
+++ b/webapp/cypress/e2e/equipment.cy.js
@@ -9,24 +9,24 @@ Cypress.on("window:before:load", (win) => {
 let item_ids = ["test_e1", "test_e2", "test_e3", "123equipment", "test_e3_copy"];
 
 before(() => {
-  cy.visit("/equipments");
+  cy.visit("/equipment");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/equipments").then(() => {
+  cy.visit("/equipment").then(() => {
     cy.get("[data-testid='equipment-table'] > tbody > tr").should("have.length", 0);
   });
 });
 
 after(() => {
-  cy.visit("/equipments");
+  cy.visit("/equipment");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/equipments").then(() => {
+  cy.visit("/equipment").then(() => {
     cy.get("[data-testid='equipment-table'] > tbody > tr").should("have.length", 0);
   });
 });
 
 describe("Equipment table page", () => {
   beforeEach(() => {
-    cy.visit("/equipments");
+    cy.visit("/equipment");
   });
 
   it("Loads the equipment page without any errors", () => {
@@ -128,7 +128,7 @@ describe("Equipment table page", () => {
 
 describe("Equipment edit page", () => {
   beforeEach(() => {
-    cy.visit("/equipments");
+    cy.visit("/equipment");
   });
 
   it("Checks the equipment edit page", () => {
@@ -150,7 +150,7 @@ describe("Equipment edit page", () => {
     cy.get(".datablock-content div").first().type("a comment is added here.");
 
     cy.get(".fa-save").click();
-    cy.visit("/equipments");
+    cy.visit("/equipment");
     cy.verifyEquipment("test_e3", "my inst", "2000-01-01T00:00", "room 101");
   });
 });

From 2cadd93d16c8dcda943cc35d884056c3eed30966 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 20 Sep 2024 16:29:11 +0100
Subject: [PATCH 16/19] Remove bug in datatable and datatable-button

---
 webapp/src/components/DynamicButtonDataTable.vue | 1 -
 webapp/src/components/DynamicDataTable.vue       | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue
index 02329299e..e030f270a 100644
--- a/webapp/src/components/DynamicButtonDataTable.vue
+++ b/webapp/src/components/DynamicButtonDataTable.vue
@@ -32,7 +32,6 @@
       <button
         v-if="dataType === 'startingMaterials' && editableInventory"
         class="btn btn-default"
-        :disabled="itemsSelected.length === 0"
         @click="$emit('open-create-item-modal')"
       >
         Add a starting material
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index 26a3435ba..e93ddd0c6 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -58,7 +58,7 @@
             }"
         /></template> -->
 
-        <template v-if="column.body && editable_inventory" #body="slotProps">
+        <template v-if="column.body" #body="slotProps">
           <component :is="column.body" v-bind="getComponentProps(column.body, slotProps.data)" />
         </template>
         <template v-else-if="column.field === 'date'" #body="slotProps">

From 02dd6163f715fe7fb02c30f0edb8d95204f62f87 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 20 Sep 2024 16:38:46 +0100
Subject: [PATCH 17/19] Fix filter in datatable

---
 webapp/src/components/DynamicDataTable.vue      | 13 +++++++++++++
 webapp/src/components/EquipmentTable.vue        |  2 +-
 webapp/src/components/StartingMaterialTable.vue |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index e93ddd0c6..e193188f9 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -114,6 +114,7 @@ import ChemicalFormula from "@/components/ChemicalFormula";
 import CollectionList from "@/components/CollectionList";
 import Creators from "@/components/Creators";
 
+import { FilterMatchMode, FilterOperator } from "@primevue/core/api";
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import InputText from "primevue/inputtext";
@@ -165,6 +166,18 @@ export default {
       itemsSelected: [],
       filters: {
         global: { value: null },
+        item_id: {
+          operator: FilterOperator.AND,
+          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
+        },
+        collection_id: {
+          operator: FilterOperator.AND,
+          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
+        },
+        type: {
+          operator: FilterOperator.AND,
+          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
+        },
       },
       allowedTypes: INVENTORY_TABLE_TYPES,
     };
diff --git a/webapp/src/components/EquipmentTable.vue b/webapp/src/components/EquipmentTable.vue
index de3ac9bfc..0de1f4f67 100644
--- a/webapp/src/components/EquipmentTable.vue
+++ b/webapp/src/components/EquipmentTable.vue
@@ -17,7 +17,7 @@ export default {
     return {
       equipmentColumn: [
         { field: "item_id", header: "ID", body: "FormattedItemName", filter: true },
-        { field: "name", header: "Name", filter: true },
+        { field: "name", header: "Name" },
         { field: "date", header: "Date" },
         { field: "location", header: "Location" },
         { field: "creators", header: "Maintainers", body: "Creators" },
diff --git a/webapp/src/components/StartingMaterialTable.vue b/webapp/src/components/StartingMaterialTable.vue
index 882208c9d..4097e9552 100644
--- a/webapp/src/components/StartingMaterialTable.vue
+++ b/webapp/src/components/StartingMaterialTable.vue
@@ -17,7 +17,7 @@ export default {
     return {
       startingMaterialColumn: [
         { field: "item_id", header: "ID", body: "FormattedItemName", filter: true },
-        { field: "name", header: "Name", filter: true },
+        { field: "name", header: "Name" },
         { field: "chemform", header: "Formula", body: "ChemicalFormula" },
         { field: "date", header: "Date" },
         { field: "chemical_purity", header: "Purity" },

From ef5ddfa4b5aaa9c29fa934f0030e5111873f21b6 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Mon, 23 Sep 2024 16:14:32 +0100
Subject: [PATCH 18/19] Filter symbol green when filter is on

---
 pydatalab/pydatalab/routes/v0_1/items.py   | 12 +++++----
 webapp/src/components/CollectionSelect.vue |  8 +++---
 webapp/src/components/CollectionTable.vue  |  2 +-
 webapp/src/components/DynamicDataTable.vue | 31 +++++++++++++++++++---
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/pydatalab/pydatalab/routes/v0_1/items.py b/pydatalab/pydatalab/routes/v0_1/items.py
index ad1890bdc..81d1e8983 100644
--- a/pydatalab/pydatalab/routes/v0_1/items.py
+++ b/pydatalab/pydatalab/routes/v0_1/items.py
@@ -129,6 +129,7 @@ def get_starting_materials():
                         "date": 1,
                         "chemform": 1,
                         "name": 1,
+                        "type": 1,
                         "chemical_purity": 1,
                         "supplier": 1,
                         "location": 1,
@@ -300,7 +301,8 @@ def search_items():
     nresults = request.args.get("nresults", default=100, type=int)
     types = request.args.get("types", default=None)
     if isinstance(types, str):
-        types = types.split(",")  # should figure out how to parse as list automatically
+        # should figure out how to parse as list automatically
+        types = types.split(",")
 
     match_obj = {
         "$text": {"$search": query},
@@ -428,10 +430,10 @@ def _create_sample(
         raise RuntimeError("Invalid type")
     model = ITEM_MODELS[type_]
 
-    ## the following code was used previously to explicitely check schema properties.
-    ## it doesn't seem to be necessary now, with extra = "ignore" turned on in the pydantic models,
-    ## and it breaks in instances where the models use aliases (e.g., in the starting_material model)
-    ## so we are taking it out now, but leaving this comment in case it needs to be reverted.
+    # the following code was used previously to explicitely check schema properties.
+    # it doesn't seem to be necessary now, with extra = "ignore" turned on in the pydantic models,
+    # and it breaks in instances where the models use aliases (e.g., in the starting_material model)
+    # so we are taking it out now, but leaving this comment in case it needs to be reverted.
     # schema = model.schema()
     # new_sample = {k: sample_dict[k] for k in schema["properties"] if k in sample_dict}
     new_sample = sample_dict
diff --git a/webapp/src/components/CollectionSelect.vue b/webapp/src/components/CollectionSelect.vue
index b3038eb53..2e3341d7e 100644
--- a/webapp/src/components/CollectionSelect.vue
+++ b/webapp/src/components/CollectionSelect.vue
@@ -9,7 +9,7 @@
     @search="debouncedAsyncSearch"
   >
     <template #no-options="{ searching }">
-      <span v-if="searching"> Sorry, no matches found. </span>
+      <span v-if="searching"> Collection already selected </span>
       <span v-else class="empty-search"> Search for a collection... </span>
     </template>
     <template #option="{ collection_id, title }">
@@ -20,7 +20,7 @@
         enable-modified-click
         :max-length="formattedItemNameMaxLength"
       />
-      <div v-else @click.prevent="handleCreateNewCollection">
+      <div v-else @click="handleCreateNewCollection">
         {{ title }}
       </div>
     </template>
@@ -77,7 +77,8 @@ export default {
     collectionOrNewCollection() {
       if (
         this.searchQuery &&
-        !this.collections.some((item) => item.collection_id === this.searchQuery)
+        !this.collections.some((item) => item.collection_id === this.searchQuery) &&
+        !this.value.some((item) => item.collection_id === this.searchQuery)
       ) {
         return [
           ...this.collections,
@@ -130,7 +131,6 @@ export default {
             },
           ];
         }
-        await this.debouncedAsyncSearch(this.searchQuery, () => {});
       } catch (error) {
         console.error("Error:", error);
         alert("An error occurred while creating the collection. Please try again.");
diff --git a/webapp/src/components/CollectionTable.vue b/webapp/src/components/CollectionTable.vue
index 0e4583b42..aa588e2db 100644
--- a/webapp/src/components/CollectionTable.vue
+++ b/webapp/src/components/CollectionTable.vue
@@ -16,7 +16,7 @@ export default {
   data() {
     return {
       collectionColumn: [
-        { field: "collection_id", header: "ID", body: "FormattedItemName", filter: true },
+        { field: "collection_id", header: "ID", body: "FormattedCollectionName", filter: true },
         { field: "title", header: "Title" },
         { field: "creators", header: "Creators", body: "Creators" },
       ],
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index e193188f9..6b726c259 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -7,9 +7,9 @@
     <DataTable
       v-model:filters="filters"
       v-model:selection="itemsSelected"
-      selection-mode="multiple"
       :value="data"
       :data-testid="computedDataTestId"
+      selection-mode="multiple"
       paginator
       :rows="20"
       :rows-per-page-options="[10, 20, 50, 100]"
@@ -47,6 +47,7 @@
         :field="column.field"
         :header="column.header"
         sortable
+        :class="{ 'filter-active': isFilterActive(column.field) }"
       >
         <!-- <template v-if="column.field === 'item_id'" #body="slotProps">
           <component
@@ -110,6 +111,7 @@ import AddToCollectionModal from "@/components/AddToCollectionModal";
 import { INVENTORY_TABLE_TYPES, EDITABLE_INVENTORY } from "@/resources.js";
 
 import FormattedItemName from "@/components/FormattedItemName";
+import FormattedCollectionName from "@/components/FormattedCollectionName";
 import ChemicalFormula from "@/components/ChemicalFormula";
 import CollectionList from "@/components/CollectionList";
 import Creators from "@/components/Creators";
@@ -132,6 +134,7 @@ export default {
     Column,
     InputText,
     FormattedItemName,
+    FormattedCollectionName,
     ChemicalFormula,
     CollectionList,
     Creators,
@@ -193,10 +196,14 @@ export default {
       return dataTestIdMap[this.dataType] || "default-table";
     },
   },
+  watch: {
+    itemsSelected(newSelection) {
+      console.log("Selected items:", newSelection);
+    },
+  },
   created() {
     this.editable_inventory = EDITABLE_INVENTORY;
   },
-
   methods: {
     goToEditPage(event) {
       const { item_id, collection_id } = event.data;
@@ -210,10 +217,14 @@ export default {
     getComponentProps(componentName, data) {
       const propsConfig = {
         FormattedItemName: {
-          item_id: data.item_id !== undefined ? "item_id" : "collection_id",
+          item_id: "item_id",
           itemType: "type",
           enableModifiedClick: true,
         },
+        FormattedCollectionName: {
+          collection_id: "collection_id",
+          enableModifiedClick: true,
+        },
         ChemicalFormula: {
           formula: "chemform",
         },
@@ -246,6 +257,13 @@ export default {
 
       return props;
     },
+    isFilterActive(field) {
+      const filter = this.filters[field];
+      if (filter && filter.constraints) {
+        return filter.constraints.some((constraint) => constraint.value);
+      }
+      return false;
+    },
     deleteSelectedItems() {
       this.itemsSelected = [];
     },
@@ -286,4 +304,11 @@ export default {
 .button-right {
   gap: 0.5em;
 }
+
+.p-datatable-header-cell.filter-active svg {
+  color: #10b981;
+}
+.p-datatable-header-cell.filter-active {
+  color: #047857;
+}
 </style>

From ab1b98e1d33e5224b9073f611bed2446efb79ac8 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Mon, 23 Sep 2024 16:31:46 +0100
Subject: [PATCH 19/19] Fix double-add to a collection

---
 pydatalab/pydatalab/routes/v0_1/collections.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pydatalab/pydatalab/routes/v0_1/collections.py b/pydatalab/pydatalab/routes/v0_1/collections.py
index 37d26f0f2..d0ab54d26 100644
--- a/pydatalab/pydatalab/routes/v0_1/collections.py
+++ b/pydatalab/pydatalab/routes/v0_1/collections.py
@@ -359,6 +359,8 @@ def add_items_to_collection(collection_id):
                     "relation": None,
                     "type": "collections",
                     "immutable_id": ObjectId(collection["_id"]),
+                    "item_id": None,
+                    "refcode": None,
                 }
             }
         },