Improving prime Datatable

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: {

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");

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");

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,19 +44,21 @@ 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 });
 
     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.get('[data-testid="search-input"]').type("editable_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", () => {
@@ -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
   });
 });

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("/equipments");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/equipment").then(() => {
+  cy.visit("/equipments").then(() => {
     cy.get("[data-testid='equipment-table'] > tbody > tr").should("have.length", 0);
   });
 });
 
 after(() => {
-  cy.visit("/equipment");
+  cy.visit("/equipments");
   cy.removeAllTestSamples(item_ids);
-  cy.visit("/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("/equipment");
+    cy.visit("/equipments");
   });
 
   it("Loads the equipment page without any errors", () => {
@@ -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(
@@ -113,7 +128,7 @@ describe("Equipment table page", () => {
 
 describe("Equipment edit page", () => {
   beforeEach(() => {
-    cy.visit("/equipment/");
+    cy.visit("/equipments");
   });
 
   it("Checks the equipment edit page", () => {
@@ -135,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("/equipment");
+    cy.visit("/equipments");
     cy.verifyEquipment("test_e3", "my inst", "2000-01-01T00:00", "room 101");
   });
 });

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);

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>
@@ -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) {

webapp/src/components/CollectionInformation.vue

@@ -31,21 +31,18 @@
         <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";
 
 export default {
   components: {
     TinyMceInline,
-    FancyCollectionSampleTable,
     Creators,
     CollectionRelationshipVisualization,
   },