web/app/src/views/TagsView.vue

@@ -91,6 +91,10 @@ export default {
     this.tabulator.on("tableBuilt", () => {
       this.fetchTags();
     });
+    this.tabulator.on("cellEdited", (cell) => {
+      const editedTag = cell.getRow().getData();
+      this.updateTagInAPI(editedTag);
+    });
   },
 
   methods: {
@@ -128,6 +132,28 @@ export default {
         });
     },
 
+    updateTagInAPI(tag) {
+      const { id: tagId, ...updatedTagData } = tag;
+      const api = new WorkerMgtApi(getAPIClient());
+
+      api
+        .updateWorkerTag(tagId, updatedTagData)
+        .then(() => {
+          // Update the local state with the edited data without requiring a page refresh
+          this.tags = this.tags.map((tag) => {
+            if (tag.id === tagId) {
+              return { ...tag, ...updatedTagData };
+            }
+            return tag;
+          });
+          console.log("Tag updated successfully");
+        })
+        .catch((error) => {
+          const errorMsg = JSON.stringify(error);
+          useNotifs().add(`Error: ${errorMsg}`);
+        });
+    },
+
     deleteTag() {
       if (!this.selectedTag) {
         return;