feat: Issue #275 deviceprofle list component refactor (#321)

* refactor: replace profile-list codes in device-add parent componet with profile list child component
Signed-off-by: Huaqiao Zhang <huaqiaoz@vmware.com>

* feat: Add new input property toolbars
Signed-off-by: Huaqiao Zhang <huaqiaoz@vmware.com>

* feat: replace hard code of device-profile-list with device profile list component
Signed-off-by: Huaqiao Zhang <huaqiaoz@vmware.com>

web/src/app/device-service/device/add-device/add-device.component.html

@@ -88,7 +88,10 @@
             </ng-template>
             
             <ng-template [ngSwitchCase]="1" #SelectDeviceProfile>
-                <div class="table-responsive">
+                <div class="p-2">
+                    <app-device-profile-list (singleProfileSelectedEvent)="onSingleProfileSelected($event)" [enableSelectAll]="false" [toolbars]="false"></app-device-profile-list>
+                </div>
+                <!-- <div class="table-responsive">
                     <table class="table table-hover text-truncate">
                         <thead class="thead-light">
                             <tr>
@@ -99,8 +102,8 @@
                                 <th scope="col">Labels</th>
                                 <th scope="col">Manufacturer</th>
                                 <th scope="col">Model</th>
-                                <!-- <th scope="col">Created</th>
-                                <th scope="col">Modified</th> -->
+                                <th scope="col">Created</th>
+                                <th scope="col">Modified</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -112,12 +115,12 @@
                                 <td>{{profile.labels}}</td>
                                 <td>{{profile.manufacturer}}</td>
                                 <td>{{profile.model}}</td>
-                                <!-- <td>{{profile.created | date:'yyyy-MM-dd hh:mm:ss' }}</td>
-                                <td>{{profile.modified | date:'yyyy-MM-dd hh:mm:ss' }}</td> -->
+                                <td>{{profile.created | date:'yyyy-MM-dd hh:mm:ss' }}</td>
+                                <td>{{profile.modified | date:'yyyy-MM-dd hh:mm:ss' }}</td>
                             </tr>
                         </tbody>
                     </table>
-                </div>
+                </div> -->
             </ng-template>
             
             <ng-template [ngSwitchCase]="2" #DevicePrimary>

web/src/app/device-service/device/add-device/add-device.component.ts

@@ -21,7 +21,7 @@ import { DeviceService } from '../../../contracts/v2/device-service';
 import { MultiDeviceServiceResponse } from '../../../contracts/v2/responses/device-service-response';
 import { Device } from '../../../contracts/v2/device';
 import { DeviceProfile } from '../../../contracts/v2/device-profile';
-import { MultiDeviceProfileResponse } from '../../../contracts/v2/responses/device-profile-response';
+// import { MultiDeviceProfileResponse } from '../../../contracts/v2/responses/device-profile-response';
 import { AutoEvent } from '../../../contracts/v2/auto-event';
 
 import { MetadataService } from '../../../services/metadata.service';
