From ca5883724ab226aacef4ec2eb2e75619853e81e7 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Tue, 2 Nov 2021 16:50:43 +0200
Subject: [PATCH] In Dataset Template selection cut description when templates
 are displayed in list and show description (instead of
 DMP-EDITOR.DATASET-DESCRIPTION.INTRO) in template preview. 1.
 multiple-auto-complete.component.html: Added class "title-fn-inner" to cut
 the displayed description of dataset templates. 2.
 multiple-auto-complete.component.scss: Css for class "title-fn" updated and
 for class "title-fn-inner" added to cut the displayed description of dataset
 templates. 3. available-profiles.component.html: Added class
 "list-option-inner" to cut the displayed description of dataset templates. 4.
 available-profiles.component.scss: Css for class "list-option" updated and
 for class "list-option-inner" added to cut the displayed description of
 dataset templates. 5. dataset-preview-dialog.component.html: Added
 [datasetDescription]="data?.template?.description" in
 <app-dataset-description> 6. dataset-description.component.ts: Added in
 class, field "datasetDescription". 7. dataset-description.component.html:
 Show template datasetDescription (as html) instead of
 DMP-EDITOR.DATASET-DESCRIPTION.INTRO.

---
 .../multiple-auto-complete.component.html     | 29 +++++++++++++++----
 .../multiple-auto-complete.component.scss     | 27 +++++++++++++----
 .../dataset-preview-dialog.component.html     |  3 +-
 .../available-profiles.component.html         |  8 +++--
 .../available-profiles.component.scss         | 22 ++++++++++++--
 .../dataset-description.component.html        |  7 +++--
 .../dataset-description.component.ts          |  3 +-
 7 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
index 0a912d97a..56742ff79 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
@@ -1,5 +1,7 @@
 <div class="row multiple-auto-complete" ngForm>
+<!--	style="width: calc(100% - 28px) !important;"-->
 	<mat-chip-list #chipList ngDefaultControl>
+<!--		style="width: calc(100%) !important;"-->
 		<ng-container *ngIf="value as values">
 			<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
 				<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
@@ -9,8 +11,19 @@
 				</ng-container>
 			</mat-chip>
 		</ng-container>
+<!--		<div style="height: 0 !important; width: calc(100% - 28px) !important; visibility: hidden !important;" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>-->
 	</mat-chip-list>
 	<input matInput #autocompleteInput class="col" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
