From e4516ef0ed2df0969f3d6c6daf6298399b1f942e Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 26 Mar 2024 10:34:51 +0200
Subject: [PATCH] dmp-editor ui

*contacts > toggle drag_handler icon on hover
---
 .../dmp-editor.component.html                     | 12 ++++++------
 .../dmp-editor-blueprint/dmp-editor.component.ts  | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
index 168caf60f..81556c080 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
@@ -164,12 +164,12 @@
 														</div>
 														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
 															<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
-																<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled">
-																	<div class="col-auto">
-																		<span style="font-size: 15px;">{{contactIndex + 1}}</span>
+																<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
+																	<div class="col-12 col-xl-auto pb-1">
+																		<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{contactIndex + 1}}</span>
+																		<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 																	</div>
-																	<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-																	<div class="col-auto">
+																	<div class="col-12 col-xl-auto">
 																		<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="contact.get('contactType')">
 																			<div *ngFor="let contactType of dmpContactTypeEnumValues">
 																				<mat-button-toggle class="lang-button" [value]="contactType">{{enumUtils.toDmpContactTypeString(contactType)}}</mat-button-toggle>
@@ -214,7 +214,7 @@
 																			</ng-container>
 																		</div>
 																	</div>
-																	<div class="col-auto">
+																	<div class="col-12 col-xl-auto">
 																		<button [disabled]="formGroup.disabled" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled">
 																			<mat-icon>delete</mat-icon>
 																		</button>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
index e22e02a69..b3ba32856 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
@@ -80,6 +80,8 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
 
 	permissionPerSection: Map<Guid, string[]>;
 
+	hoveredContact: number = -1;
+
 	singleAutocompleteBlueprintConfiguration: SingleAutoCompleteConfiguration = {
 		initialItems: (data?: any) => this.dmpBlueprintService.query(this.dmpBlueprintService.buildAutocompleteLookup(null, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)),
 		filterFn: (searchQuery: string, data?: any) => this.dmpBlueprintService.query(this.dmpBlueprintService.buildAutocompleteLookup(searchQuery, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)),
@@ -353,6 +355,19 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
 	// Contacts
 	//
 	//
+
+	isContactSelected(contactId: number): boolean {
+		return this.hoveredContact === contactId;
+	}
+
+	onContactHover(contactIndex: number): void {
+		this.hoveredContact = contactIndex;
+	}
+
+	clearHoveredContact(): void {
+		this.hoveredContact = -1;
+	}
+
 	addContact(): void {
 		const contactArray = this.formGroup.get('properties').get('contacts') as FormArray;
 		(this.formGroup.get('properties').get('contacts') as FormArray).push(this.editorModel.createChildContact(contactArray.length));