New global store version + new dynamic styling for categorization page

assets/css/main.css

@@ -1,35 +1,43 @@
+/* General styles */
+
+.hidden {
+
+	display: none;
+}
+
 /* Palette for categories on the categorization page
    and other interface items in the tool */
 
 .category-style-0 {
 
 	background-color: rgb(164,208,90);
 	color: black;
-	opacity: 1.0;
 }
 .category-style-1 {
 
 	background-color: rgb(127,23,167);
 	color: white;
-	opacity: 0.5;
 }
 .category-style-2 {
 
 	background-color: rgb(70,76,174);
-	color: white;	
-	opacity: 0.5;	
+	color: white;		
 }
 .category-style-3 {
 
 	background-color: rgb(236,197,50);
 	color: black;
-	opacity: 0.5;	
 }
 .category-style-4 {
 
 	background-color: rgb(128,1,1);
-	color: white;
-	opacity: 0.5;	
+	color: white;	
+}
+
+.category-style-default {
+
+	background-color: white;
+	color: black;
 }
 
 /* Bootstrap styles */

components/category-select-table.vue

@@ -0,0 +1,106 @@
+<template>
+
+    <b-container fluid>
+
+        <!-- Heading for category select component -->
+        <b-row>
+			<h3>{{ title }}</h3>
+		</b-row>
+
+        <!-- Instructions prompting the user how to link categories and columns -->
+		<b-row>
+			<p class="instructions-text">{{ instructions }}</p>
+		</b-row>
+
+        <!-- Category selection table -->
+        <b-row>
+            <b-table
+                head-variant="dark"
+                :items="categoryTable"
+                outlined
+                @row-selected="selectCategory"
+                select-mode="single"
+                selectable
+                selected-variant=""
+                :tbody-tr-class="styleTableRow"
+                thead-class="hidden">
+            </b-table>
+        </b-row>
+
+    </b-container>
+
+</template>
+
+<script>
+
+    export default {
+
+        data() {
+
+            return {
+
+                selectedCategory: this.categories[0]
+            };
+        },
+
+        computed: {
+
+            categoryTable() {
+
+                // Return a list of dicts for each category in the table
+                return this.categories.map((name) => ({ category: name }));
+            }
+        },
+
+        methods: {
+
+            selectCategory(p_row) {
+
+                // If a new category was selected...
+                if ( 0 !== p_row.length ) {
+
+                    // 1. Save the newly selected category, if given    
+                    this.selectedCategory = p_row[0].category;
+
+                    // 2. Tell the parent page about the category selction
+					this.$emit("category-select", { category: this.selectedCategory });
+                }
+            },
+
+            styleTableRow(p_row, p_rowType) {
+
+                // 1. Determine the opacity for this row
+                let opacityClass = ( this.selectedCategory != p_row.category ) ?
+                    "category-transparent" : "category-opaque";
+
+                // 2. Get the color class for this row
+                let colorClass = this.categoryClasses[p_row.category];
+
+                return [opacityClass, colorClass];
+            }
+        },
+
+        props: ["categories", "categoryClasses", "instructions", "title"]
+    }
+
+</script>
+
+<style>
+
+    .category-transparent {
+
+        opacity: 0.5;
+    }
+
+    .category-opaque {
+
+        opacity: 1.0;
+    }
+
+    .instructions-text {
+
+        color: grey;
+        font-style: italic;
+    }    
+
+</style>

components/column-linking-table.vue

@@ -0,0 +1,50 @@
+<template>
+
+    <b-container fluid>
+
+        <!-- Category to column linking table -->
+        <b-table
+            bordered
+            outlined
+            :fields="fields"
+            head-variant="dark"
+            :items="tableData"
+            @row-clicked="applyCategory"
+            :tbody-tr-class="styleTableRow">
+        </b-table>
+
+    </b-container>
+
+</template>
+
+<script>
+
+    export default {
+
+        methods: {
+
+            applyCategory(p_row, p_index, p_event) {
+
+                // Tell the parent page that a column has been linked with a category
+                this.$emit("column-name-selected", { column: p_row.column });
+            },
+
+            styleTableRow(p_row, p_rowType) {
+
+                // Check to see what category has been assigned to this row's column, if any
+                let assignedCategory = this.columnToCategoryMap[p_row.column];
+
+                return ( null === assignedCategory ) ? "" : this.categoryClasses[assignedCategory];
+            }
+        },
+
+        props: [
+
+            "categoryClasses",
+            "columnToCategoryMap",
+            "fields",
+            "selectedCategory",
+            "tableData"
+        ]
+    }
+</script>