fix(bulk actions): use shift key to select a range of records (#2451)

closes #2290 

---------

Co-authored-by: Sebastian <[email protected]>
Co-authored-by: Tom Winter <[email protected]>

Author: 3 people

src/app/core/common-components/entities-table/entities-table.component.html

@@ -46,11 +46,19 @@
       BULK SELECT
     -->
     <ng-container [matColumnDef]="ACTIONCOLUMN_SELECT">
-      <th mat-header-cell *matHeaderCellDef style="width: 0"></th>
+      <th mat-header-cell *matHeaderCellDef style="width: 0">
+        <mat-checkbox
+          (change)="selectAllRows($event)"
+          [checked]="isAllSelected()"
+          [indeterminate]="isIndeterminate()"
+        ></mat-checkbox>
+      </th>
 
       <td mat-cell *matCellDef="let row">
         <mat-checkbox
+          (change)="onRowSelect($event, row)"
           [checked]="selectedRecords?.includes(row.record)"
+          (click)="$event.stopPropagation()"
         ></mat-checkbox>
       </td>
     </ng-container>
@@ -81,7 +89,7 @@
       [class.inactive-row]="!row.record.isActive"
       [style.background-color]="getBackgroundColor?.(row.record)"
       class="table-row"
-      (click)="onRowClick(row)"
+      (mousedown)="onRowMouseDown($event, row)"
       style="cursor: pointer"
     ></tr>
   </table>

src/app/core/common-components/entities-table/entities-table.component.ts

@@ -10,7 +10,10 @@ import { EntityFieldEditComponent } from "../entity-field-edit/entity-field-edit
 import { EntityFieldLabelComponent } from "../entity-field-label/entity-field-label.component";
 import { EntityFieldViewComponent } from "../entity-field-view/entity-field-view.component";
 import { ListPaginatorComponent } from "./list-paginator/list-paginator.component";
-import { MatCheckboxModule } from "@angular/material/checkbox";
+import {
+  MatCheckboxChange,
+  MatCheckboxModule,
+} from "@angular/material/checkbox";
 import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import {
@@ -77,6 +80,8 @@ export class EntitiesTableComponent<T extends Entity> {
     this.updateFilteredData();
     this.isLoading = false;
   }
+  private lastSelectedIndex: number = null;
+  private lastSelection: boolean = null;
   _records: T[] = [];
   /** data displayed in the template's table */
   recordsDataSource: MatTableDataSource<TableRow<T>>;
@@ -235,7 +240,6 @@ export class EntitiesTableComponent<T extends Entity> {
         this.selectedRecords.splice(index, 1);
       }
     }
-
     this.selectedRecordsChange.emit(this.selectedRecords);
   }
 
