From 4ba44781cd7ce72168304ff6625d585d818b4146 Mon Sep 17 00:00:00 2001 From: apuente Date: Thu, 30 May 2024 18:38:13 +0200 Subject: [PATCH] Pagina roles --- ogWebconsole/src/app/app.module.ts | 8 ++- .../layout/header/header.component.html | 2 +- .../admin/roles/roles/roles.component.css | 16 +++++ .../admin/roles/roles/roles.component.html | 30 +++++++-- .../admin/roles/roles/roles.component.ts | 53 ++++++++++++++- .../pages/admin/roles/roles/roles.service.ts | 23 +++++++ .../add-user-modal.component.html | 24 +++---- .../add-user-modal.component.ts | 40 ++++++----- .../delete-user-modal.component.ts | 3 +- .../edit-user-modal.component.css | 10 +++ .../edit-user-modal.component.html | 26 ++++++++ .../edit-user-modal.component.spec.ts | 23 +++++++ .../edit-user-modal.component.ts | 66 +++++++++++++++++++ .../admin/users/users/users.component.ts | 8 ++- .../pages/admin/users/users/users.service.ts | 38 +++++++++-- 15 files changed, 319 insertions(+), 51 deletions(-) create mode 100644 ogWebconsole/src/app/components/pages/admin/roles/roles/roles.service.ts create mode 100644 ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.css create mode 100644 ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html create mode 100644 ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.spec.ts create mode 100644 ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 8b9712b..71e92d9 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -28,6 +28,8 @@ 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'; +import {MatSelectModule} from '@angular/material/select'; +import { EditUserModalComponent } from './components/pages/admin/users/users/edit-user-modal/edit-user-modal.component'; @NgModule({ declarations: [ @@ -42,7 +44,8 @@ import { AddUserModalComponent } from './components/pages/admin/users/users/add- UsersComponent, RolesComponent, DeleteUserModalComponent, - AddUserModalComponent + AddUserModalComponent, + EditUserModalComponent ], bootstrap: [AppComponent], imports: [BrowserModule, @@ -60,7 +63,8 @@ import { AddUserModalComponent } from './components/pages/admin/users/users/add- MatInputModule, MatListModule, MatTableModule, - MatDialogModule], + MatDialogModule, + MatSelectModule], providers: [ { provide: HTTP_INTERCEPTORS, diff --git a/ogWebconsole/src/app/components/layout/header/header.component.html b/ogWebconsole/src/app/components/layout/header/header.component.html index 7937a60..e80fdc8 100644 --- a/ogWebconsole/src/app/components/layout/header/header.component.html +++ b/ogWebconsole/src/app/components/layout/header/header.component.html @@ -14,7 +14,7 @@ - + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.css b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.css index e69de29..ef18a39 100644 --- a/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.css +++ b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.css @@ -0,0 +1,16 @@ +table { + width: 100%; + margin-top: 50px; +} + +.header-container { + margin-top: 16px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +.header-container h1 { + margin: 0; +} diff --git a/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.html b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.html index 20977d6..0aac620 100644 --- a/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.html +++ b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.html @@ -1,6 +1,24 @@ -

Lista de Roles

- +
+

Gestión de roles

+ +
+ + + + + + + + + + + + + + + + +
{{ column.header }} {{ column.cell(role) }} Acciones + + +
diff --git a/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.ts b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.ts index e708342..dfce6cc 100644 --- a/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.ts +++ b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.ts @@ -1,10 +1,57 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { RoleService } from './roles.service'; +import { MatTableDataSource } from '@angular/material/table'; +import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-roles', templateUrl: './roles.component.html', - styleUrl: './roles.component.css' + styleUrls: ['./roles.component.css'] }) -export class RolesComponent { +export class RolesComponent implements OnInit { + dataSource = new MatTableDataSource(); + columns = [ + { + columnDef: 'id', + header: 'ID', + cell: (role: any) => `${role.id}` + }, + { + columnDef: 'name', + header: 'Nombre', + cell: (role: any) => `${role.name}` + }, + { + columnDef: 'permissions', + header: 'Permisos', + cell: (role: any) => `${role.permissions.join(', ')}` + } + ]; + displayedColumns = [...this.columns.map(column => column.columnDef)]; + constructor(private roleService: RoleService, public dialog: MatDialog) {} + + ngOnInit() { + this.loadRoles(); + } + + loadRoles() { + this.roleService.getRoles().subscribe(response => { + console.log(response); + this.dataSource.data = response['hydra:member']; + }); + } + + + /* deleteRole(role: any) { + const dialogRef = this.dialog.open(DeleteRoleModalComponent, { + data: role + }); + + dialogRef.afterClosed().subscribe(result => { + if (result) { + this.loadRoles(); + } + }); + } */ } diff --git a/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.service.ts b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.service.ts new file mode 100644 index 0000000..c9d9ee6 --- /dev/null +++ b/ogWebconsole/src/app/components/pages/admin/roles/roles/roles.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +interface Role { + '@id': string; + name: string; + permissions: string[]; +} + +@Injectable({ + providedIn: 'root' +}) +export class RoleService { + private apiUrl = 'http://127.0.0.1:8080'; + + constructor(private http: HttpClient) {} + + getRoles(): Observable<{ 'hydra:member': Role[] }> { + return this.http.get<{ 'hydra:member': Role[] }>(`${this.apiUrl}/user-groups?page=1&itemsPerPage=30`); + } + +} diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.html b/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.html index 4e11caa..7506032 100644 --- a/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.html +++ b/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.html @@ -9,21 +9,15 @@ Contraseña -

Roles:

-
- - - - -
+ + Rol + + + {{ group.name }} + + + +
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.ts index 62d8bc5..935e722 100644 --- a/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.ts +++ b/ogWebconsole/src/app/components/pages/admin/users/users/add-user-modal/add-user-modal.component.ts @@ -1,54 +1,60 @@ -import { Component, EventEmitter, Inject, Output } from '@angular/core'; +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 { HttpClient, HttpHeaders } from '@angular/common/http'; +import { UserService } from '../users.service'; + +interface UserGroup { + '@id': string; + name: string; + role: string[]; +} @Component({ selector: 'app-add-user-modal', templateUrl: './add-user-modal.component.html', styleUrls: ['./add-user-modal.component.css'] }) -export class AddUserModalComponent { +export class AddUserModalComponent implements OnInit { @Output() userAdded = new EventEmitter(); userForm: FormGroup; + userGroups: UserGroup[] = []; constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder, - private http: HttpClient + private userService: UserService // Inyecta el servicio ) { this.userForm = this.fb.group({ username: ['', Validators.required], password: ['', Validators.required], - ROLE_SUPER_ADMIN: [false], - ROLE_ORGANIZATIONAL_UNIT_ADMIN: [false], - ROLE_ORGANIZATIONAL_UNIT_OPERATOR: [false], - ROLE_USER: [false] + role: ['', Validators.required], // Control para el permiso seleccionado }); } - + + ngOnInit(): void { + this.userService.getUserGroups().subscribe((data) => { + this.userGroups = data['hydra:member']; + }); + } + onNoClick(): void { this.dialogRef.close(); } onSubmit(): void { if (this.userForm.valid) { - 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, + allowedOrganizationalUnits: [], password: this.userForm.value.password, enabled: true, + userGroups: [this.userForm.value.role ] }; - this.http.post(apiUrl, userPayload, { headers: headers }).subscribe( + this.userService.addUser(userPayload).subscribe( response => { + console.log('User playload:', userPayload); console.log('User added successfully:', response); this.userAdded.emit(); this.dialogRef.close(this.userForm.value); diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/delete-user-modal/delete-user-modal.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/delete-user-modal/delete-user-modal.component.ts index 578086d..966c89e 100644 --- a/ogWebconsole/src/app/components/pages/admin/users/users/delete-user-modal/delete-user-modal.component.ts +++ b/ogWebconsole/src/app/components/pages/admin/users/users/delete-user-modal/delete-user-modal.component.ts @@ -20,8 +20,7 @@ export class DeleteUserModalComponent { } 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 apiUrl = `http://127.0.0.1:8080/users/${this.data.uuid}`; const headers = new HttpHeaders({ 'Content-Type': 'application/ld+json' }); diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.css b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.css new file mode 100644 index 0000000..6916e95 --- /dev/null +++ b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-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 */ + } + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html new file mode 100644 index 0000000..83ce89d --- /dev/null +++ b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html @@ -0,0 +1,26 @@ +

Editar Usuario

+
+
+ + Nombre de usuario + + + + Contraseña + + + + Rol + + + {{ group.name }} + + + + +
+
+
+ + +
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.spec.ts b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.spec.ts new file mode 100644 index 0000000..46dca8f --- /dev/null +++ b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditUserModalComponent } from './edit-user-modal.component'; + +describe('EditUserModalComponent', () => { + let component: EditUserModalComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EditUserModalComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EditUserModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts new file mode 100644 index 0000000..0501aed --- /dev/null +++ b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts @@ -0,0 +1,66 @@ +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 { UserService } from '../users.service'; + +interface UserGroup { + '@id': string; + name: string; + role: string[]; +} + +@Component({ + selector: 'app-edit-user-modal', + templateUrl: './edit-user-modal.component.html', + styleUrls: ['./edit-user-modal.component.css'] +}) +export class EditUserModalComponent implements OnInit {@Output() userEdited = new EventEmitter(); + userForm: FormGroup; + userGroups: UserGroup[] = []; + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any, + private fb: FormBuilder, + private userService: UserService // Inyecta el servicio + ) { + this.userForm = this.fb.group({ + username: [this.data.user.username], + password: [''], + role: this.data.user.allowedOrganizationalUnits, // Control para el permiso seleccionado + }); + } + + ngOnInit(): void { + this.userService.getUserGroups().subscribe((data) => { + this.userGroups = data['hydra:member']; + }); + } + + onNoClick(): void { + this.dialogRef.close(); + } + + onSubmit(): void { + + const userPayload = { + username: this.userForm.value.username, + allowedOrganizationalUnits: [], + password: this.userForm.value.password, + enabled: true, + userGroups: [this.userForm.value.role ] + }; + + this.userService.updateUser(this.data.user.uuid, userPayload).subscribe( + response => { + console.log('User added successfully:', response); + this.userEdited.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 + } + ); + } +} diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts index 4e9dc83..3aa9e19 100644 --- a/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts +++ b/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts @@ -4,6 +4,7 @@ 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'; +import { EditUserModalComponent } from './edit-user-modal/edit-user-modal.component'; @Component({ selector: 'app-users', @@ -59,7 +60,12 @@ export class UsersComponent implements OnInit { editUser(user: any) { // Implementar la lógica de edición - console.log('Editar usuario:', user); + const dialogRef = this.dialog.open(EditUserModalComponent, { + data: { user: user } + }); + dialogRef.componentInstance.userEdited.subscribe(() => { + this.loadUsers(); + }); } deleteUser(user: any) { diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts b/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts index af4a472..a1aa0ee 100644 --- a/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts +++ b/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts @@ -2,17 +2,47 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; +interface UserPayload { + username: string; + password: string; + enabled: boolean; + userGroups: string[]; + allowedOrganizationalUnits: any[]; +} + +interface UserGroup { + '@id': string; + name: string; + role: string[]; +} + @Injectable({ providedIn: 'root' }) export class UserService { + private apiUrl = 'http://127.0.0.1:8080'; - private userApiUrl = 'http://127.0.0.1:8080/api/users'; + constructor(private http: HttpClient) {} - constructor(private http: HttpClient) { } + addUser(userPayload: UserPayload): Observable { + const headers = new HttpHeaders({ + 'Content-Type': 'application/ld+json', + }); + return this.http.post(`${this.apiUrl}/users`, userPayload, { headers }); + } + + updateUser(userId: number, userPayload: UserPayload): Observable { + const headers = new HttpHeaders({ + 'Content-Type': 'application/ld+json', + }); + return this.http.put(`${this.apiUrl}/users/${userId}`, userPayload, { headers }); + } + + getUserGroups(): Observable<{ 'hydra:member': UserGroup[] }> { + return this.http.get<{ 'hydra:member': UserGroup[] }>(`${this.apiUrl}/user-groups`); + } getUsers(): Observable { - return this.http.get(this.userApiUrl+'?page=1&itemsPerPage=30'); + return this.http.get(`${this.apiUrl}/users?page=1&itemsPerPage=30`); } } -