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

added form validation error state on description template save

This commit is contained in:
CITE\spapacharalampous 2024-08-12 12:00:41 +03:00
parent 98f6a70067
commit 2985c853b4
7 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -146,13 +146,15 @@
<div class="row sticky-top table-container" style="top : 7em;">
<description-template-table-of-contents class="toc-pane-container col" style="margin-bottom: 2em;"
[links]="toCEntries"
[itemSelected]="selectedTocEntry"
[viewOnly]="formGroup.disabled"
[colorizeInvalid]="colorizeInvalid"
[showErrors]="showErrors"
(dataNeedsRefresh)="onDataNeedsRefresh($event)"
(itemClick)="displayItem($event)"
(createEntry)="addNewEntry($event)"
(removeEntry)="onRemoveEntry($event)"
[itemSelected]="selectedTocEntry"
[viewOnly]="formGroup.disabled"
(dataNeedsRefresh)="onDataNeedsRefresh($event)"
[colorizeInvalid]="colorizeInvalid">
>
</description-template-table-of-contents>
</div>
</div>
@ -276,7 +278,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 [disabled]="!formGroup.valid" *ngIf="!formGroup.disabled && formGroup.get('status').value!=finalized" mat-raised-button class="template_action_btn save-btn" type="button">
<button *ngIf="!formGroup.disabled && formGroup.get('status').value!=finalized" 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>
@ -286,8 +288,8 @@
</span>
</button>
<mat-menu #menuSave="matMenu">
<button [disabled]="!formGroup.valid" mat-menu-item (click)="saveWithClose(true)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button [disabled]="!formGroup.valid" mat-menu-item (click)="saveWithClose(false)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
<button mat-menu-item (click)="saveWithClose(true)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<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()">

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

@ -72,6 +72,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
isNewVersion = false;
isClone = false;
showErrors: boolean = false;
steps: QueryList<CdkStep>;
toCEntries: ToCEntry[];
selectedTocEntry: ToCEntry;
@ -253,7 +254,10 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
this.descriptionTemplateService.persist(formData)
.pipe(takeUntil(this._destroyed)).subscribe(
complete => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(complete),
error => this.onCallbackError(error)
error => {
this.onCallbackError(error);
if (error.status == 400) this.showErrors = true;
}
);
} else if (this.isNewVersion == true && this.isNew == false && this.isClone == false) {
const formData = this.formService.getValue(this.formGroup.value) as NewVersionDescriptionTemplatePersist;
@ -269,7 +273,11 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
formSubmit(onSuccess?: (response) => void): void {
this.formService.removeAllBackEndErrors(this.formGroup);
this.formService.touchAllFormFields(this.formGroup);
if (!this.isFormValid()) {
this.showErrors = true;
this.uiNotificationService.snackBarNotification(
this.language.instant("GENERAL.BACKEND-ERRORS.MODEL-VALIDATION"), SnackBarNotificationLevel.Error);
return;
}

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

@ -8,6 +8,7 @@
[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links , id: ROOT_ID}"
[itemSelected]="itemSelected"
[viewOnly]="viewOnly"
[showErrors]="showErrors"
(dataNeedsRefresh)="onDataNeedsRefresh()"
[DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX"
[overContainerId]="overcontainer"

2
frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.ts
View File

@ -21,7 +21,7 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
@Input() itemSelected: ToCEntry;
@Input() colorizeInvalid: boolean = false;
@Input() viewOnly: boolean;
@Input() showErrors: boolean = false;
@Output() itemClick = new EventEmitter<ToCEntry>();
@Output() removeEntry = new EventEmitter<ToCEntry>();

22
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,6 +1,8 @@
<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))}" (click)="itemClicked(parentLink)" [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}" [id]="'TABLE_ENTRY'+parentLink.id">
<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}"
(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">
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
@ -41,7 +43,23 @@
<div class="docs-link mt-0">
<div [ngClass]="{'ml-3': link.type != tocEntryType.Page }">
<app-description-template-table-of-contents-internal-section [links]="link.subEntries" (itemClick)="itemClicked($event)" (removeEntry)="deleteEntry($event)" [parentLink]="link" [itemSelected]="itemSelected" (createFooEntry)="createNewEntry($event)" [viewOnly]="viewOnly" (dataNeedsRefresh)="onDataNeedsRefresh()" [DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX" [overContainerId]="overContainerId" [isDragging]="isDragging" [draggingItemId]="draggingItemId" [parentRootId]="parentRootId" [colorizeInvalid]="colorizeInvalid">
<app-description-template-table-of-contents-internal-section
[links]="link.subEntries"
[parentLink]="link"
[itemSelected]="itemSelected"
[viewOnly]="viewOnly"
[DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX"
[overContainerId]="overContainerId"
[isDragging]="isDragging"
[draggingItemId]="draggingItemId"
[parentRootId]="parentRootId"
[colorizeInvalid]="colorizeInvalid"
[showErrors]="showErrors"
(itemClick)="itemClicked($event)"
(removeEntry)="deleteEntry($event)"
(createFooEntry)="createNewEntry($event)"
(dataNeedsRefresh)="onDataNeedsRefresh()"
>
</app-description-template-table-of-contents-internal-section>

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

@ -47,3 +47,7 @@ $yellow: var(--secondary-color);
.add-input-icon{
width: 20px;
}
.link-info-error {
color: red;
}

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

@ -32,6 +32,7 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
@Input() colorizeInvalid: boolean = false;
@Input() viewOnly: boolean;
@Input() showErrors: boolean = false;
constructor(
@Inject(DOCUMENT) private _document: Document) {