@@ -263,7 +267,6 @@ export class EntitiesTableComponent<T extends Entity> {
     if (row.formGroup && !row.formGroup.disabled) {
       return;
     }
-
     if (this._selectable) {
       this.selectRow(row, !this.selectedRecords?.includes(row.record));
       return;
@@ -273,6 +276,79 @@ export class EntitiesTableComponent<T extends Entity> {
     this.entityClick.emit(row.record);
   }
 
+  onRowMouseDown(event: MouseEvent, row: TableRow<T>) {
+    if (!this._selectable) {
+      this.onRowClick(row);
+      return;
+    }
+
+    // Find the index of the row in the sorted and filtered data
+    const sortedData = this.recordsDataSource.sortData(
+      this.recordsDataSource.data,
+      this.recordsDataSource.sort,
+    );
+    const currentIndex = sortedData.indexOf(row);
+
+    const isCheckboxClick =
+      event.target instanceof HTMLInputElement &&
+      event.target.type === "checkbox";
+
+    if (event.shiftKey && this.lastSelectedIndex !== null) {
+      const start = Math.min(this.lastSelectedIndex, currentIndex);
+      const end = Math.max(this.lastSelectedIndex, currentIndex);
+      const shouldCheck =
+        this.lastSelection !== null
+          ? !this.lastSelection
+          : !this.selectedRecords.includes(row.record);
+
+      for (let i = start; i <= end; i++) {
+        const rowToSelect = sortedData[i];
+        const isSelected = this.selectedRecords.includes(rowToSelect.record);
+
+        if (shouldCheck && !isSelected) {
+          this.selectedRecords.push(rowToSelect.record);
+        } else if (!shouldCheck && isSelected) {
+          this.selectedRecords = this.selectedRecords.filter(
+            (record) => record !== rowToSelect.record,
+          );
+        }
+      }
+      this.selectedRecordsChange.emit(this.selectedRecords);
+    } else {
+      const isSelected = this.selectedRecords.includes(row.record);
+      this.selectRow(row, !isSelected);
+      this.lastSelectedIndex = currentIndex;
+      this.lastSelection = isSelected;
+    }
+
+    if (isCheckboxClick) {
+      this.onRowClick(row);
+    }
+  }
+
+  onRowSelect(event: MatCheckboxChange, row: TableRow<T>) {
+    this.selectRow(row, event.checked);
+  }
+
+  selectAllRows(event: MatCheckboxChange) {
+    if (event.checked) {
+      this.selectedRecords = this.recordsDataSource.data.map(
+        (row) => row.record,
+      );
+    } else {
+      this.selectedRecords = [];
+    }
+    this.selectedRecordsChange.emit(this.selectedRecords);
+  }
+
+  isAllSelected() {
+    return this.selectedRecords.length === this.recordsDataSource.data.length;
+  }
+
+  isIndeterminate() {
+    return this.selectedRecords.length > 0 && !this.isAllSelected();
+  }
+
   showEntity(entity: T) {
     switch (this.clickMode) {
       case "popup":

src/app/core/entity-list/entity-list/entity-list.component.html

@@ -7,8 +7,6 @@
 
   <app-view-actions>
     <div class="flex-row gap-regular">
-      <ng-container *ngTemplateOutlet="bulkActions"></ng-container>
-
       <app-entity-create-button
         [entityType]="entityConstructor"
         (entityCreate)="addNew()"
@@ -35,6 +33,12 @@
     ></app-filter>
   </div>
 
+  <!-- Bulk Actions -->
+
+  <ng-container *ngTemplateOutlet="bulkActions"></ng-container>
+
+  <!-- Tab Groups-->
+
   <div class="mat-elevation-z1">
     <div *ngIf="groups.length > 1">
       <mat-tab-group
@@ -57,17 +61,23 @@
 
 <!-- Mobile Version -->
 <div *ngIf="!isDesktop">
-  <h2>{{ title }}</h2>
+  <app-view-title [disableBackButton]="true">
+    <h2>{{ title }}</h2>
+  </app-view-title>
 
-  <div class="flex-row">
-    <div *ngTemplateOutlet="filterDialog"></div>
+  <app-view-actions>
+    <div class="flex-row full-width">
+      <div *ngTemplateOutlet="filterDialog"></div>
 
-    <button mat-icon-button color="primary" [matMenuTriggerFor]="additional">
-      <fa-icon icon="ellipsis-v"></fa-icon>
-    </button>
-  </div>
+      <button mat-icon-button color="primary" [matMenuTriggerFor]="additional">
+        <fa-icon icon="ellipsis-v"></fa-icon>
+      </button>
+    </div>
+  </app-view-actions>
 
-  <ng-container *ngTemplateOutlet="bulkActions"></ng-container>
+  <div *ngIf="selectedRows" class="bulk-action-spacing">
+    <ng-container *ngTemplateOutlet="bulkActions"></ng-container>
+  </div>
 
   <ng-container *ngTemplateOutlet="subrecord"></ng-container>
 </div>
@@ -239,7 +249,9 @@ <h2>{{ title }}</h2>
 
 <ng-template #bulkActions>
   <div *ngIf="!!selectedRows" class="bulk-action-button">
-    <div i18n>Actions on selected records:</div>
+    <div i18n>
+      Actions on <b>{{ selectedRows.length }}</b> selected records:
+    </div>
 
     <div
       class="flex-row gap-small bulk-action-button"

src/app/core/entity-list/entity-list/entity-list.component.scss

@@ -15,9 +15,7 @@
 }
 
 .bulk-action-button {
-  position: fixed;
   right: sizes.$large;
-  z-index: 999;
 
   padding: sizes.$regular;
   background-color: colors.$background;

src/app/core/ui/routed-view/routed-view.component.html

@@ -1,4 +1,4 @@
-<div class="flex-row">
+<div class="flex-row flex-wrap">
   <div class="flex-grow">
     <ng-container
       *ngTemplateOutlet="viewContext?.title?.template"