@@ -80,7 +80,7 @@ export class AddDeviceComponent implements OnInit {
   noSelectedClass = "text-white rounded px-2 bg-secondary  font-weight-bold";
 
   deviceServiceList: DeviceService[] = [];
-  deviceProfileList: DeviceProfile[] = [];
+  // deviceProfileList: DeviceProfile[] = [];
 
   selectedSvc?: DeviceService;
   selectedProfile?: DeviceProfile;
@@ -123,9 +123,13 @@ export class AddDeviceComponent implements OnInit {
     this.metaSvc.allDeviceServices().subscribe((data: MultiDeviceServiceResponse) => {
       this.deviceServiceList = data.services;
     });
-    this.metaSvc.allDeviceProfoles().subscribe((data: MultiDeviceProfileResponse) => {
-      this.deviceProfileList = data.profiles;
-    });
+    // this.metaSvc.allDeviceProfoles().subscribe((data: MultiDeviceProfileResponse) => {
+    //   this.deviceProfileList = data.profiles;
+    // });
+  }
+
+  onSingleProfileSelected(profile: DeviceProfile) {
+    this.selectedProfile = profile;
   }
 
   onAvailProtocolSelect() {
@@ -224,22 +228,22 @@ export class AddDeviceComponent implements OnInit {
     this.autoEventsInternal.splice(this.autoEventsInternal.indexOf(event), 1);
   }
 
-  isProfileChecked(name: string): boolean {
-    return this.selectedProfile?.name === name
-  }
-
-  selectOneProfile(event: any, name: string) {
-    const checkbox = event.target;
-    if (checkbox.checked) {
-      this.deviceProfileList.forEach((profile) => {
-        if (profile.name === name) {
-          this.selectedProfile = profile;
-        }
-      });
-    } else {
-      this.selectedProfile = undefined;
-    }
-  }
+  // isProfileChecked(name: string): boolean {
+  //   return this.selectedProfile?.name === name
+  // }
+
+  // selectOneProfile(event: any, name: string) {
+  //   const checkbox = event.target;
+  //   if (checkbox.checked) {
+  //     this.deviceProfileList.forEach((profile) => {
+  //       if (profile.name === name) {
+  //         this.selectedProfile = profile;
+  //       }
+  //     });
+  //   } else {
+  //     this.selectedProfile = undefined;
+  //   }
+  // }
 
   isSvcChecked(name: string): boolean {
     return this.selectedSvc?.name === name

web/src/app/device-service/device/edit-device/edit-device.component.html

@@ -116,7 +116,11 @@
             </div>
         </div>
 
-        <div class="card mb-3">
+        <div class="mb-3">
+            <app-device-profile-list  (singleProfileSelectedEvent)="onSingleProfileSelected($event)" [enableSelectAll]="false" [toolbars]="false"></app-device-profile-list>
+        </div>
+
+        <!-- <div class="card mb-3">
             <div class="card-header font-weight-bold">
                 <i class="fa fa-tags fa-lg text-danger"></i> Device Profile
             </div>
@@ -132,8 +136,8 @@
                                 <th scope="col">Labels</th>
                                 <th scope="col">Manufacturer</th>
                                 <th scope="col">Model</th>
-                                <!-- <th scope="col">Created</th>
-                                <th scope="col">Modified</th> -->
+                                <th scope="col">Created</th>
+                                <th scope="col">Modified</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -145,14 +149,14 @@
                                 <td>{{profile.labels}}</td>
                                 <td>{{profile.manufacturer}}</td>
                                 <td>{{profile.model}}</td>
-                                <!-- <td>{{profile.created | date:'yyyy-MM-dd hh:mm:ss' }}</td>
-                                <td>{{profile.modified | date:'yyyy-MM-dd hh:mm:ss' }}</td> -->
+                                <td>{{profile.created | date:'yyyy-MM-dd hh:mm:ss' }}</td>
+                                <td>{{profile.modified | date:'yyyy-MM-dd hh:mm:ss' }}</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
-        </div>
+        </div> -->
 
         <div class="card mb-3">
             <div class="card-header font-weight-bold">

web/src/app/device-service/device/edit-device/edit-device.component.ts

@@ -52,7 +52,7 @@ export class EditDeviceComponent implements OnInit {
   device?: Device;
   deviceLabels?: string;
   deviceServiceList!: DeviceService[];
-  deviceProfileList!: DeviceProfile[];
+  // deviceProfileList?: DeviceProfile[];
   selectedSvc?: DeviceService;
   selectedProfile?: DeviceProfile;
 
@@ -95,19 +95,22 @@ export class EditDeviceComponent implements OnInit {
           });
         });
 
-        this.metaSvc.allDeviceProfoles().subscribe((data: MultiDeviceProfileResponse) => {
-          this.deviceProfileList = data.profiles;
-          this.deviceProfileList.forEach((profile) => {
-            if (profile.name === this.device?.profileName) {
-              this.selectedProfile = profile;
-              return
-            }
-          });
-        });
+        // this.metaSvc.allDeviceProfoles().subscribe((data: MultiDeviceProfileResponse) => {
+        //   this.deviceProfileList = data.profiles;
+        //   this.deviceProfileList.forEach((profile) => {
+        //     if (profile.name === this.device?.profileName) {
+        //       this.selectedProfile = profile;
+        //       return
+        //     }
+        //   });
+        // });
       });
     });
   }
 
