Pagina usuarios modales añadir

pull/3/head
Alvaro Puente Mella 2024-05-29 15:16:02 +02:00
parent f8d57c4788
commit 9449162ccf
3 changed files with 5 additions and 72 deletions

View File

@ -7,7 +7,7 @@ import { MainLayoutComponent } from './components/layout/main-layout/main-layout
import { HeaderComponent } from './components/layout/header/header.component';
import { SidebarComponent } from './components/layout/sidebar/sidebar.component';
import { LoginComponent } from './components/login/login.component';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { CustomInterceptor } from './services/custom.interceptor';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
@ -48,6 +48,7 @@ import { AddUserModalComponent } from './components/pages/admin/users/users/add-
imports: [BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,

View File

@ -5,50 +5,9 @@
<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>
<button mat-button [disabled]="!userForm.valid" (click)="onSubmit()">Añadir</button>
</div>

View File

@ -1,5 +1,5 @@
import { Component, Inject } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
@ -16,37 +16,10 @@ export class AddUserModalComponent {
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()])
username: ['', Validators.required]
});
}
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();
}