diff --git a/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html b/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html index 3baf9e8..6a2a294 100644 --- a/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html +++ b/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html @@ -1,4 +1,4 @@ - + { + debugger this.appointments = data.items; this.updateCalendarEvents(); }); @@ -47,28 +49,67 @@ export class AppointmentCalendarComponent implements OnInit{ initialView: 'dayGridMonth', plugins: [dayGridPlugin, interactionPlugin], events: this.appointments.map(appointment => ({ - title: appointment.firstName + ' - ' + appointment.doctor, - date: appointment.dateOfAppointment + id: appointment.id, + title: `${appointment.firstName} ${appointment.lastName}`, + date: this.combineDateTime(appointment.dateOfAppointment, appointment.timeOfAppointment), })), - dateClick: (arg) => this.handleDateClick(arg) + dateClick: arg => this.handleDateClick(arg), + eventClick: info => this.onEventClick(info), + eventContent: function(arg) { + return { + html: `
+ ${arg.event.title} +
` + }; + } }; } + combineDateTime(dateStr: string, timeStr: string): string { + debugger + if (!timeStr) return dateStr; + const date = new Date(dateStr); + const [hours, minutes] = timeStr.split(':'); + date.setHours(parseInt(hours, 10), parseInt(minutes, 10), 0); + return date.toISOString(); + } calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', plugins: [dayGridPlugin, interactionPlugin], - dateClick: (arg) => this.handleDateClick(arg), + dateClick: arg => this.handleDateClick(arg), events: [ { title: 'event 1', date: '2025-01-01' }, - { title: 'event 2', date: '2025-01-02' } - ] + ], }; - + closeDialog() { + debugger; + this.isModalVisible = false; + this.loadAppointments({ + first: 0, + rows: 10, + sortField: 'id', + sortOrder: 1, + globalFilter: null, + }); + } handleDateClick(arg) { + debugger; this.selectedDate = arg.dateStr; this.isModalVisible = true; + this.isEditMode = false; + } onModalClose() { this.isModalVisible = false; + this.isEditMode = false; + this.appointmentIdToEdit = ""; + + } + + onEventClick(info: any) { + debugger; + this.appointmentIdToEdit = info.event.id; + this.isEditMode = true; + this.isModalVisible = true; } } diff --git a/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts b/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts index a216975..abe8344 100644 --- a/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts +++ b/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts @@ -6,6 +6,7 @@ import { CalendarOptions } from '@fullcalendar/core'; // useful for typechecking import dayGridPlugin from '@fullcalendar/daygrid'; import { AppointmentCalendarRoutingModule } from './appointment-calendar-routing.module'; import { AppointmentCalendarComponent } from './appointment-calendar.component'; +import { AppointmentDialogComponent } from '../appointment-dialog/appointment-dialog.component'; @NgModule({ @@ -16,7 +17,8 @@ import { AppointmentCalendarComponent } from './appointment-calendar.component'; CommonModule, AppointmentCalendarRoutingModule, RouterOutlet, - FullCalendarModule + FullCalendarModule, + AppointmentDialogComponent ] }) export class AppointmentCalendarModule { } diff --git a/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html b/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html index 7edea7c..9a22b72 100644 --- a/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html +++ b/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html @@ -9,8 +9,10 @@