Pagina usuarios modales usuarios

ogWebconsole/src/app/app.module.ts

@@ -25,6 +25,10 @@ import { MatListModule } from '@angular/material/list';
 import { UsersComponent } from './components/pages/admin/users/users/users.component';
 import { RolesComponent } from './components/pages/admin/roles/roles/roles.component';
 import {MatTableModule} from '@angular/material/table';
+import {MatDialogModule} from '@angular/material/dialog';
+import { DeleteUserModalComponent } from './components/pages/admin/users/users/delete-user-modal/delete-user-modal.component';
+import { AddUserModalComponent } from './components/pages/admin/users/users/add-user-modal/add-user-modal.component';
+
 
 @NgModule({ declarations: [
         AppComponent,
@@ -36,9 +40,12 @@ import {MatTableModule} from '@angular/material/table';
         AdminComponent,
         MainLayoutComponent,
         UsersComponent,
-        RolesComponent
+        RolesComponent,
+        DeleteUserModalComponent,
+        AddUserModalComponent
     ],
-    bootstrap: [AppComponent], imports: [BrowserModule,
+    bootstrap: [AppComponent], 
+    imports: [BrowserModule,
         AppRoutingModule,
         FormsModule,
         MatToolbarModule,
@@ -51,7 +58,8 @@ import {MatTableModule} from '@angular/material/table';
         MatFormFieldModule,
         MatInputModule,
         MatListModule,
-        MatTableModule],
+        MatTableModule,
+        MatDialogModule],
     providers: [
         {
             provide: HTTP_INTERCEPTORS,

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

@@ -47,7 +47,7 @@ export class LoginComponent {
                     this.errorMessage = 'Ha ocurrido un error. Por favor, inténtelo de nuevo.';
 
                     //BYPASS TO DASHBOARD
-                    this.router.navigateByUrl('/dashboard');
+                    /* this.router.navigateByUrl('/dashboard'); */
                 }
             }
         });

ogWebconsole/src/app/components/pages/admin/users/users/users.component.html

@@ -1,6 +1,6 @@
 <div class="header-container">
   <h1>Gestión de usuarios</h1>
-  <button mat-flat-button color="primary">+ Añadir</button>
+  <button mat-flat-button color="primary" (click)="addUser()">+ Añadir</button>
 </div>
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
 

ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts

@@ -2,6 +2,9 @@
 import { Component, OnInit } from '@angular/core';
 import { UserService } from './users.service';
 import { MatTableDataSource } from '@angular/material/table';
+import { DeleteUserModalComponent } from './delete-user-modal/delete-user-modal.component';
+import { MatDialog } from '@angular/material/dialog';
+import { AddUserModalComponent } from './add-user-modal/add-user-modal.component';
 
 @Component({
   selector: 'app-users',
@@ -34,7 +37,7 @@ export class UsersComponent implements OnInit {
   ];
   displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
 
-  constructor(private userService: UserService) {}
+  constructor(private userService: UserService, public dialog: MatDialog) {}
 
   ngOnInit() {
     this.userService.getUsers().subscribe(response => {
@@ -42,13 +45,30 @@ export class UsersComponent implements OnInit {
     });
   }
 
+  addUser() {
+    const dialogRef = this.dialog.open(AddUserModalComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        // Handle the result here (e.g., refresh the list of users)
+      }
+    });
+  }
+
   editUser(user: any) {
     // Implementar la lógica de edición
     console.log('Editar usuario:', user);
   }
 
   deleteUser(user: any) {
-    // Implementar la lógica de eliminación
-    console.log('Eliminar usuario:', user);
+    const dialogRef = this.dialog.open(DeleteUserModalComponent, {
+      data: user
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        // Handle the result here (e.g., refresh the list of users)
+      }
+    });
   }
 }

ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts

@@ -1,94 +1,18 @@
-// user.service.ts
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable, of } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UserService {
 
+  private userApiUrl = 'http://127.0.0.1:8080/api/users';
+
   constructor(private http: HttpClient) { }
 
-  // Método para simular la llamada a la API
   getUsers(): Observable<any> {
-    // Datos simulados
-    const mockResponse = {
-      "hydra:member": [
-        {
-          "@context": "/contexts/User",
-          "@id": "/users/1",
-          "@type": "User",
-          "username": "jdoe",
-          "roles": [
-            "ROLE_USER",
-            "ROLE_ADMIN"
-          ],
-          "enabled": true,
-          "allowedOrganizationalUnits": [
-            "IT",
-            "HR"
-          ],
-          "createAt": "2024-05-28T20:15:50.913Z",
-          "createBy": "admin",
-          "uuid": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-          "id": 1
-        },
-        {
-          "@context": "/contexts/User",
-          "@id": "/users/2",
-          "@type": "User",
-          "username": "asmith",
-          "roles": [
-            "ROLE_USER"
-          ],
-          "enabled": false,
-          "allowedOrganizationalUnits": [
-            "Finance"
-          ],
-          "createAt": "2024-05-27T15:10:30.913Z",
-          "createBy": "admin",
-          "uuid": "4a86f74e-5717-4562-b3fc-2c963f66afa6",
-          "id": 2
-        }
-      ],
-      "hydra:totalItems": 2,
-      "hydra:view": {
-        "@id": "/users?page=1",
-        "type": "PartialCollectionView",
-        "hydra:first": "/users?page=1",
-        "hydra:last": "/users?page=1",
-        "hydra:previous": null,
-        "hydra:next": null
-      },
-      "hydra:search": {
-        "@type": "hydra:IriTemplate",
-        "hydra:template": "/users{?username,roles,enabled}",
-        "hydra:variableRepresentation": "BasicRepresentation",
-        "hydra:mapping": [
-          {
-            "@type": "IriTemplateMapping",
-            "variable": "username",
-            "property": "username",
-            "required": false
-          },
-          {
-            "@type": "IriTemplateMapping",
-            "variable": "roles",
-            "property": "roles",
-            "required": false
-          },
-          {
-            "@type": "IriTemplateMapping",
-            "variable": "enabled",
-            "property": "enabled",
-            "required": false
-          }
-        ]
-      }
-    };
-
-    // Retornar los datos simulados como observable
-    return of(mockResponse);
+    return this.http.get<any>(this.userApiUrl+'?page=1&itemsPerPage=30');
   }
 }
+

ogWebconsole/src/app/services/custom.interceptor.ts

@@ -1,18 +1,28 @@
 import { Injectable } from '@angular/core';
-import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { Token } from '@angular/compiler';
 
-export class CustomInterceptor implements HttpInterceptor{
-  constructor(){}
+@Injectable()
+export class CustomInterceptor implements HttpInterceptor {
+  constructor() { }
+
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    
     const token = localStorage.getItem('loginToken');
-    const newCloneRequest = req.clone({
-      setHeaders:{
+    let newCloneRequest;
+
+    if (req.url.includes('login')) {
+      newCloneRequest = req.clone({
+        setHeaders: {
           Authorization: `${token}`
         }
-    })
+      });
+    } else {
+      newCloneRequest = req.clone({
+        setHeaders: {
+          Authorization: `Bearer ${token}`
+        }
+      });
+    }
 
     return next.handle(newCloneRequest);
   }