From 84e1ca9c6720633a624465beaa91b998019bec07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Fri, 15 Apr 2022 16:38:44 +0200
Subject: [PATCH] Web: allow deselection of jobs

This ensures that deselecting a job also removes it from the job details
column.
---
 web/app/src/App.vue                  |  5 +++++
 web/app/src/components/JobsTable.vue | 22 +++++++++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 206614e0..331050ee 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -55,6 +55,11 @@ export default {
   methods: {
     // UI component event handlers:
     onSelectedJobChanged(jobSummary) {
+      if (!jobSummary) { // There is no selected job.
+        this.selectedJob = {}
+        return;
+      }
+
       const jobsAPI = new API.JobsApi(this.apiClient);
       this._wrap(jobsAPI.fetchJob(jobSummary.id))
         .then((job) => {
diff --git a/web/app/src/components/JobsTable.vue b/web/app/src/components/JobsTable.vue
index 31548f7d..e1ba8a4a 100644
--- a/web/app/src/components/JobsTable.vue
+++ b/web/app/src/components/JobsTable.vue
@@ -50,6 +50,7 @@ export default {
     window.jobsTableVue = this;
     this.tabulator = new Tabulator('#flamenco_job_list', this.options);
     this.tabulator.on("rowSelected", this.onRowSelected);
+    this.tabulator.on("rowDeselected", this.onRowDeselected);
     this.fetchAllJobs();
   },
   methods: {
@@ -74,10 +75,10 @@ export default {
       });
     },
     onJobsFetched(data) {
-      // "Down-cast" to JobUpdate to only get those fields, just for debugging things.
+      // "Down-cast" to JobUpdate to only get those fields, just for debugging things:
       // data.jobs = data.jobs.map((j) => API.JobUpdate.constructFromObject(j));
       this.tabulator.setData(data.jobs);
-      this.restoreRowSelection();
+      this._restoreRowSelection();
     },
     processJobUpdate(jobUpdate) {
       // updateData() will only overwrite properties that are actually set on
@@ -91,17 +92,20 @@ export default {
     },
 
     // Selection handling.
-    onRowSelected(row) {
-      this.storeRowSelection();
-      const rowData = row.getData();
-      this.$emit("selectedJobChange", rowData);
+    onRowSelected(selectedRow) {
+      const selectedData = selectedRow.getData();
+      this._storeRowSelection([selectedData]);
+      this.$emit("selectedJobChange", selectedData);
     },
-    storeRowSelection() {
-      const selectedData = this.tabulator.getSelectedData();
+    onRowDeselected(deselectedRow) {
+      this._storeRowSelection([]);
+      this.$emit("selectedJobChange", null);
+    },
+    _storeRowSelection(selectedData) {
       const selectedJobIDs = selectedData.map((row) => row.id);
       localStorage.setItem("selectedJobIDs", selectedJobIDs);
     },
-    restoreRowSelection() {
+    _restoreRowSelection() {
       const selectedJobIDs = localStorage.getItem('selectedJobIDs');
       if (!selectedJobIDs) {
         return;