refs #1505. Refactor Groups component to use arrayClients for filtering

ogWebconsole/src/app/components/groups/groups.component.html

@@ -10,7 +10,7 @@
   </div>
   <div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
     <button mat-flat-button color="primary" (click)="addOU($event)"
-            matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
+      matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
       {{ 'newOrganizationalUnitButton' | translate }}
     </button>
     <button mat-flat-button color="primary" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate
@@ -21,7 +21,7 @@
     </mat-menu>
 
     <button mat-flat-button (click)="openBottomSheet()" joyrideStep="keyStep" text="{{ 'keyStepText' | translate }}"
-            matTooltipShowDelay="1000">
+      matTooltipShowDelay="1000">
       {{ 'legendButton' | translate }}
     </button>
   </div>
@@ -39,16 +39,16 @@
         <mat-label>{{ 'searchTree' | translate }}</mat-label>
         <input matInput #treeSearchInput (input)="onTreeFilterInput($event)" placeholder="Centro, aula, grupos ..." />
         <button *ngIf="treeSearchInput.value" mat-icon-button matSuffix aria-label="Clear tree search"
-                (click)="clearTreeSearch(treeSearchInput)">
+          (click)="clearTreeSearch(treeSearchInput)">
           <mat-icon>close</mat-icon>
         </button>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label>{{ 'searchClient' | translate }}</mat-label>
         <input matInput #clientSearchInput (input)="onClientFilterInput($event)"
-               placeholder="Nombre, IP, estado o MAC" />
+          placeholder="Nombre, IP, estado o MAC" />
         <button *ngIf="clientSearchInput.value" mat-icon-button matSuffix aria-label="Clear client search"
-                (click)="clearClientSearch(clientSearchInput)">
+          (click)="clearClientSearch(clientSearchInput)">
           <mat-icon>close</mat-icon>
         </button>
       </mat-form-field>
@@ -79,19 +79,19 @@
     <div class="tree-container">
       <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl">
         <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
-                       *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick(node)">
+          *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick(node)">
           <button mat-icon-button matTreeNodeToggle [disabled]="!node.expandable"
-                  [ngClass]="{'disabled-toggle': !node.expandable}">
+            [ngClass]="{'disabled-toggle': !node.expandable}">
             <mat-icon>{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
           </button>
           <mat-icon class="node-icon {{ node.type }}">
             {{
-              node.type === 'organizational-unit' ? 'apartment'
-                : node.type === 'classrooms-group' ? 'meeting_room'
-                  : node.type === 'classroom' ? 'school'
-                    : node.type === 'clients-group' ? 'lan'
-                      : node.type === 'client' ? 'computer'
-                        : 'group'
+            node.type === 'organizational-unit' ? 'apartment'
+            : node.type === 'classrooms-group' ? 'meeting_room'
+            : node.type === 'classroom' ? 'school'
+            : node.type === 'clients-group' ? 'lan'
+            : node.type === 'client' ? 'computer'
+            : 'group'
             }}
           </mat-icon>
           <span>{{ node.name }}</span>
@@ -100,16 +100,16 @@
           </button>
         </mat-tree-node>
         <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
-                       *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick(node)">
+          *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick(node)">
           <button mat-icon-button matTreeNodeToggle [disabled]="true" class="disabled-toggle"></button>
           <mat-icon style="color: green;">
             {{
-              node.type === 'organizational-unit' ? 'apartment'
-                : node.type === 'classrooms-group' ? 'meeting_room'
-                  : node.type === 'classroom' ? 'school'
-                    : node.type === 'clients-group' ? 'lan'
-                      : node.type === 'client' ? 'computer'
-                        : 'group'
+            node.type === 'organizational-unit' ? 'apartment'
+            : node.type === 'classrooms-group' ? 'meeting_room'
+            : node.type === 'classroom' ? 'school'
+            : node.type === 'clients-group' ? 'lan'
+            : node.type === 'client' ? 'computer'
+            : 'group'
             }}
           </mat-icon>
           <span>{{ node.name }}</span>
@@ -171,7 +171,7 @@
         </span>
         <div class="view-type-container">
           <app-execute-command [clientData]="arrayClients" [buttonType]="'text'"
-                               [buttonText]="'Ejecutar comandos'"></app-execute-command>
+            [buttonText]="'Ejecutar comandos'"></app-execute-command>
           <button mat-button color="primary" (click)="toggleView('card')" [disabled]="currentView === 'card'">
             <mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
           </button>
@@ -181,23 +181,18 @@
         </div>
       </div>
 
-      <app-loading [isLoading]="isLoadingClients"></app-loading>    
+      <app-loading [isLoading]="isLoadingClients"></app-loading>
 
       <div *ngIf="!isLoadingClients">
         <div *ngIf="hasClients; else noClientsTemplate">
           <!-- Cards view -->
           <div class="clients-grid" *ngIf="currentView === 'card'">
-            <div *ngFor="let client of selectedClients.data" class="client-item">
+            <div *ngFor="let client of arrayClients" class="client-item">
               <div class="client-card">
-                <mat-checkbox (click)="$event.stopPropagation()"
-                              (change)="toggleRow(client)"
-                              [checked]="selection.isSelected(client)"
-                              [disabled]="client.status === 'busy'"
-                >
+                <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
+                  [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
                 </mat-checkbox>
-                <img
-                  [src]="'assets/images/ordenador_' + client.status + '.png'"
-                  alt="Client Icon"
+                <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
                   class="client-image" />
 
                 <div class="client-details">
@@ -205,29 +200,22 @@
                   <span class="client-ip">{{ client.ip }}</span>
                   <span class="client-ip">{{ client.mac }}</span>
                   <div class="action-icons">
-                    <button
-                      *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
-                      mat-icon-button color="primary"
+                    <button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button color="primary"
                       (click)="getStatus(client, selectedNode)">
                       <mat-icon>sync</mat-icon>
                     </button>
 
-                    <button
-                      *ngIf="syncStatus && syncingClientId === client.uuid"
-                      mat-icon-button color="primary">
+                    <button *ngIf="syncStatus && syncingClientId === client.uuid" mat-icon-button color="primary">
                       <mat-spinner diameter="24"></mat-spinner>
                     </button>
-                 
-                    <app-execute-command
-                      [clientData]="[client]"
-                      [buttonType]="'icon'"
-                      [icon]="'terminal'"
-                    ></app-execute-command>
+
+                    <app-execute-command [clientData]="[client]" [buttonType]="'icon'"
+                      [icon]="'terminal'"></app-execute-command>
 
                     <button mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary">
                       <mat-icon>more_vert</mat-icon>
                     </button>
-                
+
                     <mat-menu #clientMenu="matMenu">
                       <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                         <mat-icon>edit</mat-icon>
@@ -253,22 +241,22 @@
               <ng-container matColumnDef="select">
                 <th mat-header-cell *matHeaderCellDef>
                   <mat-checkbox (change)="$event ? toggleAllRows() : null"
-                                [checked]="selection.hasValue() && isAllSelected()"
-                                [indeterminate]="selection.hasValue() && !isAllSelected()">
+                    [checked]="selection.hasValue() && isAllSelected()"
+                    [indeterminate]="selection.hasValue() && !isAllSelected()">
                   </mat-checkbox>
                 </th>
                 <td mat-cell *matCellDef="let row">
                   <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(row)"
-                                [checked]="selection.isSelected(row)" [disabled]="row.status === 'busy'">
+                    [checked]="selection.isSelected(row)" [disabled]="row.status === 'busy'">
                   </mat-checkbox>
                 </td>
               </ng-container>
               <ng-container matColumnDef="status">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
                 <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}" matTooltipPosition="left"
-                    matTooltipShowDelay="500">
+                  matTooltipShowDelay="500">
                   <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
-                       class="client-image" />
+                    class="client-image" />
                 </td>
               </ng-container>
 
@@ -276,7 +264,7 @@
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'sync' | translate }} </th>
                 <td mat-cell *matCellDef="let client">
                   <button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button color="primary"
