Pagina usuarios titulo y añadir

ogWebconsole/src/app/app.module.ts

@@ -24,7 +24,7 @@ import { MatInputModule } from '@angular/material/input';
 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 { MatCell, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatTable } from '@angular/material/table';
+import {MatTableModule} from '@angular/material/table';
 
 @NgModule({ declarations: [
         AppComponent,
@@ -51,13 +51,7 @@ import { MatCell, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef
         MatFormFieldModule,
         MatInputModule,
         MatListModule,
-        MatTable,
-        MatHeaderRow,
-        MatHeaderCell,
-        MatCell,
-        MatRow,
-        MatHeaderRowDef,
-        MatHeaderCellDef],
+        MatTableModule],
     providers: [
         {
             provide: HTTP_INTERCEPTORS,

ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css

@@ -9,4 +9,5 @@
 .content-wrapper{
     display: block;
     grid-area: content;
+    margin: 20px;
 }

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

@@ -1,43 +1,16 @@
-.users-table {
+table {
   width: 100%;
-    border-collapse: collapse;
-    overflow-x: auto;
+  margin-top: 50px;
 }
 
-  .users-table th, .users-table td {
-    padding: 12px;
-    text-align: left;
-    border-bottom: 1px solid #ddd;
+.header-container {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
 }
 
-  .users-table th {
-    background-color: #f2f2f2;
-    color: #333;
+.header-container h1 {
+  margin: 0;
 }
-  
-  .users-table tbody tr:nth-child(even) {
-    background-color: #f2f2f2;
-  }
-  
-  .users-table tbody tr:hover {
-    background-color: #ddd;
-  }
-  
-  .action-cell {
-    text-align: right;
-  }
-  
-  .edit-button, .delete-button {
-    padding: 6px 12px;
-    margin-right: 5px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    background-color: #4CAF50;
-    color: white;
-  }
-  
-  .edit-button:hover, .delete-button:hover {
-    background-color: #45a049;
-  }
-  

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

@@ -1,19 +1,24 @@
-<table class="users-table">
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Usuario</th>
-      <th>Acciones</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let user of users">
-      <td>{{ user.id }}</td>
-      <td>{{ user.username }}</td>
-      <td class="action-cell">
-        <button mat-flat-button color="primary">Editar</button>
-        <button mat-flat-button color="warn">Eliminar</button>
+<div class="header-container">
+  <h1>Gestión de usuarios</h1>
+  <button mat-flat-button color="primary">+ Añadir</button>
+</div>
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+
+  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+    <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+    <td mat-cell *matCellDef="let user"> {{ column.cell(user) }} </td>
+  </ng-container>
+
+  <!-- Botones Column -->
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef> Acciones </th>
+    <td mat-cell *matCellDef="let user">
+      <button mat-button color="primary" (click)="editUser(user)">Editar</button>
+      <button mat-button color="warn" (click)="deleteUser(user)">Eliminar</button>
     </td>
-    </tr>
-  </tbody>
+  </ng-container>
+
+  <!-- Row definition -->
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

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

@@ -1,6 +1,7 @@
 // users.component.ts
 import { Component, OnInit } from '@angular/core';
 import { UserService } from './users.service';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'app-users',
@@ -8,13 +9,46 @@ import { UserService } from './users.service';
   styleUrls: ['./users.component.css']
 })
 export class UsersComponent implements OnInit {
-  users: any[] = [];
+  dataSource = new MatTableDataSource<any>();
+  columns = [
+    {
+      columnDef: 'id',
+      header: 'ID',
+      cell: (user: any) => `${user.id}`
+    },
+    {
+      columnDef: 'username',
+      header: 'Nombre de Usuario',
+      cell: (user: any) => `${user.username}`
+    },
+    {
+      columnDef: 'allowedOrganizationalUnits',
+      header: 'Unidades Organizacionales Permitidas',
+      cell: (user: any) => `${user.allowedOrganizationalUnits.join(', ')}`
+    },
+    {
+      columnDef: 'roles',
+      header: 'Roles',
+      cell: (user: any) => `${user.roles.join(', ')}`
+    }
+  ];
+  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
 
   constructor(private userService: UserService) {}
 
   ngOnInit() {
     this.userService.getUsers().subscribe(response => {
-      this.users = response['hydra:member'];
+      this.dataSource.data = response['hydra:member'];
     });
   }
+
+  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);
+  }
 }