Pagina usuarios modales delete

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

@@ -0,0 +1,10 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px; /* Ajusta este valor según necesites */
+  }
+  

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

@@ -1,10 +1,29 @@
 <h1 mat-dialog-title>Añadir Usuario</h1>
 <div mat-dialog-content>
-  <form [formGroup]="userForm">
+  <form [formGroup]="userForm" class="user-form">
-    <mat-form-field>
+    <mat-form-field class="form-field">
       <mat-label>Nombre de usuario</mat-label>
       <input matInput formControlName="username" required>
     </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Contraseña</mat-label>
+      <input matInput formControlName="password" required>
+    </mat-form-field>
+    <p>Roles:</p>
+    <div class="checkbox-group" required>
+      <label>
+        <input type="checkbox" formControlName="ROLE_SUPER_ADMIN" > Super Administrador
+      </label>
+      <label>
+        <input type="checkbox" formControlName="ROLE_ORGANIZATIONAL_UNIT_ADMIN"> Administrador de Aula
+      </label>
+      <label>
+        <input type="checkbox" formControlName="ROLE_ORGANIZATIONAL_UNIT_OPERATOR"> Operador de Aula
+      </label>
+      <label>
+        <input type="checkbox" formControlName="ROLE_USER"> Usuario
+      </label>
+    </div>
   </form>
 </div>
 <div mat-dialog-actions>

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

