From 0821df8f3ae3d0679f842029cc07c9357f078342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Mon, 4 Sep 2023 13:24:50 +0200
Subject: [PATCH] Webapp: make Tags view respond to SocketIO messages

Make the Tags view/tab respond to changes in worker tags. This way the
'Refresh' button is no longer necessary, as the information is always
up to date.
---
 web/app/src/views/TagsView.vue | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/web/app/src/views/TagsView.vue b/web/app/src/views/TagsView.vue
index 28da2307..fead7c0c 100644
--- a/web/app/src/views/TagsView.vue
+++ b/web/app/src/views/TagsView.vue
@@ -4,7 +4,6 @@
 
     <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,7 +31,14 @@
 
     <div id="tag-table-container"></div>
   </div>
-  <footer class="app-footer"></footer>
+  <footer class="app-footer">
+    <notification-bar />
+    <update-listener ref="updateListener"
+      mainSubscription="allWorkerTags"
+      @workerTagUpdate="onSIOWorkerTagsUpdate"
+      @sioReconnected="onSIOReconnected"
+      @sioDisconnected="onSIODisconnected" />
+  </footer>
 </template>
 
 <style>
@@ -62,9 +68,13 @@ import { useNotifs } from "@/stores/notifications";
 import { WorkerMgtApi } from "@/manager-api";
 import { WorkerTag } from "@/manager-api";
 import { getAPIClient } from "@/api-client";
+import NotificationBar from '@/components/footer/NotificationBar.vue'
+import UpdateListener from '@/components/UpdateListener.vue'
 
 export default {
   components: {
+    NotificationBar,
+    UpdateListener,
   },
   data() {
     return {
@@ -155,13 +165,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) => {
@@ -181,8 +184,6 @@ export default {
         .then(() => {
           this.selectedTag = null;
           this.tabulator.setData(this.tags);
-
-          this.fetchTags();
         })
         .catch((error) => {
           const errorMsg = JSON.stringify(error);
@@ -200,6 +201,17 @@ export default {
       this.selectedTag = tag;
       this.activeRowIndex = rowIndex;
     },
+
+    // SocketIO connection event handlers:
+    onSIOReconnected() {
+      this.fetchTags();
+    },
+    onSIODisconnected(reason) {
+    },
+    onSIOWorkerTagsUpdate(workerTagsUpdate) {
+      this.fetchTags();
+    },
+
   },
 };
 </script>