From b68ede8cd7df3f4595386d2989431cc6f6eb2ccb Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Mon, 28 Feb 2022 18:08:38 +0200
Subject: [PATCH] #7518 & #7519: [Bug fix] in Required indication in Rich Text
 Area fields & editable general info on dataset template new version & date
 with time shown in dataset templates. 1. rich-text-editor.component.scss: Css
 for .editor-wrapper .disabled added. 2. rich-text-editor.component.ts: New
 "editable" Input() field added, to allow rich text area to be disabled and
 not editable. 3. dataset-profile-editor.component.html:    a. In
 <rich-text-editor-component> set
 [editable]="form.controls['description'].status !== 'DISABLED'"    b. #7518
 Show required message and css  in rich text area when there is error
 "required" and description is touched (not dirty) 4.
 dataset-profile-editor.component.ts: #7519 comment disable of form controls
 label (title), description and language. 5.
 dataset-profile-listing.component.html: #7519 Time added in created column of
 dataset templates. 6. dataset-editor.component.html &
 form-field.component.html: #7518 Show required message and css  in rich text
 area when there is error "required" and description is touched (not dirty).
 7. clone-dialog.component.html: Replaced <textarea> with
 <rich-text-editor-component> for description field. 8.
 clone-dialog.module.ts: Import RichTextEditorModule. 9.
 clone-dialog.component.ts: #7519 comment disable of form group label (title)
 10. styles.scss: Css for class .form-field-subscript-wrapper updated.

---
 .../rich-text-editor.component.scss            | 18 ++++++++++++++----
 .../rich-text-editor.component.ts              | 10 ++++++++--
 .../dataset-profile-editor.component.html      |  5 +++--
 .../editor/dataset-profile-editor.component.ts |  6 +++---
 .../dataset-profile-listing.component.html     |  2 +-
 .../dataset-editor.component.html              |  4 ++--
 .../clone-dialog/clone-dialog.component.html   | 11 ++++++-----
 .../clone-dialog/clone-dialog.component.ts     |  2 +-
 .../clone/clone-dialog/clone-dialog.module.ts  |  3 ++-
 .../form-field/form-field.component.html       |  8 +++++---
 dmp-frontend/src/styles.scss                   |  5 +++--
 11 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
index f33c65603..382affcdc 100644
--- a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
+++ b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
@@ -29,12 +29,22 @@
 	background-color: #fff;
 }
 