+  onSingleProfileSelected(profile: DeviceProfile) {
+    this.selectedProfile = profile;
+  }
 
   setAutoEventInternal(events?: AutoEvent[]) {
     let unit: string;
@@ -162,24 +165,24 @@ export class EditDeviceComponent implements OnInit {
     this.autoEventsInternal.splice(this.autoEventsInternal.indexOf(event), 1);
   }
 
-  isProfileChecked(name: string): boolean {
-    return this.selectedProfile?.name === name
-  }
+  // isProfileChecked(name: string): boolean {
+  //   return this.selectedProfile?.name === name
+  // }
 
-  selectOneProfile(event: any, name: string) {
-    const checkbox = event.target;
+  // selectOneProfile(event: any, name: string) {
+  //   const checkbox = event.target;
     
-    if (checkbox.checked) {
-      this.deviceProfileList.forEach((profile) => {
-        if (profile.name === name) {
-          this.selectedProfile = profile;
-          return
-        }
-      });
-    } else {
-      this.selectedProfile = undefined;
-    }
-  }
+  //   if (checkbox.checked) {
+  //     this.deviceProfileList.forEach((profile) => {
+  //       if (profile.name === name) {
+  //         this.selectedProfile = profile;
+  //         return
+  //       }
+  //     });
+  //   } else {
+  //     this.selectedProfile = undefined;
+  //   }
+  // }
 
   isSvcChecked(name: string): boolean {
     return this.selectedSvc?.name === name

web/src/app/device-service/profile/device-profile-list/device-profile-list.component.html

@@ -17,11 +17,11 @@
  -->
 
 <div class="card">
-    <div class="card-header">
+    <div class="card-header font-weight-bold">
         <i class="fa fa-th-list text-danger"></i> Device Profile List
     </div>
     <div class="card-body p-0">
-        <div class="bg-light px-2 py-2">
+        <div *ngIf="toolbars" class="bg-light px-2 py-2">
             <div class="btn-group btn-group-sm" role="group">
                 <button class="btn btn-primary" (click)="refresh()">
                     <span><i class="fa fa-refresh mr-1"></i>Refresh</span> 
@@ -29,10 +29,10 @@
                 <button type="button" class="btn btn-info"  routerLink="../add-profile">
                     <span><i class="fa fa-plus mr-1"></i>Add</span>
                 </button>
-                <button type="button" class="btn btn-success" (click)="edit()"  data-toggle="tooltip" data-placement="top" title="only one should be selected" [disabled]="selectedProfiles.length !== 1">
+                <button type="button" class="btn btn-success" (click)="edit()"  data-toggle="tooltip" data-placement="top" title="only one should be selected" [disabled]="multiProfilesSelected.length !== 1">
                     <span><i class="fa fa-edit mr-1"></i>Edit</span>
                 </button>
-                <button type="button" class="btn btn-danger" (click)="deleteConfirm()" [disabled]="selectedProfiles.length === 0">
+                <button type="button" class="btn btn-danger" (click)="deleteConfirm()" [disabled]="multiProfilesSelected.length === 0">
                     <span><i class="fa fa-trash mr-1"></i>Delete</span>
                 </button>
               </div>
@@ -42,7 +42,9 @@
             <table class="table table-hover text-truncate">
                 <thead class="thead-light">
                     <tr>
-                      <th scope="col"><input type="checkbox" [checked]="isCheckedAll" (click)="selectAll($event)"></th>
+                      <th scope="col">
+                          <input *ngIf="enableSelectAll" type="checkbox" [checked]="isCheckedAll" (click)="selectAll($event)">
+                      </th>
                       <th scope="col">ID</th>
                       <th scope="col">Name</th>
                       <th scope="col">Description</th>

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

@@ -14,7 +14,7 @@
  * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
  *******************************************************************************/
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { MetadataService } from '../../../services/metadata.service';
@@ -28,9 +28,13 @@ import { DeviceProfile } from '../../../contracts/v2/device-profile';
   styleUrls: ['./device-profile-list.component.css']
 })
 export class DeviceProfileListComponent implements OnInit {
-
+  
+  @Input() toolbars: boolean = true;
+  @Input() enableSelectAll: boolean = true;
+  @Output() singleProfileSelectedEvent = new EventEmitter<DeviceProfile>();
   profileList: DeviceProfile[] = [];
-  selectedProfiles: string[] = [];
+  multiProfilesSelected: string[] = [];
+  singleProfileSelected?: DeviceProfile;
   isCheckedAll: boolean = false;
   pagination: number = 1;
   pageLimit: number = 5;
@@ -56,11 +60,16 @@ export class DeviceProfileListComponent implements OnInit {
     });
   }
 
+  onSingleProfileSelectedEmitter() {
+    this.singleProfileSelectedEvent.emit(this.singleProfileSelected);
+  }
+
   refresh() {
     this.metaSvc.allDeviceProfolesPagination(0,this.pageLimit).subscribe((data: MultiDeviceProfileResponse) => {
       this.profileList = data.profiles;
       this.msgSvc.success('refresh');
       this.pagination = 1;
+      this.resetCheckbox();
     });
   }
 
@@ -79,11 +88,6 @@ export class DeviceProfileListComponent implements OnInit {
     });
   }
 
-  resetPagination() {
-    this.pageOffset = 0;
-    this.pageLimit = 5;
-  }
-
   setPageLimit(n: number) {
     this.pageLimit = n;
   }
