basic booking load behavior

This commit is contained in:
Roland Schneider
2025-12-19 16:23:53 +01:00
parent 72c213eaea
commit 4e77578abf
18 changed files with 335 additions and 75 deletions

View File

@@ -1,11 +1,38 @@
<h1>Foglalások</h1>
<app-heading [level]="1">
Foglalások
</app-heading>
@if (bookings.isLoading()) {
<div>loading...</div>
} @else {
@for (booking of bookings.value()?.items; track booking) {
<div>
{{ booking }}
@if (bookings.value()?.data?.length) {
<div class="overflow-x-auto">
<table class="table">
<!-- head -->
<thead>
<tr>
<th>Foglalás dátuma</th>
<th>Foglalt helyek száma</th>
<th></th>
</tr>
</thead>
<tbody>
@for (booking of bookings.value()?.data; track booking) {
<tr>
<td>{{formatDateTime(booking.occurrenceStartTime)}}</td>
<td>{{booking.reservedSeatsCount}}</td>
<td><rs-daisy-button [variant]="'error'">
Lemondás
</rs-daisy-button></td>
</tr>
}
</tbody>
</table>
</div>
@if(bookings.value()?.meta?.totalPages! > 1){
<rs-daisy-pagination [pageCount]="pageCount()" [activePage]="activePage()"
(onPaginate)="paginate($event)"></rs-daisy-pagination>
}
} @else {
Nem találtunk foglalást erre az eseményre
}
<rs-daisy-pagination [pageCount]="pageCount()" [activePage]="activePage()" (onPaginate)="paginate($event)"></rs-daisy-pagination>
}

View File

@@ -1,15 +1,19 @@
import { Component, computed, inject, input, signal } from '@angular/core';
import { EventBusService } from '../../../../../services/event-bus.service';
import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
import { CalendarService } from '../../../../../../api';
import { BookingResponseDto, CalendarService } from '../../../../../../api';
import { rxResource } from '@angular/core/rxjs-interop';
import { delay, of } from 'rxjs';
import { Pagination } from '@rschneider/ng-daisyui';
import { delay, of, throwError } from 'rxjs';
import { Button, Pagination } from '@rschneider/ng-daisyui';
import { Heading } from '../../../../../components/heading/heading';
import { format } from 'date-fns';
@Component({
selector: 'app-single-event-booking-list',
imports: [
Pagination,
Heading,
Button,
],
templateUrl: './single-event-booking-list.html',
styleUrl: './single-event-booking-list.css',
@@ -24,7 +28,8 @@ export class SingleEventBookingList {
// bookings = toSignal(of(['a','b']));
pageSize = input<number>(10);
pageCount = computed(() => {
return this.bookings.value()?.pageCount || 1;
// return this.bookings.value()?.pageCount || 1;
return 1;
})
bookings = rxResource(
@@ -34,22 +39,30 @@ export class SingleEventBookingList {
}),
stream: ({params}) => {
console.info("loading resource", params);
const allData = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"]
let pageCount = Math.floor( allData.length / this.pageSize());
if ( (allData.length % this.pageSize()) > 0){
pageCount += 1;
// console.info("loading resource", params);
//
// const allData = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"]
//
// let pageCount = Math.floor( allData.length / this.pageSize());
// if ( (allData.length % this.pageSize()) > 0){
// pageCount += 1;
// }
// pageCount = Math.max(pageCount ,1);
//
// const pageData = allData.slice( ((this.activePage()-1) * this.pageSize()),this.activePage()*this.pageSize());
// console.info("booking page data",pageData);
// return of({
// items: pageData,
// pageCount
// }).pipe( delay(1000))
if ( !this.event()){
return throwError( () => new Error("no event"))
}
pageCount = Math.max(pageCount ,1);
const pageData = allData.slice( ((this.activePage()-1) * this.pageSize()),this.activePage()*this.pageSize());
console.info("booking page data",pageData);
return of({
items: pageData,
pageCount
}).pipe( delay(1000))
const event = this.event()!;
return this.calendarService.calendarControllerGetBookings(
event.id,
new Date(event.startTime).toISOString()
)
},
}
@@ -61,6 +74,10 @@ export class SingleEventBookingList {
this.activePage.set($event);
}
formatDateTime( dateStr: string|Date){
return format(new Date(dateStr),'yyyy-MM-dd HH:mm');
}
protected readonly format = format;
}