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

…pp-builder into fix/rtl-applies-to-app-launch-pop-ups

src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.html

@@ -8,7 +8,7 @@
         <div
           class="container-radio"
           [class.checked-radio]="form.get('answer').value === radio.name"
-          *ngFor="let radio of valuesFromListAnswers"
+          *ngFor="let radio of answerOptions()"
         >
           <label>
             <input

src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.ts

@@ -1,7 +1,6 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, input, Input, OnInit } from "@angular/core";
 import { FlowTypes } from "src/app/shared/model";
 import {
-  getAnswerListParamFromTemplateRow,
   getBooleanParamFromTemplateRow,
   getNumberParamFromTemplateRow,
   getStringParamFromTemplateRow,
@@ -16,8 +15,8 @@ import { ModalController } from "@ionic/angular";
   styleUrls: ["./combo-box-modal.component.scss"],
 })
 export class ComboBoxModalComponent implements OnInit {
+  public answerOptions = input.required<IAnswerListItem[]>();
   @Input() row: FlowTypes.TemplateRow;
-  @Input() template: FlowTypes.Template;
   @Input() selectedValue: string;
   @Input() customAnswerSelected: boolean;
   @Input() style: string;
@@ -29,15 +28,17 @@ export class ComboBoxModalComponent implements OnInit {
   inputPosition: boolean = false;
   maxLength: number = 30;
   placeholder: string = "";
-  constructor(private fb: FormBuilder, private modalController: ModalController) {}
+  constructor(
+    private fb: FormBuilder,
+    private modalController: ModalController
+  ) {}
 
   ngOnInit() {
     this.getParams();
     this.calculateAnswer();
   }
 
   getParams() {
-    this.valuesFromListAnswers = getAnswerListParamFromTemplateRow(this.row, "answer_list", null);
     this.textTitle = getStringParamFromTemplateRow(this.row, "text", null);
     this.inputAllowed = getBooleanParamFromTemplateRow(this.row, "input_allowed", false);
     this.inputPosition =

src/app/shared/components/template/components/combo-box/combo-box.component.ts

@@ -1,5 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { FlowTypes } from "../../../../model";
+import { Component, computed, OnDestroy, OnInit } from "@angular/core";
 import { ModalController } from "@ionic/angular";
 import { ComboBoxModalComponent } from "./combo-box-modal/combo-box-modal.component";
 import {
@@ -10,8 +9,9 @@ import {
 } from "src/app/shared/utils";
 import { TemplateBaseComponent } from "../base";
 import { ITemplateRowProps } from "../../models";
-import { TemplateService } from "../../services/template.service";
-import { ReplaySubject } from "rxjs";
+import { ReplaySubject, map, filter, switchMap } from "rxjs";
+import { DataItemsService } from "../data-items/data-items.service";
+import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 
 @Component({
   selector: "plh-combo-box",
@@ -22,19 +22,34 @@ export class TmplComboBoxComponent
   extends TemplateBaseComponent
   implements ITemplateRowProps, OnInit, OnDestroy
 {
-  @Input() template: FlowTypes.Template;
-  placeholder: string;
-  prioritisePlaceholder: boolean;
-  style: string;
-  text = "";
-  customAnswerSelected: boolean = false;
-  customAnswerText: string;
-  answerList: IAnswerListItem[];
+  public placeholder: string;
+  public prioritisePlaceholder: boolean;
+  private style: string;
+  public text = "";
+  private customAnswerSelected: boolean = false;
+  private customAnswerText: string;
   private componentDestroyed$ = new ReplaySubject(1);
 
+  // HACK - allow combo_box to include data_items child row to define answer list
+  private dataItemRows = toSignal(
+    toObservable(this.rows).pipe(
+      map((rows) => rows.find((r) => r.type === "data_items")),
+      filter((row) => row !== undefined),
+      switchMap((row) => this.dataItemsService.getItemsObservable(row, this.parent.templateRowMap))
+    )
+  );
+
+  private answerOptions = computed(() => {
+    const dataItemRows = this.dataItemRows();
+    if (dataItemRows !== undefined) {
+      return (dataItemRows as IAnswerListItem[]) || [];
+    }
+    return getAnswerListParamFromTemplateRow(this.rowSignal(), "answer_list", []);
+  });
+
   constructor(
     private modalController: ModalController,
-    private templateService: TemplateService
+    private dataItemsService: DataItemsService
   ) {
     super();
   }
@@ -43,15 +58,16 @@ export class TmplComboBoxComponent
     this.getParams();
 
     this.customAnswerSelected =
-      this.answerList.length > 0 && this._row.value
-        ? !this.answerList.find((x) => x.name === this._row.value)
+      this.answerOptions().length > 0 && this._row.value
+        ? !this.answerOptions().find((x) => x.name === this._row.value)
         : false;
 
     this.text = "";
     if (this._row.value) {
       this.text = this.customAnswerSelected
         ? this.customAnswerText
-        : this.answerList.find((answerListItem) => answerListItem.name === this._row.value)?.text;
+        : this.answerOptions().find((answerListItem) => answerListItem.name === this._row.value)
+            ?.text;
     }
   }
 
@@ -63,16 +79,15 @@ export class TmplComboBoxComponent
       false
     );
     this.style = getStringParamFromTemplateRow(this._row, "style", "");
-    this.answerList = getAnswerListParamFromTemplateRow(this._row, "answer_list", []);
   }
 
   async openModal() {
     const modal = await this.modalController.create({
       component: ComboBoxModalComponent,
       cssClass: "combo-box-modal",
       componentProps: {
+        answerOptions: this.answerOptions,
         row: this._row,
-        template: this.template,
         selectedValue: this.customAnswerSelected ? this.text : this._row.value,
         customAnswerSelected: this.customAnswerSelected,
         style: this.style,

src/app/shared/components/template/components/data-items/data-items.service.ts

@@ -45,6 +45,11 @@ export class DataItemsService {
                   const parsedItemList = await this.hackParseDataList(data);
                   const itemProcessor = new ItemProcessor(parsedItemList, parameter_list);
                   const { itemTemplateRows, itemData } = itemProcessor.process(rows);
+                  // if no child rows for data_items loop assume want back raw items
+                  if (rows.length === 0) {
+                    return itemData;
+                  }
+                  // otherwise process generated template rows
                   const itemRowsWithMeta = updateItemMeta(itemTemplateRows, itemData, dataListName);
                   const parsedItemRows = await this.hackProcessRows(
                     itemRowsWithMeta,

src/app/shared/components/template/components/layout/popup/popup.component.html

@@ -3,6 +3,7 @@
   (click)="dismissOnBackdrop($event)"
   [attr.data-fullscreen]="props.fullscreen ? true : null"
   [dir]="templateTranslateService.languageDirection()"
+  [attr.data-variant]="props.variant ? props.variant : null"
 >
   <div class="popup-container">
     <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">

src/app/shared/components/template/components/layout/popup/popup.component.ts

@@ -65,4 +65,6 @@ export interface ITemplatePopupComponentProps extends IContainerProps {
   fullscreen?: boolean;
   /** Pass text only to render that text in a popup, bypassing any templates */
   popupText?: string;
+  /** Template Parameter: "variant". Defines style and use of pop up */
+  variant?: string;
 }

src/app/shared/components/template/services/template-nav.service.ts

@@ -212,11 +212,12 @@ export class TemplateNavService extends SyncServiceBase {
     container?: TemplateContainerComponent
   ) {
     const templatename = action.args[0];
+    const variant = action.params?.variant;
     // if triggered outside templating system (e.g. via notification action) still enable
     // popup creation and dismiss on nav changes
     if (!container) {
       this.router.events.pipe(first()).subscribe(() => this.dismissPopup(templatename));
-      return this.createPopupAndWaitForDismiss(templatename, null);
+      return this.createPopupAndWaitForDismiss(templatename, null, variant);
     }
 
     const { name } = container;
@@ -226,6 +227,7 @@ export class TemplateNavService extends SyncServiceBase {
       popup_child: templatename,
       popup_parent: name,
       popup_parent_triggered_by: action._triggeredBy?.name || null,
+      popup_variant: variant,
     };
     this.router.navigate([], { queryParams, replaceUrl: true, queryParamsHandling: "merge" });
   }
@@ -234,7 +236,7 @@ export class TemplateNavService extends SyncServiceBase {
     params: INavQueryParams,
     container: TemplateContainerComponent
   ) {
-    const { popup_child, nav_child_emit, popup_parent_triggered_by } = params;
+    const { popup_child, nav_child_emit, popup_parent_triggered_by, popup_variant } = params;
     const { template } = container;
     const existingPopup = this.openPopupsByName[popup_child];
     log("[Popup] - parent", { params, parent: container.name });
@@ -274,15 +276,16 @@ export class TemplateNavService extends SyncServiceBase {
     }
     // If no popup already exists, create, present, and react to dismiss
     else {
-      await this.createPopupAndWaitForDismiss(popup_child, container);
+      await this.createPopupAndWaitForDismiss(popup_child, container, popup_variant);
     }
   }
 
   private async createPopupAndWaitForDismiss(
     popup_child: string,
-    container: TemplateContainerComponent
+    container: TemplateContainerComponent,
+    variant: string
   ) {
-    const childTemplateModal = await this.createChildPopupModal(popup_child, container);
+    const childTemplateModal = await this.createChildPopupModal(popup_child, container, variant);
     if (childTemplateModal) {
       await childTemplateModal.present();
       const { data } = await childTemplateModal.onDidDismiss();
@@ -296,6 +299,7 @@ export class TemplateNavService extends SyncServiceBase {
         popup_child: null,
         popup_parent: null,
         popup_parent_triggered_by: null,
+        popup_variant: null,
       };
       this.router.navigate([], { queryParams, replaceUrl: true, queryParamsHandling: "merge" });
     }
@@ -314,23 +318,28 @@ export class TemplateNavService extends SyncServiceBase {
     container: TemplateContainerComponent
   ) {
     // Hide any open popup that was trigggered on a previous page prior to navigation (unless new popup)
-    const { popup_child } = params;
+    const { popup_child, popup_variant } = params;
     const existingPopup = this.openPopupsByName[popup_child];
     if (existingPopup) {
       existingPopup.modal.classList.add("hide-popup-on-template");
     } else {
-      this.createPopupAndWaitForDismiss(params.popup_child, container);
+      this.createPopupAndWaitForDismiss(params.popup_child, container, popup_variant);
     }
   }
 
-  private async createChildPopupModal(popup_child: string, container: TemplateContainerComponent) {
+  private async createChildPopupModal(
+    popup_child: string,
+    container: TemplateContainerComponent,
+    variant?: string
+  ) {
     const childContainerProps: ITemplatePopupComponentProps = {
       // make the popup share the same name as the container so that nav events return to parent container page
       name: popup_child,
       templatename: popup_child,
       parent: container,
       showCloseButton: true,
       dismissOnEmit: true,
+      variant,
     };
     // If trying to recreate a popup that already exists simply mark as visible
     const existingPopup = this.openPopupsByName[popup_child];
@@ -384,4 +393,5 @@ export interface INavQueryParams {
   popup_child?: string; //
   popup_parent?: string;
   popup_parent_triggered_by?: string; //
+  popup_variant?: string;
 }

src/app/shared/utils/utils.ts

@@ -223,7 +223,6 @@ export function getAnswerListParamFromTemplateRow(
   _default: IAnswerListItem[]
 ): IAnswerListItem[] {
   const params = row.parameter_list || {};
-  console.log(params[name]);
   return params.hasOwnProperty(name) ? parseAnswerList(params[name]) : _default;
 }
 

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -974,4 +974,52 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
+
+  // Pop Up
+  .popup-backdrop {
+    &[data-variant~="plh_completion"] {
+      .popup-container {
+        min-height: 70vh;
+        padding: 0 1.4rem;
+        margin-top: -28px;
+        .popup-content {
+          background: linear-gradient(
+            310deg,
+            var(--color-secondary-blue-50),
+            var(--color-secondary-blue-80)
+          );
+          border-radius: 40px;
+          border: none !important;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
+        plh-template-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: var(--ion-font-family);
+        }
+        plh-tmpl-text p,
+        plh-tmpl-text h1,
+        plh-tmpl-title p,
+        plh-tmpl-title h1 {
+          text-align: center;
+          color: var(--color-surface-white);
+        }
+        plh-tmpl-title {
+          div.title-wrapper {
+            align-items: center;
+            justify-content: center;
+          }
+        }
+        .close-button {
+          border: 0.8px solid var(--color-secondary-blue-80);
+          color: var(--color-secondary-blue-50);
+        }
+      }
+    }
+  }
 }