From 5907404f77fc55e4aa25a2bc82b0bd63a89d2743 Mon Sep 17 00:00:00 2001
From: llara <llara@localhost>
Date: Wed, 5 Mar 2025 13:25:22 +0100
Subject: [PATCH] refs #1639. Enhance user modal for add/edit functionality and
 improve password change dialog

---
 .../add-user-modal.component.html             |  9 +++++----
 .../add-user-modal.component.ts               | 20 +++++++++++++------
 .../change-password-modal.component.css       |  5 ++++-
 .../change-password-modal.component.html      |  2 +-
 .../admin/users/users/users.component.html    |  9 ++++-----
 .../admin/users/users/users.component.ts      |  6 +++++-
 .../components/groups/groups.component.html   |  4 ++--
 .../groups/groups.component.spec.ts           |  5 ++++-
 .../app/components/groups/groups.component.ts |  3 ++-
 .../app/layout/header/header.component.html   |  2 +-
 ogWebconsole/src/locale/en-US.json            |  3 ++-
 ogWebconsole/src/locale/en.json               |  3 ++-
 ogWebconsole/src/locale/es.json               |  3 ++-
 13 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
index b074aa4..6139635 100644
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
@@ -1,6 +1,6 @@
 <app-loading [isLoading]="loading"></app-loading>
 
-<h1 mat-dialog-title>{{ 'dialogTitleAddUser' | translate }}</h1>
+<h1 mat-dialog-title>{{ isEditMode ? ('dialogTitleEditUser' | translate) : ('dialogTitleAddUser' | translate) }}</h1>
 <mat-dialog-content class="form-container">
   <form [formGroup]="userForm" class="user-form">
     <mat-form-field appearance="fill" class="full-width">
@@ -29,10 +29,11 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
+
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Vista tarjetas</mat-label>
       <mat-select formControlName="groupsView" required>
-        <mat-option *ngFor="let option of views" [value]="option.value" >
+        <mat-option *ngFor="let option of views" [value]="option.value">
           {{ option.name }}
         </mat-option>
       </mat-select>
@@ -41,5 +42,5 @@
 </mat-dialog-content>
 <mat-dialog-actions class="action-container">
   <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
-</mat-dialog-actions>
+  <button class="submit-button" (click)="onSubmit()" [disabled]="userForm.invalid">{{ isEditMode ? ('buttonEdit' | translate) : ('buttonAdd' | translate) }}</button>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
index c5987ba..f66fa0f 100644
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
@@ -1,9 +1,9 @@
 import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {ToastrService} from "ngx-toastr";
