Web: use Pinia for storage of selected & current Job

Using the concept of 'selected' and 'active' similar to Blender.

Not all components have been altered to use the Pinia store yet.

web/app/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "luxon": "^2.3.1",
+    "pinia": "^2.0.13",
     "socket.io-client": "2",
     "superagent": "^7.1.2",
     "tabulator-tables": "^5.1.8",

web/app/src/App.vue

@@ -22,6 +22,7 @@
 <script>
 import * as urls from '@/urls'
 import * as API from '@/manager-api';
+import { useJobs } from '@/stores/jobs';
 
 import ApiSpinner from '@/components/ApiSpinner.vue'
 import JobsTable from '@/components/JobsTable.vue'
@@ -42,27 +43,32 @@ export default {
     websocketURL: urls.ws(),
     messages: [],
 
-    selectedJob: {},
+    jobs: useJobs(),
+
     flamencoName: DEFAULT_FLAMENCO_NAME,
     flamencoVersion: DEFAULT_FLAMENCO_VERSION,
 
     numRunningQueries: 0,
   }),
   mounted() {
+    window.app = this;
     this.fetchManagerInfo();
   },
+  computed: {
+    selectedJob() { return this.jobs ? this.jobs.activeJob : null; },
+  },
   methods: {
     // UI component event handlers:
     onSelectedJobChanged(jobSummary) {
       if (!jobSummary) { // There is no selected job.
-        this.selectedJob = {}
+        this.jobs.deselectAllJobs();
         return;
       }
 
       const jobsAPI = new API.JobsApi(this.apiClient);
       this._wrap(jobsAPI.fetchJob(jobSummary.id))
         .then((job) => {
-          this.selectedJob = job;
+          this.jobs.setSelectedJob(job);
           // Forward the full job to Tabulator, so that that gets updated too.
           this.$refs.jobsTable.processJobUpdate(job);
         });
@@ -84,7 +90,8 @@ export default {
       } else {
         console.warn("App: this.$refs.jobsTable is", this.$refs.jobsTable);
       }
-      if (this.selectedJob && this.selectedJob.id == jobUpdate.id) {
+      const selectedJob = this.selectedJob;
+      if (selectedJob && selectedJob.id == jobUpdate.id) {
         this.onSelectedJobChanged(jobUpdate);
       }
     },

web/app/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 
 import App from '@/App.vue'
 import router from '@/router'
@@ -12,5 +13,8 @@ window.DateTime = DateTime;
 window.plain = (x) => { return JSON.parse(JSON.stringify(x)) };
 
 const app = createApp(App)
+const pinia = createPinia()
+
 app.use(router)
+app.use(pinia)
 app.mount('#app')

web/app/src/stores/jobs.js

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+
+import * as API from '@/manager-api';
+
+// 'use' prefix is idiomatic for Pinia stores.
+// See https://pinia.vuejs.org/core-concepts/
+export const useJobs = defineStore('jobs', {
+  state: () => ({
+    /** @type API.Job[] */
+    selectedJobs: [],
+    /** @type API.Job */
+    activeJob: null,
+  }),
+  getters: {
+    numSelected() {
+      return this.selectedJobs.length;
+    },
+  },
+  actions: {
+    // Selection of jobs.
+    setSelectedJob(job) {
+      this.selectedJobs = [job];
+      this.activeJob = job;
+    },
+    setSelectedJobs(jobs) {
+      this.selectedJobs = jobs;
+      this.activeJob = jobs[jobs.length-1]; // Last-selected is the active one.
+    },
+    deselectAllJobs() {
+      this.selectedJobs = [];
+      this.activeJob = null;
+    },
+  },
+})

web/app/yarn.lock

@@ -88,7 +88,7 @@
     "@vue/compiler-dom" "3.2.32"
     "@vue/shared" "3.2.32"
 
-"@vue/devtools-api@^6.0.0":
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.1.4":
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
   integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
@@ -1017,6 +1017,14 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+pinia@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.13.tgz#6656fc290dae120a9f0cb2f5c520df400d41b8c5"
+  integrity sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==
+  dependencies:
+    "@vue/devtools-api" "^6.1.4"
+    vue-demi "*"
+
 postcss@^8.1.10, postcss@^8.4.12:
   version "8.4.12"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
@@ -1280,6 +1288,11 @@ vite@^2.9.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@*:
+  version "0.12.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
+  integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"