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

add breadcrumbs

Browse Source
This commit is contained in:
Roland Schneider
2025-11-21 15:24:35 +01:00
parent dfc3afd4a9
commit b047ecc589
19 changed files with 294 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
admin/src/app/features/event-type/components/event-type-details/event-type-details.component.html
View File

@@ -2,28 +2,28 @@
<!-- Generated by the CLI -->
<div class="p-4 md:p-8">
<rs-daisy-breadcrumbs [breadcrumbs]="breadcrumbs"></rs-daisy-breadcrumbs>
<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>
<h2 class="card-title text-3xl">Esemény adatai</h2>
<div class="overflow-x-auto mt-4">
<table class="table w-full">
<tbody>
<tr>
<th>id</th>
<th>Esemény azonosító</th>
<td>{{ eventType.id }}</td>
</tr>
<tr>
<th>name</th>
<th>Név</th>
<td>{{ eventType.name }}</td>
</tr>
<tr>
<th>description</th>
<th>Leírás</th>
<td>{{ eventType.description }}</td>
</tr>
<tr>
<th>color</th>
<th>Szín</th>
<td>{{ eventType.color }}</td>
</tr>
</tbody>
@@ -31,8 +31,7 @@
</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>
<a routerLink="/event-type/{{ eventType.id }}/edit" class="btn btn-primary">Módosítás</a>
</div>
</div>
</div>
@@ -43,4 +42,4 @@
<span class="loading loading-spinner loading-lg"></span>
</div>
</ng-template>
</div>
</div>

40
admin/src/app/features/event-type/components/event-type-details/event-type-details.component.ts
View File

@@ -5,30 +5,54 @@ 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 { switchMap, tap } from 'rxjs/operators';
import { EventType } from '../../models/event-type.model';
import { EventTypeService } from '../../services/event-type.service';
import { Breadcrumbs, Breadcrumb } from '@rschneider/ng-daisyui';
@Component({
selector: 'app-event-type-details',
templateUrl: './event-type-details.component.html',
standalone: true,
imports: [CommonModule, RouterModule],
imports: [CommonModule, RouterModule, Breadcrumbs],
})
export class EventTypeDetailsComponent implements OnInit {
static readonly BC_LIST: Breadcrumb = {
text: 'Esemény típusok',
url: '/event-type/table',
};
eventType$!: Observable<EventType>;
protected breadcrumbs: Breadcrumb[] = [
EventTypeDetailsComponent.BC_LIST,
];
constructor(
private route: ActivatedRoute,
private eventTypeService: EventTypeService
) {}
private eventTypeService: EventTypeService,
) {
}
ngOnInit(): void {
this.eventType$ = this.route.params.pipe(
switchMap(params => {
const id = params['id'];
return this.eventTypeService.findOne(id);
})
const id = params['id'];
return this.eventTypeService.findOne(id);
},
),
tap(value => {
this.breadcrumbs = [
EventTypeDetailsComponent.BC_LIST,
{
text: value.name,
},
];
}),
);
}
}
}

13
admin/src/app/features/event-type/components/event-type-form/event-type-form.component.html
View File

@@ -1,5 +1,5 @@
<!-- dvbooking-cli/src/templates/angular/form.component.html.tpl -->
<rs-daisy-breadcrumbs [breadcrumbs]="breadcrumbs"></rs-daisy-breadcrumbs>
<!-- Generated by the CLI -->
<div class="p-4 md:p-8">
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
@@ -10,14 +10,15 @@
<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>
<div class="form-control"><label class="label"><span class="label-text">Esemény típus neve</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>
<div class="form-control"><label class="label"><span class="label-text">Leírás</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="form-control"><label class="label"><span class="label-text">Szín</span></label>
<input type="color" formControlName="color" class="input input-bordered w-full" colorspace="display-p3"
alpha /></div>
<div class="card-actions justify-end mt-6">
<a routerLink="/event-type" class="btn btn-ghost">Cancel</a>
@@ -28,4 +29,4 @@
</form>
</div>
</div>
</div>
</div>

36
admin/src/app/features/event-type/components/event-type-form/event-type-form.component.ts
View File

