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

Web: move Tabulator options into mounted() function

Browse Source 
Move the Tabulator options from the `data()` function to the `mounted()`
function. This allows upcoming changes to refer to the Vue component.
This commit is contained in:
Sybren A. Stüvel 2022-05-16 15:32:09 +02:00
parent eb0bfe820b
commit 8f27ea9714
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/JobsTable.vue
View File

@ -23,6 +23,17 @@ export default {
JobActionsBar, JobActionsBar,
}, },
data: () => { 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 = { const options = {
// See pkg/api/flamenco-manager.yaml, schemas Job and JobUpdate. // See pkg/api/flamenco-manager.yaml, schemas Job and JobUpdate.
columns: [ 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: [ initialSort: [
{ column: "updated", dir: "desc" }, { column: "updated", dir: "desc" },
], ],
@ -58,26 +74,7 @@ export default {
data: [], // Will be filled via a Flamenco API request. data: [], // Will be filled via a Flamenco API request.
selectable: false, // The active job is tracked by click events, not row selection. selectable: false, // The active job is tracked by click events, not row selection.
}; };
return { this.tabulator = new Tabulator('#flamenco_job_list', options);
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.on("rowClick", this.onRowClick); this.tabulator.on("rowClick", this.onRowClick);
this.tabulator.on("tableBuilt", this._onTableBuilt); this.tabulator.on("tableBuilt", this._onTableBuilt);
}, },