diff --git a/src/app/shared/admin/clusters/manager/manager.component.html b/src/app/shared/admin/clusters/manager/manager.component.html index 49225644f1caa1ed74d792d303310de96d2b9eb6..e370b9a40356cbcef1de528beca5dbf43aaeaed6 100644 --- a/src/app/shared/admin/clusters/manager/manager.component.html +++ b/src/app/shared/admin/clusters/manager/manager.component.html @@ -1,11 +1,13 @@ <div style="display: flex; align-items: center; margin-top:20px"> - <div style="margin-right:20px"> - <div > + <div style=" display:flex; align-items: center;"> + <div style="margin-right:20px;"> <button class="btn btn-primary" (click)="modal.show()">New Cluster</button> </div> - </div> - <div class="flex" style="margin-right:20px"> - + <span class="p-input-icon-right"> + <i class="pi pi-search" style="font-size: 13px; top: 16px; margin-right: 5px;"></i> + <input pInputText class="form-control" name="search" id="search" + placeholder="Search" type="text" [(ngModel)]="searchValue" (ngModelChange)="filterClusters()"> + </span> </div> </div> @@ -13,7 +15,7 @@ <div class="background-section"> <p-table - [value]="clusters" + [value]="filteredClusters" [paginator]="true" [rows]="maxItemsOnPage" [rowsPerPageOptions]="[15, 20, 25, 30, 50]" @@ -44,11 +46,11 @@ <ng-template pTemplate="body" let-cluster> <tr> <td [routerLink]="[cluster.id]">{{cluster.id}}</td> - <td>{{cluster.name}}</td> - <td>{{cluster.codename}}</td> - <td>{{('CLUSTERS.'+cluster.state.toString().toUpperCase() ) | translate}}</td> - <td>{{cluster.creationDate | date: 'dd-MM-yyyy HH:mm'}}</td> - <td>{{cluster.modificationDate | date: 'dd-MM-yyyy HH:mm'}}</td> + <td [routerLink]="[cluster.id]">{{cluster.name}}</td> + <td [routerLink]="[cluster.id]">{{cluster.codename}}</td> + <td [routerLink]="[cluster.id]">{{('CLUSTERS.'+cluster.state.toString().toUpperCase() ) | translate}}</td> + <td [routerLink]="[cluster.id]">{{cluster.creationDate | date: 'dd-MM-yyyy HH:mm'}}</td> + <td [routerLink]="[cluster.id]">{{cluster.modificationDate | date: 'dd-MM-yyyy HH:mm'}}</td> <td class="text-right"> <span class="dropdown"> <a style="display: inline-block" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" href="#" role="button"> diff --git a/src/app/shared/admin/clusters/manager/manager.component.ts b/src/app/shared/admin/clusters/manager/manager.component.ts index 786a8dc6caff3a132f8896a09677dd582c97fccc..75113f3aee51cc7221c4027fa089606ea8f8404c 100644 --- a/src/app/shared/admin/clusters/manager/manager.component.ts +++ b/src/app/shared/admin/clusters/manager/manager.component.ts @@ -16,6 +16,8 @@ export class ClusterManagerComponent { public addedCluster: ClusterManager = new ClusterManager(); public updatedFile : File = null; public maxItemsOnPage = 15; + public searchValue = ''; + filteredClusters: ClusterManager[] = []; public domains = []; @@ -23,49 +25,50 @@ export class ClusterManagerComponent { public modal: ModalComponent; constructor(private clusterService: ClusterManagerService, - private domainService: DomainService - ) { + private domainService: DomainService) { this.getAllClusters(); this.domainService.getAllBase().subscribe(result => { this.domains = result.filter(d => d.id !== this.domainService.getGlobalDomainId()); }); } - public saveFile(event: any) { - console.log(event); - this.updatedFile =event.files[0]; - } - -public getAllClusters() { - this.clusterService.getAllClusters().subscribe(result => { - console.log(result); - this.clusters = result; - }) - } - -public closeModalAndSaveCluster() { - this.clusterService.sendCluster(this.updatedFile, this.addedCluster).subscribe(result => { - console.log(result); - this.getAllClusters(); - this.modal.hide(); - this.updatedFile = null; - this.addedCluster = new ClusterManager(); - }, error => { - console.error(error); - + public saveFile(event: any) { + console.log(event); + this.updatedFile =event.files[0]; } -) -} - - -public onDomainSelection(event: any) { - - console.log(event); - this.addedCluster.domainNames = [event] - -} - + public getAllClusters() { + this.clusterService.getAllClusters().subscribe(result => { + console.log(result); + this.clusters = result; + this.filterClusters(); + }) + } + public closeModalAndSaveCluster() { + this.clusterService.sendCluster(this.updatedFile, this.addedCluster).subscribe(result => { + console.log(result); + this.getAllClusters(); + this.modal.hide(); + this.updatedFile = null; + this.addedCluster = new ClusterManager(); + }, error => { + console.error(error); + }) + } + + + public onDomainSelection(event: any) { + console.log(event); + this.addedCluster.domainNames = [event] + } + filterClusters() { + const value = this.searchValue?.toLowerCase() || ''; + this.filteredClusters = this.clusters.filter(cluster => + cluster.name?.toLowerCase().includes(value) || + cluster.codename?.toLowerCase().includes(value) || + cluster.id?.toString().includes(value) + ); + } }