rschneider/dvbooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add product and entity type

Browse Source
This commit is contained in:
Roland Schneider
2025-11-20 00:03:08 +01:00
parent a8ef23845c
commit d7bb559f95
47 changed files with 1721 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
admin/src/app/features/event-type/components/event-type-details/event-type-details.component.html Normal file
View File

@@ -0,0 +1,46 @@
<!-- dvbooking-cli/src/templates/angular/details.component.html.tpl -->
<!-- Generated by the CLI -->
<div class="p-4 md:p-8">
<ng-container *ngIf="eventType$ | async as eventType; else loading">
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
<div class="card-body">
<h2 class="card-title text-3xl">EventType Details</h2>
<div class="overflow-x-auto mt-4">
<table class="table w-full">
<tbody>
<tr>
<th>id</th>
<td>{{ eventType.id }}</td>
</tr>
<tr>
<th>name</th>
<td>{{ eventType.name }}</td>
</tr>
<tr>
<th>description</th>
<td>{{ eventType.description }}</td>
</tr>
<tr>
<th>color</th>
<td>{{ eventType.color }}</td>
</tr>
</tbody>
</table>
</div>
<div class="card-actions justify-end mt-6">
<a routerLink="/event-type" class="btn btn-secondary">Back to List</a>
<a routerLink="/event-type/{{ eventType.id }}/edit" class="btn btn-primary">Edit</a>
</div>
</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>

34
admin/src/app/features/event-type/components/event-type-details/event-type-details.component.ts Normal file
View File

@@ -0,0 +1,34 @@
// dvbooking-cli/src/templates/angular/details.component.ts.tpl
// Generated by the CLI
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { EventType } from '../../models/event-type.model';
import { EventTypeService } from '../../services/event-type.service';
@Component({
selector: 'app-event-type-details',
templateUrl: './event-type-details.component.html',
standalone: true,
imports: [CommonModule, RouterModule],
})
export class EventTypeDetailsComponent implements OnInit {
eventType$!: Observable<EventType>;
constructor(
private route: ActivatedRoute,
private eventTypeService: EventTypeService
) {}
ngOnInit(): void {
this.eventType$ = this.route.params.pipe(
switchMap(params => {
const id = params['id'];
return this.eventTypeService.findOne(id);
})
);
}
}

18
admin/src/app/features/event-type/components/event-type-filter/event-type-filter.component.html Normal file
View File

@@ -0,0 +1,18 @@
<!-- dvbooking-cli/src/templates/angular/filter.component.html.tpl -->
<!-- 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">
<div class="form-control"><label class="label"><span class="label-text">name</span></label>
<input type="text" formControlName="name" class="input input-bordered w-full" placeholder="Filter by name" /></div>
<div class="form-control"><label class="label"><span class="label-text">description</span></label>
<input type="text" formControlName="description" class="input input-bordered w-full" placeholder="Filter by description" /></div>
<div class="form-control"><label class="label"><span class="label-text">color</span></label>
<input type="text" formControlName="color" class="input input-bordered w-full" placeholder="Filter by color" /></div>
<div class="form-control">
<button type="button" (click)="reset()" class="btn btn-secondary">Reset</button>
</div>
</div>
</form>

39
admin/src/app/features/event-type/components/event-type-filter/event-type-filter.component.ts Normal file
View File

@@ -0,0 +1,39 @@
// dvbooking-cli/src/templates/angular/filter.component.ts.tpl
// 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-event-type-filter',
templateUrl: './event-type-filter.component.html',
standalone: true,
imports: [ReactiveFormsModule]
})
export class EventTypeFilterComponent {
@Output() filterChanged = new EventEmitter<any>();
filterForm: FormGroup;
constructor(private fb: FormBuilder) {
this.filterForm = this.fb.group({
name: [''],
description: [''],
color: ['']
});
this.filterForm.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged()
).subscribe(values => {
const cleanFilter = Object.fromEntries(
Object.entries(values).filter(([_, v]) => v != null && v !== '')
);
this.filterChanged.emit(cleanFilter);
});
}
reset() {
this.filterForm.reset();
}
}