-import {HttpClient} from "@angular/common/http";
-import {DataService} from "../data.service";
+import { ToastrService } from "ngx-toastr";
+import { HttpClient } from "@angular/common/http";
+import { DataService } from "../data.service";
 
 interface UserGroup {
   '@id': string;
@@ -19,15 +19,17 @@ interface UserGroup {
 export class AddUserModalComponent implements OnInit {
   baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   @Output() userAdded = new EventEmitter<void>();
+  @Output() userEdited = new EventEmitter<void>();
   userForm: FormGroup<any>;
   userGroups: UserGroup[] = [];
   organizationalUnits: any[] = [];
   userId: string | null = null;
   loading: boolean = false;
+  isEditMode: boolean = false;
 
   protected views = [
-    {value: 'card', name: 'Tarjetas'},
-    {value: 'list', name: 'Listado'},
+    { value: 'card', name: 'Tarjetas' },
+    { value: 'list', name: 'Listado' },
   ];
 
   constructor(
@@ -45,6 +47,10 @@ export class AddUserModalComponent implements OnInit {
       groupsView: ['card', Validators.required],
       organizationalUnits: [[]]
     });
+
+    if (data) {
+      this.isEditMode = true;
+    }
   }
 
   ngOnInit(): void {
@@ -114,6 +120,7 @@ export class AddUserModalComponent implements OnInit {
         this.http.put(`${this.baseUrl}${this.userId}`, payload).subscribe(
           (response) => {
             this.toastService.success('Usuario editado correctamente');
+            this.userEdited.emit();
             this.dialogRef.close();
             this.loading = false;
           },
@@ -126,6 +133,7 @@ export class AddUserModalComponent implements OnInit {
         this.http.post(`${this.baseUrl}/users`, payload).subscribe(
           (response) => {
             this.toastService.success('Usuario añadido correctamente');
+            this.userAdded.emit();
             this.dialogRef.close();
             this.loading = false;
           },
@@ -137,4 +145,4 @@ export class AddUserModalComponent implements OnInit {
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
index d37ba39..45607bd 100644
--- a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
+++ b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
@@ -1,6 +1,5 @@
 .user-form .form-field {
   display: block;
-  margin-bottom: 10px;
 }
 
 .checkbox-group label {
@@ -23,4 +22,8 @@ mat-spinner {
   justify-content: flex-end;
   gap: 1em;
   padding: 1.5em;
+}
+
+.form-container {
+  margin-top: 2em;
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
index 0a3aac7..e590732 100644
--- a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>{{ 'dialogTitleEditUser' | translate }}</h1>
+<h1 mat-dialog-title>{{ 'dialogTitleChangePassword' | translate }}</h1>
 <mat-dialog-content class="form-container">
   <form [formGroup]="userForm" class="user-form">
     <mat-form-field class="form-field">
diff --git a/ogWebconsole/src/app/components/admin/users/users/users.component.html b/ogWebconsole/src/app/components/admin/users/users/users.component.html
index efa6f75..02a9230 100644
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.html
@@ -9,7 +9,6 @@
   </div>
 </div>
 
-
 <div class="search-container">
   <mat-form-field appearance="fill" class="search-string">
     <mat-label>{{ 'searchLabel' | translate }}</mat-label>
@@ -32,10 +31,10 @@
             {{ user[column.columnDef] === 'card' ? 'Vista tarjetas' : 'Listado' }}
           </mat-chip>
         </ng-container>
-        <ng-container *ngIf="column.columnDef !== 'groupsView'" >
+        <ng-container *ngIf="column.columnDef !== 'groupsView'">
           {{ column.cell(user) }}
-          </ng-container>
-        </td>
+        </ng-container>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
@@ -58,4 +57,4 @@
   <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
     (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/users/users/users.component.ts b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
index 3ca3f56..8e758cc 100644
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
@@ -92,6 +92,10 @@ export class UsersComponent implements OnInit {
       data: user['@id']
     });
 
+    dialogRef.componentInstance.userEdited.subscribe(() => {
+      this.search();
+    });
+
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
         this.search();
@@ -129,4 +133,4 @@ export class UsersComponent implements OnInit {
     this.length = event.length;
     this.search();
   }
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 6eac0b7..0c91f2e 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -61,11 +61,11 @@
             </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" >
+                <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)">
+              <button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix aria-label="Clear tree search" (click)="clearStatusFilter($event, clientSearchStatusInput)">
                 <mat-icon>close</mat-icon>
               </button>
             </mat-form-field>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.spec.ts b/ogWebconsole/src/app/components/groups/groups.component.spec.ts
index 311398c..1de7160 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.spec.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.spec.ts
@@ -123,6 +123,9 @@ describe('GroupsComponent', () => {
         spyOn(component['http'], 'get').and.callThrough();
         component.fetchClientsForNode(node);
         expect(component.isLoadingClients).toBeTrue();
-        expect(component['http'].get).toHaveBeenCalledWith(`${component.baseUrl}/clients?organizationalUnit.id=${node.id}&page=1&itemsPerPage=20`);
+        expect(component['http'].get).toHaveBeenCalledWith(
+            `${component.baseUrl}/clients?organizationalUnit.id=${node.id}&page=1&itemsPerPage=20`,
+            { params: jasmine.any(Object) }
+        );
     });
 });
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index c953296..9b26473 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -758,9 +758,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.filterClients('');
   }
 
-  clearStatusFilter(event: Event): void {
+  clearStatusFilter(event: Event, clientSearchStatusInput: any): void {
     event.stopPropagation();
     delete this.filters['status'];
+    clientSearchStatusInput.value = null;
     this.fetchClientsForNode(this.selectedNode);
   }
 }
diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html
index ce9bb4c..411b49b 100644
--- a/ogWebconsole/src/app/layout/header/header.component.html
+++ b/ogWebconsole/src/app/layout/header/header.component.html
@@ -21,7 +21,7 @@
 
       <button class="ordinary-button" *ngIf="!isSuperAdmin" (click)="editUser()" i18n="@@editUser"
         matTooltip="Editar tu información de usuario" matTooltipShowDelay="1000">
-        Editar usuario
+        Cambiar contraseña
       </button>
 
       <button class="logout-button" routerLink="/auth/login" i18n="@@logout"
diff --git a/ogWebconsole/src/locale/en-US.json b/ogWebconsole/src/locale/en-US.json
index 1ccfd67..0340a4d 100644
--- a/ogWebconsole/src/locale/en-US.json
+++ b/ogWebconsole/src/locale/en-US.json
@@ -21,7 +21,8 @@
   "buttonAdd": "Add",
   "addButton": "Add",
   "addClientDialogTitle": "Add Client",
-  "dialogTitleEditUser": "Edit User",
+  "dialogTitleEditUser": "Editar usuario",
+  "dialogTitleChangePassword": "Change password",
   "labelCurrentPassword": "Current password",
   "labelNewPassword": "New password",
   "labelRepeatPassword": "Repeat password",
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index 1ccfd67..0340a4d 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -21,7 +21,8 @@
   "buttonAdd": "Add",
   "addButton": "Add",
   "addClientDialogTitle": "Add Client",
-  "dialogTitleEditUser": "Edit User",
+  "dialogTitleEditUser": "Editar usuario",
+  "dialogTitleChangePassword": "Change password",
   "labelCurrentPassword": "Current password",
   "labelNewPassword": "New password",
   "labelRepeatPassword": "Repeat password",
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index 4028d0f..470fe4f 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -21,7 +21,8 @@
   "buttonAdd": "Añadir",
   "addButton": "Añadir",
   "addClientDialogTitle": "Añadir Cliente",
-  "dialogTitleEditUser": "Editar Usuario",
+  "dialogTitleEditUser": "Editar usuario",
+  "dialogTitleChangePassword": "Change password",
   "labelCurrentPassword": "Contraseña actual",
   "labelNewPassword": "Nueva contraseña",
   "labelRepeatPassword": "Repite la contraseña",