Correct change detection cycle for adding a widget

opf · Apr 10, 2024 · 99ccf16 · 99ccf16
1 parent 079aa7c
commit 99ccf16
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/frontend/src/app/shared/components/grids/grid/add-widget.service.ts b/frontend/src/app/shared/components/grids/grid/add-widget.service.ts
@@ -33,8 +33,8 @@ export class GridAddWidgetService {
       && this.isAllowed;
   }
 
-  public widget(area:GridArea) {
-    this
+  public widget(area:GridArea):Promise<GridWidgetResource|null> {
+    return this
       .select(area)
       .then((widgetResource) => {
         if (this.layout.isGap(area)) {
@@ -46,10 +46,9 @@ export class GridAddWidgetService {
         this.setMaxWidth(newArea);
 
         this.persist(newArea);
+        return widgetResource;
       })
-      .catch(() => {
-        // user didn't select a widget
-      });
+      .catch(() => null);
   }
 
   public get addText() {

diff --git a/frontend/src/app/shared/components/grids/grid/grid.component.html b/frontend/src/app/shared/components/grids/grid/grid.component.html
@@ -68,7 +68,7 @@
     <div class="grid--widget-add"
          *ngIf="add.isAllowed"
          [title]="add.addText"
-         (click)="add.widget(area)">
+         (click)="addWidget(area)">
     </div>
   </div>
 
@@ -87,7 +87,7 @@
     <div class="grid--widget-add -gap"
          *ngIf="add.isAllowed"
          [title]="add.addText"
-         (click)="add.widget(gap)">
+         (click)="addWidget(gap)">
     </div>
   </div>
 

diff --git a/frontend/src/app/shared/components/grids/grid/grid.component.ts b/frontend/src/app/shared/components/grids/grid/grid.component.ts
@@ -1,6 +1,4 @@
-import {
-  Component, ComponentRef, HostListener, Input, OnDestroy, OnInit,
-} from '@angular/core';
+import { ChangeDetectorRef, Component, ComponentRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 import { GridResource } from 'core-app/features/hal/resources/grid-resource';
 import { DomSanitizer } from '@angular/platform-browser';
 import { GridWidgetsService } from 'core-app/shared/components/grids/widgets/widgets.service';
@@ -54,7 +52,9 @@ export class GridComponent implements OnDestroy, OnInit {
     public layout:GridAreaService,
     public add:GridAddWidgetService,
     public remove:GridRemoveWidgetService,
-    readonly browserDetector:BrowserDetector) {
+    readonly browserDetector:BrowserDetector,
+    readonly cdRef:ChangeDetectorRef,
+  ) {
   }
 
   ngOnInit() {
@@ -76,6 +76,13 @@ export class GridComponent implements OnDestroy, OnInit {
     }
   }
 
+  public addWidget(area:GridWidgetArea|GridArea) {
+    void this
+      .add
+      .widget(area)
+      .then(() => this.cdRef.detectChanges());
+  }
+
   public widgetComponent(area:GridWidgetArea) {
     const { widget } = area;