diff --git a/components/annot-single-tool.vue b/components/annot-single-tool.vue
index ae4d3b23..cedde368 100644
--- a/components/annot-single-tool.vue
+++ b/components/annot-single-tool.vue
@@ -2,10 +2,10 @@
+ :items="uniqueColumnValues"
+ :tbody-tr-class="styleTableRow">
item.column);
+ const uniqueColumns = [...new Set(columns)];
+ const colIndex = uniqueColumns.indexOf(row.column);
+ // Apply special styling if we are in a row that belongs to an even column
+ if (colIndex % 2 === 0) {
+ // Apply "stripe" styling if we are in an even row
+ if (this.uniqueColumnValues.indexOf(row) % 2 === 0) {
+ styleClass.push('column1-color1');
+ }
+ else {
+ styleClass.push('column1-color2');
+ }
+ } else {
+ if (this.uniqueColumnValues.indexOf(row) % 2 === 0) {
+ styleClass.push('column2-color1');
+ }
+ else {
+ styleClass.push('column2-color2');
+ }
+ }
+ return styleClass;
}
}
};
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/cypress/component/annot-tool-single.cy.js b/cypress/component/annot-tool-single.cy.js
index ad4c5082..526e57a4 100644
--- a/cypress/component/annot-tool-single.cy.js
+++ b/cypress/component/annot-tool-single.cy.js
@@ -69,5 +69,28 @@ describe("Annotation tool component", () => {
});
});
+ it("Displays rows in the table with the correct background color", () => {
+ cy.mount(annotSingleTool, {
+ propsData: props
+ });
+ cy.get('table')
+ .find('tr')
+ .eq(1)
+ .then(row => {
+ cy.wrap(row).should('have.class', 'column1-color1');
+ });
+ cy.get('table')
+ .find('tr')
+ .eq(2)
+ .then(row => {
+ cy.wrap(row).should('have.class', 'column2-color2');
+ });
+ cy.get('table')
+ .find('tr')
+ .eq(3)
+ .then(row => {
+ cy.wrap(row).should('have.class', 'column2-color1');
+ });
+ });
});