web/app/src/views/TagsView.vue

@@ -2,12 +2,6 @@
   <div class="col col-tags-list">
     <h2 class="column-title">Available Tags</h2>
 
-    <div class="action-buttons btn-bar-group">
-      <div class="btn-bar">
-        <button @click="deleteTag" :disabled="!selectedTag">Delete Tag</button>
-      </div>
-    </div>
-
     <div class="action-buttons btn-bar">
       <form @submit="createTag">
         <div class="create-tag-container">
@@ -126,12 +120,37 @@ export default {
 
     const tag_options = {
       columns: [
-        { title: 'Name', field: 'name', sorter: 'string', editor: 'input' },
+        {
+          title: "",
+          headerHozAlign: "right",
+          formatter: (cell) => {
+            const button = document.createElement("button");
+            button.classList.add("remove-tag-button");
+            button.innerHTML = "X";
+            button.addEventListener("click", () => {
+              const tag = cell.getRow().getData();
+              this.deleteTag(tag);
+            });
+
+            return button;
+          },
+          headerSort: false,
+          vertAlign: "center",
+        },
+        {
+          title: "Name",
+          field: "name",
+          sorter: "string",
+          editor: "input",
+          vertAlign: "center",
+        },
         {
           title: 'Description',
           field: 'description',
           sorter: 'string',
           editor: 'input',
+          vertAlign: "center",
+
           formatter(cell) {
             const cellValue = cell.getData().description;
             if (!cellValue) {
@@ -144,11 +163,10 @@ export default {
       layout: 'fitData',
       layoutColumnsOnNewData: true,
       height: '82%',
-      selectable: true,
+      selectable: false,
     };
 
     this.tabulator = new Tabulator('#tag-table-container', tag_options);
-    this.tabulator.on('rowClick', this.onRowClick);
     this.tabulator.on('tableBuilt', () => {
       this.fetchTags();
     });
@@ -211,17 +229,16 @@ export default {
         });
     },
 
-    deleteTag() {
-      if (!this.selectedTag) {
-        return;
-      }
-
+    deleteTag(tag) {
       const api = new WorkerMgtApi(getAPIClient());
       api
-        .deleteWorkerTag(this.selectedTag.id)
+        .deleteWorkerTag(tag.id)
         .then(() => {
-          this.selectedTag = null;
-          this.tabulator.setData(this.tags);
+          this.tabulator.getRows().forEach((row) => {
+            if (row.getData().id === tag.id) {
+              row.delete();
+            }
+          });
         })
         .catch((error) => {
           const errorMsg = JSON.stringify(error);
@@ -229,17 +246,6 @@ export default {
         });
     },
 
-    onRowClick(event, row) {
-      const tag = row.getData();
-      const rowIndex = row.getIndex();
-
-      this.tabulator.deselectRow();
-      this.tabulator.selectRow(rowIndex);
-
-      this.selectedTag = tag;
-      this.activeRowIndex = rowIndex;
-    },
-
     // SocketIO connection event handlers:
     onSIOReconnected() {
       this.fetchTags();