From 896f07218b0bdca2a32c3fff78305cd72b2c68b2 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 3 Nov 2022 12:36:17 +0200
Subject: [PATCH] UI: Improvement widget drag and drop actions function

---
 .../manage-widget-actions.component.html      |  4 +-
 .../action/manage-widget-actions.component.ts | 49 +++++--------------
 2 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index be94218f4a..0941a20d00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -88,7 +88,7 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="name">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action" style="width: 30%">
             {{ action.name }}
           </mat-cell>
@@ -100,7 +100,7 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="typeName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action" style="width: 50%">
             {{ action.typeName }}
           </mat-cell>
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
index 8c329df938..5b746e95bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
@@ -37,7 +37,7 @@ import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { fromEvent, merge } from 'rxjs';
-import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, first, tap } from 'rxjs/operators';
 import {
   toWidgetActionDescriptor,
   WidgetActionCallbacks,
@@ -167,43 +167,16 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
 
   dropAction(event: CdkDragDrop<WidgetActionsDatasource>) {
     this.dragDisabled = true;
-    const droppedAction = event.item.data;
-    this.dataSource.getAllActions().subscribe(
-      (actions) => {
-        moveItemInArray(actions, event.previousIndex, event.currentIndex);
-
-        const isBackward = event.currentIndex > event.previousIndex;
-        let nearestNeighbourAction: WidgetActionDescriptorInfo = null;
-        for (let i: number = isBackward ? actions.length - 1 : 0;
-             isBackward ? i >= 0 : i < actions.length; isBackward ? --i : ++i) {
-          if (actions[i].id === droppedAction.id) {
-            break;
-          }
-          if (actions[i].actionSourceId === droppedAction.actionSourceId) {
-            nearestNeighbourAction = actions[i];
-          }
-        }
-
-        const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
-        let oldIndex = -1;
-        let newIndex: number = nearestNeighbourAction ? -1 : (isBackward ? targetActions.length - 1 : 0);
-
-        for (let i: number = isBackward ? targetActions.length - 1 : 0;
-          isBackward ? i >= 0 : i < targetActions.length; isBackward ? --i : ++i) {
-          if (targetActions[i].id === droppedAction.id) {
-            oldIndex = i;
-          }
-          if (nearestNeighbourAction && targetActions[i].id === nearestNeighbourAction.id) {
-            newIndex = isBackward ? i - 1 : i + 1;
-          }
-          if (oldIndex !== -1 && newIndex !== -1) {
-            moveItemInArray(targetActions, oldIndex, newIndex);
-            this.onActionsUpdated();
-            return;
-          }
-        }
-      }
-    );
+    const droppedAction: WidgetActionDescriptorInfo = event.item.data;
+    this.dataSource.pageData$.pipe(
+      first()
+    ).subscribe((actions) => {
+      const action = actions.data;
+      const startActionSourceIndex = action.findIndex(element => element.actionSourceId === droppedAction.actionSourceId);
+      const targetActions = this.getOrCreateTargetActions(droppedAction.actionSourceId);
+      moveItemInArray(targetActions, event.previousIndex - startActionSourceIndex, event.currentIndex - startActionSourceIndex);
+      this.onActionsUpdated();
+    });
   }
 
   addAction($event: Event) {