Pagina usuarios modales usuarios

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

@@ -0,0 +1,54 @@
+<h1 mat-dialog-title>Añadir Usuario</h1>
+<div mat-dialog-content>
+  <form [formGroup]="userForm">
+    <mat-form-field>
+      <mat-label>Nombre de usuario</mat-label>
+      <input matInput formControlName="username" required>
+    </mat-form-field>
+    
+    <mat-form-field>
+      <mat-label>Roles</mat-label>
+      <input matInput formControlName="roles" placeholder="Rol1, Rol2, ...">
+    </mat-form-field>
+    
+    <div formArrayName="allowedOrganizationalUnits">
+      <div *ngFor="let unit of userForm.get('allowedOrganizationalUnits').controls; let i = index">
+        <mat-form-field>
+          <mat-label>Unidad Organizacional {{i + 1}}</mat-label>
+          <input matInput [formControlName]="i" required>
+        </mat-form-field>
+      </div>
+      <button mat-button (click)="addOrganizationalUnit()">Añadir Unidad Organizacional</button>
+    </div>
+
+    <mat-form-field>
+      <mat-label>Contraseña</mat-label>
+      <input matInput formControlName="password" type="password" required>
+    </mat-form-field>
+    
+    <mat-slide-toggle formControlName="enabled">Habilitado</mat-slide-toggle>
+
+    <div formArrayName="userGroups">
+      <div *ngFor="let group of userForm.get('userGroups').controls; let i = index">
+        <div [formGroupName]="i">
+          <mat-form-field>
+            <mat-label>Grupo {{i + 1}}</mat-label>
+            <input matInput formControlName="name" required>
+          </mat-form-field>
+          
+          <mat-form-field>
+            <mat-label>Permisos</mat-label>
+            <input matInput formControlName="permissions" placeholder="Permiso1, Permiso2, ..." required>
+          </mat-form-field>
+          
+          <mat-slide-toggle formControlName="enabled">Habilitado</mat-slide-toggle>
+        </div>
+      </div>
+      <button mat-button (click)="addUserGroup()">Añadir Grupo</button>
+    </div>
+  </form>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+  <button mat-button [disabled]="!userForm.valid" >Añadir</button>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddUserModalComponent } from './add-user-modal.component';
+
+describe('AddUserModalComponent', () => {
+  let component: AddUserModalComponent;
+  let fixture: ComponentFixture<AddUserModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AddUserModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AddUserModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,59 @@
+import { Component, Inject } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-add-user-modal',
+  templateUrl: './add-user-modal.component.html',
+  styleUrl: './add-user-modal.component.css'
+})
+export class AddUserModalComponent {
+  userForm: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<AddUserModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private fb: FormBuilder
+  ) {
+    this.userForm = this.fb.group({
+      username: ['', Validators.required],
+      roles: ['', Validators.required],
+      allowedOrganizationalUnits: this.fb.array([this.createOrganizationalUnit()]),
+      password: ['', Validators.required],
+      enabled: [true],
+      userGroups: this.fb.array([this.createUserGroup()])
+    });
+  }
+
+  createOrganizationalUnit(): FormGroup {
+    return this.fb.group({
+      name: ['', Validators.required]
+    });
+  }
+
+  addOrganizationalUnit(): void {
+    (this.userForm.get('allowedOrganizationalUnits') as FormArray).push(this.createOrganizationalUnit());
+  }
+
+  createUserGroup(): FormGroup {
+    return this.fb.group({
+      name: ['', Validators.required],
+      permissions: ['', Validators.required],
+      enabled: [true]
+    });
+  }
+
+  addUserGroup(): void {
+    (this.userForm.get('userGroups') as FormArray).push(this.createUserGroup());
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onSubmit(): void {
+    if (this.userForm.valid) {
+      this.dialogRef.close(this.userForm.value);
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Eliminar Usuario</h1>
+<div mat-dialog-content>
+  <p>¿Estás seguro que deseas eliminar a {{ data.username }}?</p>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+  <button mat-button >Eliminar</button>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteUserModalComponent } from './delete-user-modal.component';
+
+describe('DeleteUserModalComponent', () => {
+  let component: DeleteUserModalComponent;
+  let fixture: ComponentFixture<DeleteUserModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeleteUserModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DeleteUserModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-delete-user-modal',
+  templateUrl: './delete-user-modal.component.html',
+  styleUrl: './delete-user-modal.component.css'
+})
+export class DeleteUserModalComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<DeleteUserModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  // INSERTAR EL DELETE Y EN EL CLICK LLAMAR A ESTE METODO
+}