fix: data keys not available by default when loading text widget, without changing tabs

Author: AntoineRelief

libs/shared/src/lib/components/ui/reference-data-grid/reference-data-grid.component.ts

@@ -106,7 +106,6 @@ export class ReferenceDataGridComponent implements OnInit {
     });
     const sortField = this.sortField;
     const sortOrder = this.sortOrder;
-    console.log(sortOrder);
     if (sortField) {
       this.gridData = {
         data: (sortOrder === 'asc'
@@ -158,7 +157,6 @@ export class ReferenceDataGridComponent implements OnInit {
    * @param sort Sort event.
    */
   public onSortChange(sort: SortDescriptor[]): void {
-    console.log('sorting');
     this.sort = sort;
     this.skip = 0;
     this.onPageChange({ skip: this.skip, take: this.pageSize });

libs/shared/src/lib/components/widgets/editor-settings/editor-settings.component.html

@@ -18,7 +18,8 @@
               <input formControlName="title" type="string" />
             </div>
           </div>
-          <editor [init]="editor" formControlName="text"></editor>
+          <editor *ngIf="!loading" [init]="editor" formControlName="text"></editor>
+          <ui-spinner *ngIf="loading"></ui-spinner>
         </form>
       </ng-template>
     </ui-tab>

libs/shared/src/lib/components/widgets/editor-settings/editor-settings.component.ts

@@ -54,6 +54,8 @@ export class EditorSettingsComponent
   public referenceData: ReferenceData | null = null;
   /** Current layout */
   public layout: Layout | null = null;
+  /** Loading indicator */
+  public loading = true;
 
   /**
    * Modal content for the settings of the editor widgets.
@@ -134,6 +136,10 @@ export class EditorSettingsComponent
           this.referenceData = null;
         }
       });
+    if (!resourceID && !referenceDataID) {
+      this.updateFields();
+      this.loading = false;
+    }
   }
 
   /**
@@ -154,7 +160,6 @@ export class EditorSettingsComponent
         this.widget.settings.showDataSourceLink =
           this.widgetFormGroup.value.showDataSourceLink;
       });
-    this.updateFields();
   }
 
   /**
@@ -164,6 +169,7 @@ export class EditorSettingsComponent
    * @param layout selected layout id ( optional )
    */
   private getResource(resource: string, layout?: string | null) {
+    this.loading = true;
     this.apollo
       .query<ResourceQueryResponse>({
         query: GET_RESOURCE,
@@ -172,16 +178,17 @@ export class EditorSettingsComponent
           layout: layout ? [layout] : undefined,
         },
       })
-      .subscribe((res) => {
-        if (res.data) {
-          this.resource = res.data.resource;
+      .subscribe(({ data }) => {
+        if (data) {
+          this.resource = data.resource;
           if (layout) {
-            this.layout = res.data?.resource.layouts?.edges[0]?.node || null;
+            this.layout = data.resource.layouts?.edges[0]?.node || null;
           } else {
             this.layout = null;
           }
           this.updateFields();
         }
+        this.loading = false;
       });
   }
 
@@ -191,6 +198,7 @@ export class EditorSettingsComponent
    * @param referenceData reference data id
    */
   private getReferenceData(referenceData: string) {
+    this.loading = true;
     this.apollo
       .query<ReferenceDataQueryResponse>({
         query: GET_REFERENCE_DATA,
@@ -203,6 +211,7 @@ export class EditorSettingsComponent
           this.referenceData = data.referenceData;
           this.updateFields();
         }
+        this.loading = false;
       });
   }
 

libs/shared/src/lib/components/widgets/editor-settings/editor-settings.module.ts

@@ -16,6 +16,7 @@ import {
   RadioModule,
   SelectMenuModule,
   SelectOptionModule,
+  SpinnerModule,
   TabsModule,
   ToggleModule,
   TooltipModule,
@@ -56,6 +57,7 @@ import {
     ToggleModule,
     ResourceSelectComponent,
     ReferenceDataSelectComponent,
+    SpinnerModule,
   ],
   exports: [EditorSettingsComponent],
   providers: [