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

Web: move Task tabulator options into the mounted() function

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

No functional changes.
This commit is contained in:
Sybren A. Stüvel 2022-05-17 15:09:25 +02:00
parent 84ba3ec8b2
commit 01a81bb3dd
1 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,17 @@ export default {
TaskActionsBar, TaskActionsBar,
}, },
data: () => { 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 = { const options = {
// See pkg/api/flamenco-manager.yaml, schemas Task and TaskUpdate. // See pkg/api/flamenco-manager.yaml, schemas Task and TaskUpdate.
columns: [ 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: [ initialSort: [
{ column: "updated", dir: "desc" }, { column: "updated", dir: "desc" },
], ],
@ -54,27 +70,8 @@ export default {
data: [], // Will be filled via a Flamenco API request. data: [], // Will be filled via a Flamenco API request.
selectable: false, // The active task is tracked by click events. 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 this.tabulator = new Tabulator('#flamenco_task_list', 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.on("rowClick", this.onRowClick); this.tabulator.on("rowClick", this.onRowClick);
this.tabulator.on("tableBuilt", this.fetchTasks); this.tabulator.on("tableBuilt", this.fetchTasks);
}, },