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

WorkersTable: 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 JobsTable.
This commit is contained in:
Pablo Vazquez 2022-07-05 12:57:25 +02:00 committed by Francesco Siddi
parent 69a6279f24
commit a5e5dbd1eb
1 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/app/src/components/workers/WorkersTable.vue
View File

@ -1,5 +1,4 @@
<template>
<div>
<h2 class="column-title">Workers</h2>
<worker-actions-bar />
<status-filter-bar
@ -8,6 +7,7 @@
classPrefix="worker-"
@click="toggleStatusFilter"
/>
<div>
<div class="workers-list with-clickable-row" id="flamenco_workers_list"></div>
</div>
</template>
@ -76,12 +76,23 @@ export default {
this.tabulator = new Tabulator('#flamenco_workers_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: {
activeWorkerID(newWorkerID, oldWorkerID) {
this._reformatRow(oldWorkerID);
this._reformatRow(newWorkerID);
},
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() {
@ -112,6 +123,8 @@ export default {
onWorkersFetched(data) {
this.tabulator.setData(data.workers);
this._refreshAvailableStatuses();
this.recalcTableHeight();
},
processWorkerUpdate(workerUpdate) {
if (!this.tabulator.initialized) return;
@ -181,6 +194,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>