WorkersTable: Add function to recalculate table height

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.

web/app/src/components/workers/WorkersTable.vue

@@ -1,13 +1,13 @@
 <template>
+  <h2 class="column-title">Workers</h2>
+  <worker-actions-bar />
+  <status-filter-bar
+    :availableStatuses="availableStatuses"
+    :activeStatuses="shownStatuses"
+    classPrefix="worker-"
+    @click="toggleStatusFilter"
+  />
   <div>
-    <h2 class="column-title">Workers</h2>
-    <worker-actions-bar />
-    <status-filter-bar
-      :availableStatuses="availableStatuses"
-      :activeStatuses="shownStatuses"
-      classPrefix="worker-"
-      @click="toggleStatusFilter"
-    />
     <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>