Normalisation des formulaires d'ajout et de modification des employées et des groupes.
This commit is contained in:
parent
3eb9b12899
commit
1743ccf0e8
|
@ -1,56 +1,10 @@
|
|||
<mat-card class="x-centered mt-5">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Création d'un utilisateur</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form">
|
||||
<mat-form-field>
|
||||
<mat-label>Numéro d'employé</mat-label>
|
||||
<input matInput type="text" [formControl]="idControl"/>
|
||||
<mat-icon svgIcon="pound" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="idControl.invalid">
|
||||
<span *ngIf="idControl.errors.required">Un numéro d'employé est requis</span>
|
||||
<span *ngIf="idControl.errors.pattern">Le numéro d'employé doit être un nombre</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Prénom</mat-label>
|
||||
<input matInput type="text" [formControl]="firstNameControl"/>
|
||||
<mat-icon svgIcon="account" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="firstNameControl.invalid">
|
||||
<span *ngIf="firstNameControl.errors.required">Un prénom est requis</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Nom</mat-label>
|
||||
<input matInput type="text" [formControl]="lastNameControl"/>
|
||||
<mat-icon svgIcon="account" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="lastNameControl.invalid">
|
||||
<span *ngIf="lastNameControl.errors.required">Un nom est requis</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Mot de passe</mat-label>
|
||||
<input matInput type="password" [formControl]="passwordControl"/>
|
||||
<mat-icon svgIcon="lock" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="passwordControl.invalid">
|
||||
<span *ngIf="passwordControl.errors.required">Un mot de passe est requis</span>
|
||||
<span *ngIf="passwordControl.errors.minlength">Le mot de passe doit comprendre au moins 8 caractères</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="group$ | async as groups">
|
||||
<mat-label>Groupe</mat-label>
|
||||
<mat-select [formControl]="groupControl">
|
||||
<mat-option [value]="null">Aucun</mat-option>
|
||||
<mat-option *ngFor="let group of groups" [value]="group.id">{{group.name}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon svgIcon="account-multiple" matSuffix></mat-icon>
|
||||
</mat-form-field>
|
||||
<cre-permissions-field #permissionsField></cre-permissions-field>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" routerLink="/employee/list">Retour</button>
|
||||
<button mat-raised-button color="accent" (click)="submit()" [disabled]="form.invalid">Créer</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<cre-entity-add
|
||||
title="Création d'un utilisateur"
|
||||
backButtonLink="/employee/list"
|
||||
[formFields]="formFields"
|
||||
(submit)="submit($event)">
|
||||
</cre-entity-add>
|
||||
|
||||
<ng-template #permissionsTemplateRef>
|
||||
<cre-permissions-field></cre-permissions-field>
|
||||
</ng-template>
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
mat-card
|
||||
max-width: 90rem
|
||||
cre-entity-add
|
||||
::ng-deep mat-card
|
||||
max-width: 90rem
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
import {Component, ViewChild} from '@angular/core'
|
||||
import {FormControl, FormGroup, Validators} from '@angular/forms'
|
||||
import {PermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {EmployeeGroup} from '../../../shared/model/employee'
|
||||
import {Observable} from 'rxjs'
|
||||
import {Component, ContentChildren, ViewChild, ViewContainerRef} from '@angular/core'
|
||||
import {Validators} from '@angular/forms'
|
||||
import {
|
||||
currentPermissionsFieldComponent,
|
||||
PermissionsFieldComponent
|
||||
} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {GroupService} from '../../../groups/services/group.service'
|
||||
import {EmployeeService} from '../../services/employee.service'
|
||||
import {ActivatedRoute, Router} from '@angular/router'
|
||||
import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
|
||||
import {ErrorService} from '../../../shared/service/error.service'
|
||||
import {FormField} from '../../../shared/components/entity-add/entity-add.component'
|
||||
import {map} from 'rxjs/operators'
|
||||
|
||||
@Component({
|
||||
selector: 'cre-add',
|
||||
|
@ -15,16 +18,62 @@ import {ErrorService} from '../../../shared/service/error.service'
|
|||
styleUrls: ['./add.component.sass']
|
||||
})
|
||||
export class AddComponent extends ErrorHandlingComponent {
|
||||
@ViewChild('permissionsField', {static: true}) permissionsField: PermissionsFieldComponent
|
||||
@ViewChild('permissionsTemplateRef', {static: true}) permissionsTemplateRef
|
||||
|
||||
form: FormGroup
|
||||
idControl: FormControl
|
||||
firstNameControl: FormControl
|
||||
lastNameControl: FormControl
|
||||
passwordControl: FormControl
|
||||
groupControl: FormControl
|
||||
|
||||
group$: Observable<EmployeeGroup[]> | null
|
||||
formFields: FormField[] = [{
|
||||
name: 'id',
|
||||
label: 'Numéro d\'employé',
|
||||
icon: 'pound',
|
||||
type: 'number',
|
||||
required: true,
|
||||
validator: Validators.compose([Validators.pattern(new RegExp('^[0-9]+$')), Validators.min(0)]),
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un numéro d\'employé est requis'},
|
||||
{conditionFn: errors => errors.pattern, message: 'Le numéro d\'employé doit être un nombre'}
|
||||
]
|
||||
}, {
|
||||
name: 'firstName',
|
||||
label: 'Prénom',
|
||||
icon: 'account',
|
||||
type: 'text',
|
||||
required: true,
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un prénom est requis'}
|
||||
]
|
||||
}, {
|
||||
name: 'lastName',
|
||||
label: 'Nom',
|
||||
icon: 'account',
|
||||
type: 'text',
|
||||
required: true,
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un nom est requis'}
|
||||
]
|
||||
}, {
|
||||
name: 'password',
|
||||
label: 'Mot de passe',
|
||||
icon: 'lock',
|
||||
type: 'password',
|
||||
required: true,
|
||||
validator: Validators.minLength(8),
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un mot de passe est requis'},
|
||||
{conditionFn: errors => errors.minlength, message: 'Le mot de passe doit comprendre au moins 8 caractères'}
|
||||
]
|
||||
}, {
|
||||
name: 'groupId',
|
||||
label: 'Groupe',
|
||||
icon: 'account-multiple',
|
||||
type: 'select',
|
||||
defaultValue: -1,
|
||||
options$: this.groupService.all.pipe(map(groups => groups.map(g => {
|
||||
return {value: g.id, label: g.name}
|
||||
})))
|
||||
}, {
|
||||
name: 'permissions',
|
||||
label: 'Permissions',
|
||||
type: 'permissions'
|
||||
}]
|
||||
|
||||
constructor(
|
||||
private employeeService: EmployeeService,
|
||||
|
@ -36,35 +85,23 @@ export class AddComponent extends ErrorHandlingComponent {
|
|||
super(errorService, activatedRoute, router)
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
super.ngOnInit()
|
||||
|
||||
this.group$ = this.groupService.all
|
||||
|
||||
this.idControl = new FormControl(null, Validators.compose([Validators.required, Validators.pattern(new RegExp('^[0-9]+$')), Validators.min(0)]))
|
||||
this.firstNameControl = new FormControl(null, Validators.required)
|
||||
this.lastNameControl = new FormControl(null, Validators.required)
|
||||
this.passwordControl = new FormControl(null, Validators.compose([Validators.required, Validators.minLength(8)]))
|
||||
this.groupControl = new FormControl(null, Validators.min(0))
|
||||
this.form = new FormGroup({
|
||||
id: this.idControl,
|
||||
firstName: this.firstNameControl,
|
||||
lastName: this.lastNameControl,
|
||||
password: this.passwordControl,
|
||||
group: this.groupControl
|
||||
})
|
||||
this.formFields[this.formFields.length - 1].template = this.permissionsTemplateRef
|
||||
}
|
||||
|
||||
submit() {
|
||||
if (this.permissionsField.valid() && this.form.valid) {
|
||||
submit(values) {
|
||||
const permissionsField = currentPermissionsFieldComponent
|
||||
if (permissionsField.valid()) {
|
||||
this.subscribeAndNavigate(
|
||||
this.employeeService.save(
|
||||
parseInt(this.idControl.value),
|
||||
this.firstNameControl.value,
|
||||
this.lastNameControl.value,
|
||||
this.passwordControl.value,
|
||||
this.groupControl.value,
|
||||
this.permissionsField.allEnabledPermissions
|
||||
values.id,
|
||||
values.firstName,
|
||||
values.lastName,
|
||||
values.password,
|
||||
values.groupId,
|
||||
permissionsField.allEnabledPermissions
|
||||
),
|
||||
'/employee/list'
|
||||
)
|
||||
|
|
|
@ -1,50 +1,15 @@
|
|||
<mat-card *ngIf="employee" class="x-centered mt-5">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Modification de l'utilisateur #{{employee.id}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form">
|
||||
<mat-form-field>
|
||||
<mat-label>Numéro d'employé</mat-label>
|
||||
<input matInput type="text" [formControl]="idControl"/>
|
||||
<mat-icon svgIcon="pound" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="idControl.invalid">
|
||||
<span *ngIf="idControl.errors.required">Un numéro d'employé est requis</span>
|
||||
<span *ngIf="idControl.errors.pattern">Le numéro d'employé doit être un nombre</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Prénom</mat-label>
|
||||
<input matInput type="text" [formControl]="firstNameControl"/>
|
||||
<mat-icon svgIcon="account" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="firstNameControl.invalid">
|
||||
<span *ngIf="firstNameControl.errors.required">Un prénom est requis</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Nom</mat-label>
|
||||
<input matInput type="text" [formControl]="lastNameControl"/>
|
||||
<mat-icon svgIcon="account" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="lastNameControl.invalid">
|
||||
<span *ngIf="lastNameControl.errors.required">Un nom est requis</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="group$ | async as groups">
|
||||
<mat-label>Groupe</mat-label>
|
||||
<mat-select [formControl]="groupControl">
|
||||
<mat-option [value]="null">Aucun</mat-option>
|
||||
<mat-option *ngFor="let group of groups" [value]="group.id">{{group.name}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon svgIcon="account-multiple" matSuffix></mat-icon>
|
||||
</mat-form-field>
|
||||
<cre-permissions-field #permissionsField [enabledPermissions]="employee.permissions"></cre-permissions-field>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" routerLink="/employee/list">Retour</button>
|
||||
<button mat-raised-button color="warn" *ngIf="canRemoveEmployee" (click)="confirmBoxComponent.show()">Supprimer
|
||||
</button>
|
||||
<button mat-raised-button color="accent" (click)="submit(permissionsField)" [disabled]="form.invalid">Enregistrer</button>
|
||||
</mat-card-actions>
|
||||
<cre-confirm-box #confirmBoxComponent message="Voulez-vous vraiment supprimer l'employé {{employee.id}}?" (confirm)="delete()"></cre-confirm-box>
|
||||
</mat-card>
|
||||
<cre-entity-edit
|
||||
*ngIf="employee"
|
||||
title="Modification de l'utilisateur #{{employee.id}}"
|
||||
backButtonLink="/employee/list"
|
||||
deletePermission="REMOVE_EMPLOYEE"
|
||||
deleteConfirmMessage="Voulez-vous vraiment supprimer l'utilisateur #{{employee.id}}?"
|
||||
[entity]="employee"
|
||||
[formFields]="formFields"
|
||||
(submit)="submit($event)"
|
||||
(delete)="delete()">
|
||||
</cre-entity-edit>
|
||||
|
||||
<ng-template #permissionsTemplateRef>
|
||||
<cre-permissions-field [enabledPermissions]="employee.explicitPermissions"></cre-permissions-field>
|
||||
</ng-template>
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
mat-card
|
||||
max-width: 90rem
|
||||
cre-entity-edit
|
||||
::ng-deep mat-card
|
||||
max-width: 90rem
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import {Component} from '@angular/core'
|
||||
import {PermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'
|
||||
import {Component, ViewChild} from '@angular/core'
|
||||
import {currentPermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {EmployeeService} from '../../services/employee.service'
|
||||
import {GroupService} from '../../../groups/services/group.service'
|
||||
import {ActivatedRoute, Router} from '@angular/router'
|
||||
import {Observable} from 'rxjs'
|
||||
import {Employee, EmployeeGroup, EmployeePermission} from '../../../shared/model/employee'
|
||||
import {Employee} from '../../../shared/model/employee'
|
||||
import {AccountService} from '../../../accounts/services/account.service'
|
||||
import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
|
||||
import {ErrorService} from '../../../shared/service/error.service'
|
||||
import {FormField} from '../../../shared/components/entity-add/entity-add.component'
|
||||
import {map} from 'rxjs/operators'
|
||||
|
||||
@Component({
|
||||
selector: 'cre-edit',
|
||||
|
@ -16,20 +16,52 @@ import {ErrorService} from '../../../shared/service/error.service'
|
|||
styleUrls: ['./edit.component.sass']
|
||||
})
|
||||
export class EditComponent extends ErrorHandlingComponent {
|
||||
@ViewChild('permissionsTemplateRef', {static: true}) permissionsTemplateRef
|
||||
|
||||
employee: Employee | null
|
||||
|
||||
group$: Observable<EmployeeGroup[]> | null
|
||||
|
||||
private _idControl: FormControl
|
||||
private _firstNameControl: FormControl
|
||||
private _lastNameControl: FormControl
|
||||
private _groupControl: FormControl
|
||||
formFields: FormField[] = [{
|
||||
name: 'id',
|
||||
label: 'Numéro d\'employé',
|
||||
icon: 'pound',
|
||||
type: 'number',
|
||||
readonly: true
|
||||
}, {
|
||||
name: 'firstName',
|
||||
label: 'Prénom',
|
||||
icon: 'account',
|
||||
type: 'text',
|
||||
required: true,
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un prénom est requis'}
|
||||
]
|
||||
}, {
|
||||
name: 'lastName',
|
||||
label: 'Nom',
|
||||
icon: 'account',
|
||||
type: 'text',
|
||||
required: true,
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un nom est requis'}
|
||||
]
|
||||
}, {
|
||||
name: 'groupId',
|
||||
label: 'Groupe',
|
||||
icon: 'account-multiple',
|
||||
type: 'select',
|
||||
valueFn: employee => employee.group ? employee.group.id : -1,
|
||||
options$: this.groupService.all.pipe(map(groups => groups.map(g => {
|
||||
return {value: g.id, label: g.name}
|
||||
})))
|
||||
}, {
|
||||
name: 'permissions',
|
||||
label: 'Permissions',
|
||||
type: 'permissions'
|
||||
}]
|
||||
|
||||
constructor(
|
||||
private accountService: AccountService,
|
||||
private employeeService: EmployeeService,
|
||||
private groupService: GroupService,
|
||||
private formBuilder: FormBuilder,
|
||||
errorService: ErrorService,
|
||||
router: Router,
|
||||
activatedRoute: ActivatedRoute
|
||||
|
@ -46,21 +78,22 @@ export class EditComponent extends ErrorHandlingComponent {
|
|||
'/employee/list'
|
||||
)
|
||||
|
||||
this.group$ = this.groupService.all
|
||||
this.formFields[this.formFields.length - 1].template = this.permissionsTemplateRef
|
||||
}
|
||||
|
||||
submit(permissionsField: PermissionsFieldComponent) {
|
||||
if (permissionsField.valid() && this.form.valid) {
|
||||
submit(values) {
|
||||
const permissionsField = currentPermissionsFieldComponent
|
||||
if (permissionsField.valid()) {
|
||||
this.subscribe(
|
||||
this.employeeService.update(
|
||||
parseInt(this.idControl.value),
|
||||
this.firstNameControl.value,
|
||||
this.lastNameControl.value,
|
||||
parseInt(values.id),
|
||||
values.firstName,
|
||||
values.lastName,
|
||||
permissionsField.allEnabledPermissions
|
||||
),
|
||||
() => {
|
||||
const group = parseInt(this._groupControl.value)
|
||||
if (!isNaN(group)) {
|
||||
const group = values.groupId
|
||||
if (group >= 0) {
|
||||
this.subscribeAndNavigate(
|
||||
this.groupService.addEmployeeToGroup(group, this.employee),
|
||||
'/employee/list'
|
||||
|
@ -72,7 +105,7 @@ export class EditComponent extends ErrorHandlingComponent {
|
|||
'/employee/list'
|
||||
)
|
||||
} else {
|
||||
this.router.navigate(['/employee/list'])
|
||||
this.urlUtils.navigateTo('/employee/list')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -86,47 +119,4 @@ export class EditComponent extends ErrorHandlingComponent {
|
|||
'/employee/list'
|
||||
)
|
||||
}
|
||||
|
||||
get form(): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
id: this._idControl,
|
||||
firstName: this._firstNameControl,
|
||||
lastName: this._lastNameControl,
|
||||
group: this._groupControl
|
||||
})
|
||||
}
|
||||
|
||||
get idControl(): FormControl {
|
||||
this._idControl = this.lazyControl(this._idControl, () => new FormControl({value: this.employee.id, disabled: true}, Validators.compose([Validators.required, Validators.pattern(new RegExp('^[0-9]+$')), Validators.min(0)])))
|
||||
return this._idControl
|
||||
}
|
||||
|
||||
get firstNameControl(): FormControl {
|
||||
this._firstNameControl = this.lazyControl(this._firstNameControl, () => new FormControl(this.employee.firstName, Validators.required))
|
||||
return this._firstNameControl
|
||||
}
|
||||
|
||||
get lastNameControl(): FormControl {
|
||||
this._lastNameControl = this.lazyControl(this._lastNameControl, () => new FormControl(this.employee.lastName, Validators.required))
|
||||
return this._lastNameControl
|
||||
}
|
||||
|
||||
get groupControl(): FormControl {
|
||||
this._groupControl = this.lazyControl(this._groupControl, () => new FormControl(this.employee.group?.id))
|
||||
return this._groupControl
|
||||
}
|
||||
|
||||
private lazyControl(control: FormControl, provider: () => FormControl): FormControl {
|
||||
if (control) {
|
||||
return control
|
||||
}
|
||||
if (this.employee) {
|
||||
return provider()
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
get canRemoveEmployee(): boolean {
|
||||
return this.accountService.hasPermission(EmployeePermission.REMOVE_EMPLOYEE)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,23 +1,10 @@
|
|||
<mat-card class="x-centered mt-5">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Création d'un groupe</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form">
|
||||
<mat-form-field class="pb-3">
|
||||
<mat-label>Nom</mat-label>
|
||||
<input matInput type="text" [formControl]="nameControl"/>
|
||||
<mat-icon svgIcon="account-multiple" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="nameControl.invalid">
|
||||
<span *ngIf="nameControl.errors.required">Un nom est requis</span>
|
||||
<span *ngIf="nameControl.errors.minlength">Le nom d'un groupe doit comprendre au moins 3 caractères</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<cre-permissions-field #permissionsField></cre-permissions-field>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" routerLink="/group/list">Retour</button>
|
||||
<button mat-raised-button color="accent" (click)="submit()" [disabled]="form.invalid">Créer</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<cre-entity-add
|
||||
title="Création d'un groupe"
|
||||
backButtonLink="/group/list"
|
||||
[formFields]="formFields"
|
||||
(submit)="submit($event)">
|
||||
</cre-entity-add>
|
||||
|
||||
<ng-template #permissionsTemplateRef>
|
||||
<cre-permissions-field></cre-permissions-field>
|
||||
</ng-template>
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
mat-card
|
||||
max-width: 90rem
|
||||
|
||||
mat-checkbox
|
||||
font-size: .8em
|
||||
cre-entity-add
|
||||
::ng-deep mat-card
|
||||
max-width: 90rem
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import {Component, ViewChild} from '@angular/core'
|
||||
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'
|
||||
import {Validators} from '@angular/forms'
|
||||
import {GroupService} from '../../services/group.service'
|
||||
import {ActivatedRoute, Router} from '@angular/router'
|
||||
import {PermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {currentPermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
|
||||
import {ErrorService} from '../../../shared/service/error.service'
|
||||
import {FormField} from '../../../shared/components/entity-add/entity-add.component'
|
||||
|
||||
@Component({
|
||||
selector: 'cre-add',
|
||||
|
@ -12,13 +13,26 @@ import {ErrorService} from '../../../shared/service/error.service'
|
|||
styleUrls: ['./add.component.sass']
|
||||
})
|
||||
export class AddComponent extends ErrorHandlingComponent {
|
||||
@ViewChild('permissionsField', {static: true}) permissionsField: PermissionsFieldComponent
|
||||
@ViewChild('permissionsTemplateRef', {static: true}) permissionsTemplateRef
|
||||
|
||||
form: FormGroup
|
||||
nameControl: FormControl
|
||||
formFields: FormField[] = [{
|
||||
name: 'name',
|
||||
label: 'Nom',
|
||||
icon: 'account-multiple',
|
||||
type: 'text',
|
||||
required: true,
|
||||
validator: Validators.minLength(3),
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un nom est requis'},
|
||||
{conditionFn: errors => errors.minlength, message: 'Le nom d\'un groupe doit comprendre au moins 3 caractères'}
|
||||
]
|
||||
}, {
|
||||
name: 'permissions',
|
||||
label: 'Permissions',
|
||||
type: 'permissions'
|
||||
}]
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private groupService: GroupService,
|
||||
errorService: ErrorService,
|
||||
router: Router,
|
||||
|
@ -27,17 +41,17 @@ export class AddComponent extends ErrorHandlingComponent {
|
|||
super(errorService, activatedRoute, router)
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.nameControl = new FormControl(null, Validators.compose([Validators.required, Validators.minLength(3)]))
|
||||
this.form = this.formBuilder.group({
|
||||
name: this.nameControl
|
||||
})
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
|
||||
this.formFields[this.formFields.length - 1].template = this.permissionsTemplateRef
|
||||
}
|
||||
|
||||
submit() {
|
||||
if (this.form.valid && this.permissionsField.valid()) {
|
||||
submit(values) {
|
||||
const permissionsField = currentPermissionsFieldComponent
|
||||
if (permissionsField.valid()) {
|
||||
this.subscribeAndNavigate(
|
||||
this.groupService.save(this.nameControl.value, this.permissionsField.allEnabledPermissions),
|
||||
this.groupService.save(values.name, permissionsField.allEnabledPermissions),
|
||||
'/group/list'
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,29 +1,15 @@
|
|||
<mat-card *ngIf="group" class="mt-5 x-centered">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Modifier le groupe {{group.name}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form">
|
||||
<mat-form-field>
|
||||
<mat-label>Nom</mat-label>
|
||||
<input matInput type="text" [formControl]="nameControl"/>
|
||||
<mat-icon svgIcon="account-multiple" matSuffix></mat-icon>
|
||||
<mat-error *ngIf="nameControl.invalid">
|
||||
<span *ngIf="nameControl.errors.required">Un nom est requis</span>
|
||||
<span *ngIf="nameControl.errors.minlength">Le nom d'un groupe doit comprendre au moins 3 caractères</span>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<cre-permissions-field [enabledPermissions]="group.permissions" #permissionsField></cre-permissions-field>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" routerLink="/employee/list">Retour</button>
|
||||
<button mat-raised-button color="warn" *ngIf="canRemoveGroup" [disabled]="group.employeeCount > 0"
|
||||
[title]="group.employeeCount > 0 ? 'Il y a des employés dans le groupe' : ''"
|
||||
(click)="confirmBoxComponent.show()">Supprimer
|
||||
</button>
|
||||
<button mat-raised-button color="accent" (click)="submit()" [disabled]="form.invalid">Enregistrer</button>
|
||||
</mat-card-actions>
|
||||
<cre-confirm-box #confirmBoxComponent [message]="confirmBoxMessage" (confirm)="delete()"></cre-confirm-box>
|
||||
</mat-card>
|
||||
<cre-entity-edit
|
||||
*ngIf="group"
|
||||
title="Modifier le groupe {{group.name}}"
|
||||
backButtonLink="/group/list"
|
||||
deletePermission="REMOVE_EMPLOYEE_GROUP"
|
||||
deleteConfirmMessage="Voulez-vous vraiment supprimer le groupe {{group.name}}?"
|
||||
[entity]="group"
|
||||
[formFields]="formFields"
|
||||
(submit)="submit($event)"
|
||||
(delete)="delete()">
|
||||
</cre-entity-edit>
|
||||
|
||||
<ng-template #permissionsTemplateRef>
|
||||
<cre-permissions-field [enabledPermissions]="group.permissions"></cre-permissions-field>
|
||||
</ng-template>
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
mat-card
|
||||
max-width: 90rem
|
||||
cre-entity-edit
|
||||
::ng-deep mat-card
|
||||
max-width: 90rem
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import {Component, ViewChild} from '@angular/core'
|
||||
import {ActivatedRoute, Router} from '@angular/router'
|
||||
import {EmployeeGroup, EmployeePermission} from '../../../shared/model/employee'
|
||||
import {EmployeeGroup} from '../../../shared/model/employee'
|
||||
import {GroupService} from '../../services/group.service'
|
||||
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'
|
||||
import {PermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {Validators} from '@angular/forms'
|
||||
import {currentPermissionsFieldComponent} from '../../../shared/components/permissions-field/permissions-field.component'
|
||||
import {AccountService} from '../../../accounts/services/account.service'
|
||||
import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
|
||||
import {ErrorService} from '../../../shared/service/error.service'
|
||||
import {FormField} from '../../../shared/components/entity-add/entity-add.component'
|
||||
|
||||
@Component({
|
||||
selector: 'cre-edit',
|
||||
|
@ -14,16 +15,29 @@ import {ErrorService} from '../../../shared/service/error.service'
|
|||
styleUrls: ['./edit.component.sass']
|
||||
})
|
||||
export class EditComponent extends ErrorHandlingComponent {
|
||||
@ViewChild('permissionsField') permissionsField: PermissionsFieldComponent
|
||||
@ViewChild('permissionsTemplateRef', {static: true}) permissionsTemplateRef
|
||||
|
||||
formFields: FormField[] = [{
|
||||
name: 'name',
|
||||
label: 'Nom',
|
||||
icon: 'account-multiple',
|
||||
type: 'text',
|
||||
required: true,
|
||||
validator: Validators.minLength(3),
|
||||
errorMessages: [
|
||||
{conditionFn: errors => errors.required, message: 'Un nom est requis'},
|
||||
{conditionFn: errors => errors.minlength, message: 'Le nom d\'un groupe doit comprendre au moins 3 caractères'}
|
||||
]
|
||||
}, {
|
||||
name: 'permissions',
|
||||
label: 'Permissions',
|
||||
type: 'permissions'
|
||||
}]
|
||||
group: EmployeeGroup | null
|
||||
|
||||
private _nameControl: FormControl
|
||||
|
||||
constructor(
|
||||
private accountService: AccountService,
|
||||
private groupService: GroupService,
|
||||
private formBuilder: FormBuilder,
|
||||
errorService: ErrorService,
|
||||
router: Router,
|
||||
activatedRoute: ActivatedRoute
|
||||
|
@ -39,12 +53,15 @@ export class EditComponent extends ErrorHandlingComponent {
|
|||
group => this.group = group,
|
||||
'/group/list'
|
||||
)
|
||||
|
||||
this.formFields[this.formFields.length - 1].template = this.permissionsTemplateRef
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (this.form.valid && this.permissionsField.valid()) {
|
||||
submit(values): void {
|
||||
const permissionsField = currentPermissionsFieldComponent
|
||||
if (permissionsField.valid()) {
|
||||
this.subscribeAndNavigate(
|
||||
this.groupService.update(this.group.id, this.nameControl.value, this.permissionsField.allEnabledPermissions),
|
||||
this.groupService.update(this.group.id, values.name, permissionsField.allEnabledPermissions),
|
||||
'/group/list'
|
||||
)
|
||||
}
|
||||
|
@ -56,29 +73,4 @@ export class EditComponent extends ErrorHandlingComponent {
|
|||
'/group/list'
|
||||
)
|
||||
}
|
||||
|
||||
get form(): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
name: this.nameControl
|
||||
})
|
||||
}
|
||||
|
||||
get confirmBoxMessage(): string {
|
||||
return `Voulez-vous vraiment supprimer le groupe ${this.group.name}?`
|
||||
}
|
||||
|
||||
get nameControl(): FormControl {
|
||||
if (this._nameControl) {
|
||||
return this._nameControl
|
||||
}
|
||||
if (this.group) {
|
||||
this._nameControl = new FormControl(this.group.name, Validators.compose([Validators.required, Validators.minLength(3)]))
|
||||
return this._nameControl
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
get canRemoveGroup(): boolean {
|
||||
return this.accountService.hasPermission(EmployeePermission.REMOVE_EMPLOYEE_GROUP)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import {Component} from '@angular/core'
|
||||
import {Observable} from 'rxjs'
|
||||
import {GroupService} from '../../services/group.service'
|
||||
import {EmployeeGroup, EmployeePermission} from '../../../shared/model/employee'
|
||||
import {takeUntil} from 'rxjs/operators'
|
||||
import {map} from 'rxjs/operators'
|
||||
import {animate, state, style, transition, trigger} from '@angular/animations'
|
||||
import {AccountService} from '../../../accounts/services/account.service'
|
||||
import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
|
||||
|
@ -23,7 +22,7 @@ import {AlertService} from '../../../shared/service/alert.service'
|
|||
]
|
||||
})
|
||||
export class ListComponent extends ErrorHandlingComponent {
|
||||
groups$: Observable<EmployeeGroup[]>
|
||||
groups$ = this.groupService.all.pipe(map(groups => groups.filter(g => g.id >= 0)))
|
||||
defaultGroup: EmployeeGroup = null
|
||||
columns = ['name', 'permissionCount', 'employeeCount', 'defaultGroup', 'editGroup']
|
||||
expandedElement: EmployeeGroup | null
|
||||
|
@ -45,7 +44,6 @@ export class ListComponent extends ErrorHandlingComponent {
|
|||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.groups$ = this.groupService.all.pipe(takeUntil(this.destroy$))
|
||||
this.subscribe(
|
||||
this.groupService.defaultGroup,
|
||||
group => this.defaultGroup = group,
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {ApiService} from "../../shared/service/api.service";
|
||||
import {Observable} from "rxjs";
|
||||
import {Employee, EmployeeGroup, EmployeePermission} from "../../shared/model/employee";
|
||||
import {Injectable} from '@angular/core'
|
||||
import {ApiService} from '../../shared/service/api.service'
|
||||
import {Observable} from 'rxjs'
|
||||
import {Employee, EmployeeGroup, EmployeePermission} from '../../shared/model/employee'
|
||||
import {tap} from 'rxjs/operators'
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
@ -14,10 +15,16 @@ export class GroupService {
|
|||
|
||||
get all(): Observable<EmployeeGroup[]> {
|
||||
return this.api.get<EmployeeGroup[]>('/employee/group')
|
||||
.pipe(tap(groups => groups.unshift({
|
||||
id: -1,
|
||||
name: 'Aucun',
|
||||
permissions: [],
|
||||
employeeCount: 0
|
||||
})))
|
||||
}
|
||||
|
||||
getById(id: number): Observable<EmployeeGroup> {
|
||||
return this.api.get<EmployeeGroup>(`/employee/group/${id}`);
|
||||
return this.api.get<EmployeeGroup>(`/employee/group/${id}`)
|
||||
}
|
||||
|
||||
get defaultGroup(): Observable<EmployeeGroup> {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<form *ngIf="form" [formGroup]="form">
|
||||
<ng-container *ngFor="let field of formFields">
|
||||
<ng-container
|
||||
*ngIf="field.type != 'checkbox' && field.type != 'select' && field.type != 'file' && field.type != 'slider'"
|
||||
*ngIf="!field.template && field.type != 'checkbox' && field.type != 'select' && field.type != 'file' && field.type != 'slider'"
|
||||
[ngTemplateOutlet]="fieldTemplate"
|
||||
[ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
|
||||
</ng-container>
|
||||
|
@ -30,6 +30,10 @@
|
|||
[ngTemplateOutlet]="sliderTemplate"
|
||||
[ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
|
||||
</ng-container>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="field.template"
|
||||
[ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
|
|
|
@ -21,12 +21,12 @@
|
|||
[ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
|
||||
</ng-container>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="field.template"
|
||||
*ngIf="field.type == 'slider'"
|
||||
[ngTemplateOutlet]="sliderTemplate"
|
||||
[ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
|
||||
</ng-container>
|
||||
<ng-container
|
||||
*ngIf="field.type == 'slider'"
|
||||
[ngTemplateOutlet]="sliderTemplate"
|
||||
[ngTemplateOutlet]="field.template"
|
||||
[ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div #permissions class="permissions-field">
|
||||
<p>{{title}}</p>
|
||||
<p>{{title}} *</p>
|
||||
<div class="d-flex flex-row justify-content-between permissions-list">
|
||||
<ng-container *ngTemplateOutlet="permissionTemplate;context:{type: 'view'}"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="permissionTemplate;context:{type: 'edit'}"></ng-container>
|
||||
|
|
|
@ -3,6 +3,10 @@ import {EmployeePermission, mapped_permissions} from "../../model/employee";
|
|||
import {FormControl} from "@angular/forms";
|
||||
import {AccountService} from "../../../accounts/services/account.service";
|
||||
|
||||
// The current permissions field component. Workaround to be able to access a permission field in template. (See employee/AddComponent)
|
||||
// This workaround prevent the use of several permissions field component at the same time.
|
||||
export let currentPermissionsFieldComponent: PermissionsFieldComponent | null
|
||||
|
||||
@Component({
|
||||
selector: 'cre-permissions-field',
|
||||
templateUrl: './permissions-field.component.html',
|
||||
|
@ -35,6 +39,8 @@ export class PermissionsFieldComponent implements OnInit {
|
|||
this.togglePermission(control, true)
|
||||
})
|
||||
}
|
||||
|
||||
currentPermissionsFieldComponent = this
|
||||
}
|
||||
|
||||
togglePermission(permission: any, bypassValue?: boolean) {
|
||||
|
|
|
@ -3,6 +3,7 @@ export class Employee {
|
|||
public id: number,
|
||||
public firstName: string,
|
||||
public lastName: string,
|
||||
public explicitPermissions: EmployeePermission[],
|
||||
public permissions: EmployeePermission[],
|
||||
public group?: EmployeeGroup,
|
||||
public lastLoginTime?: Date
|
||||
|
|
|
@ -200,7 +200,6 @@ div.empty
|
|||
left: 0
|
||||
background-color: black
|
||||
opacity: 0.4
|
||||
z-index: -1
|
||||
|
||||
.color-warning
|
||||
color: #fdd835
|
||||
|
|
Loading…
Reference in New Issue