list booking

admin/src/app/features/calendar/components/calendar-view/single-event-booking-list/single-event-booking-list.html

@@ -1 +1,7 @@
-<p>single-event-booking-list works!</p>
+<h1>Foglalások</h1>
+@for ( booking of bookings.value();track booking){
+<div>
+  {{booking}}
+</div>
+}
+<rs-daisy-pagination [pageCount]="pageCount()" [activePage]="1" (onPaginate)="paginate($event)"></rs-daisy-pagination>

admin/src/app/features/calendar/components/calendar-view/single-event-booking-list/single-event-booking-list.ts

@@ -1,14 +1,62 @@
-import { Component, inject, input } from '@angular/core';
+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 { rxResource } from '@angular/core/rxjs-interop';
+import { of } from 'rxjs';
+import { Pagination } from '@rschneider/ng-daisyui';
 
 @Component({
   selector: 'app-single-event-booking-list',
-  imports: [],
+  imports: [
+    Pagination,
+  ],
   templateUrl: './single-event-booking-list.html',
   styleUrl: './single-event-booking-list.css',
 })
 export class SingleEventBookingList {
+
+  calendarService = inject(CalendarService);
   eventBus = inject(EventBusService);
   event = input<CalendarEventDto>();
+
+  activePage = signal<number>(1);
+  // bookings = toSignal(of(['a','b']));
+  pageSize = input<number>(10);
+  pageCount = computed(() => {
+    const bookings = this.bookings.value() ?? [];
+    let pageCount = Math.floor( bookings.length / this.pageSize());
+    if ( (bookings.length % this.pageSize()) > 0){
+      pageCount += 1;
+    }
+    pageCount = Math.max(pageCount ,1);
+    console.info("pageCount", pageCount);
+    return  pageCount;
+  })
+
+  bookings = rxResource(
+    {
+      params: () => {
+        page: this.activePage()
+      },
+      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"]
+        const pageData =  allData.slice(this.activePage()-1,this.activePage()+this.pageSize())
+        console.info("booking page data",pageData);
+        return of(pageData)
+      },
+
+    }
+  )
+
+
+  protected paginate($event: number) {
+    console.info("paginated to ", $event)
+    this.activePage.set($event);
+  }
+
+
 }
+