add angular list view generations

admin/src/app/app.routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '@angular/router';
 import { LoginComponent } from './components/login/login.component';
 import { AuthGuard } from './auth/auth.guard';
-import { HomeComponent } from './components/home/home.component'; // Assuming you have a HomeComponent
+import { HomeComponent } from './components/home/home.component';
+import { ProductListComponent } from "./features/products/components/product-list/product-list.component";
 
 export const routes: Routes = [
-  { path: 'login', component: LoginComponent },
+    { path: 'products', component: ProductListComponent },
+    { path: 'login', component: LoginComponent },
   { path: '', component: HomeComponent, canActivate: [AuthGuard] },
   { path: '**', redirectTo: '' } // Redirect to home for any other route
 ];

admin/src/app/features/products/components/product-filter/product-filter.component.html

@@ -0,0 +1,20 @@
+<!-- Generated by the CLI -->
+<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">
+
+    <!-- Filter for 'name' -->
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Name</span>
+      </label>
+      <input type="text" formControlName="name" placeholder="Filter by name" class="input input-bordered w-full">
+    </div>
+
+    <!-- Add other filter inputs here -->
+
+    <!-- Reset Button -->
+    <div class="form-control">
+      <button type="button" (click)="reset()" class="btn btn-secondary">Reset</button>
+    </div>
+  </div>
+</form>

admin/src/app/features/products/components/product-filter/product-filter.component.ts

@@ -0,0 +1,37 @@
+// Generated by the CLI
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-product-filter',
+  templateUrl: './product-filter.component.html',
+  standalone: true,
+  imports: [ReactiveFormsModule]
+})
+export class ProductFilterComponent {
+  @Output() filterChanged = new EventEmitter<any>();
+  filterForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.filterForm = this.fb.group({
+      name: [''],
+      // Add other filterable form controls here
+    });
+
+    this.filterForm.valueChanges.pipe(
+      debounceTime(300),
+      distinctUntilChanged()
+    ).subscribe(values => {
+      // Remove empty properties before emitting
+      const cleanFilter = Object.fromEntries(
+        Object.entries(values).filter(([_, v]) => v != null && v !== '')
+      );
+      this.filterChanged.emit(cleanFilter);
+    });
+  }
+
+  reset() {
+    this.filterForm.reset();
+  }
+}

admin/src/app/features/products/components/product-list/product-list.component.html

@@ -0,0 +1,59 @@
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8 space-y-6">
+  <h1 class="text-3xl font-bold">Products</h1>
+
+  <!-- Filter Component -->
+  <app-product-filter (filterChanged)="onFilterChanged($event)"></app-product-filter>
+
+  <!-- Data Table -->
+  <ng-container *ngIf="paginatedResponse$ | async as response; else loading">
+    <div class="overflow-x-auto bg-base-100 rounded-lg shadow">
+      <table class="table w-full">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <!-- Add other table headers here -->
+            <th class="text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let item of response.data" class="hover">
+            <td>{{ item.id }}</td>
+            <td>{{ item.name }}</td>
+            <!-- Add other table data cells here -->
+            <td class="text-right space-x-2">
+              <button class="btn btn-sm btn-ghost">View</button>
+              <button class="btn btn-sm btn-ghost">Edit</button>
+              <button (click)="deleteItem(item.id)" class="btn btn-sm btn-error btn-ghost">Delete</button>
+            </td>
+          </tr>
+          <tr *ngIf="response.data.length === 0">
+            <td colspan="3" class="text-center">No products found.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination Controls -->
+    <div *ngIf="response.meta.totalPages > 1" class="flex justify-center mt-4">
+      <div class="join">
+        <button
+          class="join-item btn"
+          (click)="changePage(response.meta.currentPage - 1)"
+          [disabled]="response.meta.currentPage === 1">«</button>
+        <button class="join-item btn">Page {{ response.meta.currentPage }} of {{ response.meta.totalPages }}</button>
+        <button
+          class="join-item btn"
+          (click)="changePage(response.meta.currentPage + 1)"
+          [disabled]="response.meta.currentPage === response.meta.totalPages">»</button>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-template #loading>
+    <div class="text-center p-8">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+  </ng-template>
+</div>

