added form validation error state on description template save

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

@@ -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 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(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()">

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

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

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

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

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

@@ -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>();

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

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

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

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

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

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