-                          (click)="getStatus(client, selectedNode)">
+                    (click)="getStatus(client, selectedNode)">
                     <mat-icon>sync</mat-icon>
                   </button>
 
@@ -288,7 +276,7 @@
               <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
                 <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}" matTooltipPosition="left"
-                    matTooltipShowDelay="500">
+                  matTooltipShowDelay="500">
                   <div class="client-info">
                     <div class="client-name">{{ client.name }}</div>
                     <div class="client-ip">{{ client.ip }}</div>
@@ -299,7 +287,7 @@
               <ng-container matColumnDef="oglive">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> OG Live </th>
                 <td mat-cell *matCellDef="let client"> {{ (client.ogLive?.filename || '').slice(0, 15) }}{{
-                    (client.ogLive?.filename?.length > 15) ? '...' : '' }} </td>
+                  (client.ogLive?.filename?.length > 15) ? '...' : '' }} </td>
               </ng-container>
 
               <ng-container matColumnDef="maintenace">
@@ -327,7 +315,7 @@
                     <mat-icon>more_vert</mat-icon>
                   </button>
                   <app-execute-command [clientData]="[client]" [buttonType]="'icon'"
-                                       [icon]="'terminal'"></app-execute-command>
+                    [icon]="'terminal'"></app-execute-command>
                   <mat-menu #clientMenu="matMenu">
                     <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                       <mat-icon>edit</mat-icon>
@@ -360,4 +348,4 @@
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -125,6 +125,8 @@ export class GroupsComponent implements OnInit, OnDestroy {
         client.mac?.toLowerCase().includes(lowerTerm)
       );
     };
+
+    this.arrayClients = this.selectedClients.data;
   }
 
 
@@ -308,6 +310,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}`).subscribe({
       next: (response) => {
         this.selectedClients.data = response['hydra:member'];
+        this.arrayClients = this.selectedClients.data;
         this.hasClients = node.hasClients ?? false;
         this.isLoadingClients = false;
         this.initialLoading = false;
@@ -400,23 +403,19 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
 
   onDeleteClick(event: MouseEvent, entity: TreeNode | Client | null): void {
-    console.log('Entity to delete:', entity);
     event.stopPropagation();
     if (!entity) return;
-  
+
     const uuid = entity['@id'] ? this.extractUuid(entity['@id']) : null;
     const type = entity.hasOwnProperty('mac') ? NodeType.Client : NodeType.OrganizationalUnit;
-  
-    console.log('UUID:', uuid);
-    console.log('Type:', type);
-  
+
     if (!uuid) return;
-  
+
     const dialogRef = this.dialog.open(DeleteModalComponent, {
       width: '400px',
       data: { name: entity.name },
     });
-  
+
     dialogRef.afterClosed().subscribe((result) => {
       if (result === true) {
         this.deleteEntityorClient(uuid, type);
@@ -596,6 +595,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
   filterClients(searchTerm: string): void {
     this.searchTerm = searchTerm.trim().toLowerCase();
     this.selectedClients.filter = this.searchTerm;
+    this.arrayClients = this.selectedClients.filteredData;
   }