Merge remote-tracking branch 'origin/dmp-refactoring' into dmp-refactoring

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

frontend/src/app/ui/dashboard/dashboard.component.html

@@ -59,16 +59,30 @@
 							<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
 							<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
 								<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
-									<app-recent-edited-activity [isActive]="currentType == 'recent'" [includePlans]="true" [includeDescriptions]="true"></app-recent-edited-activity>
+									<app-recent-edited-activity 
+                                        [currentType]="currentType" 
+                                        [type]="ActivityListingType.Recent"
+                                    ></app-recent-edited-activity>
 								</mat-tab>
 								<mat-tab aria-label="drafts" label="{{'DASHBOARD.DRAFTS' | translate}}">
-									<app-recent-edited-activity [isActive]="currentType == 'drafts'" [includePlans]="true" [includeDescriptions]="true" [onlyDrafts]="true" type="drafts" [selectedType]="currentType"></app-recent-edited-activity>
+									<app-recent-edited-activity 
+                                        [currentType]="currentType" 
+                                        [type]="ActivityListingType.Drafts" 
+                                    ></app-recent-edited-activity>
 								</mat-tab>
 								<mat-tab aria-label="plans" label="{{'DASHBOARD.PLANS' | translate}}">
-									<app-recent-edited-activity [isActive]="currentType == 'plans'" [includePlans]="true" type="plans" [selectedType]="currentType"></app-recent-edited-activity>
+									<app-recent-edited-activity 
+                                        [currentType]="currentType" 
+                                        [type]="ActivityListingType.Plans" 
+                                    ></app-recent-edited-activity>
 								</mat-tab>
 								<mat-tab aria-label="descriptions" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
-									<app-recent-edited-activity [isActive]="currentType == 'descriptions'" [includeDescriptions]="true" type="descriptions" [selectedType]="currentType" [hasPlans]="this.hasPlans()" (addNewDescription)="addNewDescription($event)"></app-recent-edited-activity>
+									<app-recent-edited-activity 
+                                        [currentType]="currentType" 
+                                        [type]="ActivityListingType.Descriptions" 
+                                        [hasPlans]="this.hasPlans()" 
+                                        (addNewDescription)="addNewDescription($event)"
+                                    ></app-recent-edited-activity>
 								</mat-tab>
 							</mat-tab-group>
 						</div>

frontend/src/app/ui/dashboard/dashboard.component.ts

@@ -31,10 +31,12 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 	public dashboardStatistics: DashboardStatistics;
 	public grantCount = 0;
 	public organizationCount = 0;
-	currentType: string = "recent";
+	currentType: ActivityListingType = ActivityListingType.Recent;
 	newReleaseNotificationVisible = false;
 	isIntroCardVisible = true;
 
+    ActivityListingType = ActivityListingType;
+
 	constructor(
 		public routerUtils: RouterUtilsService,
 		private router: Router,
@@ -57,11 +59,7 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 	ngOnInit() {
 		this.route.queryParams.subscribe(params => {
 			let type = params['type'];
-			if (type || type == "recent" || (type == "drafts" && this.isAuthenticated()) || type == "plans" || type == "descriptions") {
+            this.currentType = type ??  ActivityListingType.Recent
-				this.currentType = type;
-			} else {
-				this.currentType = "recent";
-			}
 		});
 
 		this.analyticsService.trackPageView(AnalyticsService.Dashboard);
@@ -92,20 +90,13 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 	}
 
 	public get indexFromCurrentType() {
-		if (this.currentType == "recent") {
-			return 0;
-		}
-		if (this.currentType == "drafts") {
-			return 1;
-		}
-		if (this.currentType == "plans") {
-			return this.isAuthenticated() ? 2 : 1;
-		}
-		if (this.currentType == "descriptions") {
-			return this.isAuthenticated() ? 3 : 2;
-		}
 
-		return 0;
+        switch(this.currentType){
+            case ActivityListingType.Recent: return 0;
+            case ActivityListingType.Drafts: return 1;
+            case ActivityListingType.Plans: return this.isAuthenticated() ? 2 : 1;
+            case ActivityListingType.Descriptions: return this.isAuthenticated() ? 3 : 2;
+        }
 	}
 
 	public isAuthenticated(): boolean {
@@ -255,3 +246,10 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 		return true;
 	}
 }
