From 7501ac1ed4eb1c1d31ab73d5e682f6be5ca3d609 Mon Sep 17 00:00:00 2001 From: Benjamin CHARMES Date: Wed, 2 Oct 2024 11:42:12 +0100 Subject: [PATCH 1/4] Add dropdown actions buttons for selected items inside DataTable Add dropdown actions buttons for selected items inside DataTable Fix e2e cypress test to work with dropdown Fix e2e cypress test to work with dropdown Add dropdown actions buttons for selected items inside DataTable --- webapp/cypress/e2e/equipment.cy.js | 3 +- webapp/cypress/support/commands.js | 3 +- .../src/components/DynamicButtonDataTable.vue | 138 ++++++++---------- 3 files changed, 68 insertions(+), 76 deletions(-) diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js index 6a38c1752..b2e0d36f7 100644 --- a/webapp/cypress/e2e/equipment.cy.js +++ b/webapp/cypress/e2e/equipment.cy.js @@ -91,7 +91,8 @@ describe("Equipment table page", () => { .find("input[type='checkbox']") .click(); - cy.get("[data-testid=delete-selected-button]").click(); + cy.get(".p-splitbutton-dropdown").click(); + cy.contains("Delete selected").click({ force: true }); cy.on("window:confirm", (text) => { expect(text).to.contains("test_e2"); diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js index f201dfecc..76dd02551 100644 --- a/webapp/cypress/support/commands.js +++ b/webapp/cypress/support/commands.js @@ -82,7 +82,8 @@ Cypress.Commands.add("deleteSamples", (items_id) => { cy.selectSampleCheckbox(item_id); }); - cy.get("[data-testid=delete-selected-button]").click(); + cy.get(".p-splitbutton-dropdown").click(); + cy.contains("Delete selected").click({ force: true }); cy.on("window:confirm", (text) => { expect(text).to.contains(items_id); diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue index 4633a483d..6a17f0e0c 100644 --- a/webapp/src/components/DynamicButtonDataTable.vue +++ b/webapp/src/components/DynamicButtonDataTable.vue @@ -24,52 +24,67 @@
- - +
+ +
+ + Add to collection + + + Delete selected + +
+
- + @@ -135,72 +150,47 @@ export default { data() { return { localFilters: { ...this.filters }, + isSelectedDropdownVisible: false, }; }, 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 === "equipment") { - this.deleteEquipments(); - } - this.$emit("delete-selected-items"); - }, - deleteSamples() { - const idsSelected = this.itemsSelected.map((x) => x.item_id); + const idsSelected = this.itemsSelected.map((x) => x.item_id || x.collection_id); if ( confirm( - `Are you sure you want to delete ${this.itemsSelected.length} selected sample(s) (${idsSelected})?`, + `Are you sure you want to delete ${this.itemsSelected.length} selected items? (${idsSelected})`, ) ) { - idsSelected.forEach((item_id) => { - deleteSample(item_id); - }); + this.deleteItems(idsSelected); + this.$emit("delete-selected-items"); } + this.isSelectedDropdownVisible = false; }, - 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: 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); - }); + deleteItems(ids) { + if (this.dataType === "samples") { + ids.forEach((id) => deleteSample(id)); + } else if (this.dataType === "collections") { + ids.forEach((id) => deleteCollection(id, { collection_id: id })); + } else if (this.dataType === "startingMaterials") { + ids.forEach((id) => deleteStartingMaterial(id)); + } else if (this.dataType === "equipment") { + ids.forEach((id) => deleteEquipment(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); - }); - } + handleAddToCollection() { + this.$emit("open-add-to-collection-modal"); + this.isSelectedDropdownVisible = false; }, }, }; + + From fd6067140b74695164e2cd8975cd22759b497f83 Mon Sep 17 00:00:00 2001 From: Benjamin CHARMES Date: Fri, 4 Oct 2024 11:48:24 +0100 Subject: [PATCH 2/4] Fix e2e cypress test to work with dropdown Fix e2e cypress test to work with dropdown --- webapp/cypress/e2e/batchSampleFeature.cy.js | 8 ++++---- webapp/cypress/e2e/equipment.cy.js | 14 +------------- webapp/cypress/e2e/sampleTablePage.cy.js | 6 ++++-- webapp/cypress/support/commands.js | 14 +++++++------- .../src/components/DynamicButtonDataTable.vue | 19 ++++++++++++++++--- 5 files changed, 32 insertions(+), 29 deletions(-) diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js index 2a4d7cc27..44f896dbd 100644 --- a/webapp/cypress/e2e/batchSampleFeature.cy.js +++ b/webapp/cypress/e2e/batchSampleFeature.cy.js @@ -103,7 +103,7 @@ describe("Batch sample creation", () => { cy.verifySample("testB", "this sample has a name"); cy.verifySample("testC"); - cy.deleteSamples(["testA", "testB", "testC"]); + cy.deleteItems("sample", ["testA", "testB", "testC"]); }); it("adds two valid samples", () => { @@ -437,7 +437,7 @@ describe("Batch sample creation", () => { cy.verifySample("test_2", "testing 1,2"); cy.verifySample("test_3", "testing 1,2,3"); - cy.deleteSamples(["test_1", "test_2", "test_3"]); + cy.deleteItems("sample", ["test_1", "test_2", "test_3"]); }); it("uses the template id, name, and date", () => { @@ -460,7 +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.deleteSamples(["test_5", "test_6", "test_7"]); + cy.deleteItems("sample", ["test_5", "test_6", "test_7"]); }); it("uses the template id, name, date, copyFrom, and components", () => { @@ -649,7 +649,7 @@ describe("Batch sample creation", () => { cy.verifySample("test2", "name2"); checkCreatedSample("test1"); checkCreatedSample("test2"); - cy.deleteSamples(["test1", "test2"]); + cy.deleteItems("sample", ["test1", "test2"]); }); it("checks errors on the row", () => { diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js index b2e0d36f7..b30e65359 100644 --- a/webapp/cypress/e2e/equipment.cy.js +++ b/webapp/cypress/e2e/equipment.cy.js @@ -85,19 +85,7 @@ describe("Equipment table page", () => { }); it("Deletes an item", function () { - cy.get("[data-testid=equipment-table]") - .contains(new RegExp("^" + "test_e2" + "$", "g")) - .parents("tr") - .find("input[type='checkbox']") - .click(); - - cy.get(".p-splitbutton-dropdown").click(); - cy.contains("Delete selected").click({ force: true }); - - cy.on("window:confirm", (text) => { - expect(text).to.contains("test_e2"); - return true; - }); + cy.deleteItems("equipment", ["test_e2"]); cy.contains("test_e2").should("not.exist"); diff --git a/webapp/cypress/e2e/sampleTablePage.cy.js b/webapp/cypress/e2e/sampleTablePage.cy.js index 89f69d398..8e3f73eda 100644 --- a/webapp/cypress/e2e/sampleTablePage.cy.js +++ b/webapp/cypress/e2e/sampleTablePage.cy.js @@ -308,8 +308,9 @@ describe.only("Advanced sample creation features", () => { it("selects a sample by checkbox, adds it to a new collection, then checks the collections page", () => { // Insert 'component4' into new collection called 'test_collection' let test_id = "component4"; - cy.selectSampleCheckbox(test_id); - cy.findByText("Add to collection").click(); + cy.selectItemCheckbox("sample", test_id); + cy.get('[data-testid="selected-dropdown"]').click(); + cy.get('[data-testid="add-to-collection-button"]').click(); cy.findByLabelText("Insert into collection:").type("test_collection"); cy.findByText('Create new collection: "test_collection"').click(); cy.get('form[data-testid="add-to-collection-form"]').within(() => { @@ -318,6 +319,7 @@ describe.only("Advanced sample creation features", () => { // Visit collections page and look for 'test_collection' cy.visit("/collections"); // Visit edit page of collection and check that the sample is there + cy.get('[data-testid="search-input"]').type("test_collection"); cy.findByText("test_collection").click(); cy.findByText(test_id).should("exist"); }); diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js index 76dd02551..2d5a62887 100644 --- a/webapp/cypress/support/commands.js +++ b/webapp/cypress/support/commands.js @@ -68,22 +68,22 @@ Cypress.Commands.add("verifySample", (item_id, name = null, date = null) => { }); }); -Cypress.Commands.add("selectSampleCheckbox", (item_id) => { - cy.get("[data-testid=sample-table]") +Cypress.Commands.add("selectItemCheckbox", (type, item_id) => { + cy.get(`[data-testid=${type}-table]`) .contains(new RegExp("^" + item_id + "$", "g")) .parents("tr") .find("input[type='checkbox']") .click(); }); -Cypress.Commands.add("deleteSamples", (items_id) => { +Cypress.Commands.add("deleteItems", (type, items_id) => { cy.log("search for and delete: " + items_id); items_id.forEach((item_id) => { - cy.selectSampleCheckbox(item_id); + cy.selectItemCheckbox(type, item_id); }); - cy.get(".p-splitbutton-dropdown").click(); - cy.contains("Delete selected").click({ force: true }); + cy.get('[data-testid="selected-dropdown"]').click(); + cy.get('[data-testid="delete-selected-button"]').click(); cy.on("window:confirm", (text) => { expect(text).to.contains(items_id); @@ -91,7 +91,7 @@ Cypress.Commands.add("deleteSamples", (items_id) => { }); items_id.forEach((item_id) => { - cy.get("[data-testid=sample-table]") + cy.get(`[data-testid=${type}-table]`) .contains(new RegExp("^" + item_id + "$", "g")) .should("not.exist"); }); diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue index 6a17f0e0c..604f90aaa 100644 --- a/webapp/src/components/DynamicButtonDataTable.vue +++ b/webapp/src/components/DynamicButtonDataTable.vue @@ -47,7 +47,7 @@
- + @@ -153,6 +159,13 @@ export default { isSelectedDropdownVisible: false, }; }, + watch: { + itemsSelected(newVal) { + if (newVal.length === 0) { + this.isSelectedDropdownVisible = false; + } + }, + }, methods: { confirmDeletion() { const idsSelected = this.itemsSelected.map((x) => x.item_id || x.collection_id); From b622d28b5f5d6f3c79522124a151e29e089a60d3 Mon Sep 17 00:00:00 2001 From: Benjamin CHARMES Date: Mon, 7 Oct 2024 14:46:33 +0100 Subject: [PATCH 3/4] Add a few minor changes Add a few minor changes --- webapp/src/components/DynamicDataTable.vue | 12 ++++-------- ...ttonDataTable.vue => DynamicDataTableButtons.vue} | 8 ++++++-- 2 files changed, 10 insertions(+), 10 deletions(-) rename webapp/src/components/{DynamicButtonDataTable.vue => DynamicDataTableButtons.vue} (98%) diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue index f8fd32675..a306ad3f8 100644 --- a/webapp/src/components/DynamicDataTable.vue +++ b/webapp/src/components/DynamicDataTable.vue @@ -26,7 +26,7 @@