Mass Job Selection (#104418)

Add a "Select Preceding Jobs" button to the job table button bar.
Users can select a job (or multiple jobs) and click "Select Preceding
Jobs" which will then select all jobs with an updated timestamp that
precedes the selected job(s) updated timestamp.

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104418
Reviewed-by: Sybren A. Stüvel <sybren@blender.org>

web/app/src/components/jobs/JobActionsBar.vue

@@ -26,6 +26,12 @@
       v-on:click="onButtonDelete">
       Delete...
     </button>
+    <button
+      title="Select all jobs with updated timestamps equal to or less than a selected job's updated timestamp. Helpful for managing jobs updated before a certain timestamp."
+      :disabled="!jobs.selectedJobs.length"
+      v-on:click="onButtonMassSelect">
+      Select Preceding Jobs
+    </button>
   </div>
 </template>
 
@@ -57,7 +63,11 @@ export default {
       this._hideDeleteJobPopup();
     },
   },
+  emits: ['mass-select'],
   methods: {
+    onButtonMassSelect() {
+      this.$emit('mass-select');
+    },
     onButtonDelete() {
       this._startJobDeletionFlow();
     },

web/app/src/components/jobs/JobsTable.vue

@@ -1,7 +1,7 @@
 <template>
   <h2 class="column-title">Jobs</h2>
   <div class="btn-bar-group">
-    <job-actions-bar :activeJobID="jobs.activeJobID" />
+    <job-actions-bar :activeJobID="jobs.activeJobID" @mass-select="handleMassSelect" />
     <div class="align-right">
       <status-filter-bar
         :availableStatuses="availableStatuses"
@@ -258,6 +258,34 @@ export default {
         console.error(e);
       }
     },
+    /**
+     * Selects all jobs whose updated timestamp precedes the selected job(s) updated timestamp(s).
+     * Handles the section of rows on Tabulator AND the Pinia store.
+     */
+    handleMassSelect() {
+      // Find the most recent updated timestamp from selected jobs
+      const mostRecentlyUpdatedJob = this.jobs.selectedJobs.reduce((mostRecent, current) => {
+        return current.updated > mostRecent.updated ? current : mostRecent;
+      });
+
+      // Find the job rows whose updated timestamp is less than or equal to the most recent updated timestamp
+      const rowsToSelect = this.tabulator.searchRows(
+        'updated',
+        '<=',
+        mostRecentlyUpdatedJob.updated
+      );
+
+      this.tabulator.selectRow(rowsToSelect);
+      // Unlike handleMultiSelect, this function takes responsibility of updating the Pinia store since it functions independent of row clicks.
+      this.jobs.setSelectedJobs(this.getSelectedJobs()); // Set the selected jobs according to tabulator's selected rows
+    },
+    /**
+     * A helper function for onRowClick.
+     * It handles Shift + left-click and Ctrl/Cmd + left-click events, and the selection of rows on Tabulator.
+     * @param event listen for keyboard events
+     * @param row the row that was clicked
+     * @param tabulator the tabulator to be modified
+     */
     handleMultiSelect(event, row, tabulator) {
       const position = row.getPosition();
 
@@ -290,11 +318,12 @@ export default {
         tabulator.selectRow(row);
       }
     },
+    /**
+     * Handles Tabulator row click events, routes to the active job ID, and updates the Pinia store accordingly for active and selected jobs.
+     * @param event listen for keyboard events
+     * @param row the row that was clicked
+     */
     async onRowClick(event, row) {
-      // Take a copy of the data, so that it's decoupled from the tabulator data
-      // store. There were some issues where navigating to another job would
-      // overwrite the old job's ID, and this prevents that.
-
       // Handles Shift + Click, Ctrl + Click, and regular Click
       this.handleMultiSelect(event, row, this.tabulator);