Let user to drag-n-drop widget actions in list.

ui-ngx/src/app/modules/home/components/home-components.module.ts

@@ -173,6 +173,7 @@ import { RateLimitsDetailsDialogComponent } from '@home/components/profile/tenan
 import { AssetProfileComponent } from '@home/components/profile/asset-profile.component';
 import { AssetProfileDialogComponent } from '@home/components/profile/asset-profile-dialog.component';
 import { AssetProfileAutocompleteComponent } from '@home/components/profile/asset-profile-autocomplete.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations:
@@ -321,6 +322,7 @@ import { AssetProfileAutocompleteComponent } from '@home/components/profile/asse
   imports: [
     CommonModule,
     SharedModule,
+    DragDropModule,
     SharedHomeComponentsModule,
     WidgetSettingsModule,
     Lwm2mProfileComponentsModule,
@@ -453,7 +455,8 @@ import { AssetProfileAutocompleteComponent } from '@home/components/profile/asse
     RateLimitsListComponent,
     RateLimitsComponent,
     RateLimitsTextComponent,
-    RateLimitsDetailsDialogComponent
+    RateLimitsDetailsDialogComponent,
+    DragDropModule
   ],
   providers: [
     WidgetComponentService,

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html

@@ -60,7 +60,14 @@
     </mat-toolbar>
     <div fxFlex class="table-container">
       <table mat-table [dataSource]="dataSource"
-                 matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
+             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear
+             cdkDropList [cdkDropListData]="dataSource" (cdkDropListDropped)="dropAction($event)">
+        <ng-container matColumnDef="actionSourceId">
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-source-order' | translate }} </mat-header-cell>
+          <mat-cell *matCellDef="let action">
+            <mat-icon cdkDragHandle>reorder</mat-icon>
+          </mat-cell>
+        </ng-container>
         <ng-container matColumnDef="actionSourceName">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action">
@@ -109,7 +116,8 @@
         </ng-container>
         <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
         <mat-row [ngClass]="{'mat-row-select': true}"
-                 *matRowDef="let action; columns: displayedColumns;"></mat-row>
+                 *matRowDef="let action; columns: displayedColumns;"
+                 cdkDrag [cdkDragData]="action"></mat-row>
       </table>
       <span [fxShow]="dataSource.isEmpty() | async"
             fxLayoutAlign="center center"

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts

@@ -54,6 +54,7 @@ import {
 import { deepClone } from '@core/utils';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
+import {CdkDragDrop, moveItemInArray, CdkDragHandle} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'tb-manage-widget-actions',
@@ -106,7 +107,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
     const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
     this.pageLink = new PageLink(10, 0, null, sortOrder);
     this.dataSource = new WidgetActionsDatasource(this.translate, this.utils);
-    this.displayedColumns = ['actionSourceName', 'name', 'icon', 'typeName', 'actions'];
+    this.displayedColumns = ['actionSourceId', 'actionSourceName', 'name', 'icon', 'typeName', 'actions'];
   }
 
   ngOnInit(): void {
@@ -163,6 +164,46 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
     this.dataSource.loadActions(this.pageLink, reload);
   }
 
+  dropAction(event: CdkDragDrop<WidgetActionDescriptorInfo[]>) {
+    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: number = -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;
+          }
+        }
+      }
+    );
+  }
+
   addAction($event: Event) {
     this.openWidgetActionDialog($event);
   }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3686,6 +3686,7 @@
         "add-action": "Add action",
         "search-actions": "Search actions",
         "no-actions-text": "No actions found",
+        "action-source-order": "Order",
         "action-source": "Action source",
         "action-source-required": "Action source is required.",
         "action-name": "Name",