31
admin/src/app/features/event-type/components/event-type-form/event-type-form.component.html Normal file
View File

@@ -0,0 +1,31 @@
<!-- dvbooking-cli/src/templates/angular/form.component.html.tpl -->
<!-- Generated by the CLI -->
<div class="p-4 md:p-8">
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
<div class="card-body">
<h2 class="card-title text-3xl">
{{ isEditMode ? 'Edit' : 'Create' }} EventType
</h2>
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4 mt-4">
<div class="form-control"><label class="label"><span class="label-text">name</span></label>
<input type="text" formControlName="name" class="input input-bordered w-full" /></div>
<div class="form-control"><label class="label"><span class="label-text">description</span></label>
<input type="text" formControlName="description" class="input input-bordered w-full" /></div>
<div class="form-control"><label class="label"><span class="label-text">color</span></label>
<input type="text" formControlName="color" class="input input-bordered w-full" /></div>
<div class="card-actions justify-end mt-6">
<a routerLink="/event-type" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ isEditMode ? 'Update' : 'Create' }}
</button>
</div>
</form>
</div>
</div>
</div>

87
admin/src/app/features/event-type/components/event-type-form/event-type-form.component.ts Normal file
View File

@@ -0,0 +1,87 @@
// dvbooking-cli/src/templates/angular/form.component.ts.tpl
// Generated by the CLI
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Observable, of } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { EventType } from '../../models/event-type.model';
import { EventTypeService } from '../../services/event-type.service';
@Component({
selector: 'app-event-type-form',
templateUrl: './event-type-form.component.html',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterModule],
})
export class EventTypeFormComponent implements OnInit {
form: FormGroup;
isEditMode = false;
id: number | null = null;
private numericFields = [];
constructor(
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private eventTypeService: EventTypeService
) {
this.form = this.fb.group({
name: [null],
description: [null],
color: [null]
});
}
ngOnInit(): void {
this.route.params.pipe(
tap(params => {
if (params['id']) {
this.isEditMode = true;
this.id = +params['id'];
}
}),
switchMap(() => {
if (this.isEditMode && this.id) {
return this.eventTypeService.findOne(this.id);
}
return of(null);
})
).subscribe(eventType => {
if (eventType) {
this.form.patchValue(eventType);
}
});
}
onSubmit(): void {
if (this.form.invalid) {
this.form.markAllAsTouched();
return;
}
const payload = { ...this.form.value };
for (const field of this.numericFields) {
if (payload[field] != null && payload[field] !== '') {
payload[field] = parseFloat(payload[field]);
}
}
let action$: Observable<EventType>;
if (this.isEditMode && this.id) {
action$ = this.eventTypeService.update(this.id, payload);
} else {
action$ = this.eventTypeService.create(payload);
}
action$.subscribe({
next: () => this.router.navigate(['/event-type']),
error: (err) => console.error('Failed to save event-type', err)
});
}
}

64
admin/src/app/features/event-type/components/event-type-list/event-type-list.component.html Normal file
View File

@@ -0,0 +1,64 @@
<!-- dvbooking-cli/src/templates/angular/list.component.html.tpl -->
<!-- Generated by the CLI -->
<div class="p-4 md:p-8 space-y-6">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold">EventTypes</h1>
<a routerLink="/event-type/new" class="btn btn-primary">Create New</a>
</div>
<app-event-type-filter (filterChanged)="onFilterChanged($event)"></app-event-type-filter>
<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>
<th>description</th>
<th>color</th>
<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>
<td>{{ item.description }}</td>
<td>{{ item.color }}</td>
<td class="text-right space-x-2">
<a [routerLink]="['/event-type', item.id]" class="btn btn-sm btn-ghost">View</a>
<a [routerLink]="['/event-type', item.id, 'edit']" class="btn btn-sm btn-ghost">Edit</a>
<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="5" class="text-center">No event-type 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>