+<!--	<input matInput #autocompleteInput class="col"-->
+<!--		   style="width: calc(100% - 28px) !important;"-->
+<!--		   [class.hide-placeholder]="hidePlaceholder" [name]="id"-->
+<!--		   autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger"-->
+<!--		   [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue"-->
+<!--		   (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()"-->
+<!--		   (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"-->
+<!--		   [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur"-->
+<!--		   (matChipInputTokenEnd)="_addItem($event)"-->
+<!--		   [matAutocompleteConnectedTo]="origin">-->
 	<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
 	<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> -->
 	<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
@@ -24,9 +37,11 @@
 						}"></ng-template>
 					<div *ngIf="!_optionTemplate(item)" class="d-flex">
 						<div class="title-fn">
-							<span>{{_titleFn(item)}}</span>
-							<br *ngIf="_subtitleFn(item)">
-							<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+<!--							<div class="title-fn-inner">	&lt;!&ndash;remove this if you want to see all the description &ndash;&gt;-->
+								<span>{{_titleFn(item)}}</span>
+								<br *ngIf="_subtitleFn(item)">
+								<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+<!--							</div>-->
 						</div>
 						<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 					</div>
@@ -43,9 +58,11 @@
 									}"></ng-template>
 						<div *ngIf="!_optionTemplate(item)" class="d-flex">
 							<div class="title-fn">
-								<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
-								<br *ngIf="_subtitleFn(item)">
-								<small *ngIf="_subtitleFn(item)" [innerHTML]="_subtitleFn(item)"></small>
+								<div class="title-fn-inner">	<!--remove this if you want to see all the description -->
+									<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
+									<br *ngIf="_subtitleFn(item)">
+									<small *ngIf="_subtitleFn(item)" [innerHTML]="_subtitleFn(item)"></small>
+								</div>
 							</div>
 							<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 						</div>
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
index 76cfcb18e..49f0a9cd6 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
@@ -19,12 +19,27 @@
 
 }
 
+.title-fn-inner {
+	width: inherit;
+	height: inherit;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .title-fn {
-	flex-grow: 1;
-    white-space: nowrap;
-    width: calc(100% - 16px);
-    overflow: hidden;
-    text-overflow: ellipsis;
+	height: inherit;
+	width: calc(100% - 16px);
+	overflow: hidden;
+	white-space: nowrap;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	-ms-box-orient: vertical;
+	box-orient: vertical;
+	-webkit-line-clamp: 2;
+	-moz-line-clamp: 2;
+	-ms-line-clamp: 2;
+	line-clamp: 2;
 }
 
 .option-icon {
@@ -64,4 +79,4 @@
 	&::placeholder {
 	   color: transparent;
 	}
-  }
\ No newline at end of file
+  }
diff --git a/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html
index 4408ca279..3d1182cde 100644
--- a/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html
@@ -7,7 +7,8 @@
 		<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
 	</div>
 	<div mat-dialog-content class="definition-content">
-		<app-dataset-description *ngIf="datasetProfileDefinitionFormGroup && datasetProfileDefinitionModel" [form]="datasetProfileDefinitionFormGroup" [visibilityRules]="datasetProfileDefinitionModel.rules" [datasetProfileId]="data.template.id"></app-dataset-description>
+		<app-dataset-description *ngIf="datasetProfileDefinitionFormGroup && datasetProfileDefinitionModel" [form]="datasetProfileDefinitionFormGroup" [visibilityRules]="datasetProfileDefinitionModel.rules"
+								 [datasetProfileId]="data.template.id" [datasetDescription]="data?.template?.description"></app-dataset-description>
 	</div>
 	<div mat-mat-dialog-actions *ngIf="datasetProfileDefinitionFormGroup">
 		<div class="col-auto d-flex pb-4 pt-2">
diff --git a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
index 81bd11179..5949af616 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
@@ -3,9 +3,11 @@
 	<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions" >
 		<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' class="mb-1">
 			<div class="list-option">
-				{{profile.label}}
-				<br *ngIf="profile.description">
-				<small *ngIf="profile.description" [innerHTML]="profile.description"></small>
+				<div class="list-option-inner">
+					{{profile.label}}
+					<br *ngIf="profile.description">
+					<small *ngIf="profile.description" [innerHTML]="profile.description"></small>
+				</div>
 			</div>
 		</mat-list-option>
 	</mat-selection-list>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss
index 34a1934de..caf264353 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss
@@ -1,7 +1,25 @@
-.list-option {
+.list-option-inner {
 	flex-grow: 1;
     white-space: nowrap;
-    width: calc(100% - 16px);
+	width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.list-option {
+	width: calc(100% - 16px);
+	flex-grow: 1;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	-ms-box-orient: vertical;
+	box-orient: vertical;
+	-webkit-line-clamp: 2;
+	-moz-line-clamp: 2;
+	-ms-line-clamp: 2;
+	line-clamp: 2;
+}
+
+::ng-deep .mat-list-text {
+	max-height: 100%;
+}
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
index 20bf08d41..94aea2f5e 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
@@ -1,6 +1,7 @@
-<div class="col-12 intro">
-	{{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}
-</div>
+<!--<div class="col-12 intro">-->
+<!--	{{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}-->
+<!--</div>-->
+<div *ngIf="datasetDescription" class="col-12 intro" [innerHTML]="datasetDescription"></div>
 <form *ngIf="form" novalidate [formGroup]="form" class="col-12 card">
 	<div class="row">
 		<div class="dynamic-form-editor p-0 col-md-12">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
index c19c98165..b3937f33a 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
@@ -23,6 +23,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 	@Input() path: string;
 	@Input() visibilityRules: Rule[] = [];
 	@Input() datasetProfileId: String;
+	@Input() datasetDescription: String;
 	@Input() linkToScroll: LinkToScroll;
 	@Output() formChanged: EventEmitter<any> = new EventEmitter();
 	@Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>();
@@ -413,4 +414,4 @@ export enum ToCEntryType {
 	Section = 1,
 	FieldSet = 2,
 	Field = 3
-}
\ No newline at end of file
+}