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

JobsTable: Add function to recalculate table height

Browse Source 
Copy-paste of TasksTable `recalcTableHeight`.

Even though the function does not work well 100%, it's better than not
having the table resize.

When the issue gets fixed, it should be copied over to TasksTable and WorkersTable.
This commit is contained in:
Pablo Vazquez 2022-07-05 12:56:29 +02:00 committed by Francesco Siddi
parent ba0116c589
commit 69a6279f24
1 changed files with 53 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/app/src/components/jobs/JobsTable.vue
View File

@ -1,12 +1,12 @@
<template>
<h2 class="column-title">Jobs</h2>
<job-actions-bar />
<status-filter-bar
:availableStatuses="availableStatuses"
:activeStatuses="shownStatuses"
@click="toggleStatusFilter"
/>
<div>
<h2 class="column-title">Jobs</h2>
<job-actions-bar />
<status-filter-bar
:availableStatuses="availableStatuses"
:activeStatuses="shownStatuses"
@click="toggleStatusFilter"
/>
<div class="job-list with-clickable-row" id="flamenco_job_list"></div>
</div>
</template>
@ -86,12 +86,23 @@ export default {
this.tabulator = new Tabulator('#flamenco_job_list', options);
this.tabulator.on("rowClick", this.onRowClick);
this.tabulator.on("tableBuilt", this._onTableBuilt);
window.addEventListener('resize', this.recalcTableHeight);
},
unmounted() {
window.removeEventListener('resize', this.recalcTableHeight);
},
watch: {
activeJobID(newJobID, oldJobID) {
this._reformatRow(oldJobID);
this._reformatRow(newJobID);
},
availableStatuses() {
// Statuses changed, so the filter bar could have gone from "no statuses"
// to "any statuses" (or one row of filtering stuff to two, I don't know)
// and changed height.
this.$nextTick(this.recalcTableHeight);
},
},
computed: {
selectedIDs() {
@ -125,6 +136,8 @@ export default {
// data.jobs = data.jobs.map((j) => API.JobUpdate.constructFromObject(j));
this.tabulator.setData(data.jobs);
this._refreshAvailableStatuses();
this.recalcTableHeight();
},
processJobUpdate(jobUpdate) {
// updateData() will only overwrite properties that are actually set on
@ -183,6 +196,39 @@ export default {
if (row.reformat) row.reformat();
else if (row.reinitialize) row.reinitialize(true);
},
/**
* Recalculate the appropriate table height to fit in the column without making that scroll.
*/
recalcTableHeight() {
if (!this.tabulator.initialized) {
// Sometimes this function is called too early, before the table was initialised.
// After the table is initialised it gets resized anyway, so this call can be ignored.
return;
}
const table = this.tabulator.element;
const tableContainer = table.parentElement;
const outerContainer = tableContainer.parentElement;
if (!outerContainer) {
// This can happen when the component was removed before the function is
// called. This is possible due to the use of Vue's `nextTick()`
// function.
return;
}
const availableHeight = outerContainer.clientHeight - 12; // TODO: figure out where the -12 comes from.
if (tableContainer.offsetParent != tableContainer.parentElement) {
// `offsetParent` is assumed to be the actual column in the 3-column
// view. To ensure this, it's given `position: relative` in the CSS
// styling.
console.warn("JobsTable.recalcTableHeight() only works when the offset parent is the real parent of the element.");
return;
}
const tableHeight = availableHeight - tableContainer.offsetTop;
this.tabulator.setHeight(tableHeight);
},
},
};
</script>