web/app/src/views/TagsView.vue

@@ -3,12 +3,19 @@
     <h2 class="column-title">Tag Details</h2>
 
     <div class="action-buttons">
-      <button @click="createTag">Create Tag</button>
+      <button @click="fetchTags">Refresh</button>
       <button @click="deleteTag" :disabled="tags.length === 0">
         Delete Tag
       </button>
     </div>
 
+    <div class="action-buttons">
+      <form @submit="createTag">
+        <input type="text" name="newtagname" v-model="newTagName" placeholder="New Tag Name">
+        <button type="submit">Create Tag</button>
+      </form>
+    </div>
+
     <!-- Table to display tags -->
     <table v-if="tags.length > 0" class="tag-table">
       <thead>
@@ -98,6 +105,9 @@
 <script>
 import { useWorkers } from "@/stores/workers";
 import { useNotifs } from "@/stores/notifications";
+import { WorkerMgtApi } from '@/manager-api';
+import { WorkerTag } from '@/manager-api';
+import { getAPIClient } from "@/api-client";
 import TabItem from "@/components/TabItem.vue";
 import TabsWrapper from "@/components/TabsWrapper.vue";
 
@@ -110,19 +120,23 @@ export default {
     return {
       tags: [],
       selectedTag: null,
+      newTagName: "",
+      workers: useWorkers(),
     };
   },
 
   mounted() {
     this.fetchTags();
+
+    const api = new WorkerMgtApi(getAPIClient());
+    window.api = api;
   },
 
   methods: {
     fetchTags() {
-      useWorkers()
-        .refreshTags()
+      this.workers.refreshTags()
         .then(() => {
-          this.tags = useWorkers().tags;
+          this.tags = this.workers.tags;
         })
         .catch((error) => {
           const errorMsg = JSON.stringify(error);
@@ -130,9 +144,18 @@ export default {
         });
     },
 
-    createTag() {
-      const newTag = { name: "name", description: "this is a test field" };
-      this.tags.push(newTag);
+    createTag(event) {
+      event.preventDefault();
+
+      const api = new WorkerMgtApi(getAPIClient());
+      const newTag = new WorkerTag(this.newTagName);
+
+      api.createWorkerTag(newTag)
+        .then(this.fetchTags)
+        .catch((error) => {
+          const errorMsg = JSON.stringify(error);
+          useNotifs().add(`Error: ${errorMsg}`);
+        });
     },
 
     deleteTag() {