From 24d83a631ae0a37296d34b6be4d250806dd4494f Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Fri, 22 Nov 2024 08:06:57 +0300 Subject: [PATCH 01/19] init: header component --- packages/components/plh/index.ts | 14 +++++++++-- .../module-details-header.component.html | 1 + .../module-details-header.component.scss | 0 .../module-details-header.component.spec.ts | 24 +++++++++++++++++++ .../module-details-header.component.ts | 11 +++++++++ src/theme/themes/plh_kids_kw/_overrides.scss | 4 +++- 6 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html create mode 100644 packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss create mode 100644 packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.spec.ts create mode 100644 packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts diff --git a/packages/components/plh/index.ts b/packages/components/plh/index.ts index f77c8020b5..d042ad9341 100644 --- a/packages/components/plh/index.ts +++ b/packages/components/plh/index.ts @@ -7,11 +7,20 @@ import { TemplatePipesModule } from "src/app/shared/components/template/pipes"; import { LottieModule } from "ngx-lottie"; import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-point-counter.component"; import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.component"; +import { PlhModuleDetailsHeaderComponent } from "./plh-kids-kw/components/module-details-header/module-details-header.component"; @NgModule({ imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule], - exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent], - declarations: [PlhParentPointCounterComponent, PlhParentPointBoxComponent], + exports: [ + PlhParentPointCounterComponent, + PlhParentPointBoxComponent, + PlhModuleDetailsHeaderComponent, + ], + declarations: [ + PlhParentPointCounterComponent, + PlhParentPointBoxComponent, + PlhModuleDetailsHeaderComponent, + ], providers: [], }) export class PlhComponentsModule {} @@ -19,4 +28,5 @@ export class PlhComponentsModule {} export const PLH_COMPONENT_MAPPING: Record> = { parent_point_counter: PlhParentPointCounterComponent, parent_point_box: PlhParentPointBoxComponent, + plh_module_details_header: PlhModuleDetailsHeaderComponent, }; diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html new file mode 100644 index 0000000000..76cdd1b3c9 --- /dev/null +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html @@ -0,0 +1 @@ +

module-details-header works!

diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.spec.ts b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.spec.ts new file mode 100644 index 0000000000..55d43ae18a --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts new file mode 100644 index 0000000000..6c6728a085 --- /dev/null +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from "@angular/core"; +import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; + +@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 { + ngOnInit() {} +} diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index d3286f84e0..603f20631e 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -248,4 +248,6 @@ body[data-theme="plh_kids_kw"] { } } } -} \ No newline at end of file + + // module header +} From 6652e07225fa5d4e6584ce4ba4de3373284bc2cf Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Fri, 22 Nov 2024 18:32:27 +0300 Subject: [PATCH 02/19] feat: header params --- .../module-details-header.component.ts | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts index 6c6728a085..69ad13cfcc 100644 --- a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts @@ -1,11 +1,34 @@ 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 { getParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils"; +interface IModuleHeaderParams { + bgImage?: string; + moduleImageAsset?: string; +} @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 { - ngOnInit() {} + params: Partial = {}; + + constructor(public templateTranslateService: TemplateTranslateService) { + super(); + } + + ngOnInit() { + this.getParams(); + } + + private getParams() { + this.params.bgImage = getStringParamFromTemplateRow(this._row, "background_illustration", null); + this.params.moduleImageAsset = getStringParamFromTemplateRow( + this._row, + "module_image_asset", + null + ); + } } From d94f7ddfdf80a87fe16464f1fa94be12bd31ba14 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Fri, 22 Nov 2024 18:32:57 +0300 Subject: [PATCH 03/19] feat: html structuree --- .../module-details-header.component.html | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html index 76cdd1b3c9..b9446501e4 100644 --- a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html @@ -1 +1,22 @@ -

module-details-header works!

