Merge branch 'master' into feature-kw-category-button-grid

packages/components/plh/index.ts

@@ -2,24 +2,28 @@ import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-po
 import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.component";
 import { PlhModuleListItemComponent } from "./plh-kids-kw/components/module-list-item/module-list-item.component";
 import { PlhCompletionModalComponent } from "./plh-kids-kw/components/completion-modal/completion-modal.component";
+import { PlhModuleDetailsHeaderComponent } from "./plh-kids-kw/components/module-details-header/module-details-header.component";
 
 export {
   PlhParentPointCounterComponent,
   PlhParentPointBoxComponent,
   PlhModuleListItemComponent,
   PlhCompletionModalComponent,
+  PlhModuleDetailsHeaderComponent,
 };
 
 export const PLH_COMPONENTS = [
   PlhParentPointCounterComponent,
   PlhParentPointBoxComponent,
   PlhModuleListItemComponent,
   PlhCompletionModalComponent,
+  PlhModuleDetailsHeaderComponent,
 ];
 
 export const PLH_COMPONENT_MAPPING = {
   parent_point_counter: PlhParentPointCounterComponent,
   parent_point_box: PlhParentPointBoxComponent,
+  plh_module_details_header: PlhModuleDetailsHeaderComponent,
   plh_module_list_item: PlhModuleListItemComponent,
   plh_completion_modal: PlhCompletionModalComponent,
 };

packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html

@@ -0,0 +1,29 @@
+<div class="module-header">
+  <div
+    class="wrapper"
+    [attr.data-language-direction]="templateTranslateService.languageDirection()"
+  >
+    @if (!this.params.hideBackButton) {
+      <div class="back-button">
+        <ion-button size="small" (click)="handleBackButtonClick()">
+          <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+        </ion-button>
+      </div>
+    }
+    <div class="image">
+      @if (params.moduleImageAsset) {
+        <div
+          class="module-illustration"
+          [style.backgroundImage]="'url(' + (params.backgroundImageAsset | plhAsset) + ')'"
+        >
+          <img [src]="params.moduleImageAsset | plhAsset" class="module-image" />
+        </div>
+      }
+    </div>
+    @if (_row.value) {
+      <div class="module-title">
+        <h2>{{ _row.value }}</h2>
+      </div>
+    }
+  </div>
+</div>

packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss

@@ -0,0 +1,10 @@
+.back-button {
+  position: absolute;
+  ion-button {
+    margin: var(--regular-margin);
+    --box-shadow: none;
+    --border-radius: var(--ion-border-radius-standard);
+    --padding-top: 8px;
+    --padding-bottom: 8px;
+  }
+}

packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { PlhModuleDetailsHeaderComponent } from "./module-details-header.component";
+
+describe("ModuleDetailsHeaderComponent", () => {
+  let component: PlhModuleDetailsHeaderComponent;
+  let fixture: ComponentFixture<PlhModuleDetailsHeaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PlhModuleDetailsHeaderComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlhModuleDetailsHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts

@@ -0,0 +1,55 @@
+import { Location } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
+import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service";
+import {
+  getBooleanParamFromTemplateRow,
+  getStringParamFromTemplateRow,
+} from "src/app/shared/utils";
+
+interface IModuleHeaderParams {
+  backgroundImageAsset?: string;
+  moduleImageAsset?: string;
+  hideBackButton?: boolean;
+}
+@Component({
+  selector: "plh-module-details-header",
+  templateUrl: "./module-details-header.component.html",
+  styleUrls: ["./module-details-header.component.scss"],
+})
+export class PlhModuleDetailsHeaderComponent extends TemplateBaseComponent implements OnInit {
+  params: Partial<IModuleHeaderParams> = {};
+
+  constructor(
+    public templateTranslateService: TemplateTranslateService,
+    private location: Location
+  ) {
+    super();
+  }
+
+  ngOnInit() {
+    this.getParams();
+  }
+
+  public handleBackButtonClick() {
+    this.location.back();
+  }
+
+  private getParams() {
+    this.params.backgroundImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "background_image_asset",
+      null
+    );
+    this.params.moduleImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "module_image_asset",
+      null
+    );
+    this.params.hideBackButton = getBooleanParamFromTemplateRow(
+      this._row,
+      "hide_back_button",
+      false
+    );
+  }
+}

packages/data-models/appConfig.ts

@@ -117,6 +117,10 @@ const APP_FOOTER_DEFAULTS: { templateName: string | null } = {
   templateName: null,
 };
 
