add generic table

admin/src/app/components/generic-action-column/generic-action-column.html

@@ -0,0 +1,3 @@
+@for (action of actions(); track action){
+    <a  class="btn btn-primary"  (click)="onClick($event,action)">{{action.action}}</a>
+}

admin/src/app/components/generic-action-column/generic-action-column.ts

@@ -0,0 +1,38 @@
+import { Component, inject, input, OnInit } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+
+export interface ActionDefinition<T> {
+  action: string;
+  generate: (action: string, item?: T) => string;
+  handler?: (action: ActionDefinition<T>, item?: T) => void;
+}
+
+@Component({
+  selector: 'app-generic-action-column',
+  imports: [
+    RouterLink,
+  ],
+  templateUrl: './generic-action-column.html',
+  styleUrl: './generic-action-column.css',
+  standalone: true,
+})
+export class GenericActionColumn<T> implements OnInit {
+
+  private router = inject(Router);
+
+  actions = input([] as ActionDefinition<T>[]);
+  item = input(undefined as T);
+  payload = input(undefined as any);
+
+  ngOnInit(): void {
+  }
+
+
+  onClick($event: any, actionDefinition: ActionDefinition<T>) {
+    if (actionDefinition?.handler) {
+      actionDefinition.handler(actionDefinition, this.item());
+    }
+  }
+
+
+}

admin/src/app/components/generic-table/cell-definition.interface.ts

@@ -0,0 +1,7 @@
+import { Type } from '@angular/core';
+
+export interface CellDefinition<T> {
+  value?: ((item?: T) => any) | string;
+  component?: Type<any>;
+  componentInputs?: (item?: T|null) => { [key: string]: any };
+}

admin/src/app/components/generic-table/column-definition.interface.ts

@@ -0,0 +1,15 @@
+import { CellDefinition } from './cell-definition.interface';
+
+export interface TypeDefinition{
+  type: 'boolean' | 'number' | 'string' | 'date' | 'time' | 'datetime';
+  params?: Record<string, any>;
+}
+
+
+
+export interface ColumnDefinition<T> {
+  attribute: keyof T;
+  type: TypeDefinition;
+  valueCell?: CellDefinition<T> | boolean
+  headerCell?: CellDefinition<T> | boolean
+}

admin/src/app/components/generic-table/data-provider.interface.ts

@@ -0,0 +1,23 @@
+import { Observable } from 'rxjs';
+import { PaginatedResponse } from '../../features/products/models/product.model';
+
+
+export interface QueryParams extends Record<string, any>{
+  sortBy?: string;
+  sortDirection?: 'asc' | 'desc',
+  page?: number,
+  limit?: number,
+  q?: string,
+}
+
+export interface GetDataOptions extends Record<string, any>{
+  params?: QueryParams
+}
+
+export interface GetDataResponse<T> extends Record<string, any>{
+  data: PaginatedResponse<T>;
+}
+
+export interface DataProvider<T> {
+  getData( options?: GetDataOptions): Observable<GetDataResponse<T>>;
+}

admin/src/app/components/generic-table/generic-table-search-form/generic-table-search-form.html

@@ -0,0 +1,6 @@
+<form [formGroup]="filterForm" class="p-4 bg-base-200 rounded-lg shadow">
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+    <div class="form-control"><label class="label"><span class="label-text">SearchTerm</span></label>
+      <input type="text" formControlName="term" class="input input-bordered w-full" placeholder="Search term" /></div>
+  </div>
+</form>

admin/src/app/components/generic-table/generic-table-search-form/generic-table-search-form.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GenericTableSearchForm } from './generic-table-search-form';
+
+describe('GenericTableSearchForm', () => {
+  let component: GenericTableSearchForm;
+  let fixture: ComponentFixture<GenericTableSearchForm>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GenericTableSearchForm]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GenericTableSearchForm);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-generic-table-search-form',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './generic-table-search-form.html',
+  styleUrl: './generic-table-search-form.css',
+})
+export class GenericTableSearchForm {
+  @Output() searchTermChanged = new EventEmitter<any>();
+  filterForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.filterForm = this.fb.group({
+      term: ['']
+    });
+
+    this.filterForm.valueChanges.pipe(
+      debounceTime(300),
+      filter( value => {
+        console.info(value)
+        return value.term && value.term.length >= 3;
+      }),
+      distinctUntilChanged()
+    ).subscribe(values => {
+      const cleanFilter = Object.fromEntries(
+        Object.entries(values).filter(([_, v]) => v != null && v !== '')
+      );
+      this.searchTermChanged.emit(cleanFilter);
+    });
+  }
+
+  reset() {
+    this.filterForm.reset();
+  }
+}

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

