implement add event via fullcalendar

admin/src/app/features/calendar/components/calendar-view/calendar-view.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, effect, ElementRef, inject, OnInit, signal, ViewChild } from '@angular/core';
 import { FullCalendarComponent, FullCalendarModule } from '@fullcalendar/angular';
-import { CalendarOptions } from '@fullcalendar/core';
+import { CalendarOptions, EventInput } from '@fullcalendar/core';
 
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
@@ -11,6 +11,7 @@ import { CreateEventForm } from '../create-event-form/create-event-form';
 import { CalendarService } from '../../services/calendar.service';
 import { addDays, subDays } from 'date-fns';
 import { EventsInRangeDTO } from '../../models/events-in-range-dto.model';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-calendar-view',
@@ -25,22 +26,24 @@ export class CalendarView implements OnInit, AfterViewInit {
 
   calendarService = inject(CalendarService);
 
-  workflow = signal<string>("")
+  workflow = signal<string>('');
   isOpen = signal<boolean>(false);
+  selectedDate = signal<Date|undefined>(undefined);
+  selectedEventId = signal<number|undefined>(undefined)
 
-  events = signal<EventsInRangeDTO[]>([])
+  events = signal<EventsInRangeDTO[]>([]);
 
   calendarOptions: CalendarOptions;
 
   constructor() {
     const start = new Date();
-    start.setHours(10,0,0)
+    start.setHours(10, 0, 0);
     const end = new Date();
-    end.setHours(11,0,0)
+    end.setHours(11, 0, 0);
 
 
     this.calendarOptions = {
-      plugins: [dayGridPlugin, timeGridPlugin, listPlugin,interactionPlugin],
+      plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
       initialView: 'dayGridMonth',
       weekends: true,
       headerToolbar: {
@@ -50,21 +53,18 @@ export class CalendarView implements OnInit, AfterViewInit {
         right: 'dayGridMonth,dayGridWeek,dayGridDay,timeGridWeek,timeGridDay,listWeek',
 
       },
-      events: [
+      events: this.fetchEvents.bind(this), // Bind the context
-
-
-      ],
 
       eventClick: function(info) {
-        console.info('Event info: ' , info);
+        console.info('Event info: ', info);
 
         // change the border color just for fun
         info.el.style.borderColor = 'red';
       },
 
       dateClick: (info) => {
-        console.info("setting day workflow");
+        console.info('setting day ',info);
-        this.workflow.set("day");
+        this.workflow.set('day');
         this.isOpen.set(true);
         // console.info('Date click on: ' , info);
         // const calendarApi = info.view.calendar;
@@ -77,7 +77,7 @@ export class CalendarView implements OnInit, AfterViewInit {
         //   start,
         //   end,
         // });
-      }
+      },
 
     };
 
@@ -87,47 +87,76 @@ export class CalendarView implements OnInit, AfterViewInit {
     });
   }
 
+  fetchEvents(fetchInfo: any, successCallback: (events: EventInput[]) => void, failureCallback: (error: any) => void): void {
 
+    console.info('fetching events', fetchInfo);
+    const start = fetchInfo.start;
+    const end = fetchInfo.end;
+    // if ( fetchInfo ){
+    //   console.info("fetchinfo", fetchInfo);
+    //   successCallback([]);
+    //   return;
+    // }
+    this.calendarService.getEventsInRange({
+      startTime: start,
+      endTime: end,
+    })
+      .pipe(
+        map(value => {
+          console.info("vent got"  , value );
+          const events: EventInput[] = value.map( (model) => {
+            const calendarEvent: EventInput = {
+              start: new Date(model.startTime),
+              // end: model.end_time,
+              title: model.title
+            };
+            if ( model.eventType){
+              calendarEvent.borderColor = model.eventType.color;
+            }
+            // calendarEvent.backgroundColor = "#00ff00"
+            return calendarEvent;
+          })
+          return events;
+        }),
+      )
+      .subscribe({
+          next: (events) => {
+          console.info("calendar events", events);
+            successCallback(events);
+          }
+          ,
+          error: (error) => {
+            console.error('Error fetching events', error);
+            failureCallback(error);
+          },
+        },
+      );
+  }
 
   ngAfterViewInit(): void {
 
-    // this.calendarComponent?.getApi().
-
   }
 
   ngOnInit(): void {
-    const start =   subDays(new Date(),14)
-    const end =   addDays(new Date(),14);
-    this.calendarService.getEventsInRange({
-      startTime: start,
-      endTime: end
-    }).subscribe(
-      {
-        'next': (events) => {
-          console.info('events',events)
-        }
-
-      }
-    )
 
   }
 
   protected addEvent($event: PointerEvent) {
     let hourStr = this.startHour.nativeElement.value;
-    const hour = parseInt(hourStr,10);
+    const hour = parseInt(hourStr, 10);
-    const date = new Date()
+    const date = new Date();
-    const start = new Date(date.getTime())
+    const start = new Date(date.getTime());
-    start.setHours(hour,0,0)
+    start.setHours(hour, 0, 0);
-    const end = new Date(date.getTime())
+    const end = new Date(date.getTime());
     // end.setHours(3,0,0)
 
     this.calendarComponent?.getApi().addEvent({
-      title: 'Event at '+hour,
+      title: 'Event at ' + hour,
-      start
+      start,
-    })
+    });
   }
 
   closeDialog() {
-    this.isOpen.set(false)
+    this.isOpen.set(false);
   }
 }

admin/src/app/features/calendar/models/events-in-range-dto.model.ts

@@ -1,4 +1,5 @@
 import { Event } from '../../events/models/event.model';
+import { EventType } from '../../event-type/models/event-type.model';
 export interface EventsInRangeDTO {
   startTime?: Date;
   endTime?: Date;
@@ -16,7 +17,13 @@ export type BookingWithUserDto = {
 };
 
 // The final shape of a calendar event occurrence
-export type CalendarEventDto = Omit<Event, 'bookings'> & {
+export type CalendarEventDto = {
+  title: string;
+  startTime: string,
+  endTime: string,
+  description: string,
   isModified?: boolean;
   eventBookings: BookingWithUserDto[];
+
+  eventType: EventType
 };

admin/src/app/features/calendar/services/calendar.service.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { ConfigurationService } from '../../../services/configuration.service';
 import { EventFormDTO } from '../models/event-form-dto.model';
 import { Event } from '../../events/models/event.model';
-import { EventsInRangeDTO } from '../models/events-in-range-dto.model';
+import { CalendarEventDto, EventsInRangeDTO } from '../models/events-in-range-dto.model';
 
 
 @Injectable({
@@ -22,11 +22,11 @@ export class CalendarService {
   /**
    * get events in range
    */
-  public getEventsInRange(eventsInRangeDto: EventsInRangeDTO): Observable<EventsInRangeDTO[]> {
+  public getEventsInRange(eventsInRangeDto: EventsInRangeDTO): Observable<CalendarEventDto[]> {
     const params = new HttpParams()
       .set('startDate', eventsInRangeDto.startTime!.toISOString())
       .set('endDate', eventsInRangeDto.endTime!.toISOString());
-    return this.http.get<EventsInRangeDTO[]>(this.apiUrl+'', { params });
+    return this.http.get<CalendarEventDto[]>(this.apiUrl+'', { params });
   }
 
   /**