From 5b9f1d5b586e0fc12fbcd547546be5c45bd9711d Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 30 Nov 2023 11:21:50 +0200
Subject: [PATCH 1/4] UI: Add copy dashboard state

---
 .../dashboard-page.component.ts               | 18 +++--
 ...age-dashboard-states-dialog.component.html | 11 ++-
 ...anage-dashboard-states-dialog.component.ts | 72 ++++++++++++++++---
 3 files changed, 85 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index 6f6e39c52c..83981f2b61 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -55,7 +55,7 @@ import {
 } from '@app/shared/models/dashboard.models';
 import { WINDOW } from '@core/services/window.service';
 import { WindowMessage } from '@shared/models/window-message.model';
-import { deepClone, guid, isDefined, isDefinedAndNotNull, isNotEmptyStr } from '@app/core/utils';
+import { deepClone, guid, isDefined, isDefinedAndNotNull, isEqual, isNotEmptyStr } from '@app/core/utils';
 import {
   DashboardContext,
   DashboardPageInitData,
@@ -872,15 +872,21 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       $event.stopPropagation();
     }
     this.dialog.open<ManageDashboardStatesDialogComponent, ManageDashboardStatesDialogData,
-      {[id: string]: DashboardState }>(ManageDashboardStatesDialogComponent, {
+      {states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>(ManageDashboardStatesDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
-        states: deepClone(this.dashboard.configuration.states)
+        states: deepClone(this.dashboard.configuration.states),
+        widgets: deepClone(this.dashboard.configuration.widgets) as {[id: string]: Widget}
       }
-    }).afterClosed().subscribe((states) => {
-      if (states) {
-        this.updateStates(states);
+    }).afterClosed().subscribe((result) => {
+      if (result) {
+        if (!isEqual(result.widgets, this.dashboard.configuration.widgets)) {
+          this.dashboard.configuration.widgets = result.widgets;
+        }
+        if (result.states) {
+          this.updateStates(result.states);
+        }
       }
     });
   }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index 8e6bf449e7..b6528c4cb2 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="statesFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
+<form [formGroup]="statesFormGroup" (ngSubmit)="save()" style="width: 750px;">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.manage-states</h2>
     <span fxFlex></span>
@@ -96,7 +96,7 @@
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="actions" stickyEnd>
-                  <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
+                  <mat-header-cell *matHeaderCellDef style="min-width: 120px; max-width: 120px; width: 120px">
                   </mat-header-cell>
                   <mat-cell *matCellDef="let state">
                     <div fxFlex fxLayout="row">
@@ -107,6 +107,13 @@
                               (click)="editState($event, state)">
                         <mat-icon>edit</mat-icon>
                       </button>
+                      <button mat-icon-button [disabled]="isLoading$ | async"
+                              type="button"
+                              matTooltip="{{ 'filter.duplicate-filter-action' | translate }}"
+                              matTooltipPosition="above"
+                              (click)="duplicateFilter($event, state)">
+                        <mat-icon>content_copy</mat-icon>
+                      </button>
                       <button [fxShow]="!state.root" mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
                               matTooltip="{{ 'dashboard.delete-state' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
index d9178d3b98..4df881fe40 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
@@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormGroupDirective, NgForm, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { DashboardState } from '@app/shared/models/dashboard.models';
@@ -35,14 +35,17 @@ import { fromEvent, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { DialogService } from '@core/services/dialog.service';
-import { deepClone, isUndefined } from '@core/utils';
+import { deepClone } from '@core/utils';
 import {
   DashboardStateDialogComponent,
   DashboardStateDialogData
 } from '@home/components/dashboard-page/states/dashboard-state-dialog.component';
+import { UtilsService } from '@core/services/utils.service';
+import { Widget } from '@shared/models/widget.models';
 
 export interface ManageDashboardStatesDialogData {
   states: {[id: string]: DashboardState };
+  widgets: {[id: string]: Widget };
 }
 
 @Component({
@@ -51,13 +54,14 @@ export interface ManageDashboardStatesDialogData {
   providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardStatesDialogComponent}],
   styleUrls: ['./manage-dashboard-states-dialog.component.scss']
 })
-export class ManageDashboardStatesDialogComponent extends
-                  DialogComponent<ManageDashboardStatesDialogComponent, {[id: string]: DashboardState }>
+export class ManageDashboardStatesDialogComponent
+  extends DialogComponent<ManageDashboardStatesDialogComponent, {states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>
   implements OnInit, ErrorStateMatcher, AfterViewInit {
 
   statesFormGroup: UntypedFormGroup;
 
   states: {[id: string]: DashboardState };
+  widgets: {[id: string]: Widget};
 
   displayedColumns: string[];
   pageLink: PageLink;
@@ -66,6 +70,8 @@ export class ManageDashboardStatesDialogComponent extends
 
   submitted = false;
 
+  stateNames: Set<string> = new Set<string>();
+
   @ViewChild('searchInput') searchInputField: ElementRef;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -75,15 +81,19 @@ export class ManageDashboardStatesDialogComponent extends
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: ManageDashboardStatesDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-              public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent, {[id: string]: DashboardState }>,
+              public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent,
+                {states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>,
               private fb: UntypedFormBuilder,
               private translate: TranslateService,
               private dialogs: DialogService,
+              private utils: UtilsService,
               private dialog: MatDialog) {
     super(store, router, dialogRef);
 
     this.states = this.data.states;
+    this.widgets = this.data.widgets;
     this.statesFormGroup = this.fb.group({});
+    Object.values(this.states).forEach(value => this.stateNames.add(value.name));
 
     const sortOrder: SortOrder = { property: 'name', direction: Direction.ASC };
     this.pageLink = new PageLink(5, 0, null, sortOrder);
@@ -142,6 +152,7 @@ export class ManageDashboardStatesDialogComponent extends
       this.translate.instant('action.yes')).subscribe(
         (res) => {
           if (res) {
+            this.stateNames.delete(state.name);
             delete this.states[state.id];
             this.onStatesUpdated();
           }
@@ -171,8 +182,10 @@ export class ManageDashboardStatesDialogComponent extends
     }
     const isAdd = state === null;
     let prevStateId = null;
+    let prevStateName = '';
     if (!isAdd) {
       prevStateId = state.id;
+      prevStateName = state.name;
     }
     this.dialog.open<DashboardStateDialogComponent, DashboardStateDialogData,
       DashboardStateInfo>(DashboardStateDialogComponent, {
@@ -186,13 +199,13 @@ export class ManageDashboardStatesDialogComponent extends
     }).afterClosed().subscribe(
       (res) => {
         if (res) {
-          this.saveState(res, prevStateId);
+          this.saveState(res, prevStateId, prevStateName);
         }
       }
     );
   }
 
-  saveState(state: DashboardStateInfo, prevStateId: string) {
+  saveState(state: DashboardStateInfo, prevStateId: string, prevStateName: string) {
     const newState: DashboardState = {
       name: state.name,
       root: state.root,
@@ -204,6 +217,10 @@ export class ManageDashboardStatesDialogComponent extends
     } else {
       this.states[state.id] = newState;
     }
+    if (prevStateName && prevStateName !== state.name) {
+      this.stateNames.delete(prevStateName);
+      this.stateNames.add(state.name);
+    }
     if (state.root) {
       for (const id of Object.keys(this.states)) {
         const otherState = this.states[id];
@@ -228,6 +245,45 @@ export class ManageDashboardStatesDialogComponent extends
     this.onStatesUpdated();
   }
 
+  duplicateFilter($event: Event, state: DashboardStateInfo) {
+    const originalState = state;
+    const newFilterName = this.getNextDuplicatedName(state.name);
+    if (newFilterName) {
+      const duplicatedStates = deepClone(originalState);
+      const duplicatedWidgets = deepClone(this.widgets);
+      const widgets = {};
+      duplicatedStates.id = newFilterName.toLowerCase().replace(/\W/g, '_');
+      duplicatedStates.name = newFilterName;
+      duplicatedStates.root = false;
+      this.stateNames.add(duplicatedStates.name);
+
+      for (const [key, value] of Object.entries(duplicatedStates.layouts.main.widgets)) {
+        const guid = this.utils.guid();
+        widgets[guid] = value;
+        duplicatedWidgets[guid] = this.widgets[key];
+        duplicatedWidgets[guid].id = guid;
+      }
+
+      duplicatedStates.layouts.main.widgets = widgets;
+      this.states[duplicatedStates.id] = duplicatedStates;
+      this.widgets = duplicatedWidgets;
+      this.onStatesUpdated();
+    }
+  }
+
+  private getNextDuplicatedName(filterName: string): string {
+    const suffix = ` - ${this.translate.instant('action.copy')} `;
+    let counter = 0;
+    while (++counter < Number.MAX_SAFE_INTEGER) {
+      const newName = `${filterName}${suffix}${counter}`;
+      if (!this.stateNames.has(newName)) {
+        return newName;
+      }
+    }
+
+    return null;
+  }
+
   private onStatesUpdated() {
     this.statesFormGroup.markAsDirty();
     this.updateData(true);
@@ -245,6 +301,6 @@ export class ManageDashboardStatesDialogComponent extends
 
   save(): void {
     this.submitted = true;
-    this.dialogRef.close(this.states);
+    this.dialogRef.close({ states: this.states, widgets: this.widgets });
   }
 }

From e8371389ade2e59caef5b3cba96f1dd62f309f5f Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 30 Nov 2023 11:30:17 +0200
Subject: [PATCH 2/4] UI: Refactoring

---
 .../states/manage-dashboard-states-dialog.component.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
index 4df881fe40..2a49be563a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
@@ -271,11 +271,11 @@ export class ManageDashboardStatesDialogComponent
     }
   }
 
-  private getNextDuplicatedName(filterName: string): string {
+  private getNextDuplicatedName(stateName: string): string {
     const suffix = ` - ${this.translate.instant('action.copy')} `;
     let counter = 0;
     while (++counter < Number.MAX_SAFE_INTEGER) {
-      const newName = `${filterName}${suffix}${counter}`;
+      const newName = `${stateName}${suffix}${counter}`;
       if (!this.stateNames.has(newName)) {
         return newName;
       }

From fb3628467ec49dcff076ac9af0660fa58d2c78cb Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 30 Nov 2023 12:28:29 +0200
Subject: [PATCH 3/4] UI: Refactoring and update translate

---
 .../manage-dashboard-states-dialog.component.html      |  4 ++--
 .../states/manage-dashboard-states-dialog.component.ts | 10 +++++-----
 ui-ngx/src/assets/locale/locale.constant-en_US.json    |  3 ++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index b6528c4cb2..a260016760 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -109,9 +109,9 @@
                       </button>
                       <button mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
-                              matTooltip="{{ 'filter.duplicate-filter-action' | translate }}"
+                              matTooltip="{{ 'dashboard.duplicate-state-action' | translate }}"
                               matTooltipPosition="above"
-                              (click)="duplicateFilter($event, state)">
+                              (click)="duplicateState($event, state)">
                         <mat-icon>content_copy</mat-icon>
                       </button>
                       <button [fxShow]="!state.root" mat-icon-button [disabled]="isLoading$ | async"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
index 2a49be563a..8aab3e1297 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
@@ -245,15 +245,15 @@ export class ManageDashboardStatesDialogComponent
     this.onStatesUpdated();
   }
 
-  duplicateFilter($event: Event, state: DashboardStateInfo) {
+  duplicateState($event: Event, state: DashboardStateInfo) {
     const originalState = state;
-    const newFilterName = this.getNextDuplicatedName(state.name);
-    if (newFilterName) {
+    const newStateName = this.getNextDuplicatedName(state.name);
+    if (newStateName) {
       const duplicatedStates = deepClone(originalState);
       const duplicatedWidgets = deepClone(this.widgets);
       const widgets = {};
-      duplicatedStates.id = newFilterName.toLowerCase().replace(/\W/g, '_');
-      duplicatedStates.name = newFilterName;
+      duplicatedStates.id = newStateName.toLowerCase().replace(/\W/g, '_');
+      duplicatedStates.name = newStateName;
       duplicatedStates.root = false;
       this.stateNames.add(duplicatedStates.name);
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index ef660731bf..955100383b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1188,7 +1188,8 @@
         "assign-dashboard-to-edge": "Assign Dashboard(s) To Edge",
         "assign-dashboard-to-edge-text": "Please select the dashboards to assign to the edge",
         "non-existent-dashboard-state-error": "Dashboard state with id \"{{ stateId }}\" is not found",
-        "edit-mode": "Edit mode"
+        "edit-mode": "Edit mode",
+        "duplicate-state-action": "Duplicate state"
     },
     "datakey": {
         "settings": "Settings",

From b160f6e050df3bf5b6e856b9615b4dee2bfa700a Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Tue, 5 Dec 2023 12:02:38 +0200
Subject: [PATCH 4/4] UI: Copy widget from right layout

---
 ...anage-dashboard-states-dialog.component.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
index 8aab3e1297..99bf024c0e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts
@@ -35,7 +35,7 @@ import { fromEvent, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { DialogService } from '@core/services/dialog.service';
-import { deepClone } from '@core/utils';
+import { deepClone, isDefined } from '@core/utils';
 import {
   DashboardStateDialogComponent,
   DashboardStateDialogData
@@ -251,7 +251,8 @@ export class ManageDashboardStatesDialogComponent
     if (newStateName) {
       const duplicatedStates = deepClone(originalState);
       const duplicatedWidgets = deepClone(this.widgets);
-      const widgets = {};
+      const mainWidgets = {};
+      const rightWidgets = {};
       duplicatedStates.id = newStateName.toLowerCase().replace(/\W/g, '_');
       duplicatedStates.name = newStateName;
       duplicatedStates.root = false;
@@ -259,12 +260,22 @@ export class ManageDashboardStatesDialogComponent
 
       for (const [key, value] of Object.entries(duplicatedStates.layouts.main.widgets)) {
         const guid = this.utils.guid();
-        widgets[guid] = value;
+        mainWidgets[guid] = value;
         duplicatedWidgets[guid] = this.widgets[key];
         duplicatedWidgets[guid].id = guid;
       }
+      duplicatedStates.layouts.main.widgets = mainWidgets;
+
+      if (isDefined(duplicatedStates.layouts?.right)) {
+        for (const [key, value] of Object.entries(duplicatedStates.layouts.right.widgets)) {
+          const guid = this.utils.guid();
+          rightWidgets[guid] = value;
+          duplicatedWidgets[guid] = this.widgets[key];
+          duplicatedWidgets[guid].id = guid;
+        }
+        duplicatedStates.layouts.right.widgets = rightWidgets;
+      }
 
-      duplicatedStates.layouts.main.widgets = widgets;
       this.states[duplicatedStates.id] = duplicatedStates;
       this.widgets = duplicatedWidgets;
       this.onStatesUpdated();