From 730011a83b8ce178baeb1ad401909b6a5f7ec004 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 16 Apr 2024 11:37:09 +0300
Subject: [PATCH] ui fixes on autocomplete of add-description-dialog

---
 .../single/single-auto-complete.component.html      |  8 ++++----
 .../single/single-auto-complete.component.scss      | 13 +++++++++++++
 .../start-new-description-dialog.component.ts       |  3 +++
 dmp-frontend/src/assets/i18n/en.json                |  5 ++++-
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
index d02b7355b..40f4f6ace 100644
--- a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
@@ -12,9 +12,9 @@
 							item: item
 						}"></ng-template>
 					<div *ngIf="!_optionTemplate(item)">
-						<span>{{_titleFn(item)}}</span>
+						<span class="title-text">{{_titleFn(item)}}</span>
 						<br *ngIf="_subtitleFn(item)">
-						<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+						<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
 						<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 					</div>
 				</mat-option>
@@ -29,9 +29,9 @@
 										item: item
 									}"></ng-template>
 						<div *ngIf="!_optionTemplate(item)">
-							<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
+							<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span>
 							<br *ngIf="_subtitleFn(item)">
-							<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+							<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
 							<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 						</div>
 					</mat-option>
diff --git a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
index 27edb372d..1e9b9daf2 100644
--- a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
+++ b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
@@ -69,3 +69,16 @@
 // .mat-form-field-type-single-autocomplete:not(.mat-form-field-disabled) .mat-form-field-flex {
 // 	cursor: pointer;
 // }
+
+.title-text {
+	font-weight: 300;
+	line-height: 1.2em;
+	text-align: left;
+	font-size: 16px;
+}
+
+.subtitle-text {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 1.2em;
+}
diff --git a/dmp-frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts b/dmp-frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts
index 20664f317..f9be7ebcc 100644
--- a/dmp-frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts
@@ -1,3 +1,4 @@
+import { DatePipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -32,6 +33,7 @@ export class StartNewDescriptionDialogComponent extends BaseComponent {
 		filterFn: (searchQuery: string, data?: any) => this.dmpService.query(this.buildAutocompleteLookup(searchQuery)).pipe(map(x => x.items)),
 		getSelectedItem: (selectedItem: any) => this.dmpService.query(this.buildAutocompleteLookup(null, null, [selectedItem])).pipe(map(x => x.items[0])),
 		displayFn: (item: Dmp) => item.label,
+		subtitleFn: (item: Dmp) => `${this.language.instant('DASHBOARD.ADD-NEW-DATASET.OPTIONS.CREATED-AT')} ${this.datePipe.transform(item.createdAt ,'dd/MM/yyyy')}`,
 		titleFn: (item: Dmp) => item.label,
 		valueAssign: (item: Dmp) => item.id,
 	};
@@ -63,6 +65,7 @@ export class StartNewDescriptionDialogComponent extends BaseComponent {
 		private language: TranslateService,
 		private dmpService: DmpService,
 		private filterService: FilterService,
+		private datePipe: DatePipe
 	) {
 		super();
 		this.formGroup = data.formGroup;
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index a5caceea3..711807598 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -1901,7 +1901,10 @@
 		},
 		"ADD-NEW-DATASET": {
 			"OPTIONS-NOT-ENOUGH": "Are those options not enough?",
-			"START-NEW-DMP": "Start new Plan"
+			"START-NEW-DMP": "Start new Plan",
+			"OPTIONS": {
+				"CREATED-AT": "Created At:"
+			}
 		}
 	},
 	"USER-DIALOG": {