admin/src/app/features/products/components/product-list/product-list.component.ts

@@ -0,0 +1,67 @@
+// dvbooking-cli/src/templates/angular/list.component.ts.tpl
+
+// Generated by the CLI
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
+import { switchMap, startWith } from 'rxjs/operators';
+import { Product, PaginatedResponse } from '../../models/product.model';
+import { ProductService } from '../../services/product.service';
+import { ProductFilterComponent } from '../product-filter/product-filter.component';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  standalone: true,
+  imports: [CommonModule, ProductFilterComponent],
+})
+export class ProductListComponent implements OnInit {
+
+  private refresh$ = new BehaviorSubject<void>(undefined);
+  private filter$ = new BehaviorSubject<any>({});
+  private page$ = new BehaviorSubject<number>(1);
+
+  paginatedResponse$!: Observable<PaginatedResponse<Product>>;
+
+  constructor(private productService: ProductService) { }
+
+  ngOnInit(): void {
+    this.paginatedResponse$ = combineLatest([
+      this.refresh$,
+      this.filter$.pipe(startWith({})),
+      this.page$.pipe(startWith(1))
+    ]).pipe(
+      switchMap(([_, filter, page]) => {
+        const query = { ...filter, page, limit: 10 };
+        return this.productService.find(query);
+      })
+    );
+  }
+
+  onFilterChanged(filter: any): void {
+    this.page$.next(1);
+    this.filter$.next(filter);
+  }
+
+  changePage(newPage: number): void {
+    if (newPage > 0) {
+      this.page$.next(newPage);
+    }
+  }
+
+  deleteItem(id: number): void {
+    if (confirm('Are you sure you want to delete this item?')) {
+      this.productService.remove(id).subscribe({
+        next: () => {
+          console.log(`Item with ID ${id} deleted successfully.`);
+          this.refresh$.next();
+        },
+        // --- THIS IS THE FIX ---
+        // Explicitly type 'err' to satisfy strict TypeScript rules.
+        error: (err: any) => {
+          console.error(`Error deleting item with ID ${id}:`, err);
+        }
+      });
+    }
+  }
+}

admin/src/app/features/products/models/product.model.ts

@@ -0,0 +1,17 @@
+// Generated by the CLI
+export interface Product {
+  id: number;
+  name: string;
+  // Add other properties from your NestJS entity here
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  meta: {
+    totalItems: number;
+    itemCount: number;
+    itemsPerPage: number;
+    totalPages: number;
+    currentPage: number;
+  };
+}

admin/src/app/features/products/services/product.service.ts

