From c217769e96e96d0fa30d90e0b1df0e34bde641c7 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 18 Sep 2024 12:54:47 +0300
Subject: [PATCH] UI: Fixed incorrect show widgets in layout

---
 .../home/components/dashboard/dashboard.component.html        | 2 +-
 .../modules/home/components/dashboard/dashboard.component.ts  | 4 ++++
 .../src/app/modules/home/models/dashboard-component.models.ts | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index 33c8d659f6..91719334df 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
@@ -66,7 +66,7 @@
   </mat-menu>
   <div [class]="dashboardClass" id="gridster-background">
     <gridster #gridster id="gridster-child" [options]="gridsterOpts">
-      <gridster-item #gridsterItem [item]="widget" [class]="{'tb-noselect': isEdit}" *ngFor="let widget of dashboardWidgets">
+      <gridster-item #gridsterItem [item]="widget" [class]="{'tb-noselect': isEdit}" *ngFor="let widget of dashboardWidgets; trackBy: trackByWidgetId">
         <tb-widget-container
           [gridsterItem]="gridsterItem"
           [widget]="widget"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
index 46255cfc57..0f7b42a27c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
@@ -558,6 +558,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     }
   }
 
+  public trackByWidgetId(_index: number, widget: DashboardWidget) {
+    return widget.widgetId;
+  }
+
   private scrollToWidget(widget: DashboardWidget, delay?: number) {
     const parentElement = this.gridster.el as HTMLElement;
     widget.gridsterItemComponent$().subscribe((gridsterItem) => {
diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
index 0b7b122112..19838773cf 100644
--- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
@@ -707,7 +707,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   }
 
   set x(x: number) {
-    if (!this.dashboard.isMobileSize) {
+    if (!this.dashboard.isMobileSize && this.dashboard.isEdit) {
       if (this.widgetLayout) {
         this.widgetLayout.col = x;
       } else {
@@ -728,7 +728,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   }
 
   set y(y: number) {
-    if (!this.dashboard.isMobileSize) {
+    if (!this.dashboard.isMobileSize && this.dashboard.isEdit) {
       if (this.widgetLayout) {
         this.widgetLayout.row = y;
       } else {