Merge pull request #2570 from IDEMSInternational/spike/data-items-car…

…ousel

feat: data items carousel

src/app/shared/components/template/components/carousel/carousel.component.html

@@ -1,11 +1,14 @@
 <div class="carousel-wrapper">
   <swiper (swiper)="handleSwiperInitialised($event)" [config]="config">
-    <ng-template
-      swiperSlide
-      *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
-    >
-      <plh-template-component [row]="childRow" [parent]="parent" [attr.data-rowname]="_row.name">
-      </plh-template-component>
-    </ng-template>
+    @for (row of carouselRows(); track row._nested_name) {
+      <ng-template swiperSlide>
+        <plh-template-component
+          [row]="row"
+          [parent]="parent"
+          [attr.data-rowname]="row._nested_name"
+        >
+        </plh-template-component>
+      </ng-template>
+    }
   </swiper>
 </div>

src/app/shared/components/template/components/carousel/carousel.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { Component, computed, OnInit, ViewEncapsulation } from "@angular/core";
 import { TemplateBaseComponent } from "../base";
 import { SwiperOptions, Swiper } from "swiper";
 import {
@@ -7,6 +7,9 @@ import {
   getStringParamFromTemplateRow,
 } from "src/app/shared/utils";
 import { TaskService } from "src/app/shared/services/task/task.service";
+import { toObservable, toSignal } from "@angular/core/rxjs-interop";
+import { filter, map, switchMap } from "rxjs";
+import { DataItemsService } from "../data-items/data-items.service";
 
 @Component({
   selector: "plh-carousel",
@@ -20,7 +23,24 @@ export class TmplCarouselComponent extends TemplateBaseComponent implements OnIn
   initialSlide: number;
   taskGroupsListName: string;
 
-  constructor(private taskService: TaskService) {
+  // HACK - render rows either from default child begin_items loop, or generated by data_items loop
+  public carouselRows = computed(() => {
+    return this.dataItemRows() || this.rows();
+  });
+
+  // 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))
+    )
+  );
+
+  constructor(
+    private taskService: TaskService,
+    private dataItemsService: DataItemsService
+  ) {
     super();
   }