68
admin/src/app/features/event-type/components/event-type-list/event-type-list.component.ts Normal file
View File

@@ -0,0 +1,68 @@
// 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 { RouterModule } from '@angular/router';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
import { switchMap, startWith } from 'rxjs/operators';
import { EventType, PaginatedResponse } from '../../models/event-type.model';
import { EventTypeService } from '../../services/event-type.service';
import { EventTypeFilterComponent } from '../event-type-filter/event-type-filter.component';
@Component({
selector: 'app-event-type-list',
templateUrl: './event-type-list.component.html',
standalone: true,
imports: [CommonModule,RouterModule, EventTypeFilterComponent],
})
export class EventTypeListComponent implements OnInit {
private refresh$ = new BehaviorSubject<void>(undefined);
private filter$ = new BehaviorSubject<any>({});
private page$ = new BehaviorSubject<number>(1);
paginatedResponse$!: Observable<PaginatedResponse<EventType>>;
constructor(private eventTypeService: EventTypeService) { }
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.eventTypeService.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.eventTypeService.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);
}
});
}
}
}

26
admin/src/app/features/event-type/components/event-type-table/event-type-data-provider.service.ts Normal file
View File

@@ -0,0 +1,26 @@
// dvbooking-cli/src/templates/angular-generic/data-provider.service.ts.tpl
// Generated by the CLI
import { inject, Injectable } from '@angular/core';
import { DataProvider, GetDataOptions, GetDataResponse } from '../../../../components/generic-table/data-provider.interface';
import { EventType } from '../../models/event-type.model';
import { map, Observable } from 'rxjs';
import { EventTypeService } from '../../services/event-type.service';
@Injectable({
providedIn: 'root',
})
export class EventTypeDataProvider implements DataProvider<EventType> {
private eventTypeService = inject(EventTypeService);
getData(options?: GetDataOptions): Observable<GetDataResponse<EventType>> {
const {q,page,limit} = options?.params ?? {};
// The generic table's params are compatible with our NestJS Query DTO
return this.eventTypeService.search(q ?? '',page,limit, ).pipe(
map((res) => {
// Adapt the paginated response to the GetDataResponse format
return { data: res };
})
);
}
}

11
admin/src/app/features/event-type/components/event-type-table/event-type-table.component.html Normal file
View File

@@ -0,0 +1,11 @@
<!-- dvbooking-cli/src/templates/angular-generic/table.component.html.tpl -->
<!-- Generated by the CLI -->
<div class="p-4 md:p-8 space-y-6">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold">EventTypes (Generic Table)</h1>
<a routerLink="/event-type/new" class="btn btn-primary">Create New</a>
</div>
<app-generic-table [config]="tableConfig"></app-generic-table>
</div>

110
admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts Normal file
View File

