feat/AB#72584_reflect-dashboard-changes-on-templates

apps/back-office/src/app/application/pages/add-page/add-page.component.ts

@@ -91,7 +91,7 @@ export class AddPageComponent extends UnsubscribeComponent implements OnInit {
     // Set the available widgets that can directly be added as single widget dashboard
     this.availableWidgets = this.availableWidgets.filter((widget: any) => {
       for (const wid of SINGLE_WIDGET_PAGE_TYPES) {
-        if (widget.id.includes(wid)) {
+        if (widget.widgetType.includes(wid)) {
           return widget;
         }
       }

libs/shared/src/lib/components/widget-choice/widget-choice.component.html

@@ -8,8 +8,10 @@
       class="shared-widget-type"
       *ngFor="let type of widgetTypes"
       (click)="onSelect(type)"
-      [ngStyle]="hovered === type.id ? { 'border-color': type.color } : null"
-      (mouseover)="hovered = type.id"
+      [ngStyle]="
+        hovered === type.widgetType ? { 'border-color': type.color } : null
+      "
+      (mouseover)="hovered = type.widgetType"
       (mouseout)="hovered = ''"
     >
       <img [src]="type.icon" />
@@ -34,12 +36,12 @@
         *ngFor="let type of widgetTypes"
         (click)="onSelect(type)"
         [uiTooltip]="type.name"
-        (mouseover)="hovered = type.id"
+        (mouseover)="hovered = type.widgetType"
         (mouseout)="hovered = ''"
       >
         <img [src]="type.icon" />
         <div
-          *ngIf="hovered === type.id"
+          *ngIf="hovered === type.widgetType"
           [style.background]="type.color"
           class="shared-widget-hovered"
         ></div>

libs/shared/src/lib/components/widget-grid/edit-widget-modal/edit-widget-modal.component.ts

@@ -1,3 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+import { takeUntil } from 'rxjs';
 import {
   Component,
   Inject,
@@ -10,11 +12,10 @@ import {
 } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
-import { ConfirmService } from '../../../services/confirm/confirm.service';
 import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
-import { takeUntil } from 'rxjs';
-import { UnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
 import { ButtonModule, DialogModule } from '@oort-front/ui';
+import { UnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
+import { ConfirmService } from '../../../services/confirm/confirm.service';
 import { WidgetSettingsType } from '../../../models/dashboard.model';
 
 /** Model for dialog data */
@@ -72,6 +73,11 @@ export class EditWidgetModalComponent
         environmentInjector: this.environmentInjector,
       }
     );
+
+    // Sets the widget id if not set
+    if (!this.data.widget.id) {
+      this.data.widget.id = `widget-${uuidv4()}`;
+    }
     /** Set current widget data and build up settings form in order to be ready once view is added to the DOM */
     this.componentRef.instance.widget = this.data.widget;
     this.componentRef.instance.buildSettingsForm();

libs/shared/src/lib/components/widget-grid/widget-grid.component.ts

@@ -346,37 +346,35 @@ export class WidgetGridComponent
    * @param e new widget.
    */
   async onAdd(e: any): Promise<void> {
-    if (e) {
-      const widget = cloneDeep(e);
-      if (widget) {
-        /** Open settings dialog component from the widget.  */
-        const { EditWidgetModalComponent } = await import(
-          './edit-widget-modal/edit-widget-modal.component'
-        );
-        const dialogRef = this.dialog.open(EditWidgetModalComponent, {
-          disableClose: true,
-          data: {
-            widget,
-            template: this.dashboardService.findSettingsTemplate(widget),
+    const widget = cloneDeep(e);
+    if (!widget) {
+      return;
+    }
+
+    /** Open settings dialog component from the widget.  */
+    const { EditWidgetModalComponent } = await import(
+      './edit-widget-modal/edit-widget-modal.component'
+    );
+    const dialogRef = this.dialog.open(EditWidgetModalComponent, {
+      disableClose: true,
+      data: {
+        widget,
+        template: this.dashboardService.findSettingsTemplate(widget),
+      },
+    });
+    dialogRef.closed.pipe(takeUntil(this.destroy$)).subscribe((value: any) => {
+      // Should save the value, and so, add the widget to the grid
+      if (value) {
+        this.add.emit({
+          ...widget,
+          settings: value,
+          ...{
+            resizeEnabled: this.canUpdate,
+            dragEnabled: this.canUpdate,
           },
         });
-        dialogRef.closed
-          .pipe(takeUntil(this.destroy$))
-          .subscribe((value: any) => {
-            // Should save the value, and so, add the widget to the grid
-            if (value) {
-              this.add.emit({
-                ...widget,
-                settings: value,
-                ...{
-                  resizeEnabled: this.canUpdate,
-                  dragEnabled: this.canUpdate,
-                },
-              });
-            }
-          });
       }
-    }
+    });
   }
 
   /**

libs/shared/src/lib/components/widget/widget.component.ts

@@ -47,8 +47,7 @@ export class WidgetComponent implements OnInit, OnDestroy, OnChanges {
   /** Change step workflow event emitter */
   @Output() changeStep: EventEmitter<number> = new EventEmitter();
   /** Id of the ticket. Visible in the dom */
-  @HostBinding()
-  id = `widget-${uuidv4()}`;
+  @HostBinding() id!: string;
   /** Reference to widget inner component */
   @ViewChild('widgetContent')
   widgetContentComponent!:
@@ -120,6 +119,7 @@ export class WidgetComponent implements OnInit, OnDestroy, OnChanges {
   ) {}
 
   ngOnInit(): void {
+    this.id = this.widget.id ?? `widget-${uuidv4()}`;
     // Initialize style
     this.widgetService
       .createCustomStyle(this.id, this.widget)

libs/shared/src/lib/models/dashboard.model.ts

@@ -11,7 +11,7 @@ import { EventEmitter } from '@angular/core';
 
 /** Model for IWidgetType object */
 export interface IWidgetType {
-  id: string;
+  widgetType: string;
   name: string;
   icon: string;
   color: string;
@@ -48,7 +48,7 @@ export abstract class WidgetSettings<T extends (...args: any[]) => any> {
 /** List of Widget types with their properties */
 export const WIDGET_TYPES = [
   {
-    id: 'donut-chart',
+    widgetType: 'donut-chart',
     name: 'Donut chart',
     icon: '/assets/donut.svg',
     color: '#3B8CC4',
@@ -65,7 +65,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: ChartSettingsComponent,
   },
   {
-    id: 'column-chart',
+    widgetType: 'column-chart',
     name: 'Column chart',
     icon: '/assets/column.svg',
     color: '#EBA075',
@@ -82,7 +82,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: ChartSettingsComponent,
   },
   {
-    id: 'line-chart',
+    widgetType: 'line-chart',
     name: 'Line chart',
     icon: '/assets/line.svg',
     color: '#F6C481',
@@ -99,7 +99,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: ChartSettingsComponent,
   },
   {
-    id: 'pie-chart',
+    widgetType: 'pie-chart',
     name: 'Pie chart',
     icon: '/assets/pie.svg',
     color: '#8CCDD5',
@@ -116,7 +116,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: ChartSettingsComponent,
   },
   {
-    id: 'polar-chart',
+    widgetType: 'polar-chart',
     name: 'Polar chart',
     icon: '/assets/pie.svg',
     color: '#8CCDD5',
@@ -133,7 +133,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: ChartSettingsComponent,
   },
   {
-    id: 'bar-chart',
+    widgetType: 'bar-chart',
     name: 'Bar chart',
     icon: '/assets/bar.svg',
     color: '#B5DC8D',
@@ -150,7 +150,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: ChartSettingsComponent,
   },
   {
-    id: 'radar-chart',
+    widgetType: 'radar-chart',
     name: 'Radar chart',
     icon: '/assets/pie.svg',
     color: '#8CCDD5',
@@ -167,7 +167,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: ChartSettingsComponent,
   },
   {
-    id: 'grid',
+    widgetType: 'grid',
     name: 'Grid',
     icon: '/assets/grid.svg',
     color: '#AC8CD5',
@@ -188,7 +188,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: GridSettingsComponent,
   },
   {
-    id: 'map',
+    widgetType: 'map',
     name: 'Map',
     icon: '/assets/map.svg',
     color: '#D58CA6',
@@ -202,7 +202,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: MapSettingsComponent,
   },
   {
-    id: 'text',
+    widgetType: 'text',
     name: 'Text',
     icon: '/assets/text.svg',
     color: '#2F383E',
@@ -217,7 +217,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: EditorSettingsComponent,
   },
   {
-    id: 'summaryCard',
+    widgetType: 'summaryCard',
     name: 'Summary card',
     icon: '/assets/summary-card.svg',
     color: '#99CBEF',
@@ -229,7 +229,7 @@ export const WIDGET_TYPES = [
     settingsTemplate: SummaryCardSettingsComponent,
   },
   {
-    id: 'tabs',
+    widgetType: 'tabs',
     name: 'Tabs',
     icon: '/assets/tab.svg',
     color: '#D5B38C',

libs/shared/src/lib/services/dashboard/dashboard.service.ts

@@ -41,7 +41,7 @@ export class DashboardService {
     private translate: TranslateService
   ) {
     this.availableWidgets = WIDGET_TYPES.filter((widget) =>
-      get(environment, 'availableWidgets', []).includes(widget.id)
+      get(environment, 'availableWidgets', []).includes(widget.widgetType)
     );
   }