From 9fd4d55fdbbc7964b757ef8e35b95013fa5887c2 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 17:31:30 +0200
Subject: [PATCH] Web: move status indicator code into its own function

Status indicators are used in Tabulator cells, and it's unknown whether
we can use Vue components there. Moving the code to a central place makes
it a bit easier to reuse the function in various places.
---
 web/app/src/assets/base.css           |  8 ++++++++
 web/app/src/components/JobsTable.vue  |  6 +-----
 web/app/src/components/TasksTable.vue |  8 ++------
 web/app/src/statusindicator.js        | 16 ++++++++++++++++
 4 files changed, 27 insertions(+), 11 deletions(-)
 create mode 100644 web/app/src/statusindicator.js

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 3f9c0589..6521da9e 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -351,3 +351,11 @@ footer {
 .tabulator-row.active-row.tabulator-row-even {
   background-color: var(--table-color-background-row-active-even);
 }
+
+ul.status-filter-bar {
+  align-items: center;
+  display: flex;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
diff --git a/web/app/src/components/JobsTable.vue b/web/app/src/components/JobsTable.vue
index 363d6422..3f170cde 100644
--- a/web/app/src/components/JobsTable.vue
+++ b/web/app/src/components/JobsTable.vue
@@ -41,11 +41,7 @@ export default {
         // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), },
         {
           title: 'Status', field: 'status', sorter: 'string',
-          formatter(cell) {
-            const cellValue = cell.getData();
-            const label = toTitleCase(cellValue.status);
-            return `<span title="${label}" class="indicator status-${cellValue.status}"></span>`;
-          },
+          formatter: (cell) => indicator(cell.getData().status),
         },
         { title: 'Name', field: 'name', sorter: 'string' },
         { title: 'Type', field: 'type', sorter: 'string' },
diff --git a/web/app/src/components/TasksTable.vue b/web/app/src/components/TasksTable.vue
index 4e61a173..4d08c465 100644
--- a/web/app/src/components/TasksTable.vue
+++ b/web/app/src/components/TasksTable.vue
@@ -9,7 +9,7 @@
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api'
-import { toTitleCase } from '@/strings';
+import { indicator } from '@/statusindicator';
 import { apiClient } from '@/stores/api-query-count';
 import { useTasks } from '@/stores/tasks';
 
@@ -32,11 +32,7 @@ export default {
         // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), },
         {
           title: 'Status', field: 'status', sorter: 'string',
-          formatter(cell, formatterParams) { // eslint-disable-line no-unused-vars
-            const cellValue = cell.getData();
-            const label = toTitleCase(cellValue.status);
-            return `<span title="${label}" class="indicator status-${cellValue.status}"></span>`;
-          }
+          formatter: (cell) => indicator(cell.getData().status),
         },
         { title: 'Name', field: 'name', sorter: 'string' },
         {
diff --git a/web/app/src/statusindicator.js b/web/app/src/statusindicator.js
new file mode 100644
index 00000000..7c5b2030
--- /dev/null
+++ b/web/app/src/statusindicator.js
@@ -0,0 +1,16 @@
+import { toTitleCase } from '@/strings';
+
+/**
+ * Construct HTML for a certain job/task status.
+ *
+ * This function is implemented here as JavaScript, because we don't know how to
+ * get Tabulator to use Vue components in cells.
+ *
+ * @param {string} status The job/task status. Assumed to only consist of
+ *     letters and dashes, HTML-safe, and valid as a CSS class name.
+ * @returns the HTML for the status indicator.
+ */
+export function indicator(status) {
+  const label = toTitleCase(status);
+  return `<span title="${label}" class="indicator status-${status}"></span>`;
+}