Pagina usuarios modales añadir
parent
f8d57c4788
commit
9449162ccf
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue