Merge branch 'master' of https://github.com/IDEMSInternational/open-a…

…pp-builder into feat/bottom-nav

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.16.38",
+  "version": "0.17.0",
   "author": "IDEMS International",
   "license": "See LICENSE",
   "homepage": "https://idems.international/",

packages/data-models/flowTypes.ts

@@ -432,6 +432,7 @@ export namespace FlowTypes {
     "pop_up",
     "process_template",
     "reset_app",
+    "reset_data",
     "save_to_device",
     "screen_orientation",
     "set_field",

packages/shared/src/utils/object-utils.ts

@@ -100,8 +100,7 @@ export function isEqual(a: any, b: any) {
     if (!isEqual(Object.keys(aSorted), Object.keys(bSorted))) return false;
     return isEqual(Object.values(aSorted), Object.values(bSorted));
   }
-  // could not compare (e.g. symbols, date objects, functions, buffers etc)
-  console.warn(`[isEqual] could not compare`, a, b);
+  // NOTE - does not compare symbols, date objects, functions, buffers etc.
   return false;
 }
 

src/app/app.component.html

@@ -1,67 +1,67 @@
-<ion-app
-  *ngIf="renderAppTemplates"
-  contentId="main"
-  [attr.data-platform]="platforms"
-  [dir]="templateTranslateService.languageDirection()"
->
-  <!-- Left Sidebar -->
-  <ion-menu
-    *ngIf="sideMenuDefaults.enabled"
-    #menu
-    side="start"
-    menuId="main-side-menu"
-    contentId="main-content"
+@if (renderAppTemplates()) {
+  <ion-app
+    contentId="main"
+    [attr.data-platform]="platforms"
+    [dir]="templateTranslateService.languageDirection()"
   >
-    <ion-header>
-      <ion-toolbar color="primary">
-        <ion-title>{{ sideMenuDefaults.title }}</ion-title>
-        <div class="app-version" slot="end">
-          @if (sideMenuDefaults.should_show_version) {
-            @if (deploymentConfig._content_version; as CONTENT_VERSION) {
-              <span>
-                <abbr [title]="deploymentConfig._app_builder_version" tabindex="1">
-                  {{ CONTENT_VERSION }}
-                </abbr>
-              </span>
-            } @else {
-              <span>{{ deploymentConfig._app_builder_version }} </span>
-            }
-          }
-          <span *ngIf="sideMenuDefaults.should_show_deployment_name" style="margin-left: 16px"
-            >({{ deploymentConfig.name }})</span
-          >
-        </div>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <plh-template-container
-        [templatename]="sideMenuDefaults.template_name"
-        (click)="menu.close()"
-        [ignoreQueryParamChanges]="true"
-      ></plh-template-container>
-    </ion-content>
-  </ion-menu>
-  <!-- Main content: shows in split-pane when sidebar route active -->
-  <ion-split-pane when="lg" contentId="main" [disabled]="!sidebarRouter.isActivated">
-    <div style="display: flex; flex-direction: column; height: 100%; width: 100%" id="main">
-      <plh-main-header></plh-main-header>
-      <div class="route-container">
-        <ion-router-outlet id="main-content"></ion-router-outlet>
-      </div>
-      <ion-footer *ngIf="footerDefaults.templateName">
-        <ion-toolbar color="primary">
+    <!-- Left Sidebar -->
+    @if (sideMenuDefaults().enabled) {
+      <ion-menu #menu side="start" menuId="main-side-menu" contentId="main-content">
+        <ion-header>
+          <ion-toolbar color="primary">
+            <ion-title>{{ sideMenuDefaults().title }}</ion-title>
+            <div class="app-version" slot="end">
+              @if (sideMenuDefaults().should_show_version) {
+                @if (deploymentConfig._content_version; as CONTENT_VERSION) {
+                  <span>
+                    <abbr [title]="deploymentConfig._app_builder_version" tabindex="1">
+                      {{ CONTENT_VERSION }}
+                    </abbr>
+                  </span>
+                } @else {
+                  <span>{{ deploymentConfig._app_builder_version }} </span>
+                }
+              }
+              @if (sideMenuDefaults().should_show_deployment_name) {
+                <span style="margin-left: 16px">({{ deploymentConfig.name }})</span>
+              }
+            </div>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
           <plh-template-container
-            [templatename]="footerDefaults.templateName"
+            [templatename]="sideMenuDefaults().template_name"
+            (click)="menu.close()"
             [ignoreQueryParamChanges]="true"
           ></plh-template-container>
-        </ion-toolbar>
-      </ion-footer>
-    </div>
-    <!-- Sidebar router -->
-    <ion-menu id="sidebar" contentId="main-content" side="end" swipeGesture="false">
-      <div id="sidebar-content">
-        <router-outlet name="sidebar" #sidebarRouter="outlet"></router-outlet>
+        </ion-content>
+      </ion-menu>
+    }
+
+    <!-- Main content: shows in split-pane when sidebar route active -->
+    <ion-split-pane when="lg" contentId="main" [disabled]="!sidebarRouter.isActivated">
+      <div style="display: flex; flex-direction: column; height: 100%; width: 100%" id="main">
+        <plh-main-header></plh-main-header>
+        <div class="route-container">
+          <ion-router-outlet id="main-content"></ion-router-outlet>
+        </div>
+        @if (footerDefaults().templateName; as footerTemplateName) {
+          <ion-footer>
+            <ion-toolbar color="primary">
+              <plh-template-container
+                [templatename]="footerTemplateName"
+                [ignoreQueryParamChanges]="true"
+              ></plh-template-container>
+            </ion-toolbar>
+          </ion-footer>
+        }
       </div>
-    </ion-menu>
-  </ion-split-pane>
-</ion-app>
+      <!-- Sidebar router -->
+      <ion-menu id="sidebar" contentId="main-content" side="end" swipeGesture="false">
+        <div id="sidebar-content">
+          <router-outlet name="sidebar" #sidebarRouter="outlet"></router-outlet>
+        </div>
+      </ion-menu>
+    </ion-split-pane>
+  </ion-app>
+}

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, signal } from "@angular/core";
 import { Platform, MenuController } from "@ionic/angular";
 import { Router } from "@angular/router";
 import { Capacitor } from "@capacitor/core";