@@ -0,0 +1,110 @@
// dvbooking-cli/src/templates/angular-generic/table.component.ts.tpl
// Generated by the CLI
import { Component, inject, OnInit } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { EventType } from '../../models/event-type.model';
import { EventTypeDataProvider } from './event-type-data-provider.service';
import { ColumnDefinition } from '../../../../components/generic-table/column-definition.interface';
import { GenericTable } from '../../../../components/generic-table/generic-table';
import { GenericTableConfig } from '../../../../components/generic-table/generic-table.config';
import {
ActionDefinition,
GenericActionColumn,
} from '../../../../components/generic-action-column/generic-action-column';
import { EventTypeService } from '../../services/event-type.service';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-event-type-table',
standalone: true,
imports: [GenericTable, RouterModule],
templateUrl: './event-type-table.component.html',
})
export class EventTypeTableComponent implements OnInit {
private refresh$ = new BehaviorSubject<void>(undefined);
private filter$ = new BehaviorSubject<any>({});
private page$ = new BehaviorSubject<number>(1);
private limit$ = new BehaviorSubject<number>(10);
router = inject(Router);
tableConfig!: GenericTableConfig<EventType>;
eventTypeDataProvider = inject(EventTypeDataProvider);
eventTypeService = inject(EventTypeService);
ngOnInit(): void {
const actionHandler = (action: ActionDefinition<EventType>, item: EventType) => {
switch (action.action) {
case 'view':
this.router.navigate(['/event-type', item?.id]);
break;
case 'edit':
this.router.navigate(['/event-type', item?.id, 'edit']);
break;
case 'delete':
this.deleteItem(item.id);
break;
}
};
this.tableConfig = {
refresh$: this.refresh$,
filter$: this.filter$,
page$: this.page$,
limit$: this.limit$,
dataProvider: this.eventTypeDataProvider,
columns: [
{
attribute: 'name',
headerCell: true,
valueCell: true,
},
{
attribute: 'description',
headerCell: true,
valueCell: true,
},
{
attribute: 'color',
headerCell: true,
valueCell: true,
},
{
attribute: 'actions',
headerCell: { value: 'Actions' },
valueCell: {
component: GenericActionColumn,
componentInputs: item => ({
item: item,
actions: [
{ action: 'view', handler: actionHandler },
{ action: 'edit', handler: actionHandler },
{ action: 'delete', handler: actionHandler },
] as ActionDefinition<EventType>[],
}),
},
},
] as ColumnDefinition<EventType>[],
tableCssClass: 'event-type-table-container',
};
}
deleteItem(id: number): void {
if (confirm('Are you sure you want to delete this item?')) {
this.eventTypeService.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);
}
});
}
}
}

20
admin/src/app/features/event-type/models/event-type.model.ts Normal file
View File

@@ -0,0 +1,20 @@
// dvbooking-cli/src/templates/angular/model.ts.tpl
// Generated by the CLI
export interface EventType {
id: number;
name: string;
description: string;
color: string;
}
export interface PaginatedResponse<T> {
data: T[];
meta: {
totalItems: number;
itemCount: number;
itemsPerPage: number;
totalPages: number;
currentPage: number;
};
}

83
admin/src/app/features/event-type/services/event-type.service.ts Normal file
View File

@@ -0,0 +1,83 @@
// 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 { EventType, PaginatedResponse } from '../models/event-type.model';
import { ConfigurationService } from '../../../services/configuration.service';
export interface SearchResponse<T> {
data: T[];
total: number;
}
@Injectable({
providedIn: 'root'
})
export class EventTypeService {
private readonly apiUrl: string;
constructor(
private http: HttpClient,
private configService: ConfigurationService
) {
this.apiUrl = `${this.configService.getApiUrl()}/event-type`;
}
/**
* Find records with pagination and filtering.
*/
public find(filter: Record<string, any>): Observable<PaginatedResponse<EventType>> {
// --- 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<EventType>>(this.apiUrl, { params });
}
/**
* Search across multiple fields with a single term.
* @param term The search term (q).
*/
public search(term: string, page: number = 1, limit: number = 10): Observable<PaginatedResponse<EventType>> {
const params = new HttpParams()
.set('q', term)
.set('page', page.toString())
.set('limit', limit.toString());
return this.http.get<PaginatedResponse<EventType>>(`${this.apiUrl}/search`, { params });
}
/**
* Find a single record by its ID.
*/
public findOne(id: number): Observable<EventType> {
return this.http.get<EventType>(`${this.apiUrl}/${id}`);
}
/**
* Create a new record.
*/
public create(data: Omit<EventType, 'id'>): Observable<EventType> {
return this.http.post<EventType>(this.apiUrl, data);
}
/**
* Update an existing record.
*/
public update(id: number, data: Partial<Omit<EventType, 'id'>>): Observable<EventType> {
return this.http.patch<EventType>(`${this.apiUrl}/${id}`, data);
}
/**
* Remove a record by its ID.
*/
public remove(id: number): Observable<any> {
return this.http.delete(`${this.apiUrl}/${id}`);
}
}

46
admin/src/app/features/products/components/product-details/product-details.component.html Normal file
View File

