fix: resource modal opening as a blank page until we click anywhere (#1664)

estelafs · web-flow · commit 4b4c98f2c82a · 2023-07-27T09:13:53.000+02:00
diff --git a/libs/safe/src/lib/services/form/form.service.ts b/libs/safe/src/lib/services/form/form.service.ts
@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, NgZone } from '@angular/core';
 import * as SurveyKo from 'survey-knockout';
 import * as Survey from 'survey-angular';
 import { initCreatorSettings } from '../../survey/creator';
@@ -30,6 +30,7 @@ export class SafeFormService {
    * @param formBuilder Angular form builder
    * @param authService Shared authentication service
    * @param referenceDataService Reference data service
+   * @param ngZone Angular Service to execute code inside Angular environment
    */
   constructor(
     @Inject('environment') environment: any,
@@ -38,7 +39,8 @@ export class SafeFormService {
     public apollo: Apollo,
     public formBuilder: UntypedFormBuilder,
     public authService: SafeAuthService,
-    public referenceDataService: SafeReferenceDataService
+    public referenceDataService: SafeReferenceDataService,
+    public ngZone: NgZone
   ) {
     this.environment = environment;
     this.setSurveyCreatorInstance();
@@ -65,7 +67,8 @@ export class SafeFormService {
       this.authService,
       this.environment,
       this.referenceDataService,
-      additionalQuestions.customQuestions
+      additionalQuestions.customQuestions,
+      this.ngZone
     );
     // === CREATOR SETTINGS ===
     initCreatorSettings(SurveyKo);
@@ -79,7 +82,8 @@ export class SafeFormService {
       this.authService,
       this.environment,
       this.referenceDataService,
-      additionalQuestions.customQuestions
+      additionalQuestions.customQuestions,
+      this.ngZone
     );
   }
 }
diff --git a/libs/safe/src/lib/survey/components/resource.ts b/libs/safe/src/lib/survey/components/resource.ts
@@ -14,6 +14,7 @@ import { buildSearchButton, buildAddButton } from './utils';
 import get from 'lodash/get';
 import { Question, QuestionResource } from '../types';
 import { JsonMetadata, SurveyModel } from 'survey-angular';
+import { NgZone } from '@angular/core';
 
 /**
  * Inits the resource question component of for survey.
@@ -23,13 +24,15 @@ import { JsonMetadata, SurveyModel } from 'survey-angular';
  * @param apollo Apollo client
  * @param dialog Dialog
  * @param formBuilder Angular form service
+ * @param ngZone Angular Service to execute code inside Angular environment
  */
 export const init = (
   Survey: any,
   domService: DomService,
   apollo: Apollo,
   dialog: Dialog,
-  formBuilder: UntypedFormBuilder
+  formBuilder: UntypedFormBuilder,
+  ngZone: NgZone
 ): void => {
   const getResourceById = (data: { id: string }) =>
     apollo.query<GetResourceByIdQueryResponse>({
@@ -600,7 +603,7 @@ export const init = (
         );
         actionsButtons.appendChild(searchBtn);
 
-        const addBtn = buildAddButton(question, false, dialog);
+        const addBtn = buildAddButton(question, false, dialog, ngZone);
         actionsButtons.appendChild(addBtn);
 
         const parentElement = el.querySelector('.safe-qst-content');
diff --git a/libs/safe/src/lib/survey/components/resources.ts b/libs/safe/src/lib/survey/components/resources.ts
@@ -15,6 +15,7 @@ import { buildSearchButton, buildAddButton } from './utils';
 import { QuestionResource } from '../types';
 import { SurveyModel } from 'survey-angular';
 import localForage from 'localforage';
+import { NgZone } from '@angular/core';
 
 /** Create the list of filter values for resources */
 export const resourcesFilterValues = new BehaviorSubject<
@@ -40,13 +41,15 @@ export const resourceConditions = [
  * @param apollo Apollo client
  * @param dialog Dialog service
  * @param formBuilder Angular form service
+ * @param ngZone Angular Service to execute code inside Angular environment
  */
 export const init = (
   Survey: any,
   domService: DomService,
   apollo: Apollo,
   dialog: Dialog,
-  formBuilder: UntypedFormBuilder
+  formBuilder: UntypedFormBuilder,
+  ngZone: NgZone
 ): void => {
   const getResourceById = (data: { id: string }) =>
     apollo.query<GetResourceByIdQueryResponse>({
@@ -768,7 +771,7 @@ export const init = (
             );
             actionsButtons.appendChild(searchBtn);
 
-            const addBtn = buildAddButton(question, true, dialog);
+            const addBtn = buildAddButton(question, true, dialog, ngZone);
             actionsButtons.appendChild(addBtn);
 
             parentElement.insertBefore(
diff --git a/libs/safe/src/lib/survey/components/utils.ts b/libs/safe/src/lib/survey/components/utils.ts
@@ -1,4 +1,5 @@
 import { Dialog } from '@angular/cdk/dialog';
+import { NgZone } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { surveyLocalization } from 'survey-angular';
 
@@ -64,12 +65,14 @@ export const buildSearchButton = (
  * @param question The question object
  * @param multiselect Indicate if we need multiselect
  * @param dialog The Dialog service
+ * @param ngZone Angular Service to execute code inside Angular environment
  * @returns The button DOM element
  */
 export const buildAddButton = (
   question: any,
   multiselect: boolean,
-  dialog: Dialog
+  dialog: Dialog,
+  ngZone: NgZone
 ): any => {
   const addButton = document.createElement('button');
   addButton.innerText = surveyLocalization.getString(
@@ -78,60 +81,61 @@ export const buildAddButton = (
   );
   if (question.addRecord && question.addTemplate && !question.isReadOnly) {
     addButton.onclick = async () => {
-      const { SafeResourceModalComponent } = await import(
-        '../../components/resource-modal/resource-modal.component'
-      );
-      const dialogRef = dialog.open(SafeResourceModalComponent, {
-        disableClose: true,
-        data: {
-          template: question.addTemplate,
-          locale: question.resource.value,
-          askForConfirm: false,
-          ...(question.prefillWithCurrentRecord && {
-            prefillData: question.survey.data,
-          }),
-        },
-        height: '98%',
-        width: '100vw',
-        panelClass: 'full-screen-modal',
-        autoFocus: false,
-      });
-      dialogRef.closed.subscribe((result: any) => {
-        if (result) {
-          const { data } = result;
-          // TODO: call reload method
-          // if (question.displayAsGrid && gridComponent) {
-          //   gridComponent.availableRecords.push({
-          //     value: data.id,
-          //     text: data.data[question.displayField]
-          //   });
-          // }
-          if (multiselect) {
-            const newItem = {
-              value: data.id,
-              text: data.data[question.displayField],
-            };
-            question.contentQuestion.choices = [
-              newItem,
-              ...question.contentQuestion.choices,
-            ];
-            question.newCreatedRecords = question.newCreatedRecords
-              ? question.newCreatedRecords.concat(data.id)
-              : [data.id];
-            question.value = question.value.concat(data.id);
-          } else {
-            const newItem = {
-              value: data.id,
-              text: data.data[question.displayField],
-            };
-            question.contentQuestion.choices = [
-              newItem,
-              ...question.contentQuestion.choices,
-            ];
-            question.newCreatedRecords = data.id;
-            question.value = data.id;
+      ngZone.run(async () => {
+        const { SafeResourceModalComponent } = await import(
+          '../../components/resource-modal/resource-modal.component'
+        );
+        const dialogRef = dialog.open(SafeResourceModalComponent, {
+          disableClose: true,
+          data: {
+            template: question.addTemplate,
+            locale: question.resource.value,
+            askForConfirm: false,
+            ...(question.prefillWithCurrentRecord && {
+              prefillData: question.survey.data,
+            }),
+          },
+          height: '98%',
+          width: '100vw',
+          panelClass: 'full-screen-modal',
+        });
+        dialogRef.closed.subscribe((result: any) => {
+          if (result) {
+            const { data } = result;
+            // TODO: call reload method
+            // if (question.displayAsGrid && gridComponent) {
+            //   gridComponent.availableRecords.push({
+            //     value: data.id,
+            //     text: data.data[question.displayField]
+            //   });
+            // }
+            if (multiselect) {
+              const newItem = {
+                value: data.id,
+                text: data.data[question.displayField],
+              };
+              question.contentQuestion.choices = [
+                newItem,
+                ...question.contentQuestion.choices,
+              ];
+              question.newCreatedRecords = question.newCreatedRecords
+                ? question.newCreatedRecords.concat(data.id)
+                : [data.id];
+              question.value = question.value.concat(data.id);
+            } else {
+              const newItem = {
+                value: data.id,
+                text: data.data[question.displayField],
+              };
+              question.contentQuestion.choices = [
+                newItem,
+                ...question.contentQuestion.choices,
+              ];
+              question.newCreatedRecords = data.id;
+              question.value = data.id;
+            }
           }
-        }
+        });
       });
     };
   }
diff --git a/libs/safe/src/lib/survey/init.ts b/libs/safe/src/lib/survey/init.ts
@@ -21,6 +21,7 @@ import * as ReferenceDataProperties from './global-properties/reference-data';
 import * as TooltipProperty from './global-properties/tooltip';
 import { initLocalization } from './localization';
 import { Dialog } from '@angular/cdk/dialog';
+import { NgZone } from '@angular/core';
 
 /**
  * Executes all init methods of custom SurveyJS.
@@ -34,6 +35,7 @@ import { Dialog } from '@angular/cdk/dialog';
  * @param environment injected environment
  * @param referenceDataService Reference data service
  * @param containsCustomQuestions If survey contains custom questions or not
+ * @param ngZone Angular Service to execute code inside Angular environment
  */
 export const initCustomSurvey = (
   Survey: any,
@@ -44,7 +46,8 @@ export const initCustomSurvey = (
   authService: SafeAuthService,
   environment: any,
   referenceDataService: SafeReferenceDataService,
-  containsCustomQuestions: boolean
+  containsCustomQuestions: boolean,
+  ngZone: NgZone
 ): void => {
   // If the survey created does not contain custom questions, we destroy previously set custom questions if so
   if (!containsCustomQuestions) {
@@ -59,8 +62,22 @@ export const initCustomSurvey = (
   if (containsCustomQuestions) {
     CommentWidget.init(Survey);
     // load components (same as widgets, but with less configuration options)
-    ResourceComponent.init(Survey, domService, apollo, dialog, formBuilder);
-    ResourcesComponent.init(Survey, domService, apollo, dialog, formBuilder);
+    ResourceComponent.init(
+      Survey,
+      domService,
+      apollo,
+      dialog,
+      formBuilder,
+      ngZone
+    );
+    ResourcesComponent.init(
+      Survey,
+      domService,
+      apollo,
+      dialog,
+      formBuilder,
+      ngZone
+    );
     OwnerComponent.init(Survey, domService, apollo);
     UsersComponent.init(Survey, domService, apollo);
   }
