Chagned filter groups and user improvements

ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts

@@ -94,14 +94,20 @@ export class AddUserModalComponent implements OnInit {
 
   onSubmit(): void {
     if (this.userForm.valid) {
-      const payload = {
+      const payload: any = {
         username: this.userForm.value.username,
-        allowedOrganizationalUnits: this.userForm.value.organizationalUnit,
-        password: this.userForm.value.password,
+        allowedOrganizationalUnits: this.userForm.value.organizationalUnits,
         enabled: true,
-        userGroups: [this.userForm.value.role ],
+        userGroups: [this.userForm.value.role],
         groupsView: this.userForm.value.groupsView
       };
+
+      if (!this.userId && this.userForm.value.password) {
+        payload.password = this.userForm.value.password;
+      } else if (this.userId && this.userForm.value.password.trim() !== '') {
+        payload.password = this.userForm.value.password;
+      }
+
       this.loading = true;
 
       if (this.userId) {
@@ -109,12 +115,11 @@ export class AddUserModalComponent implements OnInit {
           (response) => {
             this.toastService.success('Usuario editado correctamente');
             this.dialogRef.close();
-            this.loading = false
+            this.loading = false;
           },
           (error) => {
             this.toastService.error(error['error']['hydra:description']);
-            this.loading = false
-
+            this.loading = false;
           }
         );
       } else {
@@ -122,11 +127,11 @@ export class AddUserModalComponent implements OnInit {
           (response) => {
             this.toastService.success('Usuario añadido correctamente');
             this.dialogRef.close();
-            this.loading = false
+            this.loading = false;
           },
           (error) => {
             this.toastService.error(error['error']['hydra:description']);
-            this.loading = false
+            this.loading = false;
           }
         );
       }

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

@@ -59,6 +59,18 @@
                 <mat-icon>close</mat-icon>
               </button>
             </mat-form-field>
+            <mat-form-field class="form-field search-select" appearance="outline">
+              <mat-select placeholder="Buscar por estado..." #clientSearchStatusInput (selectionChange)="onClientFilterStatusInput($event.value)">
+                <mat-option *ngFor="let option of status" [value]="option.value" >
+                  {{ option.name }}
+                </mat-option>
+              </mat-select>
+              <button mat-icon-button matSuffix aria-label="Clear tree search" (click)="clearStatusFilter($event)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-form-field>
+
+            <mat-divider style="padding-top: 10px;"></mat-divider>
 
             <!-- Funcionalidad actualmente deshabilitada-->
             <!-- <mat-form-field appearance="outline">
@@ -383,4 +395,4 @@
 
     </div>
   </ng-template>
-</div>
+</div>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import {HttpClient, HttpParams} from '@angular/common/http';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
@@ -65,6 +65,19 @@ export class GroupsComponent implements OnInit, OnDestroy {
   syncingClientId: string | null = null;
   private originalTreeData: TreeNode[] = [];
   arrayClients: any[] = [];
+  filters: { [key: string]: string } = {};
+
+  protected status = [
+    {value: 'off', name: 'Apagado'},
+    {value: 'initializing', name: 'Inicializando'},
+    {value: 'og-live', name: 'Og Live'},
+    {value: 'linux', name: 'Linux'},
+    {value: 'linux-session', name: 'Linux Session'},
+    {value: 'windows', name: 'Windows'},
+    {value: 'windows-session', name: 'Windows Session'},
+    {value: 'busy', name: 'Ocupado'},
+    {value: 'mac', name: 'Mac'},
+  ];
 
   displayedColumns: string[] = ['select', 'status', 'ip', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
 
@@ -330,9 +343,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
 
   public fetchClientsForNode(node: any, selectedClientsBeforeEdit: string[] = []): void {
+    const params = new HttpParams({ fromObject: this.filters });
+
     this.isLoadingClients = true;
-    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`).subscribe({
-      next: (response) => {
+    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params }).subscribe({
+      next: (response: any) => {
         this.selectedClients.data = response['hydra:member'];
         this.length = response['hydra:totalItems'];
         this.arrayClients = this.selectedClients.data;
@@ -624,13 +639,22 @@ export class GroupsComponent implements OnInit, OnDestroy {
   onClientFilterInput(event: Event): void {
     const input = event.target as HTMLInputElement;
     const searchTerm = input?.value || '';
+    this.filters['query'] = searchTerm;
     this.filterClients(searchTerm);
   }
 
+  onClientFilterStatusInput(event: Event): void {
+    // @ts-ignore
+    this.filters['status'] = event;
+    this.fetchClientsForNode(this.selectedNode);
+  }
+
 
   filterClients(searchTerm: string): void {
     this.searchTerm = searchTerm.trim().toLowerCase();
-    this.selectedClients.filter = this.searchTerm;
+    //this.selectedClients.filter = this.searchTerm;
+
+    this.fetchClientsForNode(this.selectedNode);
     this.arrayClients = this.selectedClients.filteredData;
   }
 
@@ -731,6 +755,13 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
   clearClientSearch(inputElement: HTMLInputElement): void {
     inputElement.value = '';
+    delete this.filters['query'];
     this.filterClients('');
   }
+
+  clearStatusFilter(event: Event): void {
+    event.stopPropagation();
+    delete this.filters['status'];
+    this.fetchClientsForNode(this.selectedNode);
+  }
 }

ogWebconsole/src/app/components/groups/services/data.service.ts

@@ -12,7 +12,7 @@ export class DataService {
   baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
 
   private apiUrl = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
-  private clientsUrl = `${this.baseUrl}/clients?page=1&itemsPerPage=1000`;
+  private clientsUrl = `${this.baseUrl}/clients`;
 
   constructor(private http: HttpClient) {}
 

ogWebconsole/src/app/layout/header/header.component.css

@@ -1,5 +1,5 @@
 mat-toolbar {
-  height: 7vh;
+  /*height: 7vh;*/
   min-height: 60px;
   background-color: #3f51b5;
   color: white;
@@ -44,4 +44,4 @@ mat-toolbar {
 .logout-button:disabled {
   background-color: #ced0df;
   cursor: not-allowed;
-}
+}