From 5b14dc67fccb0c6987223371ffad49043761353d Mon Sep 17 00:00:00 2001
From: LeoMorgan113 <mandragora1783@gmail.com>
Date: Mon, 1 Sep 2025 14:12:34 +0300
Subject: [PATCH] Added feature to upload dashboard JSON file to update

---
 .../dashboard/dashboard-form.component.html      | 13 +++++++++++++
 .../pages/dashboard/dashboard-form.component.ts  | 14 ++++++++++++++
 .../dashboards-table-config.resolver.ts          | 16 +++++++++++++++-
 ui-ngx/src/app/shared/models/dashboard.models.ts |  1 +
 .../src/assets/locale/locale.constant-en_US.json |  1 +
 5 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 379e37528f..4d29376ccd 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -144,6 +144,19 @@
                                 formControlName="image">
         </tb-gallery-image-input>
       </div>
+
+      <div class="tb-form-panel stroked gap-2" [class.!hidden]="!isEdit">
+        <div class="tb-form-panel-title" translate>dashboard.update-dashboard</div>
+        <tb-file-input [contentConvertFunction]="loadDataFromJsonContent"
+                       [existingFileName]="currentFileName"
+                       (fileNameChanged)="currentFileName = $event"
+                       formControlName="fileContent"
+
+                       dropLabel="{{ 'import.drop-json-file-or' | translate }}"
+                       accept=".json,application/json"
+                       allowedExtensions="json">
+        </tb-file-input>
+      </div>
     </fieldset>
   </form>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
index c8174013aa..a612d2b127 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
@@ -45,6 +45,7 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
   publicLink: string;
   assignedCustomersText: string;
   entityType = EntityType;
+  currentFileName: string = '';
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
@@ -84,6 +85,7 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
       {
         title: [entity ? entity.title : '', [Validators.required, Validators.maxLength(255)]],
         image: [entity ? entity.image : null],
+        fileContent: [null],
         mobileHide: [entity ? entity.mobileHide : false],
         mobileOrder: [entity ? entity.mobileOrder : null, [Validators.pattern(/^-?[0-9]+$/)]],
         configuration: this.fb.group(
@@ -101,9 +103,11 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
   }
 
   updateForm(entity: Dashboard) {
+    this.currentFileName = '';
     this.updateFields(entity);
     this.entityForm.patchValue({title: entity.title});
     this.entityForm.patchValue({image: entity.image});
+    this.entityForm.patchValue({fileContent: entity.fileContent || null});
     this.entityForm.patchValue({mobileHide: entity.mobileHide});
     this.entityForm.patchValue({mobileOrder: entity.mobileOrder});
     this.entityForm.patchValue({configuration: {description: entity.configuration ? entity.configuration.description : ''}});
@@ -143,4 +147,14 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
       this.publicLink = this.dashboardService.getPublicDashboardLink(entity);
     }
   }
+
+  loadDataFromJsonContent(content: string): any {
+    try {
+      const importData = JSON.parse(content);
+      return importData ? importData['configuration'] : importData;
+    } catch (err) {
+      this.store.dispatch(new ActionNotificationShow({message: err.message, type: 'error'}));
+      return null;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
index b37c2731c6..4540fb9af1 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@@ -110,7 +110,7 @@ export class DashboardsTableConfigResolver  {
     this.config.deleteEntitiesContent = () => this.translate.instant('dashboard.delete-dashboards-text');
 
     this.config.loadEntity = id => this.dashboardService.getDashboard(id.id);
-    this.config.saveEntity = dashboard => this.saveAndAssignDashboard(dashboard as DashboardSetup);
+    this.config.saveEntity = dashboard => this.saveAndAssignDashboard(this.dashboardContentModification(dashboard) as DashboardSetup);
     this.config.onEntityAction = action => this.onDashboardAction(action);
     this.config.detailsReadonly = () => (this.config.componentsData.dashboardScope === 'customer_user' ||
       this.config.componentsData.dashboardScope === 'edge_customer_user');
@@ -179,6 +179,20 @@ export class DashboardsTableConfigResolver  {
     );
   }
 
+  private dashboardContentModification(dashboard: Dashboard): Dashboard{
+    if(dashboard.fileContent != undefined){
+      const { description, ...dashboardContent } = dashboard.fileContent;
+
+      dashboard.configuration = {
+        ...dashboard.configuration,
+        ...dashboardContent
+      }
+    }
+    delete dashboard.fileContent;
+
+    return dashboard;
+  }
+
   configureColumns(dashboardScope: string): Array<EntityTableColumn<DashboardInfo>> {
     const columns: Array<EntityTableColumn<DashboardInfo>> = [
       new DateEntityTableColumn<DashboardInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts
index 8fe92f1b80..acd7e63b68 100644
--- a/ui-ngx/src/app/shared/models/dashboard.models.ts
+++ b/ui-ngx/src/app/shared/models/dashboard.models.ts
@@ -195,6 +195,7 @@ export interface Dashboard extends DashboardInfo {
   configuration?: DashboardConfiguration;
   dialogRef?: MatDialogRef<any>;
   resources?: Array<any>;
+  fileContent?: DashboardConfiguration;
 }
 
 export interface HomeDashboard extends Dashboard {
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 fd368e2853..962d0867a9 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1347,6 +1347,7 @@
         "mobile-order": "Dashboard order in mobile application",
         "mobile-hide": "Hide dashboard in mobile application",
         "update-image": "Update dashboard image",
+        "update-dashboard": "Update the dashboard",
         "take-screenshot": "Take screenshot",
         "select-widget-title": "Select widget",
         "select-widget-value": "{{title}}: select widget",