Added feature to upload dashboard JSON file to update

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>

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;
+    }
+  }
 }

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'),

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 {

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",