From 9a3cf7997e778f8e6843fd02048f2da7acc96716 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Sat, 28 Oct 2023 11:25:37 +0200
Subject: [PATCH] Track changes to projects list.

The main application component listens for project events and
updates the Vuex store when a project related event is seen.
---
 lib/www/client/source/src/App.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/lib/www/client/source/src/App.vue b/lib/www/client/source/src/App.vue
index 61b0427..b5bb6d1 100644
--- a/lib/www/client/source/src/App.vue
+++ b/lib/www/client/source/src/App.vue
@@ -35,7 +35,7 @@
 </style>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import DougalNavigation from './components/navigation';
 import DougalFooter from './components/footer';
 
@@ -53,7 +53,8 @@ export default {
 
   computed: {
     snackText () { return this.$store.state.snack.snackText },
-    snackColour () { return this.$store.state.snack.snackColour }
+    snackColour () { return this.$store.state.snack.snackColour },
+    ...mapGetters(["serverEvent"])
   },
 
   watch: {
@@ -75,17 +76,25 @@ export default {
       if (!newVal) {
         this.$store.commit('setSnackText', "");
       }
+    },
+
+    async serverEvent (event) {
+      if (event.channel == "project" && event.payload?.schema == "public") {
+        // Projects changed in some way or another
+        await this.refreshProjects();
+      }
     }
   },
 
   methods: {
-    ...mapActions(["setCredentials"])
+    ...mapActions(["setCredentials", "refreshProjects"])
   },
 
-  mounted () {
+  async mounted () {
     // Local Storage values are always strings
     this.$vuetify.theme.dark = localStorage.getItem("darkTheme") == "true";
-    this.setCredentials()
+    await this.setCredentials();
+    this.refreshProjects();
   }
 
 };