From 1310e5c9e27343a2a1249ff9f5772a01b10e0a85 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 25 May 2022 17:14:21 +0200
Subject: [PATCH] Web: Set height for Tasks List on load and window resize

Calculate the Tasks List height by subtracting its offsetTop from
the Jobs Details column height.

Known issues:
There is a glitch in which the height can be sometimes longer or shorter
than expected, due to asynchronous loading of other components in Job Details
(such as Job Settings or table filters).
---
 web/app/src/components/TasksTable.vue | 26 ++++++++++++++++++++++++--
 web/app/src/views/JobsView.vue        |  2 +-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/web/app/src/components/TasksTable.vue b/web/app/src/components/TasksTable.vue
index 334cc784..f87ee6d8 100644
--- a/web/app/src/components/TasksTable.vue
+++ b/web/app/src/components/TasksTable.vue
@@ -5,7 +5,7 @@
     :activeStatuses="shownStatuses"
     @click="toggleStatusFilter"
   />
-  <div class="task-list-container">
+  <div class="task-list-container" id="task-list-container">
     <div class="task-list" id="flamenco_task_list"></div>
   </div>
 </template>
@@ -74,7 +74,8 @@ export default {
       initialSort: [
         { column: "updated", dir: "desc" },
       ],
-      height: "300px", // Must be set in order for the virtual DOM to function correctly.
+      height: "100%", // Must be set in order for the virtual DOM to function correctly.
+      maxHeight: "100%",
       data: [], // Will be filled via a Flamenco API request.
       selectable: false, // The active task is tracked by click events.
     };
@@ -124,6 +125,8 @@ export default {
       // let tasks = data.tasks.map((j) => API.TaskUpdate.constructFromObject(j));
       this.tabulator.setData(data.tasks);
       this._refreshAvailableStatuses();
+
+      this._setTableHeight();
     },
     processTaskUpdate(taskUpdate) {
       // updateData() will only overwrite properties that are actually set on
@@ -171,7 +174,26 @@ export default {
       if (!row) return
       if (row.reformat) row.reformat();
       else if (row.reinitialize) row.reinitialize(true);
+    },
+    _setTableHeight() {
+      let jobDetailsColumn = document.getElementById('col-job-details');
+      let taskListTable = document.getElementById('task-list-container');
+
+      if (!jobDetailsColumn || !taskListTable) {
+        return;
+      }
+
+      let tableHeight = jobDetailsColumn.clientHeight - taskListTable.offsetTop;
+      this.tabulator.setHeight(tableHeight);
     }
   }
 };
+
+function resizeTasksListTable() {
+  if (window.tasksTableVue) {
+    window.tasksTableVue._setTableHeight();
+  }
+}
+
+window.addEventListener('resize', resizeTasksListTable);
 </script>
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index 5dfc4665..7f3fd730 100644
--- a/web/app/src/views/JobsView.vue
+++ b/web/app/src/views/JobsView.vue
@@ -2,7 +2,7 @@
   <div class="col col-1">
     <jobs-table ref="jobsTable" :activeJobID="jobID" @tableRowClicked="onTableJobClicked" />
   </div>
-  <div class="col col-2">
+  <div class="col col-2" id="col-job-details">
     <job-details :jobData="jobs.activeJob" />
     <tasks-table v-if="hasJobData" ref="tasksTable" :jobID="jobID" :taskID="taskID" @tableRowClicked="onTableTaskClicked" />
   </div>