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