remove colorizeInvalid, fix table of content coloring on form error, validate form on click next

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

@@ -148,7 +148,6 @@
 							[links]="toCEntries"
 							[itemSelected]="selectedTocEntry"
 							[viewOnly]="viewOnly"
-							[colorizeInvalid]="colorizeInvalid"
 							[showErrors]="showErrors"
 							(dataNeedsRefresh)="onDataNeedsRefresh($event)"
 							(itemClick)="displayItem($event)"
@@ -188,7 +187,7 @@
                                                 <div class="col-12">
                                                     <button mat-button class="rounded-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
                                                 </div>
-                                                <mat-error *ngIf="selectedTocEntry.form.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
+                                                <mat-error *ngIf="selectedTocEntry.form.touched && selectedTocEntry.form.invalid">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
                                             }
 										</div>
 									</formGroup>
@@ -268,7 +267,8 @@
 				<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="rounded-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
+			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="validateStep(stepper?.selectedIndex); stepper?.next();">
+                <!-- [disabled]="!isStepCompleted(stepper?.selectedIndex)" -->
 				<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
 				<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
 			</button>

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

@@ -70,7 +70,6 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 	steps: QueryList<CdkStep>;
 	toCEntries: ToCEntry[];
 	selectedTocEntry: ToCEntry;
-	colorizeInvalid: boolean = false;
 	tocEntryEnumValues = ToCEntryType;
 
 	usersMap: Map<Guid, User> = new Map<Guid, User>();
@@ -445,11 +444,11 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 	}
 
 	validateStep(selectedIndex) {
-
+		if (selectedIndex === 1) {//form description
-        if (this.formGroup.invalid) {
+			if (this.formGroup.invalid) {
-            this.formService.touchAllFormFields(this.formGroup);
+                this.formService.touchAllFormFields(this.formGroup);
-            this.checkFormValidation(selectedIndex);
+			}
-        }
+		}
 	}
 
 
@@ -1259,19 +1258,6 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 		return (<UntypedFormArray>this.formGroup.get('definition').get('pages'))?.length;
 	}
 
-	checkFormValidation(index: number) {
-        switch(index){
-            case 0: {
-                this.colorizeInvalid = true;
-                break;
-            }
-            case 1: {
-                this.showErrors = true;
-                break;
-            }
-        }
-	}
-
 	get progressStyle() {
 		const diff = 3;
 

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

@@ -16,7 +16,6 @@
 			[draggingItemId]="draggingItemId"
 			[parentRootId]="ROOT_ID"
 			style="padding-right: 1em;"
-			[colorizeInvalid]="colorizeInvalid"
 			>
 		</app-description-template-table-of-contents-internal-section>
 		<div class="top-scroller table-scroller" [hidden]="!isDragging">

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

@@ -19,7 +19,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
 
 	@Input() links: ToCEntry[];
 	@Input() itemSelected: ToCEntry;
-	@Input() colorizeInvalid: boolean = false;
 	@Input() viewOnly: boolean;
 	@Input() showErrors: boolean = false;
 

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

@@ -3,8 +3,10 @@
 		<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)), 
+                'text-danger': parentLink.form?.touched && parentLink.form?.invalid,
-                'link-info-error': showErrors && !parentLink?.form?.valid
+
+                'link-info-error': showErrors && parentLink?.form?.invalid
+                
             }" 
 			(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}}
@@ -57,7 +59,6 @@
 						[isDragging]="isDragging" 
 						[draggingItemId]="draggingItemId" 
 						[parentRootId]="parentRootId" 
-						[colorizeInvalid]="colorizeInvalid"
 						[showErrors]="showErrors"
 						(itemClick)="itemClicked($event)" 
 						(removeEntry)="deleteEntry($event)" 
@@ -71,7 +72,7 @@
 					<ng-container *ngIf="!isDragging">
 
 						<ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast  && (!viewOnly)">
-							<button mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})">
+							<button mat-button (click)="createNewEntry({childType:link.type,parent:parentLink})">
 								<ng-container [ngSwitch]="link.type">
 									<ng-container *ngSwitchCase="tocEntryType.Section">
 										<div class="d-flex" style="align-items: center;">
@@ -110,7 +111,7 @@
 	<ng-container *ngIf="parentLink?.type != tocEntryType.FieldSet && !viewOnly && parentLink?.id == itemSelected?.id" >
 		<div *ngIf="parentLink?.type == tocEntryType.Page; else notAPage" class="docs-link mt-0">
 			<div class="ml-3">