+
+
+
+ @if (params.moduleImageAsset) { +
+ +
+ } +
+ @if (_row.value) { +
+

{{ _row.value }}

+
+ } +
+
From c7ef9807e9084bfb705b801a7e85cf6b623b4790 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Fri, 22 Nov 2024 18:33:07 +0300 Subject: [PATCH 04/19] styling --- src/theme/themes/plh_kids_kw/_overrides.scss | 38 ++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 603f20631e..693cdf0184 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -250,4 +250,42 @@ 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: 480px; + background-position: center; + background-repeat: no-repeat; + background-size: 380px; + + display: flex; + justify-content: center; + align-items: center; + } + img.module-image { + max-width: 220px; + min-width: 220px; + margin-top: -40px; + } + } + .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; + } + } + } } From 87e83196f7a670434e07457c5c2fabfd7935c6d2 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 3 Dec 2024 16:58:38 +0300 Subject: [PATCH 05/19] chore: change variable name --- .../module-details-header.component.html | 2 +- .../module-details-header.component.ts | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html index b9446501e4..d0bd1f7a56 100644 --- a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html @@ -7,7 +7,7 @@ @if (params.moduleImageAsset) {
diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts index 69ad13cfcc..4541fb9a95 100644 --- a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts @@ -1,10 +1,10 @@ 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 { getParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils"; +import { getStringParamFromTemplateRow } from "src/app/shared/utils"; interface IModuleHeaderParams { - bgImage?: string; + backgroundImageAsset?: string; moduleImageAsset?: string; } @Component({ @@ -24,7 +24,11 @@ export class PlhModuleDetailsHeaderComponent extends TemplateBaseComponent imple } private getParams() { - this.params.bgImage = getStringParamFromTemplateRow(this._row, "background_illustration", null); + this.params.backgroundImageAsset = getStringParamFromTemplateRow( + this._row, + "background_image_asset", + null + ); this.params.moduleImageAsset = getStringParamFromTemplateRow( this._row, "module_image_asset", From 9626b65718738f08bb6bc8b74483b7b06b539816 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 3 Dec 2024 16:59:26 +0300 Subject: [PATCH 06/19] styling: border radius of images at 50% --- src/theme/themes/plh_kids_kw/_overrides.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 8f16299834..8c0541eaf0 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -690,6 +690,7 @@ body[data-theme="plh_kids_kw"] { max-width: 220px; min-width: 220px; margin-top: -40px; + border-radius: 50%; } } .module-title { From d1a6905a36b8e6d49d3581d1460c7907984c3120 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 9 Dec 2024 17:24:01 +0000 Subject: [PATCH 07/19] feat: expose main app content padding as deployment config param --- packages/data-models/appConfig.ts | 5 +++++ src/app/app.component.html | 5 ++++- src/app/app.component.ts | 1 + src/theme/deployment/_overrides.scss | 9 +++++---- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts index 6e3d690c50..5e509a2535 100644 --- a/packages/data-models/appConfig.ts +++ b/packages/data-models/appConfig.ts @@ -117,6 +117,10 @@ const APP_FOOTER_DEFAULTS: { templateName: string | null } = { templateName: null, }; +const LAYOUT = { + main_content_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, diff --git a/src/app/app.component.html b/src/app/app.component.html index 1b16ac041d..88211ced02 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -42,7 +42,10 @@
-
+
@if (footerDefaults().templateName; as footerTemplateName) { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 323455791f..97051703a7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -53,6 +53,7 @@ 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); /** Track when app ready to render sidebar and route templates */ public renderAppTemplates = signal(false); diff --git a/src/theme/deployment/_overrides.scss b/src/theme/deployment/_overrides.scss index cf08baa647..182d0d52a0 100644 --- a/src/theme/deployment/_overrides.scss +++ b/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(--main-content-padding, #{$default-padding}); + --padding-bottom: var(--main-content-padding, #{$default-padding}); + --padding-start: var(--main-content-padding, #{$default-padding}); + --padding-end: var(--main-content-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 From de24b06040faaf8726a92377028967820b595377 Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 9 Dec 2024 12:39:46 -0800 Subject: [PATCH 08/19] chore: code tidying --- src/app/app.component.html | 5 +---- src/app/app.component.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 88211ced02..1a4ee62ac7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -42,10 +42,7 @@
-
+
@if (footerDefaults().templateName; as footerTemplateName) { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 97051703a7..dd24b5fcaf 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -54,6 +54,14 @@ 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 { main_content_padding } = this.layoutConfig(); + return { + "--main-content-padding": main_content_padding, + }; + }); + /** Track when app ready to render sidebar and route templates */ public renderAppTemplates = signal(false); From 4c39c1f34838867dcf801e48b9cedd0894c0fd5b Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Tue, 10 Dec 2024 17:09:50 +0000 Subject: [PATCH 09/19] chore: rename 'main_content_padding' -> 'page_padding' --- src/app/app.component.ts | 4 ++-- src/theme/deployment/_overrides.scss | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index dd24b5fcaf..9700c51ffa 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -56,9 +56,9 @@ export class AppComponent { layoutConfig = computed(() => this.appConfigService.appConfig().LAYOUT); public routeContainerStyle = computed(() => { - const { main_content_padding } = this.layoutConfig(); + const { page_padding } = this.layoutConfig(); return { - "--main-content-padding": main_content_padding, + "--page-padding": page_padding, }; }); diff --git a/src/theme/deployment/_overrides.scss b/src/theme/deployment/_overrides.scss index 182d0d52a0..87ec9990d8 100644 --- a/src/theme/deployment/_overrides.scss +++ b/src/theme/deployment/_overrides.scss @@ -6,10 +6,10 @@ plh-button > ion-button { /// Ensure all pages have padding ion-content { $default-padding: 24px; - --padding-top: var(--main-content-padding, #{$default-padding}); - --padding-bottom: var(--main-content-padding, #{$default-padding}); - --padding-start: var(--main-content-padding, #{$default-padding}); - --padding-end: var(--main-content-padding, #{$default-padding}); + --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 From 6f3a74a6a4fde23657ad631abe81aa5433892ad5 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Tue, 10 Dec 2024 17:15:50 +0000 Subject: [PATCH 10/19] chore: commit all renaming --- packages/data-models/appConfig.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts index 5e509a2535..d296c9fb70 100644 --- a/packages/data-models/appConfig.ts +++ b/packages/data-models/appConfig.ts @@ -118,7 +118,7 @@ const APP_FOOTER_DEFAULTS: { templateName: string | null } = { }; const LAYOUT = { - main_content_padding: "24px", + page_padding: "24px", }; const APP_SIDEMENU_DEFAULTS = { From eab41d61513ebfa7a3dad414cebe94cb080aff40 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Thu, 12 Dec 2024 07:42:25 +0300 Subject: [PATCH 11/19] styling: reduce image size --- src/theme/themes/plh_kids_kw/_overrides.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 45439ae069..843cb24df8 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -668,18 +668,18 @@ body[data-theme="plh_kids_kw"] { } .image { .module-illustration { - height: 480px; + height: 380px; background-position: center; background-repeat: no-repeat; - background-size: 380px; + background-size: 320px; display: flex; justify-content: center; align-items: center; } img.module-image { - max-width: 220px; - min-width: 220px; + max-width: 190px; + min-width: 190px; margin-top: -40px; border-radius: 50%; } From 1d2332c6d485efd62855bede753f6cd7a9c55a41 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Sun, 15 Dec 2024 08:55:00 +0300 Subject: [PATCH 12/19] fix: flip nav asset in RTL --- src/theme/themes/plh_kids_kw/_overrides.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 330df60667..c0fe32e1fa 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/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,9 +584,15 @@ body[data-theme="plh_kids_kw"] { transform: scaleX(-1); } } + .icon { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } } } - .module-item[data-lock~="true"] { + .module-item[data-lock~="true"], + .module-item[data-lock~="True"], + .module-item[data-lock~="TRUE"] { box-shadow: none; opacity: 0.5; border: 2px solid #dbe3f2; From 05c2d3a624da0ba831bd8eadb841e18f8ce6d6dc Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Sun, 15 Dec 2024 09:55:01 +0300 Subject: [PATCH 13/19] reduce top margin --- src/theme/themes/plh_kids_kw/_overrides.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 843cb24df8..66cb54b70e 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -680,7 +680,7 @@ body[data-theme="plh_kids_kw"] { img.module-image { max-width: 190px; min-width: 190px; - margin-top: -40px; + margin-top: -30px; border-radius: 50%; } } From 2aceea88254f6c954b249599443a595d157ef431 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 16 Dec 2024 15:21:52 +0000 Subject: [PATCH 14/19] fix: dynamic data for data list including app metadata fields --- .../dynamic-data/adapters/reactiveMemory.ts | 14 +++++++++++++- .../services/dynamic-data/dynamic-data.service.ts | 2 ++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/app/shared/services/dynamic-data/adapters/reactiveMemory.ts b/src/app/shared/services/dynamic-data/adapters/reactiveMemory.ts index 59d8f62882..278fcd3f2d 100644 --- a/src/app/shared/services/dynamic-data/adapters/reactiveMemory.ts +++ b/src/app/shared/services/dynamic-data/adapters/reactiveMemory.ts @@ -31,7 +31,7 @@ export const REACTIVE_SCHEMA_BASE: RxJsonSchema = { 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 = { 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 { diff --git a/src/app/shared/services/dynamic-data/dynamic-data.service.ts b/src/app/shared/services/dynamic-data/dynamic-data.service.ts index 633d72b4f2..a336601f97 100644 --- a/src/app/shared/services/dynamic-data/dynamic-data.service.ts +++ b/src/app/shared/services/dynamic-data/dynamic-data.service.ts @@ -278,6 +278,8 @@ export class DynamicDataService extends AsyncServiceBase { * */ private inferSchema(dataRow: any, metadata: FlowTypes.Data_list["_metadata"] = {}) { + // Extract app meta data properties to an `APP_META` field (these fields will not have their type inferred) + dataRow = this.extractMeta(dataRow); const { id, ...fields } = dataRow; // TODO - could make QC check in parser instead of at runtime if (!id) { From 9de931cef49012e44c74194dcae9e4b90478b6fb Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 16 Dec 2024 08:38:03 -0800 Subject: [PATCH 15/19] chore: code tidying --- .../shared/services/dynamic-data/dynamic-data.service.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/shared/services/dynamic-data/dynamic-data.service.ts b/src/app/shared/services/dynamic-data/dynamic-data.service.ts index a336601f97..12fdfb0584 100644 --- a/src/app/shared/services/dynamic-data/dynamic-data.service.ts +++ b/src/app/shared/services/dynamic-data/dynamic-data.service.ts @@ -278,8 +278,6 @@ export class DynamicDataService extends AsyncServiceBase { * */ private inferSchema(dataRow: any, metadata: FlowTypes.Data_list["_metadata"] = {}) { - // Extract app meta data properties to an `APP_META` field (these fields will not have their type inferred) - dataRow = this.extractMeta(dataRow); const { id, ...fields } = dataRow; // TODO - could make QC check in parser instead of at runtime if (!id) { @@ -290,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 }; } From 5a9ca808de80c877f609fcdadea46c3cbc856bd8 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Tue, 17 Dec 2024 10:31:27 +0000 Subject: [PATCH 16/19] feat: add back button to plh module-details-header component --- .../module-details-header.component.html | 5 +++++ .../module-details-header.component.scss | 9 ++++++++ .../module-details-header.component.ts | 21 +++++++++++++++++-- 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html index d0bd1f7a56..c9b97b0421 100644 --- a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html @@ -3,6 +3,11 @@ class="wrapper" [attr.data-language-direction]="templateTranslateService.languageDirection()" > +
+ + + +
@if (params.moduleImageAsset) {
= {}; - constructor(public templateTranslateService: TemplateTranslateService) { + constructor( + public templateTranslateService: TemplateTranslateService, + private location: Location + ) { super(); } @@ -23,6 +31,10 @@ export class PlhModuleDetailsHeaderComponent extends TemplateBaseComponent imple this.getParams(); } + public handleBackButtonClick() { + this.location.back(); + } + private getParams() { this.params.backgroundImageAsset = getStringParamFromTemplateRow( this._row, @@ -34,5 +46,10 @@ export class PlhModuleDetailsHeaderComponent extends TemplateBaseComponent imple "module_image_asset", null ); + this.params.hideBackButton = getBooleanParamFromTemplateRow( + this._row, + "hide_back_button", + false + ); } } From 43414bbb77a5e598d8a7eb75e261205ef72eed8d Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Tue, 17 Dec 2024 10:33:22 +0000 Subject: [PATCH 17/19] chore: handle hide_back_buttonparam --- .../module-details-header.component.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html index c9b97b0421..3c875f94d9 100644 --- a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html @@ -3,11 +3,13 @@ class="wrapper" [attr.data-language-direction]="templateTranslateService.languageDirection()" > -
- - - -
+ @if (!this.params.hideBackButton) { +
+ + + +
+ }
@if (params.moduleImageAsset) {
Date: Tue, 17 Dec 2024 13:22:45 +0000 Subject: [PATCH 18/19] style: position module-header back button absolutely --- .../module-details-header/module-details-header.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss index a3939a21ad..95d726dfb9 100644 --- a/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss +++ b/packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.scss @@ -1,4 +1,5 @@ .back-button { + position: absolute; ion-button { margin: var(--regular-margin); --box-shadow: none; From aa146acd12ed945b7a29970e601aef60a70c7c0e Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Tue, 17 Dec 2024 14:01:26 +0000 Subject: [PATCH 19/19] chore: code tidy --- src/theme/themes/plh_kids_kw/_overrides.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index c0fe32e1fa..997c4f0605 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -590,9 +590,7 @@ body[data-theme="plh_kids_kw"] { } } } - .module-item[data-lock~="true"], - .module-item[data-lock~="True"], - .module-item[data-lock~="TRUE"] { + .module-item[data-lock~="true"] { box-shadow: none; opacity: 0.5; border: 2px solid #dbe3f2;