diff --git a/admin/src/app/features/calendar/components/calendar-view/calendar-view.ts b/admin/src/app/features/calendar/components/calendar-view/calendar-view.ts index dd7234c..25db3bb 100644 --- a/admin/src/app/features/calendar/components/calendar-view/calendar-view.ts +++ b/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("") + workflow = signal(''); isOpen = signal(false); + selectedDate = signal(undefined); + selectedEventId = signal(undefined) - events = signal([]) + events = signal([]); 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"); - this.workflow.set("day"); + console.info('setting day ',info); + 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 date = new Date() - const start = new Date(date.getTime()) - start.setHours(hour,0,0) - const end = new Date(date.getTime()) + const hour = parseInt(hourStr, 10); + const date = new Date(); + const start = new Date(date.getTime()); + start.setHours(hour, 0, 0); + const end = new Date(date.getTime()); // end.setHours(3,0,0) this.calendarComponent?.getApi().addEvent({ - title: 'Event at '+hour, - start - }) + title: 'Event at ' + hour, + start, + }); } closeDialog() { - this.isOpen.set(false) + this.isOpen.set(false); } } diff --git a/admin/src/app/features/calendar/models/events-in-range-dto.model.ts b/admin/src/app/features/calendar/models/events-in-range-dto.model.ts index 060e8e9..b08ed0c 100644 --- a/admin/src/app/features/calendar/models/events-in-range-dto.model.ts +++ b/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 & { +export type CalendarEventDto = { + title: string; + startTime: string, + endTime: string, + description: string, isModified?: boolean; eventBookings: BookingWithUserDto[]; + + eventType: EventType }; diff --git a/admin/src/app/features/calendar/services/calendar.service.ts b/admin/src/app/features/calendar/services/calendar.service.ts index ee08892..36ec1c0 100644 --- a/admin/src/app/features/calendar/services/calendar.service.ts +++ b/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 { + public getEventsInRange(eventsInRangeDto: EventsInRangeDTO): Observable { const params = new HttpParams() .set('startDate', eventsInRangeDto.startTime!.toISOString()) .set('endDate', eventsInRangeDto.endTime!.toISOString()); - return this.http.get(this.apiUrl+'', { params }); + return this.http.get(this.apiUrl+'', { params }); } /**