fix plan blueprint disabled drag handles, add strictly typed forms to description template editor(wip)

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

@@ -260,11 +260,22 @@
 
 
 						<li class="list-inline-item">
-							<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
+							<mat-checkbox 
+                                class="fieldset-checkbox-action-description-template-editor" 
+                                [formControl]="this.form.get('hasCommentField')" 
+                                [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate" 
+                            >
+                                {{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}
+                            </mat-checkbox>
 							<mat-error *ngIf="form.get('hasCommentField').hasError('backendError')">{{form.get('hasCommentField').getError('backendError').message}}</mat-error>
 						</li>
 						<li class="list-inline-item">
-							<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasMultiplicity')" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
+							<mat-checkbox 
+                                class="fieldset-checkbox-action-description-template-editor" 
+                                [formControl]="this.form.get('hasMultiplicity')" 
+                                (change)="onIsMultiplicityEnabledChange($event)" 
+                                [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" 
+                            >
 								{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
 							</mat-checkbox>
 						</li>
@@ -272,9 +283,30 @@
 							<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
 							<mat-menu #menu="matMenu">
 								<!-- TODO to check -->
-								<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>
+								<mat-checkbox 
-								<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox>
+                                    class="mat-menu-item" 
-								<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox>
+                                    [disabled]="viewOnly" 
+                                    (click)="$event.stopPropagation()" 
+                                    [(ngModel)]="showDescription"
+                                >
+                                    {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.DESCRIPTION' | translate}}
+                                </mat-checkbox>
+								<mat-checkbox 
+                                    class="mat-menu-item" 
+                                    [disabled]="viewOnly" 
+                                    (click)="$event.stopPropagation()" 
+                                    [(ngModel)]="showExtendedDescription"
+                                >
+                                    {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXTENDED-DESCRIPTION' | translate}}
+                                </mat-checkbox>
+								<mat-checkbox 
+                                    class="mat-menu-item" 
+                                    [disabled]="viewOnly" 
+                                    (click)="$event.stopPropagation()" 
+                                    [(ngModel)]="showAdditionalInfo"
+                                >
+                                    {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.ADDITIONAL-INFORMATION' | translate}}
+                                </mat-checkbox>
 							</mat-menu>
 						</li>
 					</ul>

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

@@ -22,7 +22,6 @@ import { DescriptionTemplateFieldSetPersist, DescriptionTemplateReferenceTypeFie
 import { DescriptionEditorModel } from '@app/ui/description/editor/description-editor.model';
 import { Description } from '@app/core/model/description/description';
 import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
-import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
 import { ReferenceType } from '@app/core/model/reference-type/reference-type';
 
 @Component({
@@ -66,7 +65,6 @@ export class DescriptionTemplateEditorFieldSetComponent extends BaseComponent im
 		public descriptionTemplateService: DescriptionTemplateService,
 		private configurationService: ConfigurationService,
 		public visibilityRulesService: VisibilityRulesService,
-		private referenceTypeService: ReferenceTypeService,
 	) {
 		super();
 	}

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

@@ -136,7 +136,7 @@
 				</div>
 			</div>
 		</mat-step>
-		<mat-step [label]="fromStepperLabel" [completed]="formGroup.disabled || formGroup.valid">
+		<mat-step [label]="fromStepperLabel" [completed]="viewOnly || formGroup.valid">
 			<div class="row pr-4">
 
 				<!-- TABLE -->
@@ -268,7 +268,7 @@
 				<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)="validateStep(stepper?.selectedIndex); stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
+			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="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

@@ -38,7 +38,7 @@ import { Guid } from '@common/types/guid';
 import { TranslateService } from '@ngx-translate/core';
 import { map, takeUntil } from 'rxjs/operators';
 import { GENERAL_ANIMATIONS, STEPPER_ANIMATIONS } from './animations/animations';
-import { DescriptionTemplateEditorModel, DescriptionTemplateFieldEditorModel, DescriptionTemplateFieldSetEditorModel, DescriptionTemplatePageEditorModel, DescriptionTemplateSectionEditorModel, UserDescriptionTemplateEditorModel } from './description-template-editor.model';
+import { DescriptionTemplateEditorModel, DescriptionTemplateFieldEditorModel, DescriptionTemplateFieldSetEditorModel, DescriptionTemplateForm, DescriptionTemplatePageEditorModel, DescriptionTemplateSectionEditorModel, UserDescriptionTemplateEditorModel } from './description-template-editor.model';
 import { DescriptionTemplateEditorResolver } from './description-template-editor.resolver';
 import { DescriptionTemplateEditorService } from './description-template-editor.service';
 import { NewEntryType, ToCEntry, ToCEntryType } from './table-of-contents/description-template-table-of-contents-entry';
@@ -59,7 +59,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 
 	@ViewChild('stepper') stepper: MatStepper;
 
-	formGroup: UntypedFormGroup = null;
+	formGroup: FormGroup<DescriptionTemplateForm> = null;
 	item: DescriptionTemplate;
 	showInactiveDetails = false;
 	finalized: DescriptionTemplateStatus.Finalized;
@@ -260,7 +260,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 
 	persistEntity(onSuccess?: (response) => void): void {
 		if (!this.isNewVersion) {
-			const formData = this.formService.getValue(this.formGroup.value) as DescriptionTemplatePersist;
+			const formData = JSON.parse(JSON.stringify(this.formGroup.value)) as DescriptionTemplatePersist;
 			formData.code = this.formGroup.get('code').getRawValue();
 
 			this.descriptionTemplateService.persist(formData)
@@ -272,7 +272,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 					}
 				);
 		} else if (this.isNewVersion == true && this.isNew == false && this.isClone == false) {
-			const formData = this.formService.getValue(this.formGroup.value) as NewVersionDescriptionTemplatePersist;
+			const formData = JSON.parse(JSON.stringify(this.formGroup.value)) as NewVersionDescriptionTemplatePersist;
 
 			this.descriptionTemplateService.newVersion(formData)
 				.pipe(takeUntil(this._destroyed)).subscribe(
@@ -309,8 +309,8 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 	}
 
 	public delete() {
-		const value = this.formGroup.value;
+		const id = this.formGroup.controls.id.value;
-		if (value.id) {
+		if (id) {
 			const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
 				maxWidth: '300px',
 				data: {
@@ -321,7 +321,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
 			});
 			dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
 				if (result) {
-					this.descriptionTemplateService.delete(value.id).pipe(takeUntil(this._destroyed))
+					this.descriptionTemplateService.delete(id).pipe(takeUntil(this._destroyed))
 						.subscribe(
 							complete => this.onCallbackDeleteSuccess(),
 							error => this.onCallbackError(error)

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

@@ -1,4 +1,4 @@
-import { FormArray, FormControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
+import { FormArray, FormControl, FormGroup, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { DescriptionTemplateFieldDataExternalDatasetType } from "@app/core/common/enum/description-template-field-data-external-dataset-type";
 import { DescriptionTemplateFieldType } from "@app/core/common/enum/description-template-field-type";
 import { DescriptionTemplateFieldValidationType } from "@app/core/common/enum/description-template-field-validation-type";
@@ -14,6 +14,20 @@ import { Validation, ValidationContext } from "@common/forms/validation/validati
 import { Guid } from "@common/types/guid";
 import { EditorCustomValidators } from "./custom-validators/editor-custom-validators";
 
+export interface DescriptionTemplateForm {
+    id: FormControl<Guid>;
+	hash: FormControl<string>;
+    label: FormControl<string>;
+	code: FormControl<string>;
+	description: FormControl<string>;
+	language: FormControl<string>;
+	type: FormControl<Guid>;
+	status: FormControl<DescriptionTemplateStatus>;
+	definition: FormGroup<DescriptionTemplateDefinitionForm>;
+	users: FormArray<FormGroup<UserDescriptionTemplateForm>>
+	permissions: FormControl<string[]>;
+}
+
 export class DescriptionTemplateEditorModel extends BaseEditorModel implements DescriptionTemplatePersist {
 	label: string;
 	code: string;
@@ -45,7 +59,7 @@ export class DescriptionTemplateEditorModel extends BaseEditorModel implements D
 		return this;
 	}
 
-	buildForm(context: ValidationContext = null, disabled: boolean = false): UntypedFormGroup {
+	buildForm(context: ValidationContext = null, disabled: boolean = false): FormGroup<DescriptionTemplateForm> {
 		if (context == null) { context = this.createValidationContext(); }
 
 		return this.formBuilder.group({
@@ -114,6 +128,10 @@ export class DescriptionTemplateEditorModel extends BaseEditorModel implements D
 
 }
 
+export interface UserDescriptionTemplateForm {
+    userId: FormControl<Guid>;
+    role: FormControl<UserDescriptionTemplateRole>;
+}
 export class UserDescriptionTemplateEditorModel implements UserDescriptionTemplatePersist {
 	userId?: Guid;
 	role?: UserDescriptionTemplateRole;
@@ -136,7 +154,7 @@ export class UserDescriptionTemplateEditorModel implements UserDescriptionTempla
 		context?: ValidationContext,
 		disabled?: boolean,
 		rootPath?: string
-	}): UntypedFormGroup {
+	}): FormGroup<UserDescriptionTemplateForm> {
 		let { context = null, disabled = false, rootPath } = params ?? {}
 		if (context == null) {
 			context = UserDescriptionTemplateEditorModel.createValidationContext({
@@ -187,6 +205,11 @@ export class UserDescriptionTemplateEditorModel implements UserDescriptionTempla
 
 }
 
+
+export interface DescriptionTemplateDefinitionForm {
+    pages: FormArray<FormGroup<DescriptionTemplatePageForm>>;
+}
+
 export class DescriptionTemplateDefinitionEditorModel implements DescriptionTemplateDefinitionPersist {
 	pages: DescriptionTemplatePageEditorModel[] = [];
 
@@ -259,6 +282,13 @@ export class DescriptionTemplateDefinitionEditorModel implements DescriptionTemp
 
 }
 
+export interface DescriptionTemplatePageForm{
+    id: FormControl<string>;
+    ordinal: FormControl<number>;
+    title: FormControl<string>;
+    sections: FormArray<FormGroup<DescriptionTemplateSectionForm>>;
+}
+
 export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePagePersist {
 	id: string;
 	ordinal: number;
@@ -364,6 +394,14 @@ export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePa
 
 }
 
+export interface DescriptionTemplateSectionForm {
+    id: FormControl<string>;
+	ordinal: FormControl<number>;
+	title: FormControl<string>;
+	description: FormControl<string>;
+	sections: FormArray<FormGroup<DescriptionTemplateSectionForm>>;
+	fieldSets: FormArray<FormGroup<DescriptionTemplateFieldSetForm>>;
+}
 export class DescriptionTemplateSectionEditorModel implements DescriptionTemplateSectionPersist {
 	id: string;
 	ordinal: number;
@@ -487,6 +525,18 @@ export class DescriptionTemplateSectionEditorModel implements DescriptionTemplat
 
 }
 
+export interface DescriptionTemplateFieldSetForm {
+    id: FormControl<string>;
+	ordinal: FormControl<number>;
+	title: FormControl<string>;
+	description: FormControl<string>;
+	extendedDescription: FormControl<string>;
+	additionalInformation: FormControl<string>;
+	multiplicity: FormGroup<DescriptionTemplateMultiplicityForm>;
+	hasMultiplicity: FormControl<boolean>;
+	hasCommentField: FormControl<boolean>;
+	fields: FormArray<FormGroup<DescriptionTemplateFieldForm>>;
+}
 export class DescriptionTemplateFieldSetEditorModel implements DescriptionTemplateFieldSetPersist {
 	id: string;
 	ordinal: number;
@@ -615,6 +665,12 @@ export class DescriptionTemplateFieldSetEditorModel implements DescriptionTempla
 	}
 }
 
+export interface DescriptionTemplateMultiplicityForm {
+    min: FormControl<number>;
+	max: FormControl<number>;
+	placeholder: FormControl<string>;
+	tableView: FormControl<boolean>;
+}
 export class DescriptionTemplateMultiplicityEditorModel implements DescriptionTemplateMultiplicityPersist {
 	min: number;
 	max: number;
@@ -700,6 +756,17 @@ export class DescriptionTemplateMultiplicityEditorModel implements DescriptionTe
 // Field Editor Model
 //
 //
+
+export interface DescriptionTemplateFieldForm {
+    id: FormControl<string>;
+	ordinal: FormControl<number>;
+	semantics: FormControl<string[]>;
+	defaultValue: FormGroup<DescriptionTemplateDefaultValueForm>;
+	visibilityRules: FormArray<FormGroup<DescriptionTemplateRuleForm>>;
+	validations: FormControl<DescriptionTemplateFieldValidationType[]>;
+	includeInExport: FormControl<boolean>;
+	data: FormGroup<DescriptionTemplateLabelDataForm>;
+} 
 export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateFieldPersist {
 	id: string;
 	ordinal: number;
@@ -892,6 +959,12 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
 	}
 }
 
+export interface DescriptionTemplateDefaultValueForm {
+    target: FormControl<string>;
+	textValue: FormControl<string>;
+	dateValue: FormControl<Date>;
+	booleanValue: FormControl<boolean>;
+}
 export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTemplateDefaultValuePersist {
 	target: string;
 	textValue: string;
@@ -969,6 +1042,13 @@ export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTe
 	}
 }
 
+export interface DescriptionTemplateRuleForm {
+    target: FormControl<string>;
+	textValue: FormControl<string>;
+	dateValue: FormControl<Date>;
+	booleanValue: FormControl<boolean>;
+}
+
 export class DescriptionTemplateRuleEditorModel implements DescriptionTemplateRulePersist {
 	target: string;
 	textValue: string;
@@ -1049,6 +1129,10 @@ export class DescriptionTemplateRuleEditorModel implements DescriptionTemplateRu
 	}
 }
 
+export interface DescriptionTemplateLabelDataForm {
+	label: FormControl<string>;
+	fieldType: FormControl<DescriptionTemplateFieldType>;
+}
 export class DescriptionTemplateLabelDataEditorModel implements DescriptionTemplateLabelDataPersist {
 	label: string;
 	fieldType: DescriptionTemplateFieldType;
@@ -1470,6 +1554,7 @@ export class DescriptionTemplateRadioBoxOptionEditorModel implements Description
 // Select Field
 //
 //
+
 export class DescriptionTemplateSelectDataEditorModel extends DescriptionTemplateLabelDataEditorModel implements DescriptionTemplateSelectDataPersist {
 	options: DescriptionTemplateSelectOptionEditorModel[] = [];
 	multipleSelect: boolean = false;
@@ -1625,6 +1710,10 @@ export class DescriptionTemplateSelectOptionEditorModel implements DescriptionTe
 }
 
 
+export interface DescriptionTemplateUploadDataForm {
+    types: FormArray<LabelValueForm>;
+	maxFileSizeInMB: FormControl<number>;
+}
 //
 //
 // Upload Field
@@ -1714,6 +1803,7 @@ export class DescriptionTemplateUploadDataEditorModel extends DescriptionTemplat
 	}
 }
 
+
 export class DescriptionTemplateUploadOptionEditorModel implements DescriptionTemplateUploadOptionPersist {
 	label: string;
 	value: string;
@@ -1784,3 +1874,8 @@ export class DescriptionTemplateUploadOptionEditorModel implements DescriptionTe
 		})
 	}
 }
+
+export interface LabelValueForm extends FormGroup<{
+    label: FormControl<string>;
+	value: FormControl<string>;
+}>{}

frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html

@@ -42,7 +42,7 @@
 								<mat-error *ngIf="formGroup?.get('definition')?.touched && formGroup.get('definition').get('sections').hasError('planBlueprintSystemFieldRequired')"> {{'PLAN-BLUEPRINT-EDITOR.SYSTEM-FIELDS-REQUIRED' | translate}} </mat-error>
 							</h4>
 							<div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)">
-								<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled">
+								<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="hideEditActions">
 									<div class="col-12">
 										<mat-card class="pt-3 pb-3">
 											<mat-card-header>
@@ -50,7 +50,7 @@
 													<div class="col-auto d-flex">
 														<mat-card-title>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SECTION-PREFIX' | translate}} {{sectionIndex + 1}}</mat-card-title>
 													</div>
-													<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
+													<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
 
 													<div class="col-auto d-flex" *ngIf="!hideEditActions">
 														<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.REMOVE-SECTION' | translate}}" (click)="removeSection(sectionIndex)">
@@ -83,12 +83,12 @@
 												</div>
 												<div class="row">
 													<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
-														<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
+														<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="hideEditActions" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
 															<div class="col-auto section-options-vertical">
 																<div class="row justify-content-center">
 																	<div class="col-auto">
 																		<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{fieldIndex + 1}}</span>
-																		<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
+																		<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
 																	</div>
 																	<div class="col-auto" *ngIf="!hideEditActions">
 																		<button mat-icon-button matTooltip="{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)">
@@ -99,7 +99,7 @@
 															</div>
 															<div class="col-auto pr-0 section-options-horizontal">
 																	<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span>
-																	<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+																	<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 															</div>
 															<div class="col">
 																<div class="row align-items-center">
@@ -238,13 +238,13 @@
 
 												<div class="row">
 													<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
-														<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()">
+														<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="hideEditActions" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()">
 
 															<div class="col-auto section-options-vertical">
 																<div class="row justify-content-center">
 																	<div class="col-auto">
 																		<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
-																		<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
+																		<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
 																	</div>
 																	<div class="col-auto" *ngIf="!hideEditActions">
 																		<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)">
@@ -255,7 +255,7 @@
 															</div>
 															<div class="col-auto pr-0 section-options-horizontal">
 																	<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
-																	<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+																	<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': hideEditActions}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 															</div>
 
 															<div class="col">