From 4f8aa8d4be2a5a44cdc58ee5728f49643ce69f6f Mon Sep 17 00:00:00 2001
From: Urse Daniel <daniel.urse@hotmail.com>
Date: Mon, 6 Apr 2020 15:01:03 +0300
Subject: [PATCH] added indeterminate state for the 'select all' checkbox +
 unit test. (#5590)

---
 .../datatable/datatable.component.html        |  2 +-
 .../datatable/datatable.component.spec.ts     | 25 +++++++++++++++++++
 .../datatable/datatable.component.ts          | 25 +++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index 8f2a83fba9..cb36eefa30 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/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()"
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index 06a5e780b7..9c95620ac1 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/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();
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index c1624f7dfe..236a48fc65 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/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) {