MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

WIP refactor description template editor validity checks WIP

This commit is contained in:
mchouliara 2024-08-28 16:36:07 +03:00
parent 1587a413cf
commit a6676647d1
15 changed files with 93 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
View File

@ -32,7 +32,7 @@
<mat-horizontal-stepper [linear]="!isFinalized" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)" style="padding-left: 8px; padding-right: 15px;">
<mat-step [label]="generalInfoStepperLabel" [completed]="(!formGroup.get('label').invalid && !formGroup.get('description').invalid && !formGroup.get('language').invalid)">
<mat-step [label]="generalInfoStepperLabel" [completed]="(!formGroup.get('code').invalid && !formGroup.get('label').invalid && !formGroup.get('description').invalid && !formGroup.get('language').invalid)">
<div class="col-9">
<div class="col">
<div class="col-12">
@ -106,8 +106,8 @@
<tr *ngFor="let user of formGroup?.get('users')?.controls; let i=index;" class="user-table-row">
<td>{{usersMap.get(user?.get('userId')?.value)?.name}}</td>
<td>{{enumUtils.toUserDescriptionTemplateRoleString(user?.get('role')?.value)}}</td>
<td>
<button [disabled]="formGroup.disabled" mat-button class="delete-btn" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
<td *ngIf="!viewOnly">
<button mat-button class="delete-btn" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
</td>
</tr>
<tr *ngIf="formGroup.get('users')?.controls?.length === 0">
@ -136,7 +136,7 @@
</div>
</div>
</mat-step>
<mat-step [label]="fromStepperLabel" [completed]="formGroup.valid">
<mat-step [label]="fromStepperLabel" [completed]="formGroup.disabled || formGroup.valid">
<div class="row pr-4">
<!-- TABLE -->
@ -147,7 +147,7 @@
<description-template-table-of-contents class="toc-pane-container col" style="margin-bottom: 2em;"
[links]="toCEntries"
[itemSelected]="selectedTocEntry"
[viewOnly]="formGroup.disabled"
[viewOnly]="viewOnly"
[colorizeInvalid]="colorizeInvalid"
[showErrors]="showErrors"
(dataNeedsRefresh)="onDataNeedsRefresh($event)"
@ -184,10 +184,12 @@
<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12" *ngIf="!viewOnly && (!selectedTocEntry?.subEntries?.length)">
<button class="create-section-btn" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
</div>
@if(!viewOnly &&!selectedTocEntry?.subEntries?.length){
<div class="col-12">
<button class="create-section-btn" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
</div>
<mat-error *ngIf="formGroup.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
}
</div>
</formGroup>
</div>
@ -265,7 +267,7 @@
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
</button>
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="navigate-btn ml-3" [@next_btn] (click)="validateStep(stepper?.selectedIndex);stepper?.next();" [ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper?.selectedIndex)}">
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="navigate-btn ml-3" [@next_btn] (click)="validateStep(stepper?.selectedIndex); stepper?.next();" [ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper?.selectedIndex)}">
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
<mat-icon class="back-icon pointer">chevron_right</mat-icon>
</button>
@ -278,7 +280,7 @@
<ng-template #actions>
<div>
<button mat-raised-button class="template_action_btn mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
<button *ngIf="!formGroup.disabled && formGroup.get('status').value!=finalized" mat-raised-button class="template_action_btn save-btn" type="button">
<button *ngIf="!viewOnly" mat-raised-button class="template_action_btn save-btn" type="button">
<span class="d-flex flex-row row">
<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
<mat-divider [vertical]="true"></mat-divider>
@ -292,7 +294,7 @@
<button mat-menu-item (click)="saveWithClose(false)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
</mat-menu>
<button *ngIf="!formGroup.disabled && formGroup.get('status').value!= finalized && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="finalize-btn ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="finalize-btn ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' | translate}}
</button>
</div>

70
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.ts
View File