@@ -0,0 +1,14 @@
+import { DataProvider } from './data-provider.interface';
+import { ColumnDefinition } from './column-definition.interface';
+import { Subject } from 'rxjs';
+
+export interface GenericTableConfig<T> {
+  dataProvider: DataProvider<T>;
+  columns: ColumnDefinition<T>[];
+  tableCssClass?: string;
+  rowCssClass?: (item: T) => string;
+  refresh$: Subject<void>;
+  filter$: Subject<any>;
+  page$: Subject<number>;
+  limit$: Subject<number>;
+}

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

@@ -0,0 +1,72 @@
+<div [ngClass]="config.tableCssClass" [class]="'overflow-x-auto'">
+  <app-generic-table-search-form  (searchTermChanged)="searchTermChanged($event)" ></app-generic-table-search-form>
+  @if (data$ | async; as getDataResponse) {
+    <table class="table w-full table-zebra">
+      <thead>
+      <tr>
+
+        @for (column of config.columns; track column) {
+          <th [class]="column.attribute">
+            @if (column.headerCell) {
+              @if (typeof column.headerCell === 'boolean') {
+                {{ column.attribute }}
+              } @else {
+
+                @if (!column?.headerCell?.component) {
+                  @if (typeof column.headerCell.value === 'string') {
+                    <div [innerHTML]="getAsHtml(column.headerCell.value)"></div>
+                  }
+                } @else {
+                  <ng-container
+                    *ngComponentOutlet="column.headerCell.component!"></ng-container>
+                }
+              }
+            }
+          </th>
+        }
+      </tr>
+      </thead>
+      <tbody>
+        @for (item of getDataResponse?.data?.data; track item) {
+
+          <tr [ngClass]="config.rowCssClass ? config.rowCssClass(item) : ''">
+            @for (column of config.columns; track column) {
+              <td [class]="column.attribute">
+                @if (column.valueCell) {
+                  @if (typeof column.valueCell === 'boolean') {
+                    {{ resolveValue(item, column) }}
+                  } @else {
+                    @if (!column.valueCell.component) {
+                      {{ resolveValue(item, column, column.valueCell) }}
+                    } @else {
+                      <ng-container
+                        *ngComponentOutlet="column.valueCell.component; inputs: getComponentInputs(item, column,column.valueCell)"></ng-container>
+                    }
+                  }
+                }
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+
+    </table>
+    @if ((getDataResponse?.data?.meta?.totalPages ?? 1) > 1) {
+      <div class="flex justify-center mt-4">
+        <div class="join">
+          <button
+            class="join-item btn"
+            (click)="changePage(getDataResponse.data.meta.currentPage- 1)"
+            [disabled]="getDataResponse.data.meta.currentPage === 1">«
+          </button>
+          <button class="join-item btn">Page {{ getDataResponse.data.meta.currentPage }} of {{ getDataResponse.data.meta.totalPages }}</button>
+          <button
+            class="join-item btn"
+            (click)="changePage(getDataResponse.data.meta.currentPage + 1)"
+            [disabled]="getDataResponse.data.meta.currentPage === getDataResponse.data.meta.totalPages">»
+          </button>
+        </div>
+      </div>
+    }
+  }
+</div>

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);
+  }
+}

server/src/app.module.ts

@@ -9,6 +9,8 @@ import { User } from './entity/user';
 import { UserGroup } from './entity/user-group';
 import { UserRole } from './entity/user-role';
 import { LoggerModule } from './logger/logger.module';
+import { Product } from "./entity/product.entity";
+import { ProductsModule } from "./product/products.module";
 
 const moduleTypeOrm = TypeOrmModule.forRootAsync({
   imports: [ConfigModule],
@@ -21,7 +23,7 @@ const moduleTypeOrm = TypeOrmModule.forRootAsync({
       username: configService.get<string>('DATABASE_USER'),
       password: configService.get<string>('DATABASE_PASS'),
       database: configService.get<string>('DATABASE_NAME'),
-      entities: [User, UserGroup, UserRole],
+      entities: [User, UserGroup, UserRole, Product],
       logging: true,
       // synchronize: true,
     };
@@ -35,7 +37,8 @@ const moduleTypeOrm = TypeOrmModule.forRootAsync({
     UserModule,
     AuthModule,
     LoggerModule,
-  ],
+        ProductsModule
+    ],
   controllers: [AppController],
   providers: [AppService],
 })