@@ -0,0 +1,66 @@
+// dvbooking-cli/src/templates/angular/service.ts.tpl
+
+// Generated by the CLI
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Product, PaginatedResponse } from '../models/product.model';
+import { ConfigurationService } from '../../../services/configuration.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+  private readonly apiUrl: string;
+
+  constructor(
+    private http: HttpClient,
+    private configService: ConfigurationService
+  ) {
+    this.apiUrl = `${this.configService.getApiUrl()}/products`;
+  }
+
+  /**
+   * Find records with pagination and filtering.
+   */
+  public find(filter: Record<string, any>): Observable<PaginatedResponse<Product>> {
+    // --- THIS IS THE FIX ---
+    // The incorrect line: .filter(([_, v]) for v != null)
+    // is now correctly written with an arrow function.
+    const cleanFilter = Object.fromEntries(
+      Object.entries(filter).filter(([_, v]) => v != null)
+    );
+    // --- END OF FIX ---
+
+    const params = new HttpParams({ fromObject: cleanFilter });
+    return this.http.get<PaginatedResponse<Product>>(this.apiUrl, { params });
+  }
+
+  /**
+   * Find a single record by its ID.
+   */
+  public findOne(id: number): Observable<Product> {
+    return this.http.get<Product>(`${this.apiUrl}/${id}`);
+  }
+
+  /**
+   * Create a new record.
+   */
+  public create(data: Omit<Product, 'id'>): Observable<Product> {
+    return this.http.post<Product>(this.apiUrl, data);
+  }
+
+  /**
+   * Update an existing record.
+   */
+  public update(id: number, data: Partial<Omit<Product, 'id'>>): Observable<Product> {
+    return this.http.patch<Product>(`${this.apiUrl}/${id}`, data);
+  }
+
+  /**
+   * Remove a record by its ID.
+   */
+  public remove(id: number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/${id}`);
+  }
+}

server/api.http

@@ -33,7 +33,7 @@ Accept: application/json
 Content-Type: application/json
 
 {
-    "name": "p3",
+    "name": "p22",
     "price": 3,
     "is_available": true
 }

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],
 })

server/src/entity/product.entity.ts

@@ -0,0 +1,23 @@
+import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';
+import { IsString, IsNumber, IsBoolean, IsDate, IsOptional } from 'class-validator';
+
+@Entity({ name: 'products' })
+export class Product {
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @Column()
+  @IsString()
+  name: string;
+
+  @Column({ type: 'numeric', nullable: true })
+  @IsOptional()
+  @IsNumber()
+  price: number | null;
+
+  @Column({ type: 'boolean', nullable: true, default: true })
+  @IsOptional()
+  @IsBoolean()
+  is_available: boolean | null = true;
+
+}

server/src/product/dto/create-product.dto.ts

@@ -0,0 +1,5 @@
+import { OmitType } from '@nestjs/mapped-types';
+import { Product } from '../../entity/product.entity';
+
+// NOTE: Use class-validator decorators here for production-grade validation.
+export class CreateProductDto extends OmitType(Product, ['id']) {}

server/src/product/dto/query-product.dto.ts

@@ -0,0 +1,32 @@
+import { IsOptional, IsString, IsNumber, IsIn, IsBoolean } from 'class-validator';
+import { Type } from 'class-transformer';
+
+export class QueryProductDto {
+  @IsOptional()
+  @Type(() => Number)
+  @IsNumber()
+  page?: number;
+
+  @IsOptional()
+  @Type(() => Number)
+  @IsNumber()
+  limit?: number;
+
+  @IsOptional()
+  @IsString()
+  sortBy?: string; // Should be a property of the Product entity
+
+  @IsOptional()
+  @IsIn(['ASC', 'DESC'])
+  order?: 'ASC' | 'DESC';
+
+  // --- Add other filterable properties below ---
+  // @IsOptional()
+  // @IsString()
+  // name?: string;
+  
+  // @IsOptional()
+  // @Type(() => Boolean)
+  // @IsBoolean()
+  // is_available?: boolean;
+}

server/src/product/dto/update-product.dto.ts

@@ -0,0 +1,4 @@
+import { PartialType } from '@nestjs/mapped-types';
+import { CreateProductDto } from './create-product.dto';
+
+export class UpdateProductDto extends PartialType(CreateProductDto) {}

server/src/product/products.controller.ts

@@ -0,0 +1,35 @@
+import { Controller, Get, Post, Body, Patch, Param, Delete, Query, ParseIntPipe } from '@nestjs/common';
+import { ProductsService } from './products.service';
+import { CreateProductDto } from './dto/create-product.dto';
+import { UpdateProductDto } from './dto/update-product.dto';
+import { QueryProductDto } from './dto/query-product.dto';
+
+@Controller('products')
+export class ProductsController {
+  constructor(private readonly productsService: ProductsService) {}
+
+  @Post()
+  create(@Body() createProductDto: CreateProductDto) {
+    return this.productsService.create(createProductDto);
+  }
+
+  @Get()
+  findAll(@Query() queryParams: QueryProductDto) {
+    return this.productsService.findAll(queryParams);
+  }
+
+  @Get(':id')
+  findOne(@Param('id', ParseIntPipe) id: number) {
+    return this.productsService.findOne(id);
+  }
+
+  @Patch(':id')
+  update(@Param('id', ParseIntPipe) id: number, @Body() updateProductDto: UpdateProductDto) {
+    return this.productsService.update(id, updateProductDto);
+  }
+
+  @Delete(':id')
+  remove(@Param('id', ParseIntPipe) id: number) {
+    return this.productsService.remove(id);
+  }
+}

server/src/product/products.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { ProductsService } from './products.service';
+import { ProductsController } from './products.controller';
+import { Product } from '../entity/product.entity';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Product])],
+  controllers: [ProductsController],
+  providers: [ProductsService],
+})
+export class ProductsModule {}

server/src/product/products.service.ts

@@ -0,0 +1,108 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository, FindManyOptions, FindOptionsWhere, ILike } from 'typeorm';
+import { CreateProductDto } from './dto/create-product.dto';
+import { UpdateProductDto } from './dto/update-product.dto';
+import { QueryProductDto } from './dto/query-product.dto';
+import { Product } from '../entity/product.entity';
+
+type QueryConfigItem = {
+  param: keyof Omit<QueryProductDto, 'page' | 'limit' | 'sortBy' | 'order'>;
+  dbField: keyof Product;
+  operator: 'equals' | 'like';
+};
+
+@Injectable()
+export class ProductsService {
+  constructor(
+    @InjectRepository(Product)
+    private readonly productRepository: Repository<Product>,
+  ) {}
+
+  create(createProductDto: CreateProductDto) {
+    const newRecord = this.productRepository.create(createProductDto);
+    return this.productRepository.save(newRecord);
+  }
+
+  async findAll(queryParams: QueryProductDto) {
+    const { page = 1, limit = 0, sortBy, order, ...filters } = queryParams;
+
+    const queryConfig: QueryConfigItem[] = [
+      // Example: { param: 'name', dbField: 'name', operator: 'like' },
+      // Example: { param: 'is_available', dbField: 'is_available', operator: 'equals' },
+    ];
+    
+    // --- START OF THE FIX ---
+    
+    // 1. Create a loosely typed object to build the where clause.
+    const whereClause: { [key: string]: any } = {};
+
+    // 2. Populate it dynamically. This avoids the TypeScript error.
+    for (const config of queryConfig) {
+      if (filters[config.param] !== undefined) {
+        if (config.operator === 'like') {
+          whereClause[config.dbField] = ILike(`%${filters[config.param]}%`);
+        } else {
+          whereClause[config.dbField] = filters[config.param];
+        }
+      }
+    }
+    
+    // 3. Assign the complete, built clause to the strongly-typed options.
+    const findOptions: FindManyOptions<Product> = {
+      where: whereClause as FindOptionsWhere<Product>,
+    };
+    
+    // --- END OF THE FIX ---
+
+    const paginated = limit > 0;
+
+    if (paginated) {
+      findOptions.skip = (page - 1) * limit;
+      findOptions.take = limit;
+    }
+
+    if (sortBy && order) {
+      findOptions.order = { [sortBy]: order };
+    }
+
+    const [data, totalItems] = await this.productRepository.findAndCount(findOptions);
+
+    if (!paginated) {
+      return { data, total: data.length };
+    }
+
+    return {
+      data,
+      meta: {
+        totalItems,
+        itemCount: data.length,
+        itemsPerPage: limit,
+        totalPages: Math.ceil(totalItems / limit),
+        currentPage: page,
+      },
+    };
+  }
+  
+  async findOne(id: number) {
+    const record = await this.productRepository.findOneBy({ id: id as any });
+    if (!record) {
+      throw new NotFoundException(`Product with ID ${id} not found`);
+    }
+    return record;
+  }
+
+  async update(id: number, updateProductDto: UpdateProductDto) {
+    const record = await this.findOne(id);
+    Object.assign(record, updateProductDto);
+    return this.productRepository.save(record);
+  }
+
+  async remove(id: number) {
+    const result = await this.productRepository.delete(id);
+    if (result.affected === 0) {
+      throw new NotFoundException(`Product with ID ${id} not found`);
+    }
+    return { deleted: true, id };
+  }
+}