@@ -30,7 +30,6 @@ import { AppDataService } from "./shared/services/data/app-data.service";
 import { AuthService } from "./shared/services/auth/auth.service";
 import { LifecycleActionsService } from "./shared/services/lifecycle-actions/lifecycle-actions.service";
 import { AppConfigService } from "./shared/services/app-config/app-config.service";
-import { IAppConfig } from "./shared/model";
 import { TaskService } from "./shared/services/task/task.service";
 import { AppUpdateService } from "./shared/services/app-update/app-update.service";
 import { RemoteAssetService } from "./shared/services/remote-asset/remote-asset.service";
@@ -49,14 +48,13 @@ import { TemplateMetadataService } from "./shared/components/template/services/t
   selector: "app-root",
   templateUrl: "app.component.html",
   styleUrls: ["app.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  appConfig: IAppConfig;
-  appAuthenticationDefaults: IAppConfig["APP_AUTHENTICATION_DEFAULTS"];
-  sideMenuDefaults: IAppConfig["APP_SIDEMENU_DEFAULTS"];
-  footerDefaults: IAppConfig["APP_FOOTER_DEFAULTS"];
+  sideMenuDefaults = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
+  footerDefaults = computed(() => this.appConfigService.appConfig().APP_FOOTER_DEFAULTS);
   /** Track when app ready to render sidebar and route templates */
-  public renderAppTemplates = false;
+  public renderAppTemplates = signal(false);
 
   public get deploymentConfig() {
     return this.deploymentService.config;
@@ -76,7 +74,6 @@ export class AppComponent {
 
     // 3rd Party Services
     private platform: Platform,
-    private cdr: ChangeDetectorRef,
     private menuController: MenuController,
     private router: Router,
     // App services
@@ -123,7 +120,6 @@ export class AppComponent {
   private async initializeApp() {
     this.platform.ready().then(async () => {
       this.platforms = this.platform.platforms().join(" ");
-      this.subscribeToAppConfigChanges();
       await this.populateAppInitFields();
       await this.initialiseCoreServices();
       this.hackSetDeveloperOptions();
@@ -150,9 +146,7 @@ export class AppComponent {
         await SplashScreen.hide();
       }
       // Show main template
-      this.renderAppTemplates = true;
-      // Detect changes in case expression changed prior to render (e.g. feedback sidebar)
-      this.cdr.detectChanges();
+      this.renderAppTemplates.set(true);
       this.scheduleReinitialisation();
     });
   }
@@ -176,14 +170,14 @@ export class AppComponent {
    */
   private async loadAuthConfig() {
     const { firebase } = this.deploymentService.config;
-    const { enforceLogin } = this.appAuthenticationDefaults;
+    const { enforceLogin, signInTemplate } =
+      this.appConfigService.appConfig().APP_AUTHENTICATION_DEFAULTS;
     const ensureLogin = firebase.config && enforceLogin && Capacitor.isNativePlatform();
     if (ensureLogin) {
       this.authService.ready();
       const authUser = await this.authService.getCurrentUser();
       if (!authUser) {
-        const templatename = this.appAuthenticationDefaults.signInTemplate;
-        const { modal } = await this.templateService.runStandaloneTemplate(templatename, {
+        const { modal } = await this.templateService.runStandaloneTemplate(signInTemplate, {
           showCloseButton: false,
           waitForDismiss: false,
         });
@@ -193,16 +187,6 @@ export class AppComponent {
     }
   }
 
-  /** Initialise appConfig and set dependent properties */
-  private subscribeToAppConfigChanges() {
-    this.appConfigService.changesWithInitialValue$.subscribe((changes: IAppConfig) => {
-      this.appConfig = { ...this.appConfig, ...changes };
-      this.sideMenuDefaults = this.appConfig.APP_SIDEMENU_DEFAULTS;
-      this.footerDefaults = this.appConfig.APP_FOOTER_DEFAULTS;
-      this.appAuthenticationDefaults = this.appConfig.APP_AUTHENTICATION_DEFAULTS;
-    });
-  }
-
   /**
    * Various services set core app data which may be used in templates such as current app day,
    * user id etc. Make sure these services have run their initialisation logic before proceeding.

src/app/shared/components/header/header.component.html

@@ -1,17 +1,26 @@
-<ion-header [class.ion-no-border]="colour === 'none'" [style.marginTop]="marginTop">
-  <ion-toolbar [color]="colour" [attr.data-colour]="colour">
+<ion-header
+  [class.ion-no-border]="headerConfig().colour === 'none'"
+  [style.marginTop]="marginTop() + 'px'"
+>
+  <ion-toolbar [color]="headerConfig().colour" [attr.data-colour]="headerConfig().colour">
     <ion-buttons slot="start" style="position: absolute">
-      <ion-menu-button *ngIf="showMenuButton" autoHide="false" menu="start"></ion-menu-button>
+      @if (showMenuButton()) {
+        <ion-menu-button autoHide="false" menu="start"></ion-menu-button>
+      }
       <ion-button
-        [style.display]="showBackButton ? 'block' : 'none'"
+        [style.display]="showBackButton() ? 'block' : 'none'"
         (click)="handleBackButtonClick()"
       >
         <ion-icon name="chevron-back-outline" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ng-container>
-      <ion-title *ngIf="!(variant === 'compact')" style="text-align: center" routerLink="/">
-        <span>{{ headerConfig.title }}</span>
+      <ion-title
+        *ngIf="!(headerConfig().variant === 'compact')"
+        style="text-align: center"
+        routerLink="/"
+      >
+        <span>{{ headerConfig().title }}</span>
       </ion-title>
     </ng-container>
     <ion-buttons slot="end"> </ion-buttons>