feat/AB#80252_Allow-frontend-to-reload-when-admin-updates/create-a-form

apps/back-office/src/app/dashboard/pages/form-builder/form-builder.component.ts

@@ -19,6 +19,7 @@ import {
   EditFormMutationResponse,
   SnackbarSpinnerComponent,
 } from '@oort-front/shared';
+
 import { SpinnerComponent } from '@oort-front/ui';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -29,6 +30,7 @@ import { isEqual } from 'lodash';
 import { GraphQLError } from 'graphql';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { QueryBuilderService } from '@oort-front/shared';
 
 /** Default snackbar config for after request complete  */
 const REQUEST_SNACKBAR_CONF = {
@@ -90,6 +92,7 @@ export class FormBuilderComponent implements OnInit {
    * @param translate Angular translate service
    * @param breadcrumbService Shared breadcrumb service
    * @param overlay Angular overlay service
+   * @param queryBuilder Query builder service
    */
   constructor(
     private apollo: Apollo,
@@ -101,7 +104,8 @@ export class FormBuilderComponent implements OnInit {
     private confirmService: ConfirmService,
     private translate: TranslateService,
     private breadcrumbService: BreadcrumbService,
-    private overlay: Overlay
+    private overlay: Overlay,
+    private queryBuilder: QueryBuilderService
   ) {}
 
   /**
@@ -308,9 +312,38 @@ export class FormBuilderComponent implements OnInit {
             loadingSnackbarRef.instance.dismiss();
             this.snackBar.openSnackBar(err.message, { error: true });
           },
-          complete: () => {
+          complete: async () => {
             // Detach the current set overlay
             overlayRef.detach();
+
+            let connected = false;
+
+            // Subscribe to the isDoneLoading$ observable to get the current state of
+            // the backend connection after reloading the query types
+            await this.queryBuilder.isDoneLoading$.subscribe(
+              async (isDoneLoading) => {
+                connected = isDoneLoading;
+              }
+            );
+
+            // Wait for 3 seconds to start reloading the query types
+            await new Promise((resolve) => setTimeout(resolve, 3000));
+
+            // Reload the query types
+            this.queryBuilder.reloadQueryTypes.next(null);
+
+            // Set the isDoneLoading to false to wait for the backend connection
+            this.queryBuilder.isDoneLoading.next(false);
+
+            // Wait for backend connection to be established
+            const waitForBackendConnection = async (): Promise<void> => {
+              while (!connected) {
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+              }
+            };
+
+            // Start waiting for backend connection
+            await waitForBackendConnection();
           },
         });
     }

libs/shared/src/index.ts

@@ -24,6 +24,7 @@ export * from './lib/services/context/context.service';
 export * from './lib/services/data-template/data-template.service';
 export * from './lib/services/editor/editor.service';
 export * from './lib/services/rest/rest.service';
+export * from './lib/services/query-builder/query-builder.service';
 
 // === DIRECTIVES ===
 export * from './lib/directives/skeleton/public-api';

libs/shared/src/lib/services/query-builder/query-builder.service.ts

@@ -107,10 +107,13 @@ export class QueryBuilderService {
   }
 
   /** Loading indicator that asserts whether available queries are done loading */
-  private isDoneLoading = new ReplaySubject<boolean>();
+  public isDoneLoading = new ReplaySubject<boolean>();
   /** Loading indicator as observable */
   public isDoneLoading$ = this.isDoneLoading.asObservable();
 
+  /** Reload indicator for query types */
+  public reloadQueryTypes = new BehaviorSubject<any>(null);
+
   /** User fields */
   private userFields = [];
 
@@ -122,22 +125,37 @@ export class QueryBuilderService {
    */
   constructor(private apollo: Apollo) {
     this.isDoneLoading.next(false);
+    this.fetchTypes();
+    this.reloadQueryTypes.subscribe(() => {
+      this.fetchTypes();
+    });
+  }
+
+  /**
+   * Fetches the types from the schema.
+   */
+  private async fetchTypes() {
     this.apollo
       .query<QueryTypes>({
         query: GET_QUERY_TYPES,
       })
-      .subscribe(({ data }) => {
-        this.isDoneLoading.next(true);
-        this.availableTypes.next(data.__schema.types);
-        this.availableQueries.next(
-          data.__schema.queryType.fields.filter(
-            (x: any) =>
-              x.name.startsWith('all') || x.name.endsWith(REFERENCE_DATA_END)
-          )
-        );
-        this.userFields = data.__schema.types
-          .find((x: any) => x.name === 'User')
-          .fields.filter((x: any) => USER_FIELDS.includes(x.name));
+      .subscribe({
+        next: ({ data }) => {
+          this.isDoneLoading.next(true);
+          this.availableTypes.next(data.__schema.types);
+          this.availableQueries.next(
+            data.__schema.queryType.fields.filter(
+              (x: any) =>
+                x.name.startsWith('all') || x.name.endsWith(REFERENCE_DATA_END)
+            )
+          );
+          this.userFields = data.__schema.types
+            .find((x: any) => x.name === 'User')
+            .fields.filter((x: any) => USER_FIELDS.includes(x.name));
+        },
+        error: () => {
+          this.isDoneLoading.next(false);
+        },
       });
   }