web/app/src/views/TagsView.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="col col-workers-list">
-    <h2 class="column-title">Tag Details</h2>
+  <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="fetchTags">Refresh</button>
         <button @click="deleteTag" :disabled="!selectedTag">Delete Tag</button>
       </div>
     </div>
@@ -32,10 +31,67 @@
 
     <div id="tag-table-container"></div>
   </div>
-  <footer class="app-footer"></footer>
+  <div class="col col-tags-info">
+    <h2 class="column-title">Information</h2>
+
+    <p>
+      Workers and jobs can be tagged. With these tags you can assign a job to a
+      subset of your workers.
+    </p>
+
+    <h4>Job Perspective:</h4>
+    <ul>
+      <li>A job can have one tag, or no tag.</li>
+      <li>
+        A job <strong>with</strong> a tag will only be assigned to workers with
+        that tag.
+      </li>
+      <li>
+        A job <strong>without</strong> tag will be assigned to any worker.
+      </li>
+    </ul>
+
+    <h4>Worker Perspective:</h4>
+    <ul>
+      <li>A worker can have any number of tags.</li>
+      <li>
+        A worker <strong>with</strong> one or more tags will work only on jobs
+        with one those tags, and on tagless jobs.
+      </li>
+      <li>
+        A worker <strong>without</strong> tags will work only work on tagless
+        jobs.
+      </li>
+    </ul>
+  </div>
+  <footer class="app-footer">
+    <notification-bar />
+    <update-listener
+      ref="updateListener"
+      mainSubscription="allWorkerTags"
+      @workerTagUpdate="onSIOWorkerTagsUpdate"
+      @sioReconnected="onSIOReconnected"
+      @sioDisconnected="onSIODisconnected"
+    />
+  </footer>
 </template>
 
-<style scoped>
+<style>
+.col-tags-list {
+  grid-area: col-1;
+}
+.col-tags-info {
+  grid-area: col-2;
+  color: var(--color-text-muted);
+}
+.col-tags-info h4 {
+  margin-bottom: 0.5em;
+}
+.col-tags-info ul {
+  margin-top: 0.5em;
+  padding-left: 2em;
+}
+
 .create-tag-container {
   width: 100%;
   display: flex;
@@ -47,6 +103,9 @@
   margin-right: 10px;
   height: 30px;
 }
+.placeholder {
+  color: var(--color-text-hint);
+}
 </style>
 
 <script>
@@ -56,13 +115,13 @@ 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";
+import NotificationBar from "@/components/footer/NotificationBar.vue";
+import UpdateListener from "@/components/UpdateListener.vue";
 
 export default {
   components: {
-    TabItem,
-    TabsWrapper,
+    NotificationBar,
+    UpdateListener,
   },
   data() {
     return {
@@ -75,6 +134,8 @@ export default {
   },
 
   mounted() {
+    document.body.classList.add("is-two-columns");
+
     this.fetchTags();
 
     const tag_options = {
@@ -85,6 +146,13 @@ export default {
           field: "description",
           sorter: "string",
           editor: "input",
+          formatter(cell) {
+            const cellValue = cell.getData().description;
+            if (!cellValue) {
+              return '<span class="placeholder">click to set a description</span>';
+            }
+            return cellValue;
+          },
         },
       ],
       layout: "fitData",
@@ -103,6 +171,9 @@ export default {
       this.updateTagInAPI(editedTag);
     });
   },
+  unmounted() {
+    document.body.classList.remove("is-two-columns");
+  },
 
   methods: {
     _onTableBuilt() {
@@ -127,9 +198,6 @@ export default {
 
       const api = new WorkerMgtApi(getAPIClient());
       const newTag = new WorkerTag(this.newTagName);
-
-      newTag.description = "Default Description...";
-
       api
         .createWorkerTag(newTag)
         .then(() => {
@@ -149,13 +217,6 @@ export default {
       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) => {
@@ -175,8 +236,6 @@ export default {
         .then(() => {
           this.selectedTag = null;
           this.tabulator.setData(this.tags);
-
-          this.fetchTags();
         })
         .catch((error) => {
           const errorMsg = JSON.stringify(error);
@@ -194,6 +253,15 @@ export default {
       this.selectedTag = tag;
       this.activeRowIndex = rowIndex;
     },
+
+    // SocketIO connection event handlers:
+    onSIOReconnected() {
+      this.fetchTags();
+    },
+    onSIODisconnected(reason) {},
+    onSIOWorkerTagsUpdate(workerTagsUpdate) {
+      this.fetchTags();
+    },
   },
 };
 </script>