fix: all datagrid and pagination not working as expected

Signed-off-by: Huaqiao Zhang <huaqiaoz@vmware.com>

Author: Huaqiao Zhang

web/src/app/metadata/device/device-list/device-list.component.ts

@@ -180,6 +180,9 @@ export class DeviceListComponent implements OnInit {
 
   isCheckedAll(): boolean {
     let checkedAll = true;
+    if (this.deviceList &&  this.deviceList.length === 0) {
+      checkedAll = false
+    }
     this.deviceList.forEach(device => {
       if (this.selectedDevice.findIndex(d => d.name === device.name) === -1) {
         checkedAll = false

web/src/app/metadata/profile/device-profile-list/device-profile-list.component.ts

@@ -175,6 +175,9 @@ export class DeviceProfileListComponent implements OnInit {
 
   isCheckedAll(): boolean {
     let checkall = true;
+    if (this.profileList && this.profileList.length === 0) {
+      checkall = false
+    }
     this.profileList.forEach((p) => {
       if (this.multiProfilesSelected.indexOf(p.name) === -1)  {
         checkall = false

web/src/app/notifications/notification/notification-list/notification-list.component.html

@@ -143,7 +143,7 @@
             <table class="table table-hover text-truncate ">
                 <thead class="thead-light">
                     <tr>
-                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll" (click)="selectAll($event)"></th>
+                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll()" (click)="selectAll($event)"></th>
                       <th scope="col">ID</th>
                       <th scope="col">Category</th>
                       <th scope="col">Labels</th>

web/src/app/notifications/notification/notification-list/notification-list.component.ts

@@ -30,7 +30,6 @@ export class NotificationListComponent implements OnInit {
 
   notificationList: Notification[] = [];
   notificationSelected: Notification[] = [];
-  isCheckedAll: boolean = false;
   pagination: number = 1;
   pageLimit: number = 5;
   pageOffset: number = (this.pagination - 1) * this.pageLimit;
@@ -241,40 +240,53 @@ export class NotificationListComponent implements OnInit {
     $("#deleteConfirmDialog").modal('hide');
   }
 
+  isCheckedAll(): boolean {
+    let checkedAll = true;
+    if (this.notificationList && this.notificationList.length === 0) {
+      checkedAll = false
+    }
+    this.notificationList.forEach(notification => {
+      if (this.notificationSelected.findIndex(notificationSelected => notificationSelected.id === notification.id) === -1) {
+        checkedAll = false
+      }
+    });
+    return checkedAll
+  }
+
   selectAll(event: any) {
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.notificationSelected = [];
       this.notificationList.forEach(notification => {
+        if (this.notificationSelected.findIndex(notiSelected => notiSelected.id === notification.id) !== -1) {
+          return
+        }
         this.notificationSelected.push(notification);
-        this.isChecked(notification.id);
       });
-      this.isCheckedAll = true;
       return
     }
-    this.isCheckedAll = false;
-    this.notificationSelected = [];
     this.notificationList.forEach(notification => {
-      this.isChecked(notification.id);
+      let found = this.notificationSelected.findIndex(notiSelected => notiSelected.id === notification.id)
+      if (found !== -1) {
+        this.notificationSelected.splice(found,1)
+      }
     });
   }
 
   isChecked(id: string): boolean {
-    return this.notificationSelected.findIndex(v => v.id === id) >= 0;
+    return this.notificationSelected.findIndex(notification => notification.id === id) >= 0;
   }
 
   selectOne(event: any, notification: Notification) {
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.notificationSelected.push(notification);
-      if (this.notificationSelected.length === this.notificationList.length) {
-        this.isCheckedAll = true;
-      }
+      this.notificationSelected.push(notification)
       return
     }
-    this.isCheckedAll = false;
-    this.isChecked(notification.id);
-    this.notificationSelected.splice(this.notificationSelected.indexOf(notification), 1)
+
+    let found = this.notificationSelected.findIndex(notiSelected => notiSelected.id === notification.id)
+    if (found !== -1) {
+      this.notificationSelected.splice(found,1)
+    }
   }
 
   paginationBySearchMode() {

web/src/app/notifications/subscription/subscription-list/subscription-list.component.html

@@ -41,7 +41,7 @@
             <table class="table table-hover text-truncate ">
                 <thead class="thead-light">
                     <tr>
-                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll" (click)="selectAll($event)"></th>
+                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll()" (click)="selectAll($event)"></th>
                       <th scope="col">ID</th>
                       <th scope="col">Name</th>
                       <th scope="col">Description</th>

web/src/app/notifications/subscription/subscription-list/subscription-list.component.ts

@@ -35,7 +35,6 @@ export class SubscriptionListComponent implements OnInit {
   subscriptionList: Subscription[] = [];
   subscriptionSelected: Subscription[] = [];
   // checkedSubscription?: Subscription;
-  isCheckedAll: boolean = false;
   pagination: number = 1;
   pageLimit: number = 5;
   pageOffset: number = (this.pagination - 1) * this.pageLimit;
@@ -75,40 +74,52 @@ export class SubscriptionListComponent implements OnInit {
     })
   }
 
+  isCheckedAll(): boolean {
+    let checkedAll = true;
+    if (this.subscriptionList && this.subscriptionList.length === 0) {
+      checkedAll = false
+    }
+    this.subscriptionList.forEach(subscription => {
+      if (this.subscriptionSelected.findIndex(subscriptionSelected => subscriptionSelected.id === subscription.id) === -1) {
+        checkedAll = false
+      }
+    });
+    return checkedAll
+  }
+
   selectAll(event: any) {
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.subscriptionSelected = [];
-      this.subscriptionList.forEach(interval => {
-        this.subscriptionSelected.push(interval);
-        this.isChecked(interval.name);
+      this.subscriptionList.forEach(subscription => {
+        if (this.subscriptionSelected.findIndex(sub => sub.name === subscription.name) !== -1) {
+          return
+        }
+        this.subscriptionSelected.push(subscription);
       });
-      this.isCheckedAll = true;
       return
     }
-    this.isCheckedAll = false;
-    this.subscriptionSelected = [];
-    this.subscriptionList.forEach(interval => {
-      this.isChecked(interval.name);
+    this.subscriptionList.forEach(subscription => {
+      let found = this.subscriptionSelected.findIndex(sub => sub.name === subscription.name);
+      if (found !== -1) {
+        this.subscriptionSelected.splice(found,1)
+      }
     });
   }
 
   isChecked(name: string): boolean {
-    return this.subscriptionSelected.findIndex(v => v.name === name) >= 0;
+    return this.subscriptionSelected.findIndex(subscription => subscription.name === name) >= 0;
   }
 
-  selectOne(event: any, sub: Subscription) {
+  selectOne(event: any, subscription: Subscription) {
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.subscriptionSelected.push(sub);
-      if (this.subscriptionSelected.length === this.subscriptionList.length) {
-        this.isCheckedAll = true;
-      }
+      this.subscriptionSelected.push(subscription);
       return
     }
-    this.isCheckedAll = false;
-    this.isChecked(sub.name);
-    this.subscriptionSelected.splice(this.subscriptionSelected.indexOf(sub), 1)
+    let found = this.subscriptionSelected.findIndex(sub => sub.name === subscription.name);
+    if (found !== -1) {
+      this.subscriptionSelected.splice(found,1)
+    }
   }
 
   edit() {

web/src/app/scheduler/interval/interval-list/interval-list.component.html

@@ -41,7 +41,7 @@
             <table class="table table-hover text-truncate ">
                 <thead class="thead-light">
                     <tr>
-                      <th scope="col"><input *ngIf="enableSelectAll" type="checkbox" role="button" [checked]="isCheckedAll" (click)="selectAll($event)"></th>
+                      <th scope="col"><input *ngIf="enableSelectAll" type="checkbox" role="button" [checked]="isCheckedAll()" (click)="selectAll($event)"></th>
                       <th scope="col">ID</th>
                       <th scope="col">Name</th>
                       <th scope="col">Start</th>

web/src/app/scheduler/interval/interval-list/interval-list.component.ts

@@ -37,7 +37,7 @@ export class IntervalListComponent implements OnInit {
   intervalList: Interval[] = [];
   intervalSelected: Interval[] = [];
   @Input() singleIntervalSelected?: Interval;
-  isCheckedAll: boolean = false;
+  // isCheckedAll: boolean = false;
   pagination: number = 1;
   pageLimit: number = 5;
   pageOffset: number = (this.pagination - 1) * this.pageLimit;
@@ -104,47 +104,61 @@ export class IntervalListComponent implements OnInit {
     this.onSingleIntervalSelectedEmitter();
   }
 
+  isCheckedAll(): boolean {
+    let checkedAll = true;
+    if (this.intervalList &&  this.intervalList.length === 0) {
+      checkedAll = false
+    }
+    this.intervalList.forEach(interval => {
+      if (this.intervalSelected.findIndex(intervalSelected => intervalSelected.name === interval.name) === -1) {
+        checkedAll = false
+      }
+    });
+    return checkedAll
+  }
+
   selectAll(event: any) {
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.intervalSelected = [];
       this.intervalList.forEach(interval => {
+        if (this.intervalSelected.findIndex((intervalSelected) => intervalSelected.name === interval.name) !== -1) {
+          return
+        }
         this.intervalSelected.push(interval);
-        this.isChecked(interval.name);
       });
-      this.isCheckedAll = true;
-      return
-    }
-    this.isCheckedAll = false;
-    this.intervalSelected = [];
-    this.intervalList.forEach(interval => {
-      this.isChecked(interval.name);
-    });
+    } else {
+      this.intervalList.forEach(interval => {
+        let found = this.intervalSelected.findIndex((intervalSelected) => intervalSelected.name === interval.name);
+        if (found !== -1) {
+          this.intervalSelected.splice(found,1)
+        }
+      });
+    }   
   }
 
   isChecked(name: string): boolean {
     if (!this.enableSelectAll) {
       return this.isSingleChecked(name)
     }
-    return this.intervalSelected.findIndex(v => v.name === name) >= 0;
+    return this.intervalSelected.findIndex(interval => interval.name === name) >= 0;
   }
 
   selectOne(event: any, interval: Interval) {
     if (!this.enableSelectAll) {
       this.selectSingleInterval(event, interval.name);
       return
     }
+
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.intervalSelected.push(interval);
-      if (this.intervalSelected.length === this.intervalList.length) {
-        this.isCheckedAll = true;
-      }
+      this.intervalSelected.push(interval)
       return
     }
-    this.isCheckedAll = false;
-    this.isChecked(interval.name);
-    this.intervalSelected.splice(this.intervalSelected.indexOf(interval), 1)
+
+    let found = this.intervalSelected.findIndex(intervalSelected => intervalSelected.name === interval.name);
+    if (found !== -1) {
+      this.intervalSelected.splice(found, 1)
+    }
   }
 
   edit() {

web/src/app/scheduler/intervalaction/interval-action-list/interval-action-list.component.html

@@ -41,7 +41,7 @@
             <table class="table table-hover text-truncate ">
                 <thead class="thead-light">
                     <tr>
-                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll" (click)="selectAll($event)"></th>
+                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll()" (click)="selectAll($event)"></th>
                       <th scope="col">ID</th>
                       <th scope="col">Name</th>
                       <th scope="col">AssociatedInterval</th>

web/src/app/scheduler/intervalaction/interval-action-list/interval-action-list.component.ts

@@ -31,7 +31,7 @@ export class IntervalActionListComponent implements OnInit {
 
   intervalActionList: IntervalAction[] = [];
   intervalActionSelected: IntervalAction[] = [];
-  isCheckedAll: boolean = false;
+  // isCheckedAll: boolean = false;
   pagination: number = 1;
   pageLimit: number = 5;
   pageOffset: number = (this.pagination - 1) * this.pageLimit;
@@ -65,40 +65,52 @@ export class IntervalActionListComponent implements OnInit {
     });
   }
 
+  isCheckedAll(): boolean {
+    let checkedAll = true;
+    if (this.intervalActionList && this.intervalActionList.length === 0) {
+      checkedAll = false
+    }
+    this.intervalActionList.forEach(action => {
+      if (this.intervalActionSelected.findIndex(actionSelected => actionSelected.name === action.name) === -1) {
+        checkedAll = false
+      }
+    });
+    return checkedAll
+  }
+
   selectAll(event: any) {
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.intervalActionSelected = [];
       this.intervalActionList.forEach(intervalAction => {
+        if (this.intervalActionSelected.findIndex(actionSelected => actionSelected.name === intervalAction.name) !== -1) {
+            return
+        }
         this.intervalActionSelected.push(intervalAction);
-        this.isChecked(intervalAction.name);
       });
-      this.isCheckedAll = true;
-      return
+    } else {
+      this.intervalActionList.forEach(intervalAction => {
+        let found = this.intervalActionSelected.findIndex(actionSelected => actionSelected.name === intervalAction.name);
+        if (found !== -1) {
+          this.intervalActionSelected.splice(found,1)
+        }
+      });
     }
-    this.isCheckedAll = false;
-    this.intervalActionSelected = [];
-    this.intervalActionList.forEach(intervalAction => {
-      this.isChecked(intervalAction.name);
-    });
   }
 
   isChecked(name: string): boolean {
-    return this.intervalActionSelected.findIndex(v => v.name === name) >= 0;
+    return this.intervalActionSelected.findIndex(intervalAction => intervalAction.name === name) >= 0;
   }
 
   selectOne(event: any, intervalAction: IntervalAction) {
     const checkbox = event.target;
     if (checkbox.checked) {
       this.intervalActionSelected.push(intervalAction);
-      if (this.intervalActionSelected.length === this.intervalActionList.length) {
-        this.isCheckedAll = true;
-      }
       return
     }
-    this.isCheckedAll = false;
-    this.isChecked(intervalAction.name);
-    this.intervalActionSelected.splice(this.intervalActionSelected.indexOf(intervalAction), 1)
+    let found = this.intervalActionSelected.findIndex(actionSelected => actionSelected.name === intervalAction.name);
+    if (found !== -1) {
+      this.intervalActionSelected.splice(found,1)
+    }
   }
 
   edit() {