From aed0f9de8eb740bba04239d3f8c423e7fd96b921 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Fri, 22 Mar 2024 12:04:43 +0200
Subject: [PATCH] fixed sortable field

*dmp-blueprint-editor>description-template
---
 .../editor/dmp-blueprint-editor.component.html   | 16 +++++-----------
 .../editor/dmp-blueprint-editor.component.ts     | 13 +++++++++++++
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
index 3c2de4991..f6715e40b 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
@@ -227,18 +227,13 @@
 
 											<div class="row">
 												<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
-													<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled">
+													<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="description-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onDescriptionTemplateHover(descriptionTemplateIndex)" (mouseleave)="clearHoveredDescriptionTemplate()">
 
-														<!-- <div class="description-field-index">
-															<span style="font-size: 18px;">{{descriptionTemplateIndex + 1}}</span>
-														</div>
-														<div class="description-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-															-->
 														<div class="col-auto section-options-vertical">
 															<div class="row justify-content-center">
 																<div class="col-auto">
-																	<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
-																	<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
+																	<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
+																	<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
 																</div>
 																<div class="col-auto">
 																	<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
@@ -248,8 +243,8 @@
 															</div>
 														</div>
 														<div class="col-auto pr-0 section-options-horizontal">
-																<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
-																<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+																<span *ngIf="!isDescriptionTemplateSelected(descriptionTemplateIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{descriptionTemplateIndex + 1}}</span>
+																<mat-icon *ngIf="isDescriptionTemplateSelected(descriptionTemplateIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 														</div>	
 														
 														<div class="col">
@@ -322,7 +317,6 @@
 							</div>
 						</div>
 
-
 						<div class="col-12">
 							<div class="row">
 								<div class="col-auto">
diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
index 6e50e95b8..d9ee7ef17 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
@@ -64,6 +64,7 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
 	showInactiveDetails = false;
 
 	hoveredSectionIndex:number = -1;
+	hoveredDescriptionTemplateIndex:number = -1;
 
 	dmpBlueprintSectionFieldCategory = DmpBlueprintFieldCategory;
 	dmpBlueprintSystemFieldType = DmpBlueprintSystemFieldType;
@@ -395,6 +396,18 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
 
 	//Description Templates
 
+	isDescriptionTemplateSelected(descriptionTemplateId: number): boolean {
+		return this.hoveredDescriptionTemplateIndex === descriptionTemplateId;
+	}
+
+	onDescriptionTemplateHover(descriptionTemplateId: any): void {
+		this.hoveredDescriptionTemplateIndex = descriptionTemplateId;
+	}
+
+	clearHoveredDescriptionTemplate(): void {
+		this.hoveredDescriptionTemplateIndex = -1;
+	}
+
 	removeAllDescriptionTemplates(matCheckBox: MatCheckboxChange, sectionIndex: number) {
 		if (matCheckBox.checked == false) {
 			const descriptionTemplateSize = ((this.formGroup.get('definition').get('sections') as FormArray).at(sectionIndex).get('descriptionTemplates') as FormArray).length;