blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: move status indicator code into its own function

Browse Source 
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.
This commit is contained in:
Sybren A. Stüvel 2022-05-16 17:31:30 +02:00
parent 32737ef17b
commit 9fd4d55fdb
4 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/src/assets/base.css
View File

@ -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;
}

6
web/app/src/components/JobsTable.vue
View File

@ -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' },

8
web/app/src/components/TasksTable.vue
View File

@ -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' },
{

16
web/app/src/statusindicator.js Normal file
View File

@ -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>`;
}