From 8f27ea971437215a37319d667027352fce2ce8be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Mon, 16 May 2022 15:32:09 +0200
Subject: [PATCH] Web: move Tabulator options into `mounted()` function

Move the Tabulator options from the `data()` function to the `mounted()`
function. This allows upcoming changes to refer to the Vue component.
---
 web/app/src/components/JobsTable.vue | 37 +++++++++++++---------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/web/app/src/components/JobsTable.vue b/web/app/src/components/JobsTable.vue
index 3504120e..14b70201 100644
--- a/web/app/src/components/JobsTable.vue
+++ b/web/app/src/components/JobsTable.vue
@@ -23,6 +23,17 @@ export default {
     JobActionsBar,
   },
   data: () => {
+    return {
+      filteredStatuses: new Set(),
+    };
+  },
+  mounted() {
+    // Allow testing from the JS console:
+    // jobsTableVue.processJobUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO(), previous_status: "uuuuh", name: "Updated manually"});
+    // jobsTableVue.processJobUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO()});
+    window.jobsTableVue = this;
+
+    const vueComponent = this;
     const options = {
       // See pkg/api/flamenco-manager.yaml, schemas Job and JobUpdate.
       columns: [
@@ -51,6 +62,11 @@ export default {
           }
         },
       ],
+      rowFormatter(row) {
+        const data = row.getData();
+        const isActive = (data.id === vueComponent.activeJobID);
+        row.getElement().classList.toggle("active-row", isActive);
+      },
       initialSort: [
         { column: "updated", dir: "desc" },
       ],
@@ -58,26 +74,7 @@ export default {
       data: [], // Will be filled via a Flamenco API request.
       selectable: false, // The active job is tracked by click events, not row selection.
     };
-    return {
-      options: options,
-      filteredStatuses: new Set(),
-    };
-  },
-  mounted() {
-    // Allow testing from the JS console:
-    // jobsTableVue.processJobUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO(), previous_status: "uuuuh", name: "Updated manually"});
-    // jobsTableVue.processJobUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO()});
-    window.jobsTableVue = this;
-
-    // Set the `rowFormatter` here (instead of with the rest of the options
-    // above) as it needs to refer to `this`, which isn't available in the
-    // `data` function.
-    this.options.rowFormatter = (row) => {
-      const data = row.getData();
-      const isActive = (data.id === this.activeJobID);
-      row.getElement().classList.toggle("active-row", isActive);
-    };
-    this.tabulator = new Tabulator('#flamenco_job_list', this.options);
+    this.tabulator = new Tabulator('#flamenco_job_list', options);
     this.tabulator.on("rowClick", this.onRowClick);
     this.tabulator.on("tableBuilt", this._onTableBuilt);
   },