Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

readonly forms in admin module

Browse Source
This commit is contained in:
Edi Cziszter 2021-11-19 11:25:07 +02:00
parent 195cb571f6
commit 5061877036
9 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
View File

@ -14,7 +14,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
})
export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe implements OnDestroy {
dossierAttribute: IDossierAttributeConfig = this.data.dossierAttribute;
form: FormGroup = this._getForm(this.dossierAttribute);
readonly form: FormGroup = this._getForm(this.dossierAttribute);
readonly translations = dossierAttributeTypesTranslations;
readonly typeOptions = Object.keys(DossierAttributeConfigTypes);

2
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts
View File

@ -17,7 +17,7 @@ import { HttpStatusCode } from '@angular/common/http';
styleUrls: ['./add-edit-dossier-template-dialog.component.scss'],
})
export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent {
form: FormGroup = this._getForm();
readonly form: FormGroup = this._getForm();
hasValidFrom: boolean;
hasValidTo: boolean;
downloadTypesEnum: DownloadFileType[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'];

2
apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
View File

@ -14,7 +14,7 @@ import { BaseDialogComponent } from '@iqser/common-ui';
export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
fileAttribute: IFileAttributeConfig = this.data.fileAttribute;
dossierTemplateId: string = this.data.dossierTemplateId;
form: FormGroup = this._getForm(this.fileAttribute);
readonly form: FormGroup = this._getForm(this.fileAttribute);
readonly typeOptions = Object.keys(FileAttributeConfigTypes);
translations = fileAttributeTypesTranslations;

4
apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html
View File

@ -1,6 +1,6 @@
<div [translateParams]="{ userName: user | name }" [translate]="'reset-password-dialog.header'" class="dialog-header heading-l"></div>
<form (submit)="save()" [formGroup]="passwordForm">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group required w-300">
<label translate="reset-password-dialog.form.password"></label>
@ -9,7 +9,7 @@
</div>
<div class="dialog-actions">
<button [disabled]="passwordForm.invalid" color="primary" mat-flat-button type="submit">
<button [disabled]="form.invalid" color="primary" mat-flat-button type="submit">
{{ 'reset-password-dialog.actions.save' | translate }}
</button>

14
apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts
View File

@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '@services/user.service';
import { LoadingService } from '@iqser/common-ui';
import { User } from '@red/domain';
@ -10,9 +10,7 @@ import { User } from '@red/domain';
styleUrls: ['./reset-password.component.scss'],
})
export class ResetPasswordComponent {
readonly passwordForm = this._formBuilder.group({
temporaryPassword: [null, Validators.required],
});
readonly form = this._getForm();
@Input() user: User;
@Output() readonly toggleResetPassword = new EventEmitter();
@ -27,7 +25,7 @@ export class ResetPasswordComponent {
await this._userService
.resetPassword(
{
password: this.passwordForm.get('temporaryPassword').value,
password: this.form.get('temporaryPassword').value,
temporary: true,
},
this.user.id,
@ -36,4 +34,10 @@ export class ResetPasswordComponent {
this._loadingService.stop();
this.toggleResetPassword.emit();
}
private _getForm(): FormGroup {
return this._formBuilder.group({
temporaryPassword: [null, Validators.required],
});
}
}

19
apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AdminDialogService } from '../../../services/admin-dialog.service';
import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
@ -13,17 +13,17 @@ import { HttpStatusCode } from '@angular/common/http';
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.scss'],
})
export class UserDetailsComponent implements OnInit {
export class UserDetailsComponent {
readonly iconButtonTypes = IconButtonTypes;
@Input() user: User;
@Output() readonly toggleResetPassword = new EventEmitter();
@Output() readonly closeDialog = new EventEmitter();
form: FormGroup;
readonly ROLES = ['RED_USER', 'RED_MANAGER', 'RED_USER_ADMIN', 'RED_ADMIN'];
readonly translations = rolesTranslations;
private readonly _ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' };
readonly form: FormGroup = this._getForm();
constructor(
private readonly _formBuilder: FormBuilder,
@ -31,7 +31,9 @@ export class UserDetailsComponent implements OnInit {
private readonly _dialogService: AdminDialogService,
private readonly _loadingService: LoadingService,
readonly userService: UserService,
) {}
) {
this._setRolesRequirements();
}
get changed(): boolean {
if (!this.user) {
@ -80,12 +82,8 @@ export class UserDetailsComponent implements OnInit {
);
}
ngOnInit() {
this._buildForm();
}
private _buildForm(): void {
this.form = this._formBuilder.group({
private _getForm(): FormGroup {
return this._formBuilder.group({
firstName: [this.user?.firstName, Validators.required],
lastName: [this.user?.lastName, Validators.required],
email: [
@ -97,7 +95,6 @@ export class UserDetailsComponent implements OnInit {
],
...this._rolesControls,
});
this._setRolesRequirements();
}
private get _rolesControls(): any {

11
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
View File

@ -1,4 +1,4 @@
<form (submit)="save()" *ngIf="attributesForm" [formGroup]="attributesForm">
<form (submit)="save()" *ngIf="form" [formGroup]="form">
<div>
<div *ngIf="customAttributes.length" class="heading">
{{ 'edit-dossier-dialog.attributes.custom-attributes' | translate }}
@ -10,8 +10,11 @@
icon="red:attribute"
></iqser-empty-state>
<div *ngFor="let attr of customAttributes" [class.datepicker-wrapper]="isSpecificType(attr, dossierAttributeConfigTypes.DATE)"
class="iqser-input-group">
<div
*ngFor="let attr of customAttributes"
[class.datepicker-wrapper]="isSpecificType(attr, dossierAttributeConfigTypes.DATE)"
class="iqser-input-group"
>
<label>{{ attr.label }}</label>
<input
*ngIf="isSpecificType(attr, dossierAttributeConfigTypes.NUMBER) || isSpecificType(attr, dossierAttributeConfigTypes.TEXT)"
@ -21,7 +24,7 @@
/>
<ng-container *ngIf="isSpecificType(attr, dossierAttributeConfigTypes.DATE)">
<input [formControlName]="attr.id" [matDatepicker]="picker" placeholder="dd/mm/yy"/>
<input [formControlName]="attr.id" [matDatepicker]="picker" placeholder="dd/mm/yy" />
<mat-datepicker-toggle [for]="picker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>

16
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
View File

@ -23,7 +23,7 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
imageAttributes: DossierAttributeWithValue[] = [];
attributes: DossierAttributeWithValue[] = [];
attributesForm: FormGroup;
form: FormGroup;
@ViewChildren('fileInput') private _fileInputs: QueryList<ElementRef>;
constructor(
@ -58,7 +58,7 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
async ngOnInit() {
this._loadingService.start();
await this._loadAttributes();
this._initForm();
this.form = this._getForm();
this._loadingService.stop();
}
@ -91,22 +91,22 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
const image = $event.target.files[0];
const result = await toBase64(image);
this.attributesForm.patchValue({
this.form.patchValue({
[attr.id]: result,
});
this._getFileInputById(attr.id).nativeElement.value = null;
}
revert() {
this._initForm();
this.form = this._getForm();
}
currentAttrValue(attr: DossierAttributeWithValue): string {
return this.attributesForm.get(attr.id).value;
return this.form.get(attr.id).value;
}
deleteAttr(attr: DossierAttributeWithValue) {
this.attributesForm.patchValue({
this.form.patchValue({
[attr.id]: null,
});
}
@ -125,11 +125,11 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
this.imageAttributes = this.attributes.filter(attr => this.isSpecificType(attr, this.dossierAttributeConfigTypes.IMAGE));
}
private _initForm() {
private _getForm(): FormGroup {
const controlsConfig = {};
for (const attribute of this.attributes) {
controlsConfig[attribute.id] = [{ value: attribute.value, disabled: !this.canEdit }];
}
this.attributesForm = this._formBuilder.group(controlsConfig);
return this._formBuilder.group(controlsConfig);
}
}

2
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts
View File

@ -4,7 +4,6 @@ import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
import { PermissionsService } from '@services/permissions.service';
import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component';
import { DictionaryService } from '@shared/services/dictionary.service';
import { FormBuilder } from '@angular/forms';
import { CircleButtonTypes, LoadingService } from '@iqser/common-ui';
import { DossiersService } from '@services/entity-services/dossiers.service';
@ -27,7 +26,6 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
private readonly _dictionaryService: DictionaryService,
private readonly _permissionsService: PermissionsService,
private readonly _loadingService: LoadingService,
private readonly _formBuilder: FormBuilder,
) {}
get changed() {