opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #1505. Refactor Groups component to use arrayClients for filtering
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

pull/16/head
Lucas Lara García 2025-02-12 14:10:00 +01:00
parent bada1762aa
commit c8c1bdd0bd
2 changed files with 50 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
ogWebconsole/src/app/components/groups/groups.component.html
View File

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

16
ogWebconsole/src/app/components/groups/groups.component.ts
View File

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