group management, add multiple delete

src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html

@@ -1,4 +1,5 @@
-<h1 mat-dialog-title>Are you sure to delete group named: '{{data.groupName}}' ?</h1>
+<h1 mat-dialog-title>Are you sure to delete group named: </h1>
+<p *ngFor="let group of data.groups">{{group.name}}</p>
 <div mat-dialog-actions>
   <button mat-button (click)="onCancel()" color="accent">No, cancel</button>
   <button mat-button (click)="onDelete()" tabindex="2" class="add-project-button" mat-raised-button color="primary">

src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts

@@ -12,7 +12,7 @@
 */
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {Server} from "@models/server";
+import {Group} from "@models/groups/group";
 
 @Component({
   selector: 'app-delete-group-dialog',
@@ -22,7 +22,7 @@ import {Server} from "@models/server";
 export class DeleteGroupDialogComponent implements OnInit {
 
   constructor(private dialogRef: MatDialogRef<DeleteGroupDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: { groupName: string }) { }
+              @Inject(MAT_DIALOG_DATA) public data: { groups: Group[] }) { }
 
   ngOnInit(): void {
   }

src/app/components/group-management/group-management.component.html

@@ -2,6 +2,9 @@
   <div class="default-header">
     <div class="row">
       <h1 class="col">Groups management</h1>
+      <button class="col" mat-raised-button color="primary" (click)="onDelete(selection.selected)" class="add-group-button" [disabled]="selection.selected.length == 0">
+        Delete selected groups
+      </button>
       <button class="col" mat-raised-button color="primary" (click)="addGroup()" class="add-group-button">
         Add group
       </button>
@@ -17,6 +20,21 @@
   <div class="default-content">
     <table mat-table [dataSource]="sortedGroups | groupFilter: searchText" class="mat-elevation-z8" matSort (matSortChange)="sort($event)">
 
+      <ng-container matColumnDef="select" >
+        <mat-header-cell *matHeaderCellDef class="small-col">
+          <mat-checkbox (change)="$event ? masterToggle() : null"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let row" class="small-col">
+          <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null"
+                        [checked]="selection.isSelected(row)">
+          </mat-checkbox>
+        </mat-cell>
+      </ng-container>
+
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
         <td mat-cell *matCellDef="let element"> {{element.name}} </td>
@@ -41,7 +59,7 @@
 
       <ng-container matColumnDef="delete">
         <th mat-header-cell *matHeaderCellDef> </th>
-        <td mat-cell *matCellDef="let element"><button mat-button (click)="onDelete(element)"><mat-icon>delete</mat-icon></button></td>
+        <td mat-cell *matCellDef="let element"><button mat-button (click)="onDelete([element])"><mat-icon>delete</mat-icon></button></td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/components/group-management/group-management.component.ts

@@ -21,6 +21,10 @@ import {Sort} from "@angular/material/sort";
 import {MatDialog} from "@angular/material/dialog";
 import {AddGroupDialogComponent} from "@components/group-management/add-group-dialog/add-group-dialog.component";
 import {DeleteGroupDialogComponent} from "@components/group-management/delete-group-dialog/delete-group-dialog.component";
+import {SelectionModel} from "@angular/cdk/collections";
+import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component";
+import {User} from "@models/users/user";
+import {forkJoin} from "rxjs";
 
 @Component({
   selector: 'app-group-management',
@@ -30,7 +34,8 @@ import {DeleteGroupDialogComponent} from "@components/group-management/delete-gr
 export class GroupManagementComponent implements OnInit {
   server: Server;
 
-  public displayedColumns = ['name', 'created_at', 'updated_at', 'is_builtin', 'delete'];
+  public displayedColumns = ['select', 'name', 'created_at', 'updated_at', 'is_builtin', 'delete'];
+  selection = new SelectionModel<Group>(true, []);
   groups: Group[];
   sortedGroups: Group[];
   searchText: string;
@@ -84,6 +89,17 @@ export class GroupManagementComponent implements OnInit {
     }
   }
 
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.groups.length;
+    return numSelected === numRows;
+  }
+
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.groups.forEach(row => this.selection.select(row));
+  }
 
   addGroup() {
     this.dialog
@@ -93,10 +109,7 @@ export class GroupManagementComponent implements OnInit {
         if (name) {
           this.groupService.addGroup(this.server, name)
             .subscribe(() => {
-              this.groupService.getGroups(this.server).subscribe((groups: Group[]) => {
+              this.refresh();
-                this.groups = groups;
-                this.sortedGroups = groups;
-              });
             }, (error) => {
               this.toasterService.error(`An error occur while trying to create new group ${name}`);
             });
@@ -104,20 +117,27 @@ export class GroupManagementComponent implements OnInit {
       });
   }
 
-  onDelete(group: Group) {
+  refresh() {
-    this.dialog
-      .open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groupName: group.name}})
-      .afterClosed()
-      .subscribe((isDeletedConfirm) => {
-        if (isDeletedConfirm) {
-          this.groupService.delete(this.server, group.user_group_id)
-            .subscribe(() => {
     this.groupService.getGroups(this.server).subscribe((groups: Group[]) => {
       this.groups = groups;
       this.sortedGroups = groups;
+      this.selection.clear();
     });
-            }, (error) => {
+  }
-              this.toasterService.error(`An error occur while trying to delete group ${group.name}`);
+
+  onDelete(groupsToDelete: Group[]) {
+    this.dialog
+      .open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groups: groupsToDelete}})
+      .afterClosed()
+      .subscribe((isDeletedConfirm) => {
+        if (isDeletedConfirm) {
+          const observables = groupsToDelete.map((group: Group) => this.groupService.delete(this.server, group.user_group_id));
+          forkJoin(observables)
+            .subscribe(() => {
+                this.refresh();
+              },
+              (error) => {
+                this.toasterService.error(`An error occur while trying to delete group`);
               });
         }
       });