add generic table

admin/src/app/components/generic-table/generic-table.ts

@@ -0,0 +1,91 @@
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
+import { ColumnDefinition } from './column-definition.interface';
+import { AsyncPipe, NgClass, NgComponentOutlet } from '@angular/common';
+import { CellDefinition } from './cell-definition.interface';
+import { GetDataResponse } from './data-provider.interface';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GenericTableConfig } from './generic-table.config';
+import { startWith, switchMap } from 'rxjs/operators';
+import { GenericTableSearchForm } from './generic-table-search-form/generic-table-search-form';
+
+@Component({
+  selector: 'app-generic-table',
+  templateUrl: './generic-table.html',
+  imports: [NgClass, AsyncPipe, NgComponentOutlet, GenericTableSearchForm],
+  standalone: true,
+})
+export class GenericTable<T> implements OnInit {
+
+
+
+  @Input() config!: GenericTableConfig<T>;
+  public data$!: Observable<GetDataResponse<T>>;
+
+  sanitizer = inject(DomSanitizer);
+  parser = new DOMParser()
+
+  ngOnInit(): void {
+
+    this.data$ = combineLatest([
+      this.config.refresh$,
+      this.config.filter$.pipe(startWith({})),
+      this.config.page$.pipe(startWith(1)),
+      this.config.limit$.pipe(startWith(10))
+    ]).pipe(
+      switchMap(([_, filter, page, limit]) => {
+        const query = { ...filter, page, limit: 10 };
+        console.info("filter is", filter)
+        return this.config.dataProvider.getData({
+          params: {
+            q: filter.term ?? '',
+            page,
+            limit
+          }
+        });
+      })
+    );
+
+  }
+
+  resolveValue(item: T, column: ColumnDefinition<T>, cell?:  CellDefinition<T>): any {
+    if ( cell) {
+      if (cell.value) {
+        if (typeof cell.value === 'string') {
+          return cell.value;
+        }
+        if (typeof cell.value === 'function') {
+          return cell.value(item);
+        }
+      }
+    }
+    if (column.attribute) {
+      return item[column.attribute];
+    }
+    return '';
+  }
+
+  getComponentInputs(item: T|null, column: ColumnDefinition<T>,  cell:  CellDefinition<T>): { [key: string]: any }  {
+    if (cell.componentInputs) {
+      return cell.componentInputs(item);
+    }
+    return { data: item }; // Default input
+  }
+
+  getAsHtml(str: string){
+    // return this.sanitizer.bypassSecurityTrustHtml(str);
+    return  this.sanitizer.bypassSecurityTrustHtml(this.parser.parseFromString(str, 'text/html').body.innerHTML);
+  }
+
+  changePage(newPage: number): void {
+    if (newPage > 0) {
+      this.config.page$.next(newPage);
+    }
+  }
+
+  protected searchTermChanged(searchTerm: any) {
+    console.info("searchterm",searchTerm);
+    this.config.page$.next(1);
+    this.config.filter$.next(searchTerm);
+  }
+}