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

This basically mirrors what 8f27ea97 did for the jobs table.

No functional changes.
---
 web/app/src/components/TasksTable.vue | 37 ++++++++++++---------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/web/app/src/components/TasksTable.vue b/web/app/src/components/TasksTable.vue
index 0831df6f..d0155c49 100644
--- a/web/app/src/components/TasksTable.vue
+++ b/web/app/src/components/TasksTable.vue
@@ -25,6 +25,17 @@ export default {
     TaskActionsBar,
   },
   data: () => {
+    return {
+      tasks: useTasks(),
+    };
+  },
+  mounted() {
+    // Allow testing from the JS console:
+    // tasksTableVue.processTaskUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO(), previous_status: "uuuuh", name: "Updated manually"});
+    // tasksTableVue.processTaskUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO()});
+    window.tasksTableVue = this;
+
+    const vueComponent = this;
     const options = {
       // See pkg/api/flamenco-manager.yaml, schemas Task and TaskUpdate.
       columns: [
@@ -47,6 +58,11 @@ export default {
           }
         },
       ],
+      rowFormatter(row) {
+        const data = row.getData();
+        const isActive = (data.id === vueComponent.taskID);
+        row.getElement().classList.toggle("active-row", isActive);
+      },
       initialSort: [
         { column: "updated", dir: "desc" },
       ],
@@ -54,27 +70,8 @@ export default {
       data: [], // Will be filled via a Flamenco API request.
       selectable: false, // The active task is tracked by click events.
     };
-    return {
-      options: options,
-      tasks: useTasks(),
-    };
-  },
-  mounted() {
-    // Allow testing from the JS console:
-    // tasksTableVue.processTaskUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO(), previous_status: "uuuuh", name: "Updated manually"});
-    // tasksTableVue.processTaskUpdate({id: "ad0a5a00-5cb8-4e31-860a-8a405e75910e", status: "heyy", updated: DateTime.local().toISO()});
-    window.tasksTableVue = 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.taskID);
-      row.getElement().classList.toggle("active-row", isActive);
-    };
-
-    this.tabulator = new Tabulator('#flamenco_task_list', this.options);
+    this.tabulator = new Tabulator('#flamenco_task_list', options);
     this.tabulator.on("rowClick", this.onRowClick);
     this.tabulator.on("tableBuilt", this.fetchTasks);
   },