@@ -91,20 +95,30 @@ export class DeviceProfileListComponent implements OnInit {
   setPagination(n?: number) {
     if (n === 1) {
       this.pagination += 1;
-      
     } else {
       this.pagination -= 1;
     }
-
     this.pageOffset = (this.pagination - 1) * this.pageLimit;
-   
+
+    this.resetCheckbox();
+  }
+
+  resetPagination() {
+    this.pageOffset = 0;
+    this.pageLimit = 5;
+    this.resetCheckbox();
+  }
+
+  resetCheckbox() {
+    this.isCheckedAll = false; //reset checkbox all
+    this.multiProfilesSelected = [];
   }
 
   edit() {
     this.router.navigate(['../edit-profile'], {
       relativeTo: this.route,
       queryParams: {
-        'profileName': this.selectedProfiles[0]
+        'profileName': this.multiProfilesSelected[0]
       }
     });
   }
@@ -114,9 +128,9 @@ export class DeviceProfileListComponent implements OnInit {
   }
 
   delete() {
-    this.selectedProfiles.forEach((profileName) => {
+    this.multiProfilesSelected.forEach((profileName) => {
       this.metaSvc.deleteProfileByName(profileName).subscribe(() => {
-        this.selectedProfiles = [];
+        this.multiProfilesSelected = [];
         this.profileList.forEach((profile, index) => {
           if (profile.name == profileName) {
             this.profileList.splice(index, 1);
@@ -128,42 +142,65 @@ export class DeviceProfileListComponent implements OnInit {
     $("#deleteConfirmDialog").modal('hide');
   }
 
+  isSingleProfileChecked(name: string): boolean {
+    return this.singleProfileSelected?.name === name
+  }
+
+  selectSingleProfile(event: any, name: string) {
+    const checkbox = event.target;
+    if (checkbox.checked) {
+      this.profileList.forEach((profile) => {
+        if (profile.name === name) {
+          this.singleProfileSelected = profile;
+        }
+      });
+    } else {
+      this.singleProfileSelected = undefined;
+    }
+    this.onSingleProfileSelectedEmitter();
+  }
+
   selectAll(event: any) {
     const checkbox = event.target;
-    let self = this;
     if (checkbox.checked) {
-      this.selectedProfiles = [];
-      this.profileList.forEach(function (item) {
-        self.selectedProfiles.push(item.id);
-        self.isChecked(item.id);
+      this.multiProfilesSelected = [];
+      this.profileList.forEach(profile => {
+        this.multiProfilesSelected.push(profile.name);
+        this.isChecked(profile.name);
       });
       this.isCheckedAll = true;
       return
     }
     this.isCheckedAll = false;
-    this.selectedProfiles = [];
-    this.profileList.forEach(function (item) {
-      self.isChecked(item.id);
+    this.multiProfilesSelected = [];
+    this.profileList.forEach(profile => {
+      this.isChecked(profile.name);
     });
   }
 
-  isChecked(id: string): boolean {
-    return this.selectedProfiles.findIndex(v => v === id) >= 0;
+  isChecked(name: string): boolean {
+    if (!this.enableSelectAll) {
+      return this.isSingleProfileChecked(name)
+    }
+    return this.multiProfilesSelected.findIndex(v => v === name) >= 0;
   }
 
-  selectOne(event: any, id: string) {
+  selectOne(event: any, name: string) {
+    if (!this.enableSelectAll) {
+      this.selectSingleProfile(event, name);
+      return
+    }
     const checkbox = event.target;
     if (checkbox.checked) {
-      this.selectedProfiles.push(id);
-      // console.log(this.selectedDevice)
-      if (this.selectedProfiles.length === this.profileList.length) {
+      this.multiProfilesSelected.push(name);
+      if (this.multiProfilesSelected.length === this.profileList.length) {
         this.isCheckedAll = true;
       }
       return
     }
     this.isCheckedAll = false;
-    this.isChecked(id);
-    this.selectedProfiles.splice(this.selectedProfiles.indexOf(id), 1)
+    this.isChecked(name);
+    this.multiProfilesSelected.splice(this.multiProfilesSelected.indexOf(name), 1)
   }
 
 }

web/src/app/services/metadata.service.ts

@@ -234,7 +234,6 @@ export class MetadataService {
 
   allDeviceProfolesPagination(offset: number, limit: number): Observable<MultiDeviceProfileResponse> {
     let url = `${this.deviceProfilesListUrl}?offset=${offset}&limit=${limit}`;
-    console.log(url)
     return this.http.get<MultiDeviceProfileResponse>(url).pipe(
       catchError(error => this.errorSvc.handleError(error))
     )