From 1a2a93a95f7ea384975d0921c2416fc4add4d3c4 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Fri, 16 Jun 2023 14:36:24 +0300
Subject: [PATCH] #8738 - Disable input fields in finalised DMPs/datasets. 1.
 dataset-editor.component.html & form-composite-field.component.html &
 form-field.component.html & form-section.component.html: Added [editable]
 parameter input in <rich-text-editor-component> or [disabled] attribute in
 inputs, buttons, <ngx-dropzone> and <mat-select> to disable then when form is
 disabled & do not add "pointer" class when form is disabled. 2.
 form-field.component.ts: For DatasetIdentifier and Validation view styles,
 when removing and re-adding control, check if form was disabled and disable
 it again. 3. form-section.component.ts: In method "addMultipleField()",
 return without doing anything when form is disabled.

---
 .../dataset-editor.component.html             |  3 ++-
 .../form-composite-field.component.html       |  6 +++---
 .../form-field/form-field.component.html      | 20 +++++++++++--------
 .../form-field/form-field.component.ts        |  8 ++++++++
 .../form-section/form-section.component.html  | 10 +++++-----
 .../form-section/form-section.component.ts    |  3 +++
 6 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
index a7be0544d..cb8dab53d 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
@@ -32,7 +32,8 @@
 					<rich-text-editor-component	[parentFormGroup]="formGroup" [controlName]="'description'"
 												[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
 												[wrapperClasses]="'full-width editor ' +
-													((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')">
+													((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')"
+												   [editable]="!formGroup.get('description').disabled">
 					</rich-text-editor-component>
 					<div [class]="(formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
 						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
index 24f35ac7a..471e5623b 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
@@ -10,7 +10,7 @@
 					<app-form-field class="align-self-center col" [form]="form.get('fields')['controls'][0]"
 									[datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
 					<div *ngIf="showDelete" class="col-auto align-self-center">
-						<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
+						<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="form.get('fields')['controls'][0].disabled">
 							<mat-icon>delete</mat-icon>
 						</button>
 					</div>
@@ -64,10 +64,10 @@
 		<td *ngIf="this.visibilityRulesService.checkElementVisibility(this.fieldFormGroup.get('id').value)" class="text-wrap">{{fieldFormGroup.getRawValue() | fieldValue | translate}}</td>
 	</ng-container>
 	<td class="actions">
-		<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()">
+		<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()" [disabled]="form.disabled">
 			<mat-icon>edit</mat-icon>
 		</button>
-		<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
+		<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="form.disabled">
 			<mat-icon>delete</mat-icon>
 		</button>
 	</td>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
index ccfc2e038..e24890e11 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
@@ -114,7 +114,8 @@
 									[placeholder]="form.get('data').value.label"
 									[required]="form.get('validationRequired').value"
 									[wrapperClasses]="'full-width editor ' +
-														((form.get('validationRequired').value && form.get('value').touched && form.get('value').hasError('required')) ? 'required' : '')">
+														((form.get('validationRequired').value && form.get('value').touched && form.get('value').hasError('required')) ? 'required' : '')"
+									[editable]="!form.get('value').disabled">
 		</rich-text-editor-component>
 		<div [class]="(form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched) ? 'visible' : 'invisible'" class="col-12">
 			<div class="mat-form-field form-field-subscript-wrapper">
@@ -125,7 +126,7 @@
 	<ng-container *ngSwitchCase="datasetProfileFieldViewStyleEnum.Upload">
 		<div class="col-12 d-flex justify-content-center">
 			<ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)"
-						  [multiple]="false" [accept]="typesToString()">
+						  [multiple]="false" [accept]="typesToString()" [disabled]="form.get('value').disabled">
 				<ngx-dropzone-preview *ngIf="form.value.value && form.value.value.name" class="file-preview"
 									  [removable]="true" (removed)="onRemove()">
 					<ngx-dropzone-label class="file-label">{{ form.value.value.name }}</ngx-dropzone-label>
@@ -134,12 +135,13 @@
 		</div>
 		<div class="col-12 d-flex justify-content-center attach-btn">
 			<button *ngIf="!form.value.value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"
-					[disabled]="!!form.value.value">
+					[disabled]="!!form.value.value || form.get('value').disabled">
 				<mat-icon class="mr-2">upload</mat-icon>
 				<mat-label>{{ (form.get('data').value.label | translate)}}</mat-label>
 			</button>
 
-			<button *ngIf="form.value.value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn">
+			<button *ngIf="form.value.value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn"
+					[disabled]="form.get('value').disabled">
 				<mat-icon class="mr-2">download</mat-icon>
 				<mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
 			</button>
@@ -422,12 +424,14 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatasetIdentifier" class="col-12">
 		<div class="row" *ngIf="datasetIdInitialized">
 			<mat-form-field class="col-md-12">
-				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
+				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}"
+					   [required]="form.get('validationRequired').value" [disabled]="form.get('value').disabled">
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 				</mat-error>
 			</mat-form-field>
 			<mat-form-field class="col-md-12">
-				<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (form.get('validationRequired').value? ' *': '')">
+				<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (form.get('validationRequired').value? ' *': '')"
+							[disabled]="form.get('value').disabled">
 					<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
 						{{ type.name }}
 					</mat-option>
@@ -451,7 +455,7 @@
 	</div>
 
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Validation" class="col-12">
-		<div class="row">
+		<div class="row align-items-baseline">
 			<mat-form-field class="col-md-4">
 				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
 				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@@ -467,7 +471,7 @@
 					</mat-error>
 			</mat-form-field>
 			<div class="col-md-2">
-				<button type="button" mat-button class="lightblue-btn" (click)="validateId()">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
+				<button type="button" mat-button class="lightblue-btn" (click)="validateId()" [disabled]="form.get('value').disabled">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
 					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-error>
 				</div>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
index 23320fe92..dcd6039f9 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
@@ -314,8 +314,12 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 				break;
 			case DatasetProfileFieldViewStyle.DatasetIdentifier:
 				const value = this.form.get('value').value;
+				const disabled = this.form.disabled;
 				this.form.removeControl('value');
 				this.form.addControl('value', new DatasetIdModel(value).buildForm());
+				if(disabled) {
+					this.form.disable();
+				}
 				this.datasetIdInitialized = true;
 				break;
 			case DatasetProfileFieldViewStyle.Currency:
@@ -329,8 +333,12 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 				break;
 			case DatasetProfileFieldViewStyle.Validation:
 				const value1 = this.form.get('value').value;
+				const disabled1 = this.form.disabled;
 				this.form.removeControl('value');
 				this.form.addControl('value', new DatasetIdModel(value1).buildForm());
+				if(disabled1) {
+					this.form.disable();
+				}
 				//this.datasetIdInitialized = true;
 				break;
 		}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
index a71b95049..43c45f710 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
@@ -32,7 +32,7 @@
 							</div>
 							<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
 							 class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
-								<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)">
+								<span class="d-inline-flex align-items-center" [ngClass]="compositeFieldFormGroup.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
 									<button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled">
 										<mat-icon>add_circle</mat-icon>
 									</button>
@@ -44,7 +44,7 @@
 <!--								<input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">-->
 								<rich-text-editor-component [parentFormGroup]="compositeFieldFormGroup" [controlName]="'commentFieldValue'"
 															[id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate"
-															[wrapperClasses]="'mb-2'">
+															[wrapperClasses]="'mb-2'" [editable]="!compositeFieldFormGroup.get('commentFieldValue').disabled">
 								</rich-text-editor-component>
 <!--								<mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>-->
 							</div>
@@ -116,7 +116,7 @@
 								</ng-container>
 								<tr *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)">
 									<td [colSpan]="visibleControls(fieldsetEntry.form.get('fields')['controls']).length + 1" class="text-center">
-										<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)">
+										<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
 											<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
 												<mat-icon>add_circle</mat-icon>
 											</button>
@@ -139,7 +139,7 @@
 							</div>
 							<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)"
 							 class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
-								<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)">
+								<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
 									<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
 										<mat-icon>add_circle</mat-icon>
 									</button>
@@ -151,7 +151,7 @@
 <!--								<input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">-->
 								<rich-text-editor-component [parentFormGroup]="fieldsetEntry.form" [controlName]="'commentFieldValue'"
 															[id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate"
-															[wrapperClasses]="' mb-2'">
+															[wrapperClasses]="' mb-2'" [editable]="!fieldsetEntry.form.get('commentFieldValue').disabled">
 								</rich-text-editor-component>
 <!--								<mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>-->
 							</div>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
index a87a937a9..c7ca771b8 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
@@ -217,6 +217,9 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
 	}
 
 	addMultipleField(fieldsetIndex: number) {
+		if(this.form.get('compositeFields').get('' + fieldsetIndex).disabled) {
+			return;
+		}
 		const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as FormGroup).getRawValue();
 		const multiplicityItemsArray = (<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems')));