ColorRecipesExplorer
/
Frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 1 Wiki Activity

Normalisation des formulaires d'ajout et de modification des employées et des groupes.

This commit is contained in:
FyloZ 2021-03-15 14:46:10 -04:00
parent 3eb9b12899
commit 1743ccf0e8
20 changed files with 275 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/modules/employees/pages/add/add.component.html
View File

@ -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>

5
src/app/modules/employees/pages/add/add.component.sass
View File

@ -1,2 +1,3 @@
mat-card
max-width: 90rem
cre-entity-add
::ng-deep mat-card
max-width: 90rem

111
src/app/modules/employees/pages/add/add.component.ts
View File

@ -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'
)

65
src/app/modules/employees/pages/edit/edit.component.html
View File

@ -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>

5
src/app/modules/employees/pages/edit/edit.component.sass
View File

@ -1,2 +1,3 @@
mat-card
max-width: 90rem
cre-entity-edit
::ng-deep mat-card
max-width: 90rem

120
src/app/modules/employees/pages/edit/edit.component.ts
View File

@ -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)
}
}

33
src/app/modules/groups/pages/add/add.component.html
View File

@ -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>

8
src/app/modules/groups/pages/add/add.component.sass
View File

@ -1,5 +1,3 @@
mat-card
max-width: 90rem
mat-checkbox
font-size: .8em
cre-entity-add
::ng-deep mat-card
max-width: 90rem

42
src/app/modules/groups/pages/add/add.component.ts
View File

@ -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'
)
}

42
src/app/modules/groups/pages/edit/edit.component.html
View File

@ -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>

5
src/app/modules/groups/pages/edit/edit.component.sass
View File

@ -1,2 +1,3 @@
mat-card
max-width: 90rem
cre-entity-edit
::ng-deep mat-card
max-width: 90rem

62
src/app/modules/groups/pages/edit/edit.component.ts
View File

@ -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)
}
}

6
src/app/modules/groups/pages/list/list.component.ts
View File

@ -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,

17
src/app/modules/groups/services/group.service.ts
View File

@ -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
src/app/modules/shared/components/entity-add/entity-add.component.html
View File

@ -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>

6
src/app/modules/shared/components/entity-edit/entity-edit.component.html
View File

@ -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>

2
src/app/modules/shared/components/permissions-field/permissions-field.component.html
View File

@ -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>

6
src/app/modules/shared/components/permissions-field/permissions-field.component.ts
View File

@ -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) {

1
src/app/modules/shared/model/employee.ts
View File

@ -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

1
src/styles.sass
View File

@ -200,7 +200,6 @@ div.empty
left: 0
background-color: black
opacity: 0.4
z-index: -1
.color-warning
color: #fdd835