Mejoras en el agregar usuario

frontend/src/app/components/agregar-usuario/agregar-usuario.component.html

@@ -5,7 +5,7 @@
   </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let r of usuarios.data" data-bs-toggle="modal" data-bs-target="#ModificarUsuarios" (click)="modificarModelUsuario(r.id,r.nombre)">
+  <tr *ngFor="let r of usuarios" data-bs-toggle="modal" data-bs-target="#ModificarUsuarios" (click)="modificarModelUsuario(r.id)">
     <td>{{r.id}}</td>
     <td>{{r.nombre}}</td>
     <td> <span *ngFor="let f of r.roles" class="badge  badge-success spam_magin">{{f}}</span>   </td>
@@ -17,4 +17,4 @@
   Agregar
 </button>
 
-<app-modal-usuario [idModalUsu]="idSelect" [NombreModalusu]="nombreSelect"></app-modal-usuario>
+<app-modal-usuario [user]="selected"></app-modal-usuario>

frontend/src/app/components/agregar-usuario/agregar-usuario.component.ts

@@ -10,9 +10,7 @@ import {RestaurantesService} from "../../restaurantes.service";
 export class AgregarUsuarioComponent implements OnInit {
 
   usuarios: any;
-  idSelect:any;
-  nombreSelect:any;
-
+  selected: any;
 
   agreU={
     nombre:null,
@@ -22,6 +20,7 @@ export class AgregarUsuarioComponent implements OnInit {
     roles:['admin'],
     restaurant:null
   }
+
   modi={
     nombre: null,
     roles:['productor']
@@ -32,29 +31,18 @@ export class AgregarUsuarioComponent implements OnInit {
   ngOnInit(): void {
     this.recuperarUsuarios();
   }
+
   recuperarUsuarios(){
-    this.restaurantServ.mostrarUsuarios().subscribe(result => this.usuarios = result)
-  }
-  AgregarUsu(){
-    this.restaurantServ.agregarUsu(this.agreU).subscribe(this.recuperarUsuarios)
+    this.restaurantServ.mostrarUsuarios().subscribe((result :any) => this.usuarios = result.data)
   }
+
   eliminarUsu(id:any){
     if(confirm("Esta seguro de eliminar este registro?")){
       this.restaurantServ.eliminarUsu(id).subscribe();
-
     }
-
-  }
-  modificarUsu(id:any){
-    this.restaurantServ.moficiarUsu(id,this.modi).subscribe();
-  }
-  modificarModelUsuario(id:any,nombre:any){
-    this.idSelect=id;
-    this.nombreSelect=nombre;
-
-
-
-
   }
 
+  modificarModelUsuario(id:any){
+    this.selected = this.usuarios.find((user :any) => user.id === id);
+  }
 }

frontend/src/app/components/modal-usuario/modal-usuario.component.html

@@ -8,38 +8,40 @@
       <div class="modal-body">
           <div class="form-group">
             <label for="Nombre">nombre</label>
-            <input type="text" class="form-control" id="Nombre" [(ngModel)]="agreU.nombre"  placeholder="nombre">
+            <input type="text" class="form-control" id="Nombre" [(ngModel)]="user_add.nombre"  placeholder="Nombre">
+          </div>
+          <div class="form-group">
+            <label for="NombredeUsuarios">Nombre de Usuario</label>
+            <input type="text" class="form-control" id="NombredeUsuarios" [(ngModel)]="user_add.username" placeholder="Nombre de Usuario" >
           </div>
           <div class="form-group">
             <label for="email">email</label>
-            <input type="email" class="form-control" id="email" aria-describedby="emailHelp"  [(ngModel)]="agreU.email" placeholder="email">
+            <input type="email" class="form-control" id="email" [(ngModel)]="user_add.email" placeholder="Email">
           </div>
           <div class="form-group">
-            <label for="NombredeUsuarios">Nombre de Usuarios</label>
-            <input type="text" class="form-control" id="NombredeUsuarios" [(ngModel)]="agreU.username" placeholder="Nombre de Usuarios" >
+            <label for="contraseña">Contraseña</label>
+            <input type="password" class="form-control" id="contraseña" [(ngModel)]="user_add.password" placeholder="Contraseña">
           </div>
           <div class="form-group">
-            <label for="contraseña">contraseña</label>
-            <input type="password" class="form-control" id="contraseña" [(ngModel)]="agreU.password" placeholder="contraseña">
+            <label for="rolesM">Roles</label>
+            <select class="form-control" multiple [(ngModel)]="user_add.roles">
+              <option *ngFor="let role of possible_roles" value="{{role.id}}">{{role.name}}</option>
+            </select>
           </div>
           <div class="form-group">
-            <label for="roles">roles</label>
-            <input type="text" class="form-control" id="roles" [(ngModel)]="agreU.roles" placeholder="roles">
-          </div>
-          <div class="form-group">
-            <label for="restaurantes">restaurantes</label>
-            <input type="text" class="form-control" id="restaurantes" [(ngModel)]="agreU.restaurant" placeholder="restaurantes">
+            <label for="restaurantes">Restaurante</label>
+            <input type="text" class="form-control" id="restaurantes" [(ngModel)]="user_add.restaurant" placeholder="Restaurante">
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="AgregarUsu()">guardar</button>
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="AgregarUsu()">Guardar</button>
           </div>
       </div>
     </div>
   </div>
 </div>
 
-<div class="modal fade" id="ModificarUsuarios" tabindex="-1" aria-labelledby="ModificarModalLabel" aria-hidden="true">
+<div class="modal fade" *ngIf="user" id="ModificarUsuarios" tabindex="-1" aria-labelledby="ModificarModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -48,18 +50,20 @@
       </div>
       <div class="modal-body">
         <div class="form-group">
-          <label for="NombreM">nombre</label>
-          <input type="text" class="form-control" id="NombreM" [(ngModel)]="modi.nombre"  placeholder="{{NombreModalusu}}">
+          <label for="NombreM">Nombre</label>
+          <input type="text" class="form-control" id="NombreM" [(ngModel)]="user.nombre">
         </div>
         <div class="form-group">
-          <label for="rolesM">roles</label>
-          <input type="text" class="form-control" id="rolesM" [(ngModel)]="modi.roles" placeholder="roles">
+          <label for="rolesM">Roles</label>
+          <select class="form-control" multiple [(ngModel)]="user.roles">
+            <option *ngFor="let role of possible_roles" value="{{role.id}}">{{role.name}}</option>
+          </select>
         </div>
 
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-          <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="modificarUsu(idModalUsu)">guardar</button>
-          <button type="submit" class="btn btn-danger" data-bs-dismiss="modal" (click)="eliminarUsu(idModalUsu)">eliminar</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+          <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="modificarUsu(user.id)">Guardar</button>
+          <button type="submit" class="btn btn-danger" data-bs-dismiss="modal" (click)="eliminarUsu(user.id)">Eliminar</button>
         </div>
       </div>
     </div>

frontend/src/app/components/modal-usuario/modal-usuario.component.ts

@@ -8,26 +8,28 @@ import {RestaurantesService} from "../../restaurantes.service";
 })
 export class ModalUsuarioComponent implements OnInit {
 
+  @Input() user: any;
+  user_add: any = null;
   usuarios: any;
 
-  @Input()idModalUsu:any;
-  @Input()NombreModalusu:any;
+  possible_roles = [
+    {id: 'global_admin', name: 'Administrador Global'},
+    {id: 'admin', name: 'Administrador'},
+    {id: 'recaudador', name: 'Recaudador'},
+    {id: 'productor', name: 'Productor'},
+    {id: 'mesero', name: 'Mesero'},
+  ];
 
-
-  agreU={
-    nombre:null,
-    email:null,
-    username:null,
-    password:null,
-    roles:['admin'],
-    restaurant:null
+  constructor(private restaurantServ: RestaurantesService) { 
+    this.user_add = {
+      nombre: null,
+      username: null,
+      email: null,
+      password: null,
+      roles: [],
+      restaurant: null,
+    }
   }
-  modi={
-    nombre: null,
-    roles:['productor']
-  }
-
-  constructor(private  restaurantServ : RestaurantesService) { }
 
   ngOnInit(): void {
     this.recuperarUsuarios();
@@ -36,18 +38,19 @@ export class ModalUsuarioComponent implements OnInit {
   recuperarUsuarios(){
     this.restaurantServ.mostrarUsuarios().subscribe(result => this.usuarios = result)
   }
+
   AgregarUsu(){
-    this.restaurantServ.agregarUsu(this.agreU).subscribe(this.recuperarUsuarios)
+    this.restaurantServ.agregarUsu(this.user_add).subscribe(this.recuperarUsuarios)
   }
+
   eliminarUsu(id:any){
     if(confirm("Esta seguro de eliminar este registro?")){
       this.restaurantServ.eliminarUsu(id).subscribe();
-
     }
-
   }
+
   modificarUsu(id:any){
-    this.restaurantServ.moficiarUsu(id,this.modi).subscribe();
+    this.restaurantServ.moficiarUsu(this.user).subscribe();
   }
 
 

frontend/src/app/restaurantes.service.ts

@@ -49,11 +49,13 @@ export class RestaurantesService {
   eliminarUsu(codigo:any){
     return this.http.delete(`${this.url}/users/${codigo}`);
   }
-  moficiarUsu(codigo:any,Usuariomodificado:any){
+
+  moficiarUsu(user :any){
     const headers: HttpHeaders = new HttpHeaders({
       'Content-Type': 'application/json'
     });
-    return this.http.put(`${this.url}/users/${codigo}`, JSON.stringify(Usuariomodificado), { headers: headers });
+
+    return this.http.put(`${this.url}/users/${user.id}`, JSON.stringify(user), { headers: headers });
   }
 
   //CRUD DE SECTORES