From 9b4742658d32aa31adda1db782e823cb1c80d7be Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Fri, 5 Jul 2024 14:21:09 +0300
Subject: [PATCH] dmp overview ui changes (in progress)

---
 .../overview/plan-overview.component.html     | 34 +++++++++++++++----
 .../overview/plan-overview.component.scss     |  1 -
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.html b/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.html
index 4b041ce2b..7bac0ff50 100644
--- a/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.html
+++ b/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.html
@@ -15,9 +15,31 @@
 			<div class="row">
 				<div class="col-12 col-lg-8 pl-2">
 					<div class="row">
-						<div class="col-auto"><span class="dmp-logo">{{ 'PLAN-OVERVIEW.TITLE' | translate }}</span></div>
-						<div class="col-auto d-flex"><span class="dmp-label">{{ dmp.label }}</span></div>
+						<div class="col-auto mt-3"><span class="dmp-logo">{{ 'PLAN-OVERVIEW.TITLE' | translate }}</span></div>
+						<!-- <div class="col-auto d-flex"><span class="dmp-label">{{ dmp.label }}</span></div> -->
+
+						<div class="col-auto d-flex">
+							<mat-form-field appearance="fill" class="w-100">
+								<mat-select placeholder="{{'PLAN-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="selectedDmpVersion.id" (selectionChange)="versionChanged(selectedDmpVersion.id)" style="line-height: normal; width: fit-content;">
+									<mat-select-trigger style="width: fit-content;">
+										<span class="dmp-label">
+											{{'PLAN-OVERVIEW.VERSION' | translate}} {{ selectedDmpVersion?.version }}
+											{{ dmp.label }} 
+										</span>
+										<!-- <br> -->
+										<!-- <span class="ml-2" style="font-size: .8rem;">
+											{{'PLAN-OVERVIEW.VERSION' | translate}} {{ selectedDmpVersion?.version }}
+										</span> -->
+									</mat-select-trigger>
+
+									<mat-option *ngFor="let version of dmp?.otherPlanVersions" [value]="version?.id">
+										<span>{{'PLAN-OVERVIEW.VERSION' | translate}} {{version?.version}}</span>
+									</mat-option>
+								</mat-select>
+							</mat-form-field>
+						</div>
 					</div>
+
 					<div class="row align-items-center mt-3 mb-4 label-txt">
 						<div *ngIf="isUserDmpRelated()" class="col-auto d-flex">
 							<p class="ml-0 mb-0 label2-txt">{{ enumUtils.toPlanUserRolesString(planService.getCurrentUserRolesInPlan(dmp?.planUsers)) }}
@@ -32,14 +54,14 @@
 							<mat-icon class="status-icon">lock_outline</mat-icon>
 							{{'PLAN-OVERVIEW.LOCKED' | translate}}
 						</div>
-						<div class="col-auto" *ngIf="selectedDmpVersion">
+						<!-- <div class="col-auto" *ngIf="selectedDmpVersion">
 							<mat-form-field appearance="outline" subscriptSizing="dynamic" class="dense-3 versions-select">
 								<mat-select placeholder="{{'PLAN-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="selectedDmpVersion.id" (selectionChange)="versionChanged(selectedDmpVersion.id)">
 									<mat-option *ngFor="let version of dmp?.otherPlanVersions" [value]="version?.id">
 										{{'PLAN-OVERVIEW.VERSION' | translate}} {{version.version}}</mat-option>
 								</mat-select>
 							</mat-form-field>
-						</div>
+						</div> -->
 						<div class="col-auto d-flex">{{'PLAN-OVERVIEW.EDITED' | translate}} :
 							{{dmp.updatedAt | dateTimeFormatter: "d MMMM y"}}
 						</div>
@@ -216,7 +238,7 @@
 											</div>
 										</div>
 									</ng-container>
-									<ng-container *ngIf="canCreateNewVersion()">
+									<!-- <ng-container *ngIf="canCreateNewVersion()">
 										<div class="row mb-3 align-items-center" (click)="newVersionClicked()">
 											<div class="col-auto pr-0">
 												<button mat-mini-fab class="frame-btn">
@@ -227,7 +249,7 @@
 												<p class="mb-0 pl-2 frame-txt">{{ 'PLAN-OVERVIEW.ACTIONS.NEW-VERSION' | translate }}</p>
 											</div>
 										</div>
-									</ng-container>
+									</ng-container> -->
 									<mat-menu #exportMenu="matMenu" xPosition="before">
 										<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Dmp)' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.repositoryId, fileTransformer.format)">
 											<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
diff --git a/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.scss b/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.scss
index 8029b32b9..005ff002d 100644
--- a/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.scss
+++ b/dmp-frontend/src/app/ui/plan/overview/plan-overview.component.scss
@@ -297,7 +297,6 @@
 	align-items: center;
 }
 
-.dmp-label,
 .description-btn,
 .description-finalized-btn,
 .add-description-btn,