diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue index 21829786..c4c20b0f 100644 --- a/components/category-toolgroup.vue +++ b/components/category-toolgroup.vue @@ -12,13 +12,6 @@ @row-selected="highlightRow" :tbody-tr-class="styleTableRow" thead-class="hidden" /> - + + + @@ -40,7 +44,13 @@ return { toolGroups: ["MOCA", "UPDRSIII", "SomeOtherThing", "AnotherThing"], selectedTools: [], - selectedTool: null + selectedTool: null, + //Todo: populate keys using columns that are coming from the store + column2ToolMap: { + column1: null, + column2: null, + column3: null + } }; }, @@ -73,6 +83,20 @@ return "selected-tool"; } return ""; + }, + mapColumnToTool(row) { + if (this.column2ToolMap[row.column] === this.selectedTool) { + this.column2ToolMap[row.column] = null; + } else { + this.column2ToolMap[row.column] = this.selectedTool; + } + }, + styleRow(p_row) { + if (this.column2ToolMap[p_row.column] === this.selectedTool) { + return "selected-tool"; + } else { + return ""; + } } } }; diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js index a5fba408..114e169e 100644 --- a/cypress/component/category-toolgroup.cy.js +++ b/cypress/component/category-toolgroup.cy.js @@ -159,6 +159,13 @@ describe("Tool Group component", () => { cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}"); // select the first tool cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click(); - + // Then the column gets highlighted + cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')") + .invoke("css", "background-color").then((InitialBackgroundColor) => { + cy.get("[data-cy='assessment-column-table']") + .find("tr:contains('column1')").click(); + // assert that element has different color after + cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')").should("not.have.css", "background-color", InitialBackgroundColor); + }); }); });