@@ -1,32 +1,63 @@
-import { Component, Inject } from '@angular/core';
+import { Component, EventEmitter, Inject, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Component({
   selector: 'app-add-user-modal',
   templateUrl: './add-user-modal.component.html',
-  styleUrl: './add-user-modal.component.css'
+  styleUrls: ['./add-user-modal.component.css']
 })
 export class AddUserModalComponent {
+  @Output() userAdded = new EventEmitter<void>();
   userForm: FormGroup;
 
   constructor(
     public dialogRef: MatDialogRef<AddUserModalComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
-    private fb: FormBuilder
+    private fb: FormBuilder,
+    private http: HttpClient
   ) {
     this.userForm = this.fb.group({
-      username: ['', Validators.required]
+      username: ['', Validators.required],
+      password: ['', Validators.required],
+      ROLE_SUPER_ADMIN: [false],
+      ROLE_ORGANIZATIONAL_UNIT_ADMIN: [false],
+      ROLE_ORGANIZATIONAL_UNIT_OPERATOR: [false],
+      ROLE_USER: [false]
     });
   }
-
+  
   onNoClick(): void {
     this.dialogRef.close();
   }
 
   onSubmit(): void {
     if (this.userForm.valid) {
-      this.dialogRef.close(this.userForm.value);
+      const apiUrl = 'http://127.0.0.1:8080/api/users';
+      const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3MTY5OTI4OTgsImV4cCI6MTcxNjk5NjQ5OCwicm9sZXMiOlsiUk9MRV9VU0VSIl0sInVzZXJuYW1lIjoib2dhZG1pbiJ9.dtEsBpYvEbkLLHTfMVvCdK5IMTUJWU7JoE8GIibeA3ltAdS1n-YgOeCplxRJMl5CmktNHeS7mE40u-RGb9ly7zifctK8N7z0uv8Q70nFsq3DBqUDVONusXzdSKABAq7_WIhBPfQBJpG0uzlPMEL9sfch9lvNWOX0k7dE2aLa54ucBrGaR-9p1HEFlQIzlWXkqjmzTDq6PoaRAATUZQXnh95rf8w57O07NylC1SXUfaWGJwdBhTNCfEuSsnhE5fOrBiga2oAOqHM7JgMb4lKDx4TNqrY1YZi0pSvJeD6r7j-ELeSVHgaPzdJeQTFUt0T87ca-GFqjBfUKu-z76c5bBg';
+      const headers = new HttpHeaders({
+        'Content-Type': 'application/ld+json',
+        'Authorization': `Bearer ${token}`
+      });
+      
+      const userPayload = {
+        username: this.userForm.value.username,
+        password: this.userForm.value.password,
+        enabled: true,
+      };
+
+      this.http.post(apiUrl, userPayload, { headers: headers }).subscribe(
+        response => {
+          console.log('User added successfully:', response);
+          this.userAdded.emit();
+          this.dialogRef.close(this.userForm.value);
+        },
+        error => {
+          console.error('Error adding user:', error);
+          // Agregar alguna lógica para manejar el error en la interfaz de usuario
+        }
+      );
     }
   }
 }

ogWebconsole/src/app/components/pages/admin/users/users/delete-user-modal/delete-user-modal.component.html

@@ -4,5 +4,5 @@
 </div>
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Cancelar</button>
-  <button mat-button >Eliminar</button>
+  <button mat-button (click)="onYesClick()">Eliminar</button>
 </div>

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

@@ -1,4 +1,5 @@
-import { Component, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, EventEmitter, Inject, Output } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
@@ -7,15 +8,34 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
   styleUrl: './delete-user-modal.component.css'
 })
 export class DeleteUserModalComponent {
-
+  @Output() userDeleted = new EventEmitter<void>();
   constructor(
     public dialogRef: MatDialogRef<DeleteUserModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private http: HttpClient
   ) {}
 
   onNoClick(): void {
     this.dialogRef.close();
   }
 
-  // INSERTAR EL DELETE Y EN EL CLICK LLAMAR A ESTE METODO
+  onYesClick(): void {
+    const apiUrl = `http://127.0.0.1:8080/api/users/${this.data.uuid}`;
+    const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3MTY5OTI4OTgsImV4cCI6MTcxNjk5NjQ5OCwicm9sZXMiOlsiUk9MRV9VU0VSIl0sInVzZXJuYW1lIjoib2dhZG1pbiJ9.dtEsBpYvEbkLLHTfMVvCdK5IMTUJWU7JoE8GIibeA3ltAdS1n-YgOeCplxRJMl5CmktNHeS7mE40u-RGb9ly7zifctK8N7z0uv8Q70nFsq3DBqUDVONusXzdSKABAq7_WIhBPfQBJpG0uzlPMEL9sfch9lvNWOX0k7dE2aLa54ucBrGaR-9p1HEFlQIzlWXkqjmzTDq6PoaRAATUZQXnh95rf8w57O07NylC1SXUfaWGJwdBhTNCfEuSsnhE5fOrBiga2oAOqHM7JgMb4lKDx4TNqrY1YZi0pSvJeD6r7j-ELeSVHgaPzdJeQTFUt0T87ca-GFqjBfUKu-z76c5bBg';
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/ld+json'
+    });
+
+    this.http.delete(apiUrl, { headers: headers }).subscribe(
+      () => {
+        console.log('User deleted successfully');
+        this.userDeleted.emit();
+        this.dialogRef.close(true);
+      },
+      (      error: any) => {
+        console.error('Error deleting user:', error);
+        // Agregar alguna lógica para manejar el error en la interfaz de usuario
+      }
+    );
+  }
 }

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

@@ -1,4 +1,3 @@
-// users.component.ts
 import { Component, OnInit } from '@angular/core';
 import { UserService } from './users.service';
 import { MatTableDataSource } from '@angular/material/table';
@@ -40,6 +39,10 @@ export class UsersComponent implements OnInit {
   constructor(private userService: UserService, public dialog: MatDialog) {}
 
   ngOnInit() {
+    this.loadUsers();
+  }
+
+  loadUsers() {
     this.userService.getUsers().subscribe(response => {
       this.dataSource.data = response['hydra:member'];
     });
@@ -48,11 +51,10 @@ export class UsersComponent implements OnInit {
   addUser() {
     const dialogRef = this.dialog.open(AddUserModalComponent);
 
-    dialogRef.afterClosed().subscribe(result => {
+    dialogRef.componentInstance.userAdded.subscribe(() => {
-      if (result) {
+      this.loadUsers();
-        // Handle the result here (e.g., refresh the list of users)
-      }
     });
+
   }
 
   editUser(user: any) {
@@ -67,7 +69,7 @@ export class UsersComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
-        // Handle the result here (e.g., refresh the list of users)
+        this.loadUsers();
       }
     });
   }