Add bulk actions to console

Author: ptkach

console-webapp/src/app/domains/domainList.component.html

@@ -65,11 +65,34 @@ <h1>No domains found</h1>
             />
           </mat-form-field>
 
+          <div class="console-app__domains-selection" [ngClass]="{'active': selection.hasValue()}">
+            <div class="console-app__domains-selection-text">{{selection.selected.length}} Selected</div>
+            <div class="console-app__domains-selection-actions"></div>
+          </div>
+
           <mat-table
             [dataSource]="dataSource"
             class="mat-elevation-z0"
             class="console-app__domains-table"
           >
+            <!-- Checkbox Column -->
+            <ng-container matColumnDef="select">
+              <mat-header-cell *matHeaderCellDef>
+                <mat-checkbox (change)="$event ? toggleAllRows() : null"
+                              [checked]="selection.hasValue() && isAllSelected"
+                              [indeterminate]="selection.hasValue() && !isAllSelected"
+                              [aria-label]="checkboxLabel()">
+                </mat-checkbox>
+              </mat-header-cell>
+              <mat-cell *matCellDef="let row">
+                <mat-checkbox (click)="$event.stopPropagation()"
+                              (change)="$event ? selection.toggle(row) : null"
+                              [checked]="selection.isSelected(row)"
+                              [aria-label]="checkboxLabel(row)">
+                </mat-checkbox>
+              </mat-cell>
+            </ng-container>
+
             <ng-container matColumnDef="domainName">
               <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
               <mat-cell *matCellDef="let element">{{

console-webapp/src/app/domains/domainList.component.scss

@@ -12,6 +12,15 @@
     }
   }
 
+  &__domains-selection {
+    height: 30px;
+    max-height: 0;
+    transition: max-height .2s linear;
+    &.active {
+      max-height: 30px;
+    }
+  }
+
   &-domains__download {
     position: absolute;
     top: -55px;
@@ -41,6 +50,10 @@
       overflow: hidden;
       word-break: break-word;
     }
+    .mat-column-select {
+      max-width: 60px;
+      padding-left: 15px;
+    }
   }
 
   &__domains-spinner {

console-webapp/src/app/domains/domainList.component.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { SelectionModel } from '@angular/cdk/collections';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 import { Component, ViewChild, effect } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
@@ -31,8 +32,10 @@ import { RegistryLockService } from './registryLock.service';
 export class DomainListComponent {
   public static PATH = 'domain-list';
   private readonly DEBOUNCE_MS = 500;
+  isAllSelected = false;
 
   displayedColumns: string[] = [
+    'select',
     'domainName',
     'creationTime',
     'registrationExpirationTime',
@@ -42,6 +45,7 @@ export class DomainListComponent {
   ];
 
   dataSource: MatTableDataSource<Domain> = new MatTableDataSource();
+  selection = new SelectionModel<Domain>(true, [], undefined, this.isChecked());
   isLoading = true;
 
   searchTermSubject = new Subject<string>();
@@ -136,4 +140,32 @@ export class DomainListComponent {
     this.resultsPerPage = event.pageSize;
     this.reloadData();
   }
+
+  toggleAllRows() {
+    if (this.isAllSelected) {
+      this.selection.clear();
+      this.isAllSelected = false;
+      return;
+    }
+
+    this.selection.select(...this.dataSource.data);
+    this.isAllSelected = true;
+  }
+
+  checkboxLabel(row?: Domain): string {
+    if (!row) {
+      return `${this.isAllSelected ? 'deselect' : 'select'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.domainName + 1}`;
+  }
+
+  private isChecked(): ((o1: Domain, o2: Domain) => boolean) | undefined {
+    return (o1: Domain, o2: Domain) => {
+      if (!o1.domainName || !o2.domainName) {
+        return false;
+      }
+
+      return this.isAllSelected || o1.domainName === o2.domainName;
+    };
+  }
 }