@@ -0,0 +1,46 @@
<!-- dvbooking-cli/src/templates/angular/details.component.html.tpl -->
<!-- Generated by the CLI -->
<div class="p-4 md:p-8">
<ng-container *ngIf="product$ | async as product; else loading">
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
<div class="card-body">
<h2 class="card-title text-3xl">Product Details</h2>
<div class="overflow-x-auto mt-4">
<table class="table w-full">
<tbody>
<tr>
<th>id</th>
<td>{{ product.id }}</td>
</tr>
<tr>
<th>name</th>
<td>{{ product.name }}</td>
</tr>
<tr>
<th>price</th>
<td>{{ product.price }}</td>
</tr>
<tr>
<th>is_available</th>
<td>{{ product.is_available }}</td>
</tr>
</tbody>
</table>
</div>
<div class="card-actions justify-end mt-6">
<a routerLink="/products" class="btn btn-secondary">Back to List</a>
<a routerLink="/products/{{ product.id }}/edit" class="btn btn-primary">Edit</a>
</div>
</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>

34
admin/src/app/features/products/components/product-details/product-details.component.ts Normal file
View File

@@ -0,0 +1,34 @@
// dvbooking-cli/src/templates/angular/details.component.ts.tpl
// Generated by the CLI
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { Product } from '../../models/product.model';
import { ProductService } from '../../services/product.service';
@Component({
selector: 'app-product-details',
templateUrl: './product-details.component.html',
standalone: true,
imports: [CommonModule, RouterModule],
})
export class ProductDetailsComponent implements OnInit {
product$!: Observable<Product>;
constructor(
private route: ActivatedRoute,
private productService: ProductService
) {}
ngOnInit(): void {
this.product$ = this.route.params.pipe(
switchMap(params => {
const id = params['id'];
return this.productService.findOne(id);
})
);
}
}

12
admin/src/app/features/products/components/product-filter/product-filter.component.html Normal file
View File

@@ -0,0 +1,12 @@
<!-- dvbooking-cli/src/templates/angular/filter.component.html.tpl -->
<!-- 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">
<div class="form-control"><label class="label"><span class="label-text">name</span></label>
<input type="text" formControlName="name" class="input input-bordered w-full" placeholder="Filter by name" /></div>
<div class="form-control">
<button type="button" (click)="reset()" class="btn btn-secondary">Reset</button>
</div>
</div>
</form>

37
admin/src/app/features/products/components/product-filter/product-filter.component.ts Normal file
View File

@@ -0,0 +1,37 @@
// dvbooking-cli/src/templates/angular/filter.component.ts.tpl
// 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: ['']
});
this.filterForm.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged()
).subscribe(values => {
const cleanFilter = Object.fromEntries(
Object.entries(values).filter(([_, v]) => v != null && v !== '')
);
this.filterChanged.emit(cleanFilter);
});
}
reset() {
this.filterForm.reset();
}
}

33
admin/src/app/features/products/components/product-form/product-form.component.html Normal file
View File

@@ -0,0 +1,33 @@
<!-- dvbooking-cli/src/templates/angular/form.component.html.tpl -->
<!-- Generated by the CLI -->
<div class="p-4 md:p-8">
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
<div class="card-body">
<h2 class="card-title text-3xl">
{{ isEditMode ? 'Edit' : 'Create' }} Product
</h2>
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4 mt-4">
<div class="form-control"><label class="label"><span class="label-text">name</span></label>
<input type="text" formControlName="name" class="input input-bordered w-full" /></div>
<div class="form-control"><label class="label"><span class="label-text">price</span></label>
<input type="number" formControlName="price" class="input input-bordered w-full" /></div>
<div class="form-control"><label class="label cursor-pointer justify-start gap-4">
<span class="label-text">is_available</span>
<input type="checkbox" formControlName="is_available" class="checkbox" />
</label></div>
<div class="card-actions justify-end mt-6">
<a routerLink="/products" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
{{ isEditMode ? 'Update' : 'Create' }}
</button>
</div>
</form>
</div>
</div>
</div>

