Added capability to map column to tool

also reflected visually
neurobagel · Oct 13, 2023 · 17a7367 · 17a7367
1 parent cb22d7f
commit 17a7367
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
@@ -12,13 +12,6 @@
             @row-selected="highlightRow"
             :tbody-tr-class="styleTableRow"
             thead-class="hidden" />
-        <b-table
-            data-cy="assessment-column-table"
-            outlined
-            head-variant="dark"
-            :items="tableRows"
-            selected-variant=""
-            thead-class="hidden" />
 
         <v-select
             data-cy="toolgroup-select"
@@ -28,6 +21,17 @@
             @input="selectTool"
             :selectable="(option) => !selectedTools.some(el => el.tool.includes(option))" />
 
+        <b-table
+            data-cy="assessment-column-table"
+            outlined
+            head-variant="dark"
+            :items="tableRows"
+            selected-variant=""
+            thead-class="hidden"
+            @row-clicked="mapColumnToTool"
+            :tbody-tr-class="styleRow" />
+
+
     </div>
 </template>
 
@@ -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
@@ -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);
+        });
     });
 });