-				<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
+				<button mat-button style="display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
 					<div class="d-flex" style="align-items: center;">
 						<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
 						<!-- Create new subsection -->
@@ -123,13 +124,13 @@
 			<div *ngIf="!links; else withSubItems" class="docs-link mt-0">
 				<div class="ml-3">
 					<!-- Give option to generate fieldset (only if parent is section) -->
-					<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
+					<button *ngIf="parentLink.type == tocEntryType.Section" mat-button (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
 						<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: -0.2em;" class="add-input-icon">
 						{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
 					</button>
 
 					<!-- Give option to generate section -->
-					<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
+					<button mat-button style="display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
 						<!-- Subsection + -->
 
 						<div class="d-flex" style="align-items: center;">
@@ -147,7 +148,7 @@
 				<div class="ml-3">
 					<ng-container [ngSwitch]="linksType">
 						<ng-container *ngSwitchCase="tocEntryType.Section">
-							<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
+							<button mat-button style="display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
 								<div class="d-flex" style="align-items: center;">
 									<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
 									<!-- Create new subsection -->
@@ -156,7 +157,7 @@
 							</button>
 						</ng-container>
 						<ng-container *ngSwitchCase="tocEntryType.FieldSet">
-							<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
+							<button *ngIf="parentLink.type == tocEntryType.Section" mat-button  (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
 								<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: -0.2em;" class="add-input-icon">
 								{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
 							</button>
@@ -171,7 +172,7 @@
 
 	<!-- Only for the page -->
 	<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly">
-		<button mat-button class="mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
+		<button mat-button class="mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" >
 			<!-- <mat-icon>add</mat-icon>  -->
 			<div class="d-flex" style="align-items: center;">
 				<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>

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

@@ -29,7 +29,6 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
 	@Input() draggingItemId: string;
 	@Input() parentRootId: string;
 
-	@Input() colorizeInvalid: boolean = false;
 
 	@Input() viewOnly: boolean;
 	@Input() showErrors: boolean = false;
@@ -102,83 +101,4 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
 		return tocEntryFound ? tocEntryFound : null;
 	}
 
-
-
-	colorError(): boolean {
-
-		if (!this.colorizeInvalid) return false;
-
-		const form = this.parentLink.form;
-		if ((!form || form.valid || !form.touched) && this.parentLink.type !== this.tocEntryType.Page) return false;
-
-		const allFieldsAreTouched = this.allFieldsAreTouched(form);
-
-		//fieldset may have errros that are inside its controls and not in the fieldsetFormGroup
-		if (this.parentLink.type === this.tocEntryType.FieldSet && allFieldsAreTouched) return true;
-
-		if (form.errors && allFieldsAreTouched) return true;
-
-		//check if page has sections
-		if (this.parentLink.type === this.tocEntryType.Page && allFieldsAreTouched) {
-			const rootForm = form.root;
-			if (rootForm) {
-				const sections = rootForm.get('sections') as UntypedFormArray;
-				if (!sections.controls.find(section => section.get('page').value === this.parentLink.id)) {
-					return true;
-				}
-			}
-		}
-
-
-		//checking first child form controls if have errors
-		let hasErrors = false;
-		if (allFieldsAreTouched) {
-			if (form instanceof UntypedFormGroup) {
-				const formGroup = form as UntypedFormGroup;
-
-				const controls = Object.keys(formGroup.controls);
-
-				controls.forEach(control => {
-					if (formGroup.get(control).errors) {
-						hasErrors = true;
-					}
-				})
-
-			}
-		}
-
-		return hasErrors;
-	}
-
-
-	allFieldsAreTouched(aControl: AbstractControl) {//auto na testaroume
-
-		if (!aControl || aControl.untouched) return false;
-
-		if (aControl instanceof UntypedFormControl) {
-			return aControl.touched;
-		} else if (aControl instanceof UntypedFormGroup) {
-			const controlKeys = Object.keys((aControl as UntypedFormGroup).controls);
-			let areAllTouched = true;
-			controlKeys.forEach(key => {
-				if (!this.allFieldsAreTouched(aControl.get(key))) {
-					areAllTouched = false;
-				}
-			})
-			return areAllTouched;
-
-		} else if (aControl instanceof UntypedFormArray) {
-			const controls = (aControl as UntypedFormArray).controls;
-			let areAllTouched = true;
-			controls.forEach(control => {
-				if (!this.allFieldsAreTouched(control)) {
-					areAllTouched = false;
-				}
-			});
-			return areAllTouched;
-		}
-
-
-		return false;
-	}
 }