Pagina usuarios modales delete
parent
9449162ccf
commit
fdf8659eea
|
|
@ -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 */
|
||||
}
|
||||
|
||||
|
|
@ -1,10 +1,29 @@
|
|||
<h1 mat-dialog-title>Añadir Usuario</h1>
|
||||
<div mat-dialog-content>
|
||||
<form [formGroup]="userForm">
|
||||
<mat-form-field>
|
||||
<form [formGroup]="userForm" class="user-form">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,30 @@
|
|||
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]
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -26,7 +34,30 @@ export class AddUserModalComponent {
|
|||
|
||||
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,
|
||||
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
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
if (result) {
|
||||
// Handle the result here (e.g., refresh the list of users)
|
||||
}
|
||||
dialogRef.componentInstance.userAdded.subscribe(() => {
|
||||
this.loadUsers();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue