Merge branch 'master' into feat/user-actions

capacitor.config.template.ts

@@ -23,9 +23,11 @@ const config: CapacitorConfig = {
     /**
      * NOTE - to support live-reload on external device (e.g. emulator)
      * 1) Uncomment url and replace with local ip to serve live-reload on local device
-     * 2) Sync to capacitor `npx cap sync`
-     * 3) Serve via `yarn ng serve --configuration=external`
-     * 4) Run app from android studio `npx cap open android` and run
+     * 2) Either edit capacitor.config.ts directly, or if editing capacitor.config.template.ts,
+     *    run `yarn workflow <platform> configure`, replacing `<platform>` with either ios or android
+     * 3) Sync to capacitor `npx cap sync`
+     * 4) Serve via `yarn ng serve --configuration=external`
+     * 5) Run app from android studio or xcode: `npx cap open <platform>` and run
      * Local browser (localhost:4000), device app and device browser ([ip]:4200) should all be able to access served app
      **/
     // url: "http://192.168.50.67:4200",

packages/data-models/deployment.model.ts

@@ -161,8 +161,7 @@ export const DEPLOYMENT_CONFIG_EXAMPLE_DEFAULTS: IDeploymentConfig = {
     sheets_path: "./sheets",
   },
   app_data: {
-    // TODO - change to local ./app-data folder once git repos in use
-    output_path: "packages/app-data",
+    output_path: "./app-data",
     sheets_filter_function: (flow) => true,
     assets_filter_function: (fileEntry) => true,
   },

src/app/shared/components/template/components/index.ts

@@ -19,7 +19,7 @@ import { SquareIconButtonComponent } from "./square-icon-button/square-icon-butt
 import { TemplateBaseComponent } from "./base";
 import { TemplateDebuggerComponent } from "./debugger";
 import { TemplateHTMLComponent } from "./html/html.component";
-import { TemplatePopupComponent } from "./layout/popup";
+import { TemplatePopupComponent } from "./layout/popup/popup.component";
 
 import { TmplAccordionComponent } from "./accordion/accordion.component";
 import { TmplAdvancedDashedBoxComponent } from "./layout/advanced-dashed-box/advanced-dashed-box.component";

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

@@ -0,0 +1,21 @@
+<div
+  class="popup-backdrop"
+  (click)="dismissOnBackdrop($event)"
+  [attr.data-fullscreen]="props.fullscreen ? true : null"
+>
+  <div class="popup-container">
+    <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
+      <ion-icon slot="icon-only" name="close"></ion-icon>
+    </div>
+    <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
+      <plh-template-container
+        class="template-container"
+        [name]="props.name"
+        [templatename]="props.templatename"
+        [parent]="props.parent"
+        [row]="props.row"
+        (emittedValue)="handleEmittedValue($event)"
+      ></plh-template-container>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+.popup-backdrop {
+  height: 100vh;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .popup-container {
+    position: relative;
+    width: var(--content-max-width);
+    padding: 0 2rem;
+    margin: auto;
+    margin-top: var(--ion-safe-area-top, 0);
+    margin-bottom: var(--ion-safe-area-bottom, 0);
+  }
+  &[data-fullscreen] {
+    background: white;
+    .popup-container {
+      height: var(--safe-area-height);
+    }
+  }
+  .popup-content {
+    margin: 30px auto;
+    max-height: calc(var(--safe-area-height) - 60px);
+    background: white;
+    border-radius: 20px;
+    padding: 20px;
+    overflow: auto;
+  }
+  .popup-content[data-fullscreen] {
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+    margin: 0;
+  }
+  .popup-content::-webkit-scrollbar {
+    display: none;
+  }
+  .close-button {
+    position: absolute;
+    top: 16px;
+    right: 22px;
+    background: white;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ion-color-primary);
+    font-size: 24px;
+    z-index: 1;
+    box-shadow: var(--ion-default-box-shadow);
+    color: var(--ion-color-primary);
+  }
+}

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

@@ -0,0 +1,56 @@
+import { Component, Input } from "@angular/core";
+import { ModalController } from "@ionic/angular";
+import { FlowTypes, ITemplateContainerProps } from "../../../models";
+import { TemplateContainerComponent } from "../../../template-container.component";
+
+@Component({
+  templateUrl: "./popup.component.html",
+  styleUrl: "./popup.component.scss",
+})
+/**
+ * When opening a template as a popup, provide a minimal interface and load
+ * the template directly as a regular template-container element
+ */
+export class TemplatePopupComponent {
+  @Input() props: ITemplatePopupComponentProps;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  /**
+   * When templates emit completed/uncompleted value from standalone popup close the popup
+   * NOTE - we do not want to respond to non-standalone templates as this is done through template nav-actions
+   * */
+  handleEmittedValue(value: { emit_value: string; emit_data: any }) {
+    const { emit_value } = value;
+    if (this.props.dismissOnEmit) {
+      if (["completed", "uncompleted"].includes(emit_value)) {
+        this.dismiss(value);
+      }
+    }
+  }
+
+  dismissOnBackdrop(e: MouseEvent) {
+    const el = e.target as HTMLElement;
+    if (el.classList.contains("popup-backdrop")) {
+      this.dismiss();
+    }
+  }
+
+  dismiss(value?: { emit_value: string; emit_data: any }) {
+    this.modalCtrl.dismiss(value);
+  }
+}
+
+export interface ITemplatePopupComponentProps extends ITemplateContainerProps {
+  name: string;
+  templatename: string;
+  parent?: TemplateContainerComponent;
+  row?: FlowTypes.TemplateRow;
+  showCloseButton?: boolean;
+  /** Dismiss popup when completed or uncompleted is emitted from child template */
+  dismissOnEmit?: boolean;
+  /** Wait for template to be self-dismissed before returning (default: True) */
+  waitForDismiss?: boolean;
+  /** Display fullscreen overlayed on top of all other app content */
+  fullscreen?: boolean;
+}

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

@@ -6,7 +6,10 @@ import { first } from "rxjs/operators";
 import { FlowTypes } from "src/app/shared/model";
 import { SyncServiceBase } from "src/app/shared/services/syncService.base";
 import { arrayToHashmapArray, parseBoolean } from "src/app/shared/utils";
-import { ITemplatePopupComponentProps, TemplatePopupComponent } from "../components/layout/popup";
+import {
+  ITemplatePopupComponentProps,
+  TemplatePopupComponent,
+} from "../components/layout/popup/popup.component";
 import { ITemplateContainerProps } from "../models";
 import { TemplateContainerComponent } from "../template-container.component";
 

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

@@ -4,7 +4,10 @@ import { AppDataService } from "src/app/shared/services/data/app-data.service";
 import { DbService } from "src/app/shared/services/db/db.service";
 import { FlowTypes } from "src/app/shared/model";
 import { ModalController } from "@ionic/angular";
-import { ITemplatePopupComponentProps, TemplatePopupComponent } from "../components/layout/popup";
+import {
+  ITemplatePopupComponentProps,
+  TemplatePopupComponent,
+} from "../components/layout/popup/popup.component";
 import { TemplateTranslateService } from "./template-translate.service";
 import { IFlowEvent } from "data-models";
 import { TemplateVariablesService } from "./template-variables.service";

src/theme/variables.scss

@@ -15,6 +15,9 @@
 
 /** Ionic CSS Variables **/
 :root {
+  // The total height of the central safe area of the device viewport
+  --safe-area-height: calc(100vh - var(--ion-safe-area-top, 0) - var(--ion-safe-area-bottom, 0));
+
   // Margins //
   --tiny-margin: 5px;
   --small-margin: 10px;