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

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';
import { SafeHtmlPipe } from '../../pipes/safe-html-pipe';

@Component({
  selector: 'app-generic-table',
  templateUrl: './generic-table.html',
  imports: [NgClass, AsyncPipe, NgComponentOutlet, GenericTableSearchForm, SafeHtmlPipe],
  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 { 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);
  }

  protected onPageSizeChange(value: any) {
    this.config.page$.next(1);
    this.config.limit$.next(+value);
  }

  protected getValueStyleClass(columnDefinition: ColumnDefinition<T>, cellDefinition: CellDefinition<T> | boolean, item: T) {
    console.info("co")
    if ( (cellDefinition as any).hasOwnProperty("styleClass") ){
      const def = (cellDefinition as CellDefinition<T>);
      if (def && def.styleClass) {
        return  (columnDefinition.attribute as string) +" "+def.styleClass({definition: columnDefinition, cellDefinition: def, item});
      }

    }
    return columnDefinition.attribute;
  }
}