description editor > table-of-content > error indication bug fix

dmp-frontend/src/app/ui/description/editor/description-editor.component.ts

@@ -576,6 +576,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 					const canedit = permissionPerSection && permissionPerSection[this.item.dmpDescriptionTemplate.sectionId.toString()] && permissionPerSection[this.item.dmpDescriptionTemplate.sectionId.toString()].some(x => x === AppPermission.EditDescription);
 					this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !canedit);
 					if (this.item.descriptionTemplate?.definition) this.visibilityRulesService.setContext(this.item.descriptionTemplate.definition, this.formGroup.get('properties'));
+					if (this.item.descriptionTemplate?.definition) this.pageToFieldSetMap = this.mapPageToFieldSet(this.item.descriptionTemplate);;
 
 					// this.selectedSystemFields = this.selectedSystemFieldDisabled();
 					this.descriptionEditorService.setValidationErrorModel(this.editorModel.validationErrorModel);
@@ -897,9 +898,6 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 				}
 			});
 			
-
-			this.checkPagesForErrors();
-
 		// // const labelSubscription =
 		// this.formGroup.get('label').valueChanges
 		// 	.pipe(takeUntil(this._destroyed))
@@ -948,20 +946,13 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
 				this.item.dmpDescriptionTemplate = this.item.dmp.dmpDescriptionTemplates.find(x => x.sectionId == sectionId && x.descriptionTemplateGroupId == descriptionTemplate.groupId);
 				this.formGroup.get('dmpDescriptionTemplateId').setValue(this.item.dmpDescriptionTemplate.id);
 				if (descriptionTemplate.definition) this.visibilityRulesService.setContext(this.item.descriptionTemplate.definition, this.formGroup.get('properties'));
-
+				if (descriptionTemplate.definition) this.pageToFieldSetMap = this.mapPageToFieldSet(this.item.descriptionTemplate);
 			});
 			// this.formGroup.removeControl('descriptionProfileDefinition');
 			// this.getDefinition(profiledId);
 		}
 	}
 	
-	checkPagesForErrors(): void {
-		//this.baseInfoPage = ...
-		
-		
-		this.pageToFieldSetMap = this.mapPageToFieldSet(this.item.descriptionTemplate);
-	}
-
 	mapPageToFieldSet(descriptionTemplate: DescriptionTemplate): Map<string, DescriptionFieldIndicator[]> {
 		const pageToFieldSetMap = new Map<string, DescriptionFieldIndicator[]>();
 

dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.ts

@@ -1,17 +1,18 @@
-import { Component, EventEmitter, Input, OnInit, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
 import { Guid } from '@common/types/guid';
 import { ToCEntry } from '../models/toc-entry';
 import { ToCEntryType } from '../models/toc-entry-type.enum';
 import { DescriptionFieldIndicator } from '../../description-editor.model';
+import { Observable, Subscription, map } from 'rxjs';
 
 @Component({
 	selector: 'table-of-contents-internal',
 	styleUrls: ['./table-of-contents-internal.scss'],
 	templateUrl: './table-of-contents-internal.html'
 })
-export class TableOfContentsInternal implements OnInit {
+export class TableOfContentsInternal implements OnInit, OnDestroy {
 
 	@Input() tocentries: ToCEntry[] = null;
 	@Input() selected: ToCEntry = null;
@@ -30,9 +31,12 @@ export class TableOfContentsInternal implements OnInit {
 	@Input() parentId: string;
 	@Input() parentMap: Map<string, DescriptionFieldIndicator[]> = new Map<string, DescriptionFieldIndicator[]>();
 	@Input() updatedMap: Map<string, DescriptionFieldIndicator[]> = new Map<string, DescriptionFieldIndicator[]>();
+	tocEntriesStateSubscriptions: Subscription[] = [];
+	tocEntriesStateMap: Map<string, boolean> = new Map<string, boolean>();
 
 	constructor() {
 	}
+	
 	ngOnInit(): void {
 		// console.log('component created' + JSON.stringify(this.tocentries));
 		if (this.tocentries) {
@@ -49,7 +53,7 @@ export class TableOfContentsInternal implements OnInit {
 			}
 
 			if (this.parentMap) {
-				this.updatedMap = this.updateMap(this.tocentries,  this.parentMap);
+				this.refreshErrorIndicators();			
 			}
 		}
 	}
@@ -65,6 +69,10 @@ export class TableOfContentsInternal implements OnInit {
 				}
 			}
 		}
+
+		if (changes.parentMap && this.parentMap) {
+				this.refreshErrorIndicators();			
+		}
 		// if (!this.isActive && this.links && this.links.length > 0) {
 		// 	this.links.forEach(link => {
 		// 		link.selected = false;
@@ -73,6 +81,27 @@ export class TableOfContentsInternal implements OnInit {
 		// }
 	}
 
+	ngOnDestroy(): void {
+		this.tocEntriesStateSubscriptions.forEach((errorSubscription: Subscription) => {
+			errorSubscription.unsubscribe();
+		});
+	}
+
+	refreshErrorIndicators(): void {
+		this.updatedMap = this.updateMap(this.tocentries,  this.parentMap);
+		for (let entry of this.tocentries) {
+			this.tocEntriesStateMap.set(entry.id, false);
+
+			this.tocEntriesStateSubscriptions.push(
+				this.propertiesFormGroup.statusChanges
+				.pipe(map(() => this.hasErrors(entry.id)))
+				.subscribe(next => {
+					this.tocEntriesStateMap.set(entry.id, next);
+				})
+			);
+		}
+	}
+
 	updateMap(entries: ToCEntry[], parentMap:Map<string, DescriptionFieldIndicator[]>): Map<string, DescriptionFieldIndicator[]> {
 		if (this.parentId == null) return parentMap;
 
@@ -92,7 +121,7 @@ export class TableOfContentsInternal implements OnInit {
 	}
 
 	hasErrors(entryId: string): boolean {
-		if (this.updatedMap.size == 0) return true;
+		if (this.updatedMap.size == 0) return false;
 
 		const fields: DescriptionFieldIndicator[] = this.updatedMap.get(entryId);
 
@@ -106,12 +135,14 @@ export class TableOfContentsInternal implements OnInit {
 		return false;
 	}
 
-	isFormFieldValid(formFildName: string):boolean {
+	isFormFieldValid(formFieldName: string):boolean {
-		if (this.propertiesFormGroup?.get(formFildName) == null) return true;
+		const formField = this.propertiesFormGroup?.get(formFieldName);
+		if (formField == null) return true;
 		
-		if (this.propertiesFormGroup.get(formFildName).touched === false) return true;
+		if (formField.dirty === false
+			&& formField.touched === false) return true;
 
-		return this.propertiesFormGroup.get(formFildName).valid;
+		return formField.valid;
 	}
 
 	toggleExpand(index) {
@@ -163,7 +194,7 @@ export class TableOfContentsInternal implements OnInit {
 			myClass['section'] = true;
 		}
 
-		if(this.hasErrors(entry.id)) {
+		if(this.tocEntriesStateMap?.get(entry.id) === true) {
 			myClass['text-danger'] = true;
 		}
 		return myClass;