Merge branch 'master' into fix/data-items-action-value

IDEMSInternational · Feb 27, 2025 · 5d642b0 · 5d642b0
2 parents 8b6dad3 + 80fbf87
commit 5d642b0
Show file tree

Hide file tree

Showing 9 changed files with 232 additions and 168 deletions.
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "nest build",

diff --git a/packages/api/src/main.ts b/packages/api/src/main.ts
@@ -5,12 +5,18 @@ import { AppModule } from "./app.module";
 import { DBInstance } from "./db";
 import { environment } from "./environment";
 import { version } from "../package.json";
+import { json, urlencoded } from "express";
 
 async function bootstrap() {
   // DB Bootstrap (could be managed outside repo)
   await new DBInstance().setup();
   // API Bootstrap (auto connects to DB)
   const app = await NestFactory.create(AppModule);
+
+  // Configure body parser with increased payload size limits
+  app.use(json({ limit: "2mb" }));
+  app.use(urlencoded({ extended: true, limit: "2mb" }));
+
   app.enableCors();
   // Make available on reverse proxy path (e.g. /api)
   // app.setGlobalPrefix(environment.API_BASE_PATH || "");

diff --git a/...es/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html b/...es/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
@@ -1,50 +1,34 @@
-<div class="module-item" [attr.data-lock]="params.isLocked">
-  @if (!params.isLocked) {
-    <div
-      class="container"
-      [attr.data-language-direction]="templateTranslateService.languageDirection()"
-      (click)="triggerActions('click')"
-    >
-      @if (params.moduleImageAsset) {
-        <div class="module-image">
-          <img [src]="params.moduleImageAsset | plhAsset" />
-        </div>
-      }
-      @if (_row.value) {
-        <div class="module-title">
-          <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
-        </div>
-      }
-      @if (params.navImageAsset !== null) {
-        <div class="nav-icon">
-          <img class="icon" [src]="params.navImageAsset | plhAsset" />
-        </div>
-      } @else {
-        <div class="no-nav"></div>
-      }
+<div
+  class="container"
+  [attr.data-language-direction]="templateTranslateService.languageDirection()"
+  [attr.data-locked]="params().isLocked"
+  [attr.data-highlighted]="params().highlighted"
+  [attr.data-variant]="params().variant"
+  (click)="handleClick()"
+>
+  @if (params().moduleImageAsset) {
+    <div class="module-image">
+      <img [src]="params().moduleImageAsset | plhAsset" />
     </div>
   } @else {
-    <div
-      class="container"
-      [attr.data-language-direction]="templateTranslateService.languageDirection()"
-    >
-      @if (params.moduleImageAsset) {
-        <div class="module-image">
-          <img [src]="params.moduleImageAsset | plhAsset" />
-        </div>
-      }
-      @if (_row.value) {
-        <div class="module-title">
-          <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
-        </div>
-      }
-      @if (params.lockedImageAsset !== null) {
-        <div class="locked">
-          <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
-        </div>
-      } @else {
-        <div class="no-nav"></div>
-      }
+    <div class="image-spacer"></div>
+  }
+
+  @if (_row.value) {
+    <div class="module-title">
+      <p>{{ _row.value }}</p>
+    </div>
+  }
+
+  @if (params().isLocked && params().lockedImageAsset !== null) {
+    <div class="locked-icon">
+      <img class="icon" [src]="params().lockedImageAsset | plhAsset" />
     </div>
+  } @else if (!params().isLocked && params().navImageAsset !== null) {
+    <div class="nav-icon">
+      <img class="icon" [src]="params().navImageAsset | plhAsset" />
+    </div>
+  } @else {
+    <div class="icon-spacer"></div>
   }
 </div>
diff --git a/...es/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.scss b/...es/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.scss
@@ -0,0 +1,146 @@
+$default-color: var(--module-list-item-color-default, var(--ion-color-primary-300));
+$highlighted-color: var(--module-list-item-color-highlighted, var(--ion-color-secondary-300));
+
+// Styles common to variants
+.container {
+  cursor: pointer;
+  border: 2px solid $default-color;
+  box-shadow: 1px 1px 10px $default-color;
+  background-color: color-mix(in srgb, $default-color 5%, white);
+
+  &[data-language-direction~="rtl"] {
+    .module-image img,
+    .icon {
+      transform: scaleX(-1);
+    }
+  }
+
+  &[data-locked~="true"] {
+    cursor: not-allowed;
+    box-shadow: none;
+    border: 2px solid var(--ion-color-gray-200);
+    background-color: white;
+  }
+
+  &[data-highlighted~="true"] {
+    border: 2px solid $highlighted-color;
+    box-shadow: 1px 1px 10px $highlighted-color;
+    background-color: color-mix(in srgb, $highlighted-color 5%, white);
+  }
+}
+
+// Default variant
+.container[data-variant~="default"] {
+  width: 100%;
+  border-radius: var(--ion-border-radius-secondary);
+  padding: var(--small-padding);
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .module-image {
+    flex-shrink: 1;
+    width: 96px;
+    height: 96px;
+    min-width: 60px;
+    display: flex;
+    align-items: center;
+    @media (max-width: 340px) {
+      width: 72px;
+      height: 72px;
+      min-width: 48px;
+    }
+    img {
+      width: 100%;
+    }
+  }
+  .module-title {
+    flex-shrink: 10;
+    margin: 0 8px;
+    margin-inline-end: auto;
+    padding: 0 8px;
+    p {
+      font-size: var(--font-size-text-medium);
+      color: var(--ion-color-primary-700);
+      font-weight: var(--font-weight-bold);
+      line-height: var(--line-height-text-small);
+      text-align: start;
+    }
+  }
+  .icon {
+    flex-shrink: 0;
+    width: 28px;
+    max-width: unset;
+  }
+
+  &[data-locked~="true"] {
+    opacity: 0.5;
+
+    .module-image {
+      width: 60px;
+      height: 60px;
+      min-width: 36px;
+    }
+  }
+}
+
+// Circle variant
+.container[data-variant~="circle"] {
+  --circle-width: 84px;
+  &[data-locked~="true"] {
+    --circle-width: 76px;
+  }
+  width: var(--circle-width);
+  height: var(--circle-width);
+  border-radius: 50%;
+  border-width: 4px;
+  filter: drop-shadow(-2px 2px 5px rgba(0, 0, 0, 0.2));
+  overflow: hidden;
+  background-color: white;
+  position: relative;
+
+  .module-image {
+    width: 100%;
+    height: 100%;
+    padding: 4px;
+    img {
+      width: 100%;
+      height: 100%;
+      clip-path: circle(#{var(--circle-width) / 2 - 4px} at center);
+    }
+  }
+  .locked-icon {
+    position: absolute;
+    margin: 0 auto;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 36px;
+      max-width: 40px;
+      object-fit: contain;
+    }
+  }
+  .module-title {
+    display: none;
+  }
+  .nav-icon {
+    display: none;
+  }
+  .icon-spacer {
+    display: none;
+  }
+
+  &[data-locked~="true"] {
+    border-width: 2px;
+    .module-image {
+      opacity: 0.5;
+    }
+    .locked-icon {
+      opacity: 0.7;
+    }
+  }
+}
diff --git a/...ages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts b/...ages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, computed } from "@angular/core";
 import { FlowTypes } from "packages/data-models";
 import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
 import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service";
@@ -8,49 +8,49 @@ import {
 } from "src/app/shared/utils";
 
 interface IModuleListItemParams {
-  /* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
-  moduleImageAsset?: string;
-  /* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
-  textTransform?: "capitalise" | "uppercase";
+  /* TEMPLATE PARAMETER: "highlighted". Apply "highlighted" styling */
+  highlighted?: boolean;
   /* TEMPLATE PARAMETER: "is_locked". The boolean that marks the module as locked or unlocked */
   isLocked?: boolean;
-  /* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
-  navImageAsset?: string;
   /* TEMPLATE PARAMETER: "locked_image_asset". The locked icon*/
   lockedImageAsset?: string;
+  /* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
+  moduleImageAsset?: string;
+  /* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
+  navImageAsset?: string;
+  /* TEMPLATE PARAMETER: "variant" */
+  variant?: "default" | "circle";
 }
 
 @Component({
   selector: "plh-module-list-item",
   templateUrl: "./module-list-item.component.html",
   styleUrls: ["./module-list-item.component.scss"],
 })
-export class PlhModuleListItemComponent extends TemplateBaseComponent implements OnInit {
-  params: Partial<IModuleListItemParams> = {};
+export class PlhModuleListItemComponent extends TemplateBaseComponent {
+  params = computed(() => this.getParams(this.parameterList()));
 
   constructor(public templateTranslateService: TemplateTranslateService) {
     super();
   }
 
-  ngOnInit() {
-    this.getParams();
+  public handleClick() {
+    if (this.params().isLocked) return;
+    this.triggerActions("click");
   }
 
-  private getParams() {
-    this.params.moduleImageAsset = getStringParamFromTemplateRow(
-      this._row,
-      "module_image_asset",
-      ""
-    );
-    this.params.textTransform = getStringParamFromTemplateRow(this._row, "text_transform", null) as
-      | "capitalise"
-      | "uppercase";
-    this.params.isLocked = getBooleanParamFromTemplateRow(this._row, "is_locked", false);
-    this.params.navImageAsset = getStringParamFromTemplateRow(this._row, "nav_image_asset", null);
-    this.params.lockedImageAsset = getStringParamFromTemplateRow(
-      this._row,
-      "locked_image_asset",
-      null
-    );
+  private getParams(authorParams: FlowTypes.TemplateRow["parameter_list"]): IModuleListItemParams {
+    return {
+      moduleImageAsset: getStringParamFromTemplateRow(this._row, "module_image_asset", ""),
+      isLocked: getBooleanParamFromTemplateRow(this._row, "is_locked", false),
+      navImageAsset: getStringParamFromTemplateRow(this._row, "nav_image_asset", null),
+      lockedImageAsset: getStringParamFromTemplateRow(this._row, "locked_image_asset", null),
+      highlighted: getBooleanParamFromTemplateRow(this._row, "highlighted", false),
+      variant: getStringParamFromTemplateRow(
+        this._row,
+        "variant",
+        "default"
+      ) as IModuleListItemParams["variant"],
+    };
   }
 }
diff --git a/packages/server/docker/docker-compose.yml b/packages/server/docker/docker-compose.yml
@@ -46,7 +46,7 @@ services:
     #   context: ../../api
     #   dockerfile: Dockerfile
     #   target: prod-env
-    image: idems/apps-api:1.6.0
+    image: idems/apps-api:1.6.1
     env_file:
       - ../../api/.env
     environment:

diff --git a/src/app/shared/services/auth/auth.service.ts b/src/app/shared/services/auth/auth.service.ts
@@ -90,7 +90,7 @@ export class AuthService extends AsyncServiceBase {
     const currentUserId = this.localStorageService.getProtected("APP_USER_ID");
     const restoreProfiles = authEntries
       .filter((v) => v.app_user_id !== currentUserId)
-      .sort((a, b) => (a.updatedAt > b.createdAt ? -1 : 1));
+      .sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1));
     this.restoreProfiles.set(restoreProfiles);
   }