list booking

admin/projects/rschneider/ng-daisyui/src/lib/components/pagination/pagination.html

@@ -0,0 +1,14 @@
+<div class="join">
+  @if (pageCount() > 1) {
+    <button class="join-item btn" (click)="paginate(1)"><</button>
+  }
+  @for (page of pages(); track page){
+    <button class="join-item btn"
+    [class.btn-active]="activePage() === page"
+            (click)="paginate(page)"
+    >{{page}}</button>
+  }
+  @if (pageCount() > 1) {
+  <button class="join-item btn" (click)="paginate(pageCount())">></button>
+  }
+</div>

admin/projects/rschneider/ng-daisyui/src/lib/components/pagination/pagination.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Pagination } from './pagination';
+
+describe('Pagination', () => {
+  let component: Pagination;
+  let fixture: ComponentFixture<Pagination>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Pagination]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Pagination);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

admin/projects/rschneider/ng-daisyui/src/lib/components/pagination/pagination.ts

@@ -0,0 +1,23 @@
+import { Component, computed, input, output } from '@angular/core';
+
+@Component({
+  selector: 'rs-daisy-pagination',
+  imports: [],
+  templateUrl: './pagination.html',
+  styleUrl: './pagination.css',
+})
+export class Pagination {
+  pageCount = input<number>(0);
+  activePage = input<number>(0);
+  pages = computed( () => {
+    console.info("pag.pagecount", this.pageCount())
+    return [...Array(this.pageCount() ?? 1)].map((_,i) => i+1)
+  })
+
+  onPaginate = output<number>();
+
+
+  paginate(page: number){
+    this.onPaginate.emit(page);
+  }
+}

admin/projects/rschneider/ng-daisyui/src/public-api.ts

@@ -7,6 +7,7 @@ export * from './lib/components/button/button';
 export * from './lib/components/footer/footer';
 export * from './lib/components/breadcrumbs/breadcrumbs';
 export * from './lib/components/modal/modal';
+export * from './lib/components/pagination/pagination';
 export * from './lib/components/card/card-with-centered-content-and-paddings/card-with-centered-content-and-paddings';
 export * from './lib/daisy.types';
 export * from './lib/layout/';

admin/src/app/components/list-view/list-view.html

@@ -0,0 +1 @@
+<p>list-view works!</p>

admin/src/app/components/list-view/list-view.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-list-view',
+  imports: [],
+  templateUrl: './list-view.html',
+  styleUrl: './list-view.css',
+})
+export class ListView {
+
+}

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);
+  }
+
+
 }
+