87
admin/src/app/features/products/components/product-form/product-form.component.ts Normal file
View File

@@ -0,0 +1,87 @@
// dvbooking-cli/src/templates/angular/form.component.ts.tpl
// Generated by the CLI
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Observable, of } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { Product } from '../../models/product.model';
import { ProductService } from '../../services/product.service';
@Component({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterModule],
})
export class ProductFormComponent implements OnInit {
form: FormGroup;
isEditMode = false;
id: number | null = null;
private numericFields = ["price"];
constructor(
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private productService: ProductService
) {
this.form = this.fb.group({
name: [null],
price: [null],
is_available: [null]
});
}
ngOnInit(): void {
this.route.params.pipe(
tap(params => {
if (params['id']) {
this.isEditMode = true;
this.id = +params['id'];
}
}),
switchMap(() => {
if (this.isEditMode && this.id) {
return this.productService.findOne(this.id);
}
return of(null);
})
).subscribe(product => {
if (product) {
this.form.patchValue(product);
}
});
}
onSubmit(): void {
if (this.form.invalid) {
this.form.markAllAsTouched();
return;
}
const payload = { ...this.form.value };
for (const field of this.numericFields) {
if (payload[field] != null && payload[field] !== '') {
payload[field] = parseFloat(payload[field]);
}
}
let action$: Observable<Product>;
if (this.isEditMode && this.id) {
action$ = this.productService.update(this.id, payload);
} else {
action$ = this.productService.create(payload);
}
action$.subscribe({
next: () => this.router.navigate(['/products']),
error: (err) => console.error('Failed to save product', err)
});
}
}

64
admin/src/app/features/products/components/product-list/product-list.component.html Normal file
View File

@@ -0,0 +1,64 @@
<!-- dvbooking-cli/src/templates/angular/list.component.html.tpl -->
<!-- Generated by the CLI -->
<div class="p-4 md:p-8 space-y-6">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold">Products</h1>
<a routerLink="/products/new" class="btn btn-primary">Create New</a>
</div>
<app-product-filter (filterChanged)="onFilterChanged($event)"></app-product-filter>
<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>
<th>price</th>
<th>is_available</th>
<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>
<td>{{ item.price }}</td>
<td>{{ item.is_available }}</td>
<td class="text-right space-x-2">
<a [routerLink]="['/products', item.id]" class="btn btn-sm btn-ghost">View</a>
<a [routerLink]="['/products', item.id, 'edit']" class="btn btn-sm btn-ghost">Edit</a>
<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="5" 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>

68
admin/src/app/features/products/components/product-list/product-list.component.ts Normal file
View File

@@ -0,0 +1,68 @@
// 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 { RouterModule } from '@angular/router';
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,RouterModule, 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);
}
});
}
}
}

20
admin/src/app/features/products/models/product.model.ts Normal file
View File

@@ -0,0 +1,20 @@
// dvbooking-cli/src/templates/angular/model.ts.tpl
// Generated by the CLI
export interface Product {
id: number;
name: string;
price: number;
is_available: boolean;
}
export interface PaginatedResponse<T> {
data: T[];
meta: {
totalItems: number;
itemCount: number;
itemsPerPage: number;
totalPages: number;
currentPage: number;
};
}

83
admin/src/app/features/products/services/product.service.ts Normal file
View File

@@ -0,0 +1,83 @@
// 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';
export interface SearchResponse<T> {
data: T[];
total: number;
}
@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 });
}
/**
* Search across multiple fields with a single term.
* @param term The search term (q).
*/
public search(term: string, page: number = 1, limit: number = 10): Observable<PaginatedResponse<Product>> {
const params = new HttpParams()
.set('q', term)
.set('page', page.toString())
.set('limit', limit.toString());
return this.http.get<PaginatedResponse<Product>>(`${this.apiUrl}/search`, { 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}`);
}
}