-.editor-wrapper:hover, ::ng-deep .angular-editor:hover {
-	border: 1px solid #000 !important;
+.editor-wrapper :not(.disabled) {
+	.editor-wrapper:hover, ::ng-deep .angular-editor:hover {
+		border: 1px solid #000 !important;
+	}
+
+	.editor-wrapper:focus-within, ::ng-deep .angular-editor:focus-within {
+		border: 1px solid #034459 !important;
+	}
 }
 
-.editor-wrapper:focus-within, ::ng-deep .angular-editor:focus-within {
-	border: 1px solid #034459 !important;
+.editor-wrapper .disabled {
+	color: rgba(0, 0, 0, 0.38);
+}
+
+.editor-wrapper .disabled ::ng-deep button {
+	pointer-events: none;
 }
 
 .required.editor-wrapper, .required .editor ::ng-deep .angular-editor {
diff --git a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
index 18a325348..ed45c1967 100644
--- a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
+++ b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
@@ -6,7 +6,8 @@ import {FormControl} from "@angular/forms";
 	selector: 'rich-text-editor-component',
 	template: `
 		<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
-			<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
+			<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
+							[config]="editorConfig" [formControlName]="controlName"
 							placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
 			<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
 		</div>
@@ -20,9 +21,10 @@ export class RichTextEditorComponent {
 	@Input() placeholder: string = "Enter text";
 	@Input() required: boolean = false;
 	@Input() wrapperClasses: string = "";
+	@Input() editable: boolean = true;
 
 	editorConfig: AngularEditorConfig = {
-		editable: true,
+		editable: this.editable,
 		spellcheck: true,
 		height: 'auto',
 		minHeight: '0',
@@ -58,4 +60,8 @@ export class RichTextEditorComponent {
 	get formInput(): FormControl {
 		return this.parentFormGroup.get(this.controlName);
 	}
+
+	ngAfterContentInit() {
+		this.editorConfig.editable = this.editable;
+	}
 }
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index 5bd1bce28..b2c78681a 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
@@ -159,9 +159,10 @@
 							<div class="full-width basic-info-input">
 								<rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
 															[placeholder]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'"
-															[wrapperClasses]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'required' : ''">
+															[wrapperClasses]="(form.get('description').touched && form.get('description').hasError('required')) ? 'required' : ''"
+															[editable]="form.controls['description'].status !== 'DISABLED'">
 								</rich-text-editor-component>
-								<div [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
+								<div [class]="(form.get('description').touched && form.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
 									<mat-error>
 										{{'GENERAL.VALIDATION.REQUIRED'| translate}}
 									</mat-error>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
index 0fc6b11de..04f2482ca 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
@@ -195,9 +195,9 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 								// this.isDeleted = this.masterItem.isActive === IsActive.Inactive;
 								this.form = this.dataModel.buildForm();
 								this.form.get('version').setValue(this.form.get('version').value + 1);
-								this.form.controls['label'].disable();
-								this.form.controls['description'].disable();
-								this.form.controls['language'].disable();
+								// this.form.controls['label'].disable();
+								// this.form.controls['description'].disable();
+								// this.form.controls['language'].disable();
 								this.prepareForm();
 							} catch (error){
 								this.logger.error('Could not parse MasterItem: ' + data);
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
index d24280f2b..ca7500119 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
@@ -41,7 +41,7 @@
 				<ng-container cdkColumnDef="created">
 					<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' |
 						translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
+					<mat-cell *matCellDef="let row">{{row.created | date:'short'}}</mat-cell>
 				</ng-container>
 
 				<!-- Column Definition: Status -->
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 99b1c968e..a7be0544d 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,9 +32,9 @@
 					<rich-text-editor-component	[parentFormGroup]="formGroup" [controlName]="'description'"
 												[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
 												[wrapperClasses]="'full-width editor ' +
-													((formGroup.get('description').dirty && (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' : '')">
 					</rich-text-editor-component>
-					<div [class]="(formGroup.get('description').dirty && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
+					<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>
 						<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</div>
diff --git a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html
index bb17bf957..29e850e27 100644
--- a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html
@@ -21,13 +21,14 @@
 	</div>
 	<!-- Description field -->
 	<div class="row">
-		<div class="col-12">
+		<div class="col-12 pb-4">
 			<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
 			<div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
-			<div class="description-form">
-				<mat-form-field>
-					<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [formControl]="this.data.formGroup.get('description')"></textarea>
-				</mat-form-field>
+			<div class="full-width basic-info-input">
+				<rich-text-editor-component [parentFormGroup]="data.formGroup" [controlName]="'description'"
+											[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
+											[editable]="data.formGroup.controls['description'].status !== 'DISABLED'">
+				</rich-text-editor-component>
 			</div>
 		</div>
 	</div>
diff --git a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts
index 9386b4d9e..8acb8f9eb 100644
--- a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts
@@ -45,7 +45,7 @@ export class CloneDialogComponent extends BaseComponent {
 		};
 
 		if (this.data.isNewVersion) {
-			this.data.formGroup.get('label').disable();
+			// this.data.formGroup.get('label').disable();
 		}
 	}
 
diff --git a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.module.ts b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.module.ts
index f841d8434..e2945082b 100644
--- a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.module.ts
@@ -3,9 +3,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { CloneDialogComponent } from './clone-dialog.component';
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
+import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";
 
 @NgModule({
-	imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule],
+  imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule, RichTextEditorModule],
 	declarations: [CloneDialogComponent],
 	exports: [CloneDialogComponent],
 	entryComponents: [CloneDialogComponent]
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 6ef4d7f81..7eeb85810 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,10 +114,12 @@
 									[placeholder]="form.get('data').value.label"
 									[required]="form.get('validationRequired').value"
 									[wrapperClasses]="'full-width editor ' +
-														((form.get('validationRequired').value) ? 'required' : '')">
+														((form.get('validationRequired').value && form.get('value').touched && form.get('value').hasError('required')) ? 'required' : '')">
 		</rich-text-editor-component>
-		<div [class]="(form.get('value')['errors'] && form.get('value').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
-			<mat-error *ngIf="form.get('value')['errors'] && form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<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">
+				<mat-error *ngIf="form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</div>
 		</div>
 	</ng-container>
 
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index 4d24d173e..2c1749736 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -255,8 +255,9 @@
 
 // CSS for <angular-editor> (@kolkov/angular-editor)
 .form-field-subscript-wrapper {
-	font-size: 75%;
-	padding-left: 12px;
+	font-size: 75% !important;
+	//padding-left: 12px;
+	padding: 0 1em;
 	margin-top: 8px;
 }