Feat/table component

package.json

@@ -38,6 +38,7 @@
     "@angular/core": "~17.2.2",
     "@angular/elements": "^17.2.2",
     "@angular/forms": "~17.2.2",
+    "@angular/material": "^17",
     "@angular/platform-browser": "~17.2.2",
     "@angular/platform-browser-dynamic": "~17.2.2",
     "@angular/router": "~17.2.2",
@@ -122,6 +123,7 @@
     "@angular-eslint/eslint-plugin-template": "17.2.1",
     "@angular-eslint/schematics": "17.2.1",
     "@angular-eslint/template-parser": "17.2.1",
+    "@angular/cdk": "^17",
     "@angular/cli": "~17.2.1",
     "@angular/compiler": "~17.2.2",
     "@angular/compiler-cli": "~17.2.2",

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

@@ -49,6 +49,7 @@ import { TmplRadioGroupComponent } from "./radio-group/radio-group.component";
 import { TmplSimpleCheckboxComponent } from "./simple-checkbox/simple-checkbox.component";
 import { TmplSliderComponent } from "./slider/slider.component";
 import { TmplSubtitleComponent } from "./subtitle";
+import { TmplTableComponent } from "./table/table.component";
 import { TmplTaskCardComponent } from "./task-card/task-card.component";
 import { TmplTaskProgressBarComponent } from "./task-progress-bar/task-progress-bar.component";
 import { TmplTextAreaComponent } from "./text-area/text-area.component";
@@ -113,6 +114,7 @@ export const TEMPLATE_COMPONENTS = [
   TmplSimpleCheckboxComponent,
   TmplSliderComponent,
   TmplSubtitleComponent,
+  TmplTableComponent,
   TmplTaskCardComponent,
   TmplTaskProgressBarComponent,
   TmplTextAreaComponent,
@@ -186,6 +188,7 @@ const COMMON_COMPONENT_MAPPING = {
   slider: TmplSliderComponent,
   square_button: SquareIconButtonComponent,
   subtitle: TmplSubtitleComponent,
+  table: TmplTableComponent,
   task_card: TmplTaskCardComponent,
   task_progress_bar: TmplTaskProgressBarComponent,
   text_area: TmplTextAreaComponent,

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

@@ -0,0 +1,11 @@
+<div class="table-container">
+  <table mat-table [dataSource]="dataSource" matSort>
+    <ng-container *ngFor="let column of columnsToDisplay" [matColumnDef]="column">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column }}</th>
+      <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
+  </table>
+</div>

src/app/shared/components/template/components/table/table.component.scss

@@ -0,0 +1,9 @@
+.table-container {
+  width: 100%;
+  max-height: 80vh;
+  overflow: auto;
+
+  tr[mat-header-row] {
+    background-color: var(--ion-background-color);
+  }
+}

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

@@ -0,0 +1,82 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  effect,
+  OnInit,
+  ViewChild,
+} from "@angular/core";
+import { TemplateBaseComponent } from "../base";
+import { FlowTypes } from "packages/data-models";
+import { getBooleanParamFromTemplateRow } from "src/app/shared/utils";
+import { AppDataService } from "src/app/shared/services/data/app-data.service";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatSort } from "@angular/material/sort";
+
+interface ITableParams {
+  /** TEMPLATE PARAMETER: show_id. Display the data lists's ID column in the table. Default false */
+  showId: boolean;
+}
+
+@Component({
+  selector: "plh-table",
+  templateUrl: "./table.component.html",
+  styleUrls: ["./table.component.scss"],
+})
+export class TmplTableComponent extends TemplateBaseComponent implements AfterViewInit {
+  params = computed(() => this.getParams(this.parameterList()));
+  dataRows = computed(() => this.getDataRowsFromValue(this.value()));
+
+  columnsToDisplay = [];
+  dataSource: MatTableDataSource<any>;
+
+  @ViewChild(MatSort) sort: MatSort;
+
+  constructor(
+    private appDataService: AppDataService,
+    private cdr: ChangeDetectorRef
+  ) {
+    super();
+    effect(async () => {
+      const data = (await this.dataRows()) || [];
+      this.dataSource = new MatTableDataSource(data);
+      this.columnsToDisplay = this.getColumnsToDisplayFromData(data);
+      if (this.sort) {
+        this.dataSource.sort = this.sort;
+      }
+      this.cdr.detectChanges();
+    });
+  }
+
+  ngAfterViewInit() {
+    if (this.dataSource) {
+      this.dataSource.sort = this.sort;
+    }
+  }
+
+  private getParams(authorParams: FlowTypes.TemplateRow["parameter_list"]): ITableParams {
+    return {
+      showId: getBooleanParamFromTemplateRow(this._row, "show_id", false),
+    };
+  }
+
+  private async getDataRowsFromValue(dataListName: string) {
+    // TODO: handle data passed as @data format, and query dynamic data to return live data (see data-items handling)
+    if (typeof dataListName !== "string") {
+      console.log("[TABLE COMPONENT] Value must be a data list name string");
+      return [];
+    }
+    const dataList = await this.appDataService.getSheet("data_list", dataListName);
+    return dataList?.rows;
+  }
+
+  private getColumnsToDisplayFromData(data: FlowTypes.Data_listRow[]): string[] {
+    if (!data || !data.length) return [];
+    // Infer columns from first data row
+    const columnNames = Object.keys(data[0]);
+    return this.params().showId
+      ? columnNames
+      : columnNames.filter((columnName) => columnName !== "id");
+  }
+}

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

@@ -7,6 +7,8 @@ import { NouisliderModule } from "ng2-nouislider";
 import { RouterModule } from "@angular/router";
 import { SwiperModule } from "swiper/angular";
 import { NgxExtendedPdfViewerModule } from "ngx-extended-pdf-viewer";
+import { MatTableModule } from "@angular/material/table";
+import { MatSortModule } from "@angular/material/sort";
 
 import { SharedPipesModule } from "../../pipes";
 import { TooltipDirective } from "../common/directives/tooltip.directive";
@@ -26,14 +28,16 @@ import { DEMO_COMPONENTS } from "packages/components/demo";
   imports: [
     CommonModule,
     FormsModule,
-    ReactiveFormsModule,
     IonicModule,
-    SharedPipesModule,
-    NouisliderModule,
     LottieModule,
+    MatSortModule,
+    MatTableModule,
+    NgxExtendedPdfViewerModule,
+    NouisliderModule,
+    ReactiveFormsModule,
     RouterModule,
+    SharedPipesModule,
     SwiperModule,
-    NgxExtendedPdfViewerModule,
     TemplatePipesModule,
   ],
   exports: [