From 4552525e1c91b9c3ca41ca8db53f6399c4856cea Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Thu, 19 Nov 2020 10:38:43 +0200
Subject: [PATCH] On multiple autocomple inputs removes permanent placeholder
 inside the container, adds overflow

---
 .../multiple/multiple-auto-complete.component.scss   |  9 +++++++--
 .../listing/criteria/dataset-criteria.component.html | 12 ++++++------
 .../clone/clone-dialog/clone-dialog.component.html   |  3 ++-
 .../editor/dataset-info/dataset-info.component.html  |  3 ++-
 .../ui/dmp/editor/main-info/main-info.component.html |  6 ++++--
 .../invitation/dmp-invitation-dialog.component.html  |  1 +
 .../dmp/listing/criteria/dmp-criteria.component.html |  8 ++++----
 .../dmp-upload-dialogue.component.html               |  4 +++-
 8 files changed, 29 insertions(+), 17 deletions(-)

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 8b0858e0d..1230c73a7 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
@@ -8,10 +8,10 @@
 
 
 	.align-arrow-right {
-		position: absolute;
+		// position: absolute;
 		right: 0;
 		// bottom: 0;
-		vertical-align: middle;
+		// vertical-align: middle;
 		cursor: pointer;
 		align-self: center;
 		color: rgba(0, 0, 0, 0.54);
@@ -39,3 +39,8 @@
 .two-line-mat-option {
 	line-height: 1.2em;
 }
+
+::ng-deep .mat-chip-list-wrapper {
+	max-height: 4.8em !important;
+	overflow: auto !important;
+}
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
index b50c6e0c8..af57218a1 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
@@ -38,8 +38,8 @@
 			<div class="col-10 gray-container">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DATASET-TEMPLATES' | translate}}</h6>
 				<mat-form-field>
+					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')"
-						placeholder="{{'CRITERIA.DATA-SETS.SELECT-DATASET-TEMPLATES' | translate }}"
 						[configuration]="datasetTemplateAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -50,8 +50,8 @@
 			<div class="col-10 gray-container">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6>
 				<mat-form-field>
+					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('groupIds')"
-						placeholder="{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}"
 						[configuration]="dmpAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -69,8 +69,8 @@
 			<div class="col-10 gray-container">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-GRANT' | translate}}</h6>
 				<mat-form-field>
+					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('grants')"
-						placeholder="{{'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}"
 						[configuration]="grantAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -81,8 +81,8 @@
 			<div class="col-10 gray-container" *ngIf="!isPublic">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-COLLABORATORS' | translate}}</h6>
 				<mat-form-field>
+					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-COLLABORATORS' | translate }}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')"
-						placeholder="{{'CRITERIA.DATA-SETS.SELECT-COLLABORATORS' | translate }}"
 						[configuration]="collaboratorsAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -104,8 +104,8 @@
 			<div class="col-10 gray-container">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.ORGANIZATION' | translate }}</h6>
 				<mat-form-field>
+					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate}}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
-						placeholder="{{'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate}}"
 						[configuration]="organisationAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -116,8 +116,8 @@
 			<div class="col-10 gray-container">
 				<h6 class="category-title">{{'CRITERIA.DATA-SETS.TAGS' | translate }}</h6>
 				<mat-form-field>
+					<mat-label>{{'CRITERIA.DATA-SETS.SELECT-TAGS' | translate}}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('tags')"
-						placeholder="{{'CRITERIA.DATA-SETS.SELECT-TAGS' | translate}}"
 						[configuration]="tagsAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
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 2f3e58286..bb17bf957 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
@@ -36,7 +36,8 @@
 		<div class="col-12">
 			<div class="heading">{{'DMP-EDITOR.FIELDS.TEMPLATES' | translate}}</div>
 			<mat-form-field>
-				<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
+				<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
+				<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
 				</app-multiple-auto-complete>
 				<mat-error *ngIf="data.formGroup.get('profiles').hasError('backendError')">
 					{{data.formGroup.get('profiles').getError('backendError').message}}</mat-error>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
index 7012128db..79a8c1464 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
@@ -13,7 +13,8 @@
 				</div>
 				<div class="profile-form">
 					<mat-form-field>
-						<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
+						<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
+						<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
 							{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
index f83b80bf7..29c17b5a0 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
@@ -81,7 +81,8 @@
 				</div>
 				<div class="researchers-form">
 					<mat-form-field>
-						<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
+						<mat-label>{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}</mat-label>
+						<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" [configuration]="researchersAutoCompleteConfiguration">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
 							{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
@@ -108,7 +109,8 @@
 				</div>
 				<div class="organizations-form">
 					<mat-form-field>
-						<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
+						<mat-label>{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}</mat-label>
+						<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" [configuration]="organisationsAutoCompleteConfiguration">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
 							{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html
index fb7cc5926..1e0bd007e 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html
@@ -8,6 +8,7 @@
 		</div>
 		<div mat-dialog-content class="row content">
 			<mat-form-field class="col pt-0 pb-2 mb-4 search">
+				<!-- <mat-label>{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}</mat-label> -->
 				<app-multiple-auto-complete [formControl]="formGroup.get('users')" placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}" [configuration]="usersAutoCompleteConfiguration">
 				</app-multiple-auto-complete>
 			</mat-form-field>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
index c73aac723..f39279186 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
@@ -45,8 +45,8 @@
 			<div *ngIf="showGrant" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-DATASET-TEMPLATES' | translate}}</h6>
 				<mat-form-field>
+					<mat-label>{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')"
-						placeholder="{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}"
 						[configuration]="datasetTemplateAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -57,8 +57,8 @@
 			<div *ngIf="showGrant" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DMP-RELATED-GRANT.RELATED-GRANT' | translate}}</h6>
 				<mat-form-field>
+					<mat-label>{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('grants')"
-						placeholder="{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}"
 						[configuration]="grantAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -69,8 +69,8 @@
 			<div *ngIf="isAuthenticated()" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-COLLABORATORS' | translate}}</h6>
 				<mat-form-field>
+					<mat-label>{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')"
-						placeholder="{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}"
 						[configuration]="collaboratorsAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
@@ -92,8 +92,8 @@
 			<div *ngIf="showGrant" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
 				<mat-form-field>
+					<mat-label>{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}</mat-label>
 					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
-						placeholder="{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}"
 						[configuration]="organisationAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
 				</mat-form-field>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html
index a5b5b69d8..941a735a4 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html
@@ -32,7 +32,9 @@
 		</div>
 		<div class="upload-form col-sm-12 col-md-12">
 			<mat-form-field>
-				<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
+				<mat-label>{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}</mat-label>
+				<app-multiple-auto-complete [(ngModel)]="dmpProfiles" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
+				<!-- <app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)"> -->
 				</app-multiple-auto-complete>
 			</mat-form-field>
 		</div>