Update sort icons and adding checkbox in header cell for multi select (#1477)

* feat: adding checkbox to header for multi selection

* refactor: fix tests

* refactor: revert checkbox change

* refactor: addressing review comments

Author: anandtiwary

projects/components/src/checkbox/checkbox.component.scss

@@ -4,6 +4,10 @@
   ::ng-deep .mat-checkbox-checked .mat-checkbox-background,
   .mat-checkbox-indeterminate {
     background-color: $blue-4;
+
+    .mat-checkbox-mixedmark {
+      background-color: white;
+    }
   }
 
   ::ng-deep .mat-checkbox-disabled {

projects/components/src/checkbox/checkbox.component.ts

@@ -11,6 +11,7 @@ import { MatCheckboxChange } from '@angular/material/checkbox';
       labelPosition="after"
       [checked]="this.isChecked"
       [disabled]="this.isDisabled"
+      [(indeterminate)]="this.indeterminate"
       (change)="this.onCheckboxChange($event)"
       class="ht-checkbox"
       [ngClass]="{ disabled: this.isDisabled }"
@@ -35,10 +36,13 @@ export class CheckboxComponent implements ControlValueAccessor {
     this.isChecked = checked ?? false;
   }
 
-  public get checked(): boolean {
+  public get checked(): boolean | undefined {
     return this.isChecked;
   }
 
+  @Input()
+  public indeterminate?: boolean;
+
   @Input()
   public set disabled(disabled: boolean | undefined) {
     this.isDisabled = disabled ?? false;

projects/components/src/table/data/table-cdk-data-source.ts

@@ -154,6 +154,10 @@ export class TableCdkDataSource implements DataSource<TableRow> {
     this.rowsChange$.next(TableCdkRowUtil.mergeRowStates(this.cachedRows, unselectedRows));
   }
 
+  public getAllRows(): StatefulTableRow[] {
+    return this.cachedRows;
+  }
+
   /****************************
    * Change Detection
    ****************************/

projects/components/src/table/header/table-header-cell-renderer.component.scss

@@ -1,13 +1,11 @@
 @import 'mixins';
 
-:host {
-  width: 100%; // Sorry...
-}
-
 .table-header-cell-renderer {
   @include ellipsis-overflow();
-  @include overline($gray-5);
   display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
 
   &.sortable {
     cursor: pointer;
@@ -17,18 +15,6 @@
     color: $gray-9;
   }
 
-  &.left {
-    text-align: left;
-  }
-
-  &.center {
-    text-align: center;
-  }
-
-  &.right {
-    text-align: right;
-  }
-
   .options-button {
     display: none;
     color: $gray-7;
@@ -46,29 +32,33 @@
   }
 
   .title {
+    @include overline($gray-5);
+
     min-width: 0;
-    width: 100%;
+    flex: 1 1 auto;
+    display: flex;
 
-    &.asc,
-    &.desc {
-      color: $gray-9;
+    &.left {
+      justify-content: flex-start;
     }
 
-    &:after {
-      display: inline-block;
+    &.center {
+      justify-content: center;
     }
 
-    &.desc:after {
-      content: '▼';
-      font-size: 9px;
+    &.right {
+      justify-content: flex-end;
     }
 
-    &.asc:after {
-      content: '▼';
-      font-size: 10px;
-      transform: scale(1, -1) translateY(1.5px); // That's right! Half pixels!
+    .sort-icon {
+      margin-left: 4px;
+      color: $gray-9;
     }
   }
+
+  .state-checkbox {
+    margin-left: 12px;
+  }
 }
 
 .popover-content {

projects/components/src/table/header/table-header-cell-renderer.component.test.ts

@@ -35,7 +35,7 @@ describe('Table Header Cell Renderer', () => {
       }
     });
 
-    expect(spectator.query('.table-header-cell-renderer')).toHaveClass('sortable');
+    expect(spectator.query('.table-header-cell-renderer > .title')).toHaveClass('sortable');
   });
 
   test('should not have sortable class, if column cannot be sorted', () => {
@@ -53,7 +53,7 @@ describe('Table Header Cell Renderer', () => {
       }
     });
 
-    expect(spectator.query('.table-header-cell-renderer')).not.toHaveClass('sortable');
+    expect(spectator.query('.table-header-cell-renderer > .title')).not.toHaveClass('sortable');
   });
 
   test('should sort column when header title is clicked', fakeAsync(() => {

projects/components/src/table/header/table-header-cell-renderer.component.ts

@@ -31,18 +31,42 @@ import { TableColumnConfigExtended } from '../table.service';
   template: `
     <div
       *ngIf="this.columnConfig"
-      [ngClass]="this.classes"
       [htTooltip]="this.getTooltip(this.columnConfig.titleTooltip, this.columnConfig.title)"
       class="table-header-cell-renderer"
     >
-      <ng-container *ngIf="this.isShowOptionButton && this.leftAlignFilterButton">
-        <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
-      </ng-container>
-      <div class="title" [ngClass]="this.classes" (click)="this.onSortChange()">{{ this.columnConfig.title }}</div>
-      <ng-container *ngIf="this.isShowOptionButton && !this.leftAlignFilterButton">
-        <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
+      <ng-container *ngIf="!this.isStateColumn; else stateColumnTemplate">
+        <ng-container *ngIf="this.isShowOptionButton && this.leftAlignFilterButton">
+          <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
+        </ng-container>
+        <div class="title" [ngClass]="this.classes" (click)="this.onSortChange()">
+          <span>{{ this.columnConfig.title }}</span>
+          <ng-container *ngIf="this.sort">
+            <ht-icon
+              class="sort-icon"
+              [icon]="
+                this.sort === '${TableSortDirection.Descending}' ? '${IconType.ArrowDown}' : '${IconType.ArrowUp}'
+              "
+              size="${IconSize.ExtraSmall}"
+            ></ht-icon>
+          </ng-container>
+        </div>
+
+        <ng-container *ngIf="this.isShowOptionButton && !this.leftAlignFilterButton">
+          <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
+        </ng-container>
       </ng-container>
 
+      <ng-template #stateColumnTemplate>
+        <ng-container *ngIf="this.isMultipleSelectionStateColumn">
+          <ht-checkbox
+            class="state-checkbox"
+            [htTooltip]="this.getHeaderCheckboxTooltip()"
+            [indeterminate]="this.indeterminateRowsSelected"
+            (checkedChange)="this.onToggleAllSelectedChange($event)"
+          ></ht-checkbox>
+        </ng-container>
+      </ng-template>
+
       <ng-template #htmlTooltip>
         <div [innerHTML]="this.columnConfig?.titleTooltip"></div>
       </ng-template>
@@ -104,19 +128,28 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
   @Input()
   public sort?: TableSortDirection;
 
+  @Input()
+  public indeterminateRowsSelected?: boolean;
+
   @Output()
   public readonly sortChange: EventEmitter<TableSortDirection | undefined> = new EventEmitter();
 
   @Output()
   public readonly columnsChange: EventEmitter<TableColumnConfigExtended[]> = new EventEmitter();
 
+  @Output()
+  public readonly allRowsSelectionChange: EventEmitter<boolean> = new EventEmitter();
+
   public alignment?: TableCellAlignmentType;
   public leftAlignFilterButton: boolean = false;
   public classes: string[] = [];
 
   public isFilterable: boolean = false;
   public isEditableAvailableColumns: boolean = false;
   public isShowOptionButton: boolean = false;
+  public isStateColumn: boolean = false;
+  public isMultipleSelectionStateColumn: boolean = false;
+  private allRowsSelected: boolean = false;
 
   @ViewChild('htmlTooltip')
   public htmlTooltipTemplate?: TemplateRef<unknown>;
@@ -137,6 +170,8 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
       this.isEditableAvailableColumns = this.areAnyAvailableColumnsEditable();
       this.isShowOptionButton =
         this.isFilterable || this.isEditableAvailableColumns || this.columnConfig?.sortable === true;
+      this.isStateColumn = this.columnConfig?.id === '$$selected' || this.columnConfig?.id === '$$expanded';
+      this.isMultipleSelectionStateColumn = this.columnConfig?.id === '$$selected';
     }
   }
 
@@ -155,6 +190,19 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
     this.classes = this.buildClasses();
   }
 
+  public onToggleAllSelectedChange(allSelected: boolean): void {
+    this.allRowsSelected = allSelected;
+    this.allRowsSelectionChange.emit(allSelected);
+  }
+
+  public getHeaderCheckboxTooltip(): string {
+    return this.indeterminateRowsSelected
+      ? 'Some rows are selected'
+      : this.allRowsSelected
+      ? 'All rows in the current page are selected'
+      : 'None of the rows in the current page are selected';
+  }
+
   private buildClasses(): string[] {
     return [
       ...(this.alignment !== undefined ? [this.alignment.toLowerCase()] : []),

projects/components/src/table/table.component.scss

@@ -71,11 +71,6 @@ $header-height: 32px;
 
   .header-cell-renderer {
     width: 100%;
-    padding: 10px 12px 10px 7px;
-  }
-
-  .header-cell-renderer:first-child {
-    padding-left: 12px;
   }
 
   .header-column-resize-handle {

projects/components/src/table/table.component.ts

@@ -94,8 +94,10 @@ import { TableColumnConfigExtended, TableService } from './table.service';
                 [availableColumns]="this.columnConfigs$ | async"
                 [index]="index"
                 [sort]="columnDef.sort"
+                [indeterminateRowsSelected]="this.indeterminateRowsSelected"
                 (sortChange)="this.onSortChange($event, columnDef)"
                 (columnsChange)="this.onColumnsEdit($event)"
+                (allRowsSelectionChange)="this.onHeaderAllRowsSelectionChange($event)"
               >
               </ht-table-header-cell-renderer>
             </cdk-header-cell>
@@ -380,6 +382,7 @@ export class TableComponent
   private resizeHeaderOffsetLeft: number = 0;
   private resizeStartX: number = 0;
   private resizeColumns?: ResizeColumns;
+  public indeterminateRowsSelected?: boolean;
 
   public constructor(
     private readonly elementRef: ElementRef,
@@ -564,6 +567,22 @@ export class TableComponent
     this.columnConfigsChange.emit(columnConfigs);
   }
 
+  public onHeaderAllRowsSelectionChange(allRowsSelected: boolean): void {
+    if (this.hasMultiSelect()) {
+      if (allRowsSelected) {
+        this.dataSource?.selectAllRows();
+        this.selections = this.dataSource?.getAllRows();
+      } else {
+        this.dataSource?.unselectAllRows();
+        this.selections = [];
+      }
+
+      this.selectionsChange.emit(this.selections);
+      this.indeterminateRowsSelected = false;
+      this.changeDetector.markForCheck();
+    }
+  }
+
   public onDataCellClick(row: StatefulTableRow): void {
     // NOTE: Cell Renderers generally handle their own clicks. We should only perform table actions here.
     // Propagate the cell click to the row
@@ -654,6 +673,7 @@ export class TableComponent
       this.selections = [toggledRow];
     }
     this.selectionsChange.emit(this.selections);
+    this.indeterminateRowsSelected = this.selections?.length !== this.dataSource?.getAllRows().length;
     this.changeDetector.markForCheck();
   }