@ -62,7 +62,6 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
isNew = true;
isDeleted = false;
isFinalized = false;
formGroup: UntypedFormGroup = null;
item: DescriptionTemplate;
showInactiveDetails = false;
@ -104,18 +103,31 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
return '3 ' + label;
}
protected get canDelete(): boolean {
return !this.isDeleted && !this.isNew && (this.hasPermission(this.authService.permissionEnum.DeleteDescriptionTemplate) || this.item?.authorizationFlags?.some(x => x === AppPermission.DeleteDescriptionTemplate));
}
protected get belongsToCurrentTenant(): boolean {
return this.isNew || this.editorModel?.belongsToCurrentTenant;
}
protected get canSave(): boolean {
return !this.isDeleted && (this.hasPermission(this.authService.permissionEnum.EditDescriptionTemplate) || this.item?.authorizationFlags?.some(x => x === AppPermission.EditDescriptionTemplate));
protected get isTransient(): boolean {
return this.isNew || this.isClone || this.isNewVersion;
}
protected get viewOnly(): boolean {
return this.isDeleted || this.isFinalized || !this.hasPermission(AppPermission.EditDescriptionTemplate) || !this.belongsToCurrentTenant;
}
protected get canDelete(): boolean {
return !this.isDeleted && !this.isTransient && this.belongsToCurrentTenant && (this.hasPermission(this.authService.permissionEnum.DeleteDescriptionTemplate) || this.item?.authorizationFlags?.some(x => x === AppPermission.DeleteDescriptionTemplate));
}
protected get canFinalize(): boolean {
return !this.isDeleted && (this.hasPermission(this.authService.permissionEnum.EditDescriptionTemplate) || this.item?.authorizationFlags?.some(x => x === AppPermission.EditDescriptionTemplate));
return !this.isTransient && !this.isFinalized;
}
protected get isFinalized(): boolean {
return this.editorModel?.status == DescriptionTemplateStatus.Finalized;
}
private hasPermission(permission: AppPermission): boolean {
return this.authService.hasPermission(permission) || this.editorModel?.permissions?.includes(permission) || this.item?.authorizationFlags?.some(x => x === permission);
}
@ -194,7 +206,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
this.item = data;
// Add user info to Map, to present them.
(this.item?.users ?? []).forEach(obj => { this.usersMap.set(obj.user.id, obj.user); });
this.isDeleted = data ? data.isActive === IsActive.Inactive : false;
this.isDeleted = data?.isActive === IsActive.Inactive;
this.buildForm();
if (data && data.id) this.checkLock(data.id, LockTargetType.DescriptionTemplate, 'DESCRIPTION-TEMPLATE-EDITOR.LOCKED-DIALOG.TITLE', 'DESCRIPTION-TEMPLATE-EDITOR.LOCKED-DIALOG.MESSAGE');
@ -212,12 +224,9 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
}
buildForm() {
this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !(this.authService.hasPermission(AppPermission.EditDescriptionTemplate) || this.item?.authorizationFlags?.some(x => x === AppPermission.EditDescriptionTemplate)), (this.isNew || this.isClone));
this.formGroup = this.editorModel.buildForm(null, this.viewOnly);
this.descriptionTemplateEditorService.setValidationErrorModel(this.editorModel.validationErrorModel);
this.isFinalized = this.editorModel.status == DescriptionTemplateStatus.Finalized;
if (this.isFinalized || this.isDeleted) {
this.formGroup.disable();
}
const action = this.route.snapshot.data['action'];
if (action && action == 'new-version') {
this.formGroup.enable();
@ -399,14 +408,14 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
isStepCompleted(stepIndex: number) {
let stepCompleted = false;
this.steps.forEach((step, index) => {
if (stepIndex === index) {
stepCompleted = step.completed;
}
});
// let stepCompleted = false;
// this.steps.forEach((step, index) => {
// if (stepIndex === index) {
// stepCompleted = step.completed;
// }
// });
return stepCompleted;
return this.steps.toArray().at(stepIndex)?.completed;
}
isStepUnlocked(stepIndex: number): boolean {
@ -434,11 +443,9 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
validateStep(selectedIndex) {
if (selectedIndex === 1) {//form description
if (this.formGroup.invalid) {
this.checkFormValidation();
}
}
if (this.formGroup.invalid) {
this.checkFormValidation(selectedIndex);
}
}
@ -1248,8 +1255,17 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
return (<UntypedFormArray>this.formGroup.get('definition').get('pages'))?.length;
}
checkFormValidation() {
this.colorizeInvalid = true;
checkFormValidation(index: number) {
switch(index){
case 0: {
this.colorizeInvalid = true;
break;
}
case 1: {
this.showErrors = true;
break;
}
}
}
get progressStyle() {

18
frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts
View File

@ -45,17 +45,17 @@ export class DescriptionTemplateEditorModel extends BaseEditorModel implements D
return this;
}
buildForm(context: ValidationContext = null, disabled: boolean = false, isNewOrClone: boolean = false): UntypedFormGroup {
buildForm(context: ValidationContext = null, disabled: boolean = false): UntypedFormGroup {
if (context == null) { context = this.createValidationContext(); }
return this.formBuilder.group({
id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators],
label: [{ value: this.label, disabled: disabled }, context.getValidation('label').validators],
code: [{ value: this.code, disabled: !isNewOrClone }, context.getValidation('code').validators],
description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators],
language: [{ value: this.language, disabled: disabled }, context.getValidation('language').validators],
type: [{ value: this.type, disabled: disabled }, context.getValidation('type').validators],
status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators],
id: [{ value: this.id, disabled }, context.getValidation('id').validators],
label: [{ value: this.label, disabled }, context.getValidation('label').validators],
code: [{ value: this.code, disabled: !!this.id ?? disabled }, context.getValidation('code').validators],
description: [{ value: this.description, disabled }, context.getValidation('description').validators],
language: [{ value: this.language, disabled }, context.getValidation('language').validators],
type: [{ value: this.type, disabled }, context.getValidation('type').validators],
status: [{ value: this.status, disabled }, context.getValidation('status').validators],
definition: this.definition.buildForm({
rootPath: `definition.`
}),
@ -66,7 +66,7 @@ export class DescriptionTemplateEditorModel extends BaseEditorModel implements D
})
), context.getValidation('users').validators
),
hash: [{ value: this.hash, disabled: disabled }, context.getValidation('hash').validators]
hash: [{ value: this.hash, disabled }, context.getValidation('hash').validators]
});
}

