Merge pull request #2638 from IDEMSInternational/feat/display-grid-da…

…ta-items

Feat: display grid data items

src/app/shared/components/template/components/layout/display-grid/display-grid.component.html

@@ -1,11 +1,12 @@
-<div class="display-grid" [ngStyle]="gridStyle">
-  <plh-template-component
-    *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
-    [row]="childRow"
-    [parent]="parent"
-    [attr.data-rowname]="_row.name"
-    class="grid-item"
-    [ngStyle]="itemStyle"
-  >
-  </plh-template-component>
+<div class="display-grid" [ngStyle]="gridStyle()">
+  @for (gridRow of gridRows() | filterDisplayComponent; track gridRow._nested_name) {
+    <plh-template-component
+      [row]="gridRow"
+      [parent]="parent"
+      [attr.data-rowname]="_row.name"
+      class="grid-item"
+      [ngStyle]="itemStyle()"
+    >
+    </plh-template-component>
+  }
 </div>

src/app/shared/components/template/components/layout/display-grid/display-grid.component.ts

@@ -1,6 +1,9 @@
-import { Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed } from "@angular/core";
 import { TemplateBaseComponent } from "../../base";
-import { FlowTypes, ITemplateRowProps } from "../../../models";
+import { ITemplateRowProps } from "../../../models";
+import { toObservable, toSignal } from "@angular/core/rxjs-interop";
+import { map, switchMap, filter } from "rxjs";
+import { DataItemsService } from "../../data-items/data-items.service";
 
 interface IDisplayGridParams {
   /**
@@ -30,45 +33,41 @@ interface IDisplayGridParams {
   selector: "plh-display-grid",
   templateUrl: "./display-grid.component.html",
   styleUrls: ["./display-grid.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TmplDisplayGridComponent extends TemplateBaseComponent implements ITemplateRowProps {
-  /**
-   * Computed grid style from input parameters
-   * @ignore
-   */
-  public gridStyle: Partial<CSSStyleDeclaration>;
-  /**
-   * Computed grid style from input parameters
-   *
-   */
-  public itemStyle: Partial<CSSStyleDeclaration>;
+  // HACK - render rows either from default child begin_items loop, or generated by data_items loop
+  public gridRows = computed(() => {
+    return this.dataItemRows() || this.rows();
+  });
 
-  /**
-   * Authoring parameters
-   */
-  public parameter_list: IDisplayGridParams;
+  /** Computed grid style from input parameters */
+  public gridStyle = computed(() => this.generateGridStyle(this.parameterList()));
 
-  @Input() set row(row: FlowTypes.TemplateRow) {
-    this._row = row;
-    this.setParams();
-  }
+  /** Computed item style from input parameters */
+  public itemStyle = computed(() => this.generateItemStyles(this.parameterList()));
+
+  // HACK - if using data_items then render child rows nested within the main data_items row
+  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 setParams() {
-    this.parameter_list = this._row.parameter_list || ({} as any);
-    const { gridStyle, itemStyle } = this.generateStyles();
-    this.gridStyle = gridStyle;
-    this.itemStyle = itemStyle;
+  constructor(private dataItemsService: DataItemsService) {
+    super();
   }
 
   /**
    * Create a list of styles to be passed into ngStyle for grid and item components
    * https://thesoftwayfarecoder.com/dynamically-creating-css-classes-in-angular/
    */
-  private generateStyles() {
-    const minItemWidth = this.parameter_list.item_width || "200px";
-    const maxGridWidth = this.parameter_list.grid_width || "100%";
-    const gridGap = this.parameter_list.grid_gap || "16px";
-    const borderStyle = this.parameter_list.item_border || "solid";
+  private generateGridStyle(parameterList: IDisplayGridParams) {
+    const minItemWidth = parameterList.item_width || "200px";
+    const maxGridWidth = parameterList.grid_width || "100%";
+    const gridGap = parameterList.grid_gap || "16px";
 
     const gridStyle: Partial<CSSStyleDeclaration> = {
       // center grid with maximum width
@@ -82,10 +81,15 @@ export class TmplDisplayGridComponent extends TemplateBaseComponent implements I
       gridAutoRows: "1fr",
     };
 
+    return gridStyle;
+  }
+
+  private generateItemStyles(parameterList: IDisplayGridParams) {
+    const borderStyle = parameterList.item_border || "solid";
     const itemStyle: Partial<CSSStyleDeclaration> = {
       // assign item border outline style
       borderStyle,
     };
-    return { gridStyle, itemStyle };
+    return itemStyle;
   }
 }