+const LAYOUT = {
+  page_padding: "24px",
+};
+
 const APP_SIDEMENU_DEFAULTS = {
   enabled: true,
   title: "App",
@@ -205,6 +209,7 @@ const APP_CONFIG = {
   APP_UPDATES,
   ASSET_PACKS,
   FEEDBACK_MODULE_DEFAULTS,
+  LAYOUT,
   NOTIFICATIONS_SYNC_FREQUENCY_MS,
   NOTIFICATION_DEFAULTS,
   SERVER_SYNC_FREQUENCY_MS,

src/app/app.component.html

@@ -42,7 +42,7 @@
     <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">
+        <div class="route-container" [ngStyle]="routeContainerStyle()">
           <ion-router-outlet id="main-content"></ion-router-outlet>
         </div>
         @if (footerDefaults().templateName; as footerTemplateName) {

src/app/app.component.ts

@@ -53,6 +53,15 @@ import { TemplateMetadataService } from "./shared/components/template/services/t
 export class AppComponent {
   sideMenuDefaults = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
   footerDefaults = computed(() => this.appConfigService.appConfig().APP_FOOTER_DEFAULTS);
+  layoutConfig = computed(() => this.appConfigService.appConfig().LAYOUT);
+
+  public routeContainerStyle = computed(() => {
+    const { page_padding } = this.layoutConfig();
+    return {
+      "--page-padding": page_padding,
+    };
+  });
+
   /** Track when app ready to render sidebar and route templates */
   public renderAppTemplates = signal(false);
 

src/app/shared/services/dynamic-data/adapters/reactiveMemory.ts

@@ -31,7 +31,7 @@ export const REACTIVE_SCHEMA_BASE: RxJsonSchema<any> = {
   title: "base schema for id-primary key data",
   // NOTE - important to start at 0 and not timestamp (e.g. 20221220) as will check
   // for migration strategies for each version which is hugely inefficient
-  version: 1,
+  version: 2,
   primaryKey: "id",
   type: "object",
   properties: {
@@ -40,6 +40,11 @@ export const REACTIVE_SCHEMA_BASE: RxJsonSchema<any> = {
       maxLength: 128, // <- the primary key must have set maxLength
     },
     row_index: { type: "integer", minimum: 0, maximum: 10000, multipleOf: 1, final: true },
+    APP_META: {
+      type: "object",
+      additionalProperties: true,
+      default: {},
+    },
   },
   required: ["id"],
   indexes: ["row_index"],
@@ -49,6 +54,13 @@ const MIGRATIONS: MigrationStrategies = {
     const newDoc = { ...oldDoc, row_index: 0 };
     return newDoc;
   },
+  2: (oldDoc) => {
+    const newDoc = {
+      ...oldDoc,
+      APP_META: oldDoc.APP_META ?? {},
+    };
+    return newDoc;
+  },
 };
 
 interface IDataUpdate {

src/app/shared/services/dynamic-data/dynamic-data.service.ts

@@ -288,8 +288,9 @@ export class DynamicDataService extends AsyncServiceBase {
     }
     const schema = REACTIVE_SCHEMA_BASE;
     for (const key of Object.keys(fields)) {
-      if (!schema.properties[key]) {
-        // assign any provided metadata, with fallback 'string' type if not specified
+      // assign any provided metadata, with fallback 'string' type if not specified
+      // ignore any `_` fields as these will be merged into APP_META (do not satisfy rxdb regex)
+      if (!schema.properties[key] && !key.startsWith("_")) {
         const type = metadata[key]?.type || "string";
         schema.properties[key] = { ...metadata[key], type };
       }

src/theme/deployment/_overrides.scss

@@ -5,10 +5,11 @@ plh-button > ion-button {
 
 /// Ensure all pages have padding
 ion-content {
-  --padding-top: 24px;
-  --padding-bottom: 24px;
-  --padding-start: 24px;
-  --padding-end: 24px;
+  $default-padding: 24px;
+  --padding-top: var(--page-padding, #{$default-padding});
+  --padding-bottom: var(--page-padding, #{$default-padding});
+  --padding-start: var(--page-padding, #{$default-padding});
+  --padding-end: var(--page-padding, #{$default-padding});
 
   // HACK: prevent scrollbar from hiding when interacting with ion-range, for example (this can cause visual glitches).
   // see https://github.com/ionic-team/ionic-framework/issues/25595#issuecomment-1330293954

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -536,6 +536,7 @@ body[data-theme="plh_kids_kw"] {
       padding: 16px;
       box-shadow: 1px 1px 10px #92b7da;
       background-color: #f6fafe;
+      margin: 12px 0;
       .container {
         display: flex;
         flex-direction: row;
@@ -570,10 +571,6 @@ body[data-theme="plh_kids_kw"] {
       .icon {
         width: 28px;
         max-width: unset;
-        &[data-language-direction~="rtl"] {
-          -webkit-transform: scaleX(-1);
-          transform: scaleX(-1);
-        }
       }
       .container[data-language-direction~="rtl"] {
         .module-title {
@@ -587,6 +584,10 @@ body[data-theme="plh_kids_kw"] {
             transform: scaleX(-1);
           }
         }
+        .icon {
+          -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+        }
       }
     }
     .module-item[data-lock~="true"] {
@@ -659,6 +660,46 @@ body[data-theme="plh_kids_kw"] {
     }
   }
 
+  // module header
+  plh-module-details-header {
+    .module-header {
+      border-bottom-left-radius: 40px;
+      border-bottom-right-radius: 40px;
+      background-color: #9ecbf5;
+    }
+    .image {
+      .module-illustration {
+        height: 380px;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 320px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      img.module-image {
+        max-width: 190px;
+        min-width: 190px;
+        margin-top: -30px;
+        border-radius: 50%;
+      }
+    }
+    .module-title {
+      margin-top: -70px;
+      padding-bottom: 30px;
+      padding-left: 16px;
+      h2 {
+        font-weight: var(--font-weight-bold);
+        font-size: 28px;
+      }
+    }
+    .wrapper[data-language-direction~="rtl"] {
+      .module-title {
+        padding-right: 16px;
+      }
+    }
+  }
   // Round Button
   ion-tab-button {
     box-shadow: none;