6
frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html
View File

@ -1,7 +1,11 @@
<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">
<div class="col link-info">
<span class="table-label-element"
[ngClass]="{'table-label-element-active': itemSelected?.id == parentLink?.id, 'text-danger': colorError() ||( (parentLink?.subEntriesType === tocEntryType.FieldSet )&& !colorError() && !selectedItemInLinks && parentLink?.form.invalid && colorizeInvalid && (itemSelected?.id != parentLink?.id) && !_findTocEntryById(itemSelected?.id, parentLink?.subEntries)), 'link-info-error': showErrors && !parentLink?.form?.valid}"
[ngClass]="{
'table-label-element-active': itemSelected?.id == parentLink?.id,
'text-danger': colorError() ||( (parentLink?.subEntriesType === tocEntryType.FieldSet )&& !colorError() && !selectedItemInLinks && parentLink?.form.invalid && colorizeInvalid && (itemSelected?.id != parentLink?.id) && !_findTocEntryById(itemSelected?.id, parentLink?.subEntries)),
'link-info-error': showErrors && !parentLink?.form?.valid
}"
(click)="itemClicked(parentLink)" [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}" [id]="'TABLE_ENTRY'+parentLink.id">
{{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
<ng-container *ngIf="!parentLink.form.get('title').value" [ngSwitch]="parentLink.type">

3
frontend/src/assets/i18n/baq.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "Gutxienez iturri bat eman behar da.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "Gutxienez aukera bat eman behar da.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Gutxienez aukera bat eman behar da."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Gutxienez aukera bat eman behar da.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Bat ere ez",

3
frontend/src/assets/i18n/de.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Keine",

3
frontend/src/assets/i18n/en.json
View File

@ -626,7 +626,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "None",

3
frontend/src/assets/i18n/es.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "Debe proporcionar al menos una fuente.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "Debe proporcionar al menos una opción.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Debe proporcionar al menos una opción."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Debe proporcionar al menos una opción.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Ninguno",

3
frontend/src/assets/i18n/gr.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Κανένα",

3
frontend/src/assets/i18n/hr.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "Mora biti naveden barem jedan izvor.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "Mora biti navedena barem jedna opcija.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Mora biti navedena barem jedna opcija."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Mora biti navedena barem jedna opcija.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Niti jedan",

3
frontend/src/assets/i18n/pl.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "Należy podać co najmniej jedno źródło.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "Należy podać co najmniej jedną opcję.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Należy podać co najmniej jedną opcję."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Należy podać co najmniej jedną opcję.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Brak",

3
frontend/src/assets/i18n/pt.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "Deve ser fornecida pelo menos uma fonte.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "Deve haver pelo menos uma opção fornecida.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Deve haver pelo menos uma opção fornecida."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "Deve haver pelo menos uma opção fornecida.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Nenhum",

3
frontend/src/assets/i18n/sk.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Žiadny",

3
frontend/src/assets/i18n/sr.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Nijedan",

3
frontend/src/assets/i18n/tr.json
View File

@ -628,7 +628,8 @@
"ERROR-MESSAGES": {
"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
"FIELD-RADIO-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided."
"FIELD-SELECT-AT-LEAST-ONE-REQUIRED": "There must be at least one option provided.",
"SECTION-AT-LEAST-ONE-REQUIRED": "There must be at least one section provided."
},
"DEFAULT-VALUES": {
"NONE": "Hiç",