@@ -1,22 +1,34 @@
// dvbooking-cli/src/templates/angular/form.component.ts.tpl
// Generated by the CLI
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef, 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 { delay, Observable, of } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { EventType } from '../../models/event-type.model';
import { EventTypeService } from '../../services/event-type.service';
import { Breadcrumbs, Breadcrumb } from '@rschneider/ng-daisyui';
@Component({
selector: 'app-event-type-form',
templateUrl: './event-type-form.component.html',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterModule],
imports: [CommonModule, ReactiveFormsModule, RouterModule, Breadcrumbs],
})
export class EventTypeFormComponent implements OnInit {
static readonly BC_LIST: Breadcrumb = {
text: 'Esemény típusok',
url: '/event-type/table',
};
protected breadcrumbs: Breadcrumb[] = [
EventTypeFormComponent.BC_LIST,
];
form: FormGroup;
isEditMode = false;
id: number | null = null;
@@ -27,7 +39,8 @@ export class EventTypeFormComponent implements OnInit {
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private eventTypeService: EventTypeService
private eventTypeService: EventTypeService,
private cdr: ChangeDetectorRef
) {
this.form = this.fb.group({
name: [null],
@@ -49,10 +62,21 @@ export class EventTypeFormComponent implements OnInit {
return this.eventTypeService.findOne(this.id);
}
return of(null);
})
}),
).subscribe(eventType => {
console.info("Breadcrumb loaded")
if (eventType) {
this.form.patchValue(eventType);
this.breadcrumbs = [
EventTypeFormComponent.BC_LIST,
{
text: eventType.name,
},
];
this.cdr.markForCheck();
console.info("breadcrumbs", this.breadcrumbs)
}
});
}
@@ -84,4 +108,4 @@ export class EventTypeFormComponent implements OnInit {
error: (err) => console.error('Failed to save event-type', err)
});
}
}
}

9
admin/src/app/features/event-type/components/event-type-list/event-type-list.component.html
View File

@@ -8,7 +8,6 @@
</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">
@@ -28,9 +27,9 @@
<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>
<a [routerLink]="['/event-type', item.id]" class="btn btn-sm btn-ghost">Részletek</a>
<a [routerLink]="['/event-type', item.id, 'edit']" class="btn btn-sm btn-ghost">Módosítás</a>
<button (click)="deleteItem(item.id)" class="btn btn-sm btn-error btn-ghost">Törlés</button>
</td>
</tr>
<tr *ngIf="response.data.length === 0">
@@ -61,4 +60,4 @@
<span class="loading loading-spinner loading-lg"></span>
</div>
</ng-template>
</div>
</div>

56
admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts
View File

@@ -14,6 +14,7 @@ import {
} from '../../../../components/generic-action-column/generic-action-column';
import { EventTypeService } from '../../services/event-type.service';
import { BehaviorSubject } from 'rxjs';
import { SvgIcons } from '../../../../svg-icons';
@Component({
selector: 'app-event-type-table',
@@ -24,9 +25,9 @@ import { BehaviorSubject } from 'rxjs';
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);
private filter$ = new BehaviorSubject<any>({});
private page$ = new BehaviorSubject<number>(1);
private limit$ = new BehaviorSubject<number>(10);
router = inject(Router);
tableConfig!: GenericTableConfig<EventType>;
@@ -44,8 +45,8 @@ export class EventTypeTableComponent implements OnInit {
this.router.navigate(['/event-type', item?.id, 'edit']);
break;
case 'delete':
this.deleteItem(item.id);
break;
this.deleteItem(item.id);
break;
}
};
@@ -64,7 +65,10 @@ export class EventTypeTableComponent implements OnInit {
{
attribute: 'description',
headerCell: true,
valueCell: true,
valueCell: {
styleClass: ctx => 'w-auto',
value: item => item?.description,
},
},
{
attribute: 'color',
@@ -79,9 +83,13 @@ export class EventTypeTableComponent implements OnInit {
componentInputs: item => ({
item: item,
actions: [
{ action: 'view', handler: actionHandler },
{ action: 'edit', handler: actionHandler },
{ action: 'delete', handler: actionHandler },
{ action: 'view', text: false, handler: actionHandler, svgIcon: SvgIcons.heroDocument },
{
action: 'edit', text: false,
svgIcon: SvgIcons.heroCog6Tooth,
handler: actionHandler,
},
{ action: 'delete', text: false, handler: actionHandler, svgIcon: SvgIcons.heroTrash },
] as ActionDefinition<EventType>[],
}),
},
@@ -91,20 +99,20 @@ export class EventTypeTableComponent implements OnInit {
};
}
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);
}
});
}
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);
},
});
}
}
}
}