web/app/src/views/TagsView.vue

@@ -26,9 +26,7 @@
   <footer class="app-footer"></footer>
 </template>
 
-<style scoped>
-@import "@/assets/base.css";
-</style>
+<style scoped></style>
 
 <script>
 import { TabulatorFull as Tabulator } from "tabulator-tables";
@@ -59,21 +57,12 @@ export default {
     this.fetchTags();
 
     const vueComponent = this;
-    const api = new WorkerMgtApi(getAPIClient());
-    window.api = api;
 
     const tag_options = {
       columns: [
         { title: "Name", field: "name", sorter: "string" },
         { title: "Description", field: "description", sorter: "string" },
       ],
-      rowFormatter(row) {
-        const data = row.getData();
-        const isActive = data.id === vueComponent.activeTagID;
-        const classList = row.getElement().classList;
-        classList.toggle("active-row", isActive);
-        classList.toggle("deletion-requested", !!data.delete_requested_at);
-      },
       layout: "fitData",
       layoutColumnsOnNewData: true,
       height: "525px", // Must be set in order for the virtual DOM to function correctly.
@@ -88,10 +77,6 @@ export default {
   },
 
   methods: {
-    sortData() {
-      const tab = this.tabulator;
-      tab.setSort(tab.getSorters()); // This triggers re-sorting.
-    },
     _onTableBuilt() {
       this.fetchTags();
     },
@@ -118,6 +103,7 @@ export default {
         .createWorkerTag(newTag)
         .then(() => {
           this.fetchTags(); // Refresh table data
+          //TODO: Clear the tab as well
         })
         .catch((error) => {
           const errorMsg = JSON.stringify(error);
@@ -156,16 +142,12 @@ export default {
     },
 
     onTagClick(tag, rowIndex) {
-      console.log("Clicked Tag:", tag);
-      console.log("Selected Tag:", this.selectedTag);
-      this.selectedTag = this.selectedTag === tag ? null : tag;
-      this.activeRowIndex = rowIndex;
-    },
-  },
+      this.tabulator.deselectRow();
 
-  computed: {
-    isSelected() {
-      return (tag) => tag === this.selectedTag;
+      this.tabulator.selectRow(rowIndex);
+
+      this.selectedTag = tag;
+      this.activeRowIndex = rowIndex;
     },
   },
 };