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

Web: allow deselection of jobs

Browse Source 
This ensures that deselecting a job also removes it from the job details
column.
This commit is contained in:
Sybren A. Stüvel 2022-04-15 16:38:44 +02:00
parent 78a3e5faf0
commit 84e1ca9c67
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/src/App.vue
View File

@ -55,6 +55,11 @@ export default {
methods: { methods: {
// UI component event handlers: // UI component event handlers:
onSelectedJobChanged(jobSummary) { onSelectedJobChanged(jobSummary) {
if (!jobSummary) { // There is no selected job.
this.selectedJob = {}
return;
}
const jobsAPI = new API.JobsApi(this.apiClient); const jobsAPI = new API.JobsApi(this.apiClient);
this._wrap(jobsAPI.fetchJob(jobSummary.id)) this._wrap(jobsAPI.fetchJob(jobSummary.id))
.then((job) => { .then((job) => {

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

@ -50,6 +50,7 @@ export default {
window.jobsTableVue = this; window.jobsTableVue = this;
this.tabulator = new Tabulator('#flamenco_job_list', this.options); this.tabulator = new Tabulator('#flamenco_job_list', this.options);
this.tabulator.on("rowSelected", this.onRowSelected); this.tabulator.on("rowSelected", this.onRowSelected);
this.tabulator.on("rowDeselected", this.onRowDeselected);
this.fetchAllJobs(); this.fetchAllJobs();
}, },
methods: { methods: {
@ -74,10 +75,10 @@ export default {
}); });
}, },
onJobsFetched(data) { onJobsFetched(data) {
// "Down-cast" to JobUpdate to only get those fields, just for debugging things. // "Down-cast" to JobUpdate to only get those fields, just for debugging things:
// data.jobs = data.jobs.map((j) => API.JobUpdate.constructFromObject(j)); // data.jobs = data.jobs.map((j) => API.JobUpdate.constructFromObject(j));
this.tabulator.setData(data.jobs); this.tabulator.setData(data.jobs);
this.restoreRowSelection(); this._restoreRowSelection();
}, },
processJobUpdate(jobUpdate) { processJobUpdate(jobUpdate) {
// updateData() will only overwrite properties that are actually set on // updateData() will only overwrite properties that are actually set on
@ -91,17 +92,20 @@ export default {
}, },
// Selection handling. // Selection handling.
onRowSelected(row) { onRowSelected(selectedRow) {
this.storeRowSelection(); const selectedData = selectedRow.getData();
const rowData = row.getData(); this._storeRowSelection([selectedData]);
this.$emit("selectedJobChange", rowData); this.$emit("selectedJobChange", selectedData);
}, },
storeRowSelection() { onRowDeselected(deselectedRow) {
const selectedData = this.tabulator.getSelectedData(); this._storeRowSelection([]);
this.$emit("selectedJobChange", null);
},
_storeRowSelection(selectedData) {
const selectedJobIDs = selectedData.map((row) => row.id); const selectedJobIDs = selectedData.map((row) => row.id);
localStorage.setItem("selectedJobIDs", selectedJobIDs); localStorage.setItem("selectedJobIDs", selectedJobIDs);
}, },
restoreRowSelection() { _restoreRowSelection() {
const selectedJobIDs = localStorage.getItem('selectedJobIDs'); const selectedJobIDs = localStorage.getItem('selectedJobIDs');
if (!selectedJobIDs) { if (!selectedJobIDs) {
return; return;