diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts index a1996869f..d34c6cb1e 100644 --- a/packages/data-models/appConfig.ts +++ b/packages/data-models/appConfig.ts @@ -89,44 +89,27 @@ export type IHeaderVariantOptions = "default" | "compact"; interface IAppConfigHeader { back_button: { - hidden: boolean; + hidden?: boolean; }; collapse: boolean; colour: IHeaderFooterBackgroundOptions; - hidden: boolean; + hidden?: boolean; menu_button: { - hidden: boolean; + hidden?: boolean; }; template: string | null; title: string; variant: IHeaderVariantOptions; - should_show_menu_button: (location: Location) => boolean; - should_show_back_button: (location: Location) => boolean; - should_minimize_app_on_back: (location: Location) => boolean; } const APP_HEADER_DEFAULTS: IAppConfigHeader = { - back_button: { - hidden: false, - }, + back_button: {}, collapse: false, colour: "primary", - hidden: false, - menu_button: { - hidden: false, - }, + menu_button: {}, template: null, title: "App", variant: "default", - // default only show menu button on home screen - should_show_menu_button: (location: Location) => - activeRoute(location) === APP_ROUTE_DEFAULTS.home_route, - // default show back button on all screens except home screen - should_show_back_button: (location: Location) => - activeRoute(location) !== APP_ROUTE_DEFAULTS.home_route, - // on device minimize app when back button pressed from home screen - should_minimize_app_on_back: (location: Location) => - activeRoute(location) === APP_ROUTE_DEFAULTS.home_route, }; /** diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts index 6d2717ca0..ca6e19797 100644 --- a/src/app/shared/components/header/header.component.ts +++ b/src/app/shared/components/header/header.component.ts @@ -2,7 +2,7 @@ import { Location } from "@angular/common"; import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from "@angular/core"; import { computed, effect, signal } from "@angular/core"; import { toSignal } from "@angular/core/rxjs-interop"; -import { NavigationEnd, NavigationStart, Router } from "@angular/router"; +import { NavigationStart, Router } from "@angular/router"; import { App } from "@capacitor/app"; import { Capacitor, PluginListenerHandle } from "@capacitor/core"; import { Subscription, fromEvent, map } from "rxjs"; @@ -10,6 +10,7 @@ import type { IHeaderVariantOptions } from "data-models/appConfig"; import { AppConfigService } from "../../services/app-config/app-config.service"; import { IonHeader, ScrollBaseCustomEvent, ScrollDetail } from "@ionic/angular"; import { _wait } from "packages/shared/src/utils/async-utils"; +import { activeRoute } from "../../utils/angular.utils"; interface ScrollCustomEvent extends ScrollBaseCustomEvent { detail: ScrollDetail; @@ -51,6 +52,9 @@ export class headerComponent implements OnInit, OnDestroy { /** Track scroll events when using header collapse mode */ private scrollEvents$: Subscription; + /** Track whether on home route for back button and menu button side-effects */ + private isHomeRoute = true; + constructor( private router: Router, private location: Location, @@ -101,13 +105,16 @@ export class headerComponent implements OnInit, OnDestroy { /** Determine whether to show back and menu buttons based on location */ private handleRouteChange() { - const { back_button, menu_button, should_show_back_button, should_show_menu_button } = - this.headerConfig(); + // update whether home route or not + const { APP_ROUTE_DEFAULTS } = this.appConfigService.appConfig(); + this.isHomeRoute = activeRoute(location) === APP_ROUTE_DEFAULTS.home_route; + + const { back_button, menu_button } = this.headerConfig(); // The explicit `hidden` property should override the function of location // TODO: move functions to component code and out of app config, no use case for overriding them - const showBackButton = !back_button.hidden && should_show_back_button(location); - const showMenuButton = !menu_button.hidden && should_show_menu_button(location); + const showBackButton = !back_button.hidden && !this.isHomeRoute; + const showMenuButton = !menu_button.hidden && this.isHomeRoute; this.showBackButton.set(showBackButton); this.showMenuButton.set(showMenuButton); this.marginTop.set(0); @@ -115,8 +122,7 @@ export class headerComponent implements OnInit, OnDestroy { /** When device back button evaluate conditions to handle app minimise */ private handleHardwareBackPress() { - const { should_minimize_app_on_back } = this.headerConfig(); - if (should_minimize_app_on_back(location)) { + if (this.isHomeRoute) { App.minimizeApp(); } } diff --git a/src/app/shared/services/skin/skin.service.spec.ts b/src/app/shared/services/skin/skin.service.spec.ts index 4b8b03b0a..2c86f9069 100644 --- a/src/app/shared/services/skin/skin.service.spec.ts +++ b/src/app/shared/services/skin/skin.service.spec.ts @@ -32,14 +32,12 @@ const MOCK_SKIN_2: IAppSkin = { const MOCK_APP_CONFIG: Partial = { APP_HEADER_DEFAULTS: { + back_button: {}, + menu_button: {}, template: null, - show: true, title: "default", collapse: false, colour: "none", - should_minimize_app_on_back: () => true, - should_show_back_button: () => true, - should_show_menu_button: () => true, variant: "default", }, APP_SKINS: { diff --git a/src/app/shared/utils/angular.utils.ts b/src/app/shared/utils/angular.utils.ts index 9746020e0..8f42ef36b 100644 --- a/src/app/shared/utils/angular.utils.ts +++ b/src/app/shared/utils/angular.utils.ts @@ -35,3 +35,13 @@ export function ngRouterMergedSnapshot$(router: Router) { startWith(mergeRouterSnapshots(router)) ); } + +/** + * Utility function to return the active pathname without any sidebar routing e.g. /home(sidebar:alt) + * or basename when deployed to subfolder path, e.g. /my-repo/template/home (provided by in head) + * */ +export const activeRoute = (location: Location) => { + const baseHref = document.querySelector("base")?.getAttribute("href"); + const path = location.pathname.replace(baseHref, "/").replace(/\(.+\)/, ""); + return path; +};