added error indication on dmp editor
This commit is contained in:
parent
218fab4fd1
commit
2c181bc460
|
@ -85,7 +85,7 @@
|
||||||
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
|
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
|
||||||
<!-- <div *ngIf="selectedBlueprint?.definition"> -->
|
<!-- <div *ngIf="selectedBlueprint?.definition"> -->
|
||||||
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
||||||
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1)}">{{section.label}}</li>
|
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
|
||||||
<ol class="descriptionsInSection">
|
<ol class="descriptionsInSection">
|
||||||
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
|
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
|
||||||
<div class="d-flex flex-direction-row">
|
<div class="d-flex flex-direction-row">
|
||||||
|
@ -318,3 +318,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -47,7 +47,7 @@ import { Guid } from '@common/types/guid';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
import { Observable, interval, of } from 'rxjs';
|
import { Observable, interval, of } from 'rxjs';
|
||||||
import { map, takeUntil } from 'rxjs/operators';
|
import { map, takeUntil } from 'rxjs/operators';
|
||||||
import { DmpEditorModel } from './dmp-editor.model';
|
import { DmpEditorModel, DmpFieldIndicator } from './dmp-editor.model';
|
||||||
import { DmpEditorResolver } from './dmp-editor.resolver';
|
import { DmpEditorResolver } from './dmp-editor.resolver';
|
||||||
import { DmpEditorService } from './dmp-editor.service';
|
import { DmpEditorService } from './dmp-editor.service';
|
||||||
import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component';
|
import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component';
|
||||||
|
@ -93,6 +93,8 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
|
||||||
valueAssign: (item: DmpBlueprint) => item.id,
|
valueAssign: (item: DmpBlueprint) => item.id,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
sectionToFieldsMap: Map<string, DmpFieldIndicator> = new Map<string, DmpFieldIndicator>();
|
||||||
|
|
||||||
protected get canDelete(): boolean {
|
protected get canDelete(): boolean {
|
||||||
return !this.isDeleted && !this.isNew && (this.hasPermission(this.authService.permissionEnum.DeleteDmp) || this.item?.authorizationFlags?.some(x => x === AppPermission.DeleteDmp));
|
return !this.isDeleted && !this.isNew && (this.hasPermission(this.authService.permissionEnum.DeleteDmp) || this.item?.authorizationFlags?.some(x => x === AppPermission.DeleteDmp));
|
||||||
}
|
}
|
||||||
|
@ -222,11 +224,25 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
|
||||||
const canedit = this.isNew ? this.authService.hasPermission(AppPermission.NewDmp) : this.item.authorizationFlags?.some(x => x === AppPermission.EditDmp) || this.authService.hasPermission(AppPermission.EditDmp);
|
const canedit = this.isNew ? this.authService.hasPermission(AppPermission.NewDmp) : this.item.authorizationFlags?.some(x => x === AppPermission.EditDmp) || this.authService.hasPermission(AppPermission.EditDmp);
|
||||||
this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !canedit);
|
this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !canedit);
|
||||||
|
|
||||||
|
this.sectionToFieldsMap = this.prepareErrorIndication();
|
||||||
|
|
||||||
if (this.editorModel.status == DmpStatus.Finalized || this.isDeleted) {
|
if (this.editorModel.status == DmpStatus.Finalized || this.isDeleted) {
|
||||||
this.formGroup.disable();
|
this.formGroup.disable();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
prepareErrorIndication(): Map<string, DmpFieldIndicator> {
|
||||||
|
if (this.selectedBlueprint?.definition == null) return;
|
||||||
|
|
||||||
|
const sectionToFieldsMap: Map<string, DmpFieldIndicator> = new Map<string, DmpFieldIndicator>();
|
||||||
|
this.selectedBlueprint.definition.sections.forEach((section: DmpBlueprintDefinitionSection) => {
|
||||||
|
let value: DmpFieldIndicator = new DmpFieldIndicator(section);
|
||||||
|
sectionToFieldsMap.set(section.id.toString(), value);
|
||||||
|
});
|
||||||
|
|
||||||
|
return sectionToFieldsMap;
|
||||||
|
}
|
||||||
|
|
||||||
refreshData(): void {
|
refreshData(): void {
|
||||||
this.getItem(this.editorModel.id, (data: Dmp) => this.prepareForm(data));
|
this.getItem(this.editorModel.id, (data: Dmp) => this.prepareForm(data));
|
||||||
}
|
}
|
||||||
|
@ -365,6 +381,26 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
|
||||||
this.resetScroll();
|
this.resetScroll();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hasErrors(sectionId: string): boolean {
|
||||||
|
const formControlBySection = this.sectionToFieldsMap?.get(sectionId);
|
||||||
|
if (formControlBySection == null || this.formGroup == null) return false;
|
||||||
|
|
||||||
|
for (let controlName of formControlBySection.fieldControlNames) {
|
||||||
|
if (this.isFormControlValid(controlName) === false ) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
isFormControlValid(controlName: string): boolean {
|
||||||
|
if (!this.formGroup?.get(controlName)) return true;
|
||||||
|
if (!this.formGroup.get(controlName).touched) return true;
|
||||||
|
|
||||||
|
return this.formGroup.get(controlName).valid;
|
||||||
|
}
|
||||||
|
|
||||||
private resetScroll() {
|
private resetScroll() {
|
||||||
if (document.getElementById('editor-form') != null) document.getElementById('editor-form').scrollTop = 0;
|
if (document.getElementById('editor-form') != null) document.getElementById('editor-form').scrollTop = 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import { FormArray, FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
|
import { FormArray, FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
|
||||||
import { DmpAccessType } from "@app/core/common/enum/dmp-access-type";
|
import { DmpAccessType } from "@app/core/common/enum/dmp-access-type";
|
||||||
import { DmpBlueprintFieldCategory } from "@app/core/common/enum/dmp-blueprint-field-category";
|
import { DmpBlueprintFieldCategory } from "@app/core/common/enum/dmp-blueprint-field-category";
|
||||||
|
import { DmpBlueprintSystemFieldType } from "@app/core/common/enum/dmp-blueprint-system-field-type";
|
||||||
import { DmpContactType } from "@app/core/common/enum/dmp-contact-type";
|
import { DmpContactType } from "@app/core/common/enum/dmp-contact-type";
|
||||||
import { DmpStatus } from "@app/core/common/enum/dmp-status";
|
import { DmpStatus } from "@app/core/common/enum/dmp-status";
|
||||||
import { DmpUserRole } from "@app/core/common/enum/dmp-user-role";
|
import { DmpUserRole } from "@app/core/common/enum/dmp-user-role";
|
||||||
import { DmpUserType } from "@app/core/common/enum/dmp-user-type";
|
import { DmpUserType } from "@app/core/common/enum/dmp-user-type";
|
||||||
import { IsActive } from "@app/core/common/enum/is-active.enum";
|
import { IsActive } from "@app/core/common/enum/is-active.enum";
|
||||||
import { DmpBlueprint, FieldInSection, ReferenceTypeFieldInSection } from "@app/core/model/dmp-blueprint/dmp-blueprint";
|
import { DmpBlueprint, DmpBlueprintDefinitionSection, ExtraFieldInSection, FieldInSection, ReferenceTypeFieldInSection, SystemFieldInSection } from "@app/core/model/dmp-blueprint/dmp-blueprint";
|
||||||
import { Dmp, DmpBlueprintValue, DmpBlueprintValuePersist, DmpContact, DmpContactPersist, DmpDescriptionTemplate, DmpDescriptionTemplatePersist, DmpPersist, DmpProperties, DmpPropertiesPersist, DmpReferenceDataPersist, DmpReferencePersist, DmpUser, DmpUserPersist } from "@app/core/model/dmp/dmp";
|
import { Dmp, DmpBlueprintValue, DmpBlueprintValuePersist, DmpContact, DmpContactPersist, DmpDescriptionTemplate, DmpDescriptionTemplatePersist, DmpPersist, DmpProperties, DmpPropertiesPersist, DmpReferenceDataPersist, DmpReferencePersist, DmpUser, DmpUserPersist } from "@app/core/model/dmp/dmp";
|
||||||
import { DmpReference } from "@app/core/model/dmp/dmp-reference";
|
import { DmpReference } from "@app/core/model/dmp/dmp-reference";
|
||||||
import { ReferencePersist } from "@app/core/model/reference/reference";
|
import { ReferencePersist } from "@app/core/model/reference/reference";
|
||||||
|
@ -731,3 +732,69 @@ export class DmpDescriptionTemplateEditorModel implements DmpDescriptionTemplate
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class DmpFieldIndicator {
|
||||||
|
|
||||||
|
private _fieldControlNames;
|
||||||
|
|
||||||
|
get fieldControlNames(): string[] {
|
||||||
|
return this._fieldControlNames;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(section: DmpBlueprintDefinitionSection) {
|
||||||
|
this._fieldControlNames = [];
|
||||||
|
|
||||||
|
if (section.hasTemplates) {
|
||||||
|
this._fieldControlNames.push(`descriptionTemplates.${section.id}`);
|
||||||
|
} else {
|
||||||
|
section.fields.forEach((field: FieldInSection) => {
|
||||||
|
switch (field.category) {
|
||||||
|
case DmpBlueprintFieldCategory.System:
|
||||||
|
this.buildSystemField(field as SystemFieldInSection);
|
||||||
|
break;
|
||||||
|
case DmpBlueprintFieldCategory.ReferenceType:
|
||||||
|
this.buildReferenceTypeField(field as ReferenceTypeFieldInSection);
|
||||||
|
break;
|
||||||
|
case DmpBlueprintFieldCategory.Extra:
|
||||||
|
this.buildExtraField(field as ExtraFieldInSection);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buildSystemField(field: SystemFieldInSection): void {
|
||||||
|
switch (field.systemFieldType) {
|
||||||
|
case DmpBlueprintSystemFieldType.Title:
|
||||||
|
this._fieldControlNames.push("label");
|
||||||
|
break;
|
||||||
|
case DmpBlueprintSystemFieldType.Description:
|
||||||
|
this._fieldControlNames.push("description");
|
||||||
|
break;
|
||||||
|
case DmpBlueprintSystemFieldType.Language:
|
||||||
|
this._fieldControlNames.push("language");
|
||||||
|
break;
|
||||||
|
case DmpBlueprintSystemFieldType.Contact:
|
||||||
|
this._fieldControlNames.push("properties.contacts");
|
||||||
|
break;
|
||||||
|
case DmpBlueprintSystemFieldType.AccessRights:
|
||||||
|
this._fieldControlNames.push("accessType");
|
||||||
|
break;
|
||||||
|
case DmpBlueprintSystemFieldType.User:
|
||||||
|
this._fieldControlNames.push("users");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buildReferenceTypeField(field: ReferenceTypeFieldInSection): void {
|
||||||
|
if (field.multipleSelect) {
|
||||||
|
this._fieldControlNames.push(`properties.dmpBlueprintValues.${field.id}.references`);
|
||||||
|
} else {
|
||||||
|
this._fieldControlNames.push(`properties.dmpBlueprintValues.${field.id}.reference`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buildExtraField(field: ExtraFieldInSection): void {
|
||||||
|
this._fieldControlNames.push(`properties.dmpBlueprintValues.${field.id}.fieldValue`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue