added indeterminate state for the 'select all' checkbox + unit test. (#5590)

lib/core/datatable/components/datatable/datatable.component.html

@@ -18,7 +18,7 @@
             </div>
             <!-- Columns -->
             <div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
-                <mat-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
+                <mat-checkbox [indeterminate]="isSelectAllIndeterminate" [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
             </div>
             <div class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header"
                  *ngFor="let col of data.getColumns()"

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -918,6 +918,31 @@ describe('DataTable', () => {
         expect(dataTable.isSelectAllChecked).toBe(true);
     });
 
+    it('should have indeterminate state for "select all" when at least 1 row is selected or not all rows', () => {
+        dataTable.data = new ObjectDataTableAdapter(
+            [{ name: '1' }, { name: '2' }],
+            [
+                new ObjectDataColumn({ key: 'name', sortable: false }),
+                new ObjectDataColumn({ key: 'other', sortable: false })
+            ]
+        );
+        const rows = dataTable.data.getRows();
+
+        dataTable.multiselect = true;
+        dataTable.onCheckboxChange(rows[0], <MatCheckboxChange> { checked: true });
+        expect(dataTable.isSelectAllIndeterminate).toBe(true);
+        expect(dataTable.isSelectAllChecked).toBe(false);
+
+        dataTable.onCheckboxChange(rows[1], <MatCheckboxChange> { checked: true });
+        expect(dataTable.isSelectAllIndeterminate).toBe(false);
+        expect(dataTable.isSelectAllChecked).toBe(true);
+
+        dataTable.onCheckboxChange(rows[0], <MatCheckboxChange> { checked: false });
+        dataTable.onCheckboxChange(rows[1], <MatCheckboxChange> { checked: false });
+        expect(dataTable.isSelectAllIndeterminate).toBe(false);
+        expect(dataTable.isSelectAllChecked).toBe(false);
+    });
+
     it('should allow select row when multi-select enabled', () => {
         const data = new ObjectDataTableAdapter([{}, {}], []);
         const rows = data.getRows();

lib/core/datatable/components/datatable/datatable.component.ts

@@ -178,6 +178,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     noPermissionTemplate: TemplateRef<any>;
     loadingTemplate: TemplateRef<any>;
 
+    isSelectAllIndeterminate: boolean = false;
     isSelectAllChecked: boolean = false;
     selection = new Array<DataRow>();
 
@@ -529,6 +530,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
 
     onSelectAllClick(matCheckboxChange: MatCheckboxChange) {
         this.isSelectAllChecked = matCheckboxChange.checked;
+        this.isSelectAllIndeterminate = false;
 
         if (this.multiselect) {
             const rows = this.data.getRows();
@@ -552,6 +554,29 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
 
         const domEventName = newValue ? 'row-select' : 'row-unselect';
         this.emitRowSelectionEvent(domEventName, row);
+        this.checkSelectAllCheckboxState();
+    }
+
+    checkSelectAllCheckboxState() {
+        if (this.multiselect) {
+            let numberOfSelectedRows: number = 0;
+            const rows = this.data.getRows();
+            rows.forEach((row) => {
+                if (row.isSelected) {
+                    numberOfSelectedRows++;
+                }
+            });
+            if (numberOfSelectedRows === rows.length) {
+                this.isSelectAllChecked = true;
+                this.isSelectAllIndeterminate = false;
+            } else if (numberOfSelectedRows > 0 && numberOfSelectedRows < rows.length) {
+                this.isSelectAllChecked = false;
+                this.isSelectAllIndeterminate = true;
+            } else {
+                this.isSelectAllChecked = false;
+                this.isSelectAllIndeterminate = false;
+            }
+        }
     }
 
     onImageLoadingError(event: Event, row: DataRow) {