+
+export enum ActivityListingType {
+    'Recent'= 'recent',
+    'Drafts' = 'drafts',
+    'Plans' = 'plans',
+    'Descriptions' = 'descriptions'
+}

frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts

@@ -1,5 +1,5 @@
 import { Location } from '@angular/common';
-import { Component, Input, OnInit, Output } from '@angular/core';
+import { Component, computed, effect, input, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
@@ -27,6 +27,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
 import { BehaviorSubject } from 'rxjs';
 import { debounceTime, map, takeUntil } from 'rxjs/operators';
 import { nameof } from 'ts-simple-nameof';
+import { ActivityListingType } from '../dashboard.component';
 
 @Component({
 	selector: 'app-recent-edited-activity',
@@ -43,15 +44,32 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 	pageSize: number = 5;
 	listingItems: RecentActivityItem[]= [];
 
-	@Input() type: string;
+	@Input() type: ActivityListingType = ActivityListingType.Recent;
-	@Input() selectedType: string;
-	@Input() includeDescriptions: boolean = false;
-	@Input() includePlans: boolean = false;
-	@Input() onlyDrafts: boolean = false;
 	@Input() hasPlans: boolean = false;
     
 	@Output() addNewDescription: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     
+    currentType = input<ActivityListingType>();
+    isActive = computed(() => this.currentType() === this.type);
+
+    get onlyDrafts(): boolean {
+        return this.type === ActivityListingType.Drafts;
+    }
+
+    get includeDescriptions(): boolean {
+        const activityListingTypes = [ActivityListingType.Recent, ActivityListingType.Drafts, ActivityListingType.Descriptions]
+        return activityListingTypes.includes(this.type);
+    }
+
+    get includePlans(): boolean {
+        const activityListingTypes = [ActivityListingType.Recent, ActivityListingType.Drafts, ActivityListingType.Plans]
+        return activityListingTypes.includes(this.type);
+    }
+	
+    get isDefault(): boolean {
+        return this.type === ActivityListingType.Recent;
+    }
+
 	get onlyPlans(): boolean {
 		return this.includePlans && !this.includeDescriptions;
 	} 
@@ -72,7 +90,6 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 
 	totalCount: number;
 	offsetLess: number = 0;
-	@Input() isActive: boolean = false;
 	
 	constructor(
 		private route: ActivatedRoute,
@@ -86,12 +103,17 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		private httpErrorHandlingService: HttpErrorHandlingService
 	) {
 		super();
+        effect(() => {
+            if(this.isActive()){  //on Type Changes
+                this.updateUrl();
+            }
+        })
 	}
 
 	ngOnInit() {
 		this.analyticsService.trackPageView(AnalyticsService.RecentEditedActivity);
 		this.route.queryParams.subscribe(params => {
-			if (this.isActive) {
+			if (this.isActive()) {
 				let page = (params['page'] === undefined) ? 0 : + params['page'];
 				this.currentPage = (page <= 0) ? 0 : page;
 
@@ -123,24 +145,20 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 			this.refresh()
 		});
 		
-		if (!this.formGroup.get('order').value) this.formGroup.get('order').setValue(this.order.UpdatedAt);
+		if (!this.formGroup.get('order').value){
+            this.formGroup.get('order').setValue(this.order.UpdatedAt);
+        }
         
 		this.formGroup.get('order').valueChanges
 		.pipe(takeUntil(this._destroyed))
-		.subscribe(x => this.refresh());
+		.subscribe(x => {this.refresh()});
 
 		this.refresh();
 	}
 
-	ngOnChanges() {
-		if (this.isActive) {
-			this.updateUrl();
-		}
-	}
-
 	updateUrl() {
 		let parametersArray: string[] = [
-			...( this.selectedType && this.type === this.selectedType ? ["type=" + this.selectedType] : []),
+			...( !this.isDefault && this.isActive() ? ["type=" + this.type] : []),
 			...(this.currentPage > 1 ? ["page=" + this.currentPage] : []),
 			...(this.formGroup.get("like").value ? ["keyword=" + this.formGroup.get("like").value] : [])
 		]