From 2c1b7eed350ee2b6229ebcd64b883d570fffff85 Mon Sep 17 00:00:00 2001 From: veenm Date: Sun, 25 May 2025 18:05:19 +0200 Subject: [PATCH] Refactoring betreft date object --- .../appointment/appointment.component.html | 4 ++-- .../appointment/appointment.component.ts | 8 +++---- .../customer-details.component.html | 2 +- .../datepicker/datepicker.component.ts | 5 ++-- .../components/details/details.component.html | 6 ++--- .../dropdown-content.component.html | 2 +- .../edit-item/edit-item.component.ts | 18 +++++++------- .../new-item/new-item.component.html | 6 ++--- .../components/new-item/new-item.component.ts | 9 ++++--- .../week-view/week-view.component.ts | 24 +++++++++++++++---- src/app/models/appointment-dto.ts | 23 +++++++----------- src/app/models/appointment.ts | 20 ++++++---------- src/app/pages/agenda/agenda.component.html | 4 ++-- src/app/pages/agenda/agenda.component.ts | 14 +++++++---- src/app/services/appointment.service.ts | 23 ++++++++++++++---- 15 files changed, 96 insertions(+), 72 deletions(-) diff --git a/src/app/components/appointment/appointment.component.html b/src/app/components/appointment/appointment.component.html index 815a808..4c1474a 100644 --- a/src/app/components/appointment/appointment.component.html +++ b/src/app/components/appointment/appointment.component.html @@ -12,8 +12,8 @@ {{ appointment.customer.firstName }} {{ appointment.customer.lastName }} - {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} - - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }} + {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} + - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
Eerst volgende afspraak: -

{{ appointment.startDate }}

+

{{ appointment.startDateTime }}

diff --git a/src/app/components/datepicker/datepicker.component.ts b/src/app/components/datepicker/datepicker.component.ts index f839c59..6082eeb 100644 --- a/src/app/components/datepicker/datepicker.component.ts +++ b/src/app/components/datepicker/datepicker.component.ts @@ -1,12 +1,11 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; -import {DatePipe, NgForOf, NgIf} from '@angular/common'; +import {DatePipe, NgForOf} from '@angular/common'; @Component({ selector: 'datepicker', imports: [ NgForOf, - DatePipe, - NgIf + DatePipe ], templateUrl: './datepicker.component.html', styleUrl: './datepicker.component.scss' diff --git a/src/app/components/details/details.component.html b/src/app/components/details/details.component.html index fc0edc0..3fa4ddc 100644 --- a/src/app/components/details/details.component.html +++ b/src/app/components/details/details.component.html @@ -2,14 +2,14 @@ - {{ DateFormatter.getDate(appointment.startDate.toString()) }} + {{ DateFormatter.getDate(appointment.startDateTime.toString()) }}

- {{ DateFormatter.getFormattedTime(appointment.startHour, appointment.startMinute) }} - - {{ DateFormatter.getFormattedTime(appointment.endHour, appointment.endMinute) }} + {{ DateFormatter.getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} + - {{ DateFormatter.getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}

- Agenda wisselen + Agenda beheren

diff --git a/src/app/components/edit-item/edit-item.component.ts b/src/app/components/edit-item/edit-item.component.ts index 861df5c..0019456 100644 --- a/src/app/components/edit-item/edit-item.component.ts +++ b/src/app/components/edit-item/edit-item.component.ts @@ -59,12 +59,12 @@ export class EditItemComponent implements OnInit { } ngOnInit(): void { - let date = new Date(this.appointment.startDate); + let date = new Date(this.appointment.startDateTime); this.testForm = new FormGroup({ title: new FormControl(this.appointment.title, Validators.required), notes: new FormControl(this.appointment.description), - startTime: new FormControl(new TuiTime(this.appointment.startHour, this.appointment.startMinute), Validators.required), - endTime: new FormControl(new TuiTime(this.appointment.endHour, this.appointment.endMinute), Validators.required), + startTime: new FormControl(new TuiTime(this.appointment.startDateTime.getHours(), this.appointment.startDateTime.getMinutes()), Validators.required), + endTime: new FormControl(new TuiTime(this.appointment.endDateTime.getHours(), this.appointment.endDateTime.getMinutes()), Validators.required), date: new FormControl(new TuiDay(date.getFullYear(), date.getMonth(), date.getDate()), Validators.required), }) this.control = new FormControl(this.appointment.customer) @@ -84,17 +84,17 @@ export class EditItemComponent implements OnInit { const endTime = this.testForm.get('endTime').value let date = this.testForm.get('date').value let correctDate = new Date(date.year, date.month, date.day + 1) + let startDateTime = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes) + let endDateTime = new Date(date.year, date.month, date.day, endTime.hours, endTime.minutes) const customer = this.control.value; - this.appointment.startDate = correctDate; + this.appointment.startDateTime = correctDate; this.appointment.title = title; this.appointment.description = description - this.appointment.startHour = startTime.hours - this.appointment.startMinute = startTime.minutes - this.appointment.endHour = endTime.hours - this.appointment.endMinute = endTime.minutes + this.appointment.startDateTime = startDateTime; + this.appointment.endDateTime = endDateTime; this.appointment.customer = customer; - this.appointment.durationInMinutes = (this.appointment.endHour * 60 + this.appointment.endMinute) - (this.appointment.startHour * 60 + this.appointment.startMinute); + this.appointment.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000; this.waiting = true this.appointmentService.updateAppointment(this.appointment).subscribe(() => { diff --git a/src/app/components/new-item/new-item.component.html b/src/app/components/new-item/new-item.component.html index 6ca0aed..2d8bb27 100644 --- a/src/app/components/new-item/new-item.component.html +++ b/src/app/components/new-item/new-item.component.html @@ -91,7 +91,7 @@

Geplande afspraken die dag:

-
+
{{ appointment.title }} - {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} - - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }} + {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} - + {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
diff --git a/src/app/components/new-item/new-item.component.ts b/src/app/components/new-item/new-item.component.ts index 56f5adc..ce3eb46 100644 --- a/src/app/components/new-item/new-item.component.ts +++ b/src/app/components/new-item/new-item.component.ts @@ -10,7 +10,6 @@ import { TuiTextareaModule, TuiTextfieldControllerModule } from "@taiga-ui/legacy"; -import {Appointment} from '../../models/appointment'; import {TuiDay, TuiValidationError} from '@taiga-ui/cdk'; import {AppointmentService} from '../../services/appointment.service'; import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit'; @@ -75,7 +74,7 @@ export class NewItemComponent implements OnInit { this.appointmentForm.get('startTime').setValue('', Validators.required) this.appointmentForm.get('endTime').setValue('', [Validators.required, timeAfterStartValidator('startTime')]) this.appointments.sort((a, b) => { - return a.startHour - b.startHour || a.startMinute - b.startMinute; + return a.startDateTime.getHours() - b.startDateTime.getHours() || a.startDateTime.getMinutes() - b.startDateTime.getMinutes(); }); } @@ -87,9 +86,13 @@ export class NewItemComponent implements OnInit { let date = this.appointmentForm.get('date').value let correctDate = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes); + let startDateTime = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes) + let endDateTime = new Date(date.year, date.month, date.day, endTime.hours, endTime.minutes) + const customer = this.customerControl.value; - const appointment = new AppointmentDto(title, description, startTime.hours, startTime.minutes, endTime.hours, endTime.minutes, correctDate, customer) + // constructor(id: string, title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer, company: CompanyDTO) + const appointment = new AppointmentDto(title, description, startDateTime, endDateTime, customer) this.waiting = true this.appointmentService.addAppointment(appointment, this.userService.currentCompany.id).subscribe(() => { this.waiting = false diff --git a/src/app/components/week-view/week-view.component.ts b/src/app/components/week-view/week-view.component.ts index f769f6a..06ff88c 100644 --- a/src/app/components/week-view/week-view.component.ts +++ b/src/app/components/week-view/week-view.component.ts @@ -41,6 +41,7 @@ export class WeekViewComponent implements OnInit { getAppointments() { console.log(this.days[0], this.days[6]) + console.log('GETTING APPOINTMENTS') this.appointmentService.getAppointmentsByWeek(this.days[0], this.days[6]).subscribe(appointments => { this.appointments = appointments console.log(appointments); @@ -86,12 +87,23 @@ export class WeekViewComponent implements OnInit { } searchAppointments(day: Date, hour: string) { - return this.appointments.filter(appointment => - appointment.startHour === Number(hour.substring(0, 2)) && - appointment.startDate.toString().startsWith(this.formatDateToISO(day)) - ); + const targetHour = Number(hour.substring(0, 2)); + + return this.appointments.filter(appointment => { + const date = appointment.startDateTime instanceof Date + ? appointment.startDateTime + : new Date(appointment.startDateTime); // fallback als het nog een string is + + return ( + date.getFullYear() === day.getFullYear() && + date.getMonth() === day.getMonth() && + date.getDate() === day.getDate() && + date.getHours() === targetHour + ); + }); } + formatDateToISO(date: Date): string { const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, '0'); // maand is 0-based @@ -103,4 +115,8 @@ export class WeekViewComponent implements OnInit { emitAppointment($event: AppointmentDto) { this.appointmentSelected.emit($event); } + + getISODate(date: Date) { + return date.toISOString(); + } } diff --git a/src/app/models/appointment-dto.ts b/src/app/models/appointment-dto.ts index 4c39ff2..9b2c64d 100644 --- a/src/app/models/appointment-dto.ts +++ b/src/app/models/appointment-dto.ts @@ -2,30 +2,23 @@ import {Customer} from './customer'; import {CompanyDTO} from './app-user-dto'; export class AppointmentDto { - id: number; + id: string; title: string; description: string; - startDate: string | Date; - startHour: number; - startMinute: number; - endHour: number; - endMinute: number; + startDateTime: Date; + endDateTime: Date; durationInMinutes: number; customer: Customer; company: CompanyDTO; - - constructor(title: string, description: string, startHour: number, startMinute: number, endHour: number, endMinute: number, date: Date, customer: Customer) { + constructor(title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer) { this.title = title; this.description = description; - this.startHour = startHour; - this.startMinute = startMinute; - this.endHour = endHour; - this.endMinute = endMinute; - this.startDate = date; + this.startDateTime = startDateTime; + this.endDateTime = endDateTime; this.customer = customer; - // Bereken de totale duur in minuten - this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute); + this.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000; } + } diff --git a/src/app/models/appointment.ts b/src/app/models/appointment.ts index b0bde88..6fc6d52 100644 --- a/src/app/models/appointment.ts +++ b/src/app/models/appointment.ts @@ -4,26 +4,20 @@ export class Appointment { id: string; title: string; description: string; - startDate: Date; - startHour: number; - startMinute: number; - endHour: number; - endMinute: number; + startDateTime: Date; + endDateTime: Date; durationInMinutes: number; customer: Customer; - constructor(title: string, description: string, startHour: number, startMinute: number, endHour: number, endMinute: number, date: Date, customer: Customer) { + constructor(id: string, title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer) { + this.id = id; this.title = title; this.description = description; - this.startHour = startHour; - this.startMinute = startMinute; - this.endHour = endHour; - this.endMinute = endMinute; - this.startDate = date; + this.startDateTime = startDateTime; + this.endDateTime = endDateTime; this.customer = customer; - // Bereken de totale duur in minuten - this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute); + this.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000; } } diff --git a/src/app/pages/agenda/agenda.component.html b/src/app/pages/agenda/agenda.component.html index 4287836..202ba90 100644 --- a/src/app/pages/agenda/agenda.component.html +++ b/src/app/pages/agenda/agenda.component.html @@ -127,8 +127,8 @@ {{ appointment.customer.firstName }} {{ appointment.customer.lastName }} - {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} - - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }} + {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} + - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
diff --git a/src/app/pages/agenda/agenda.component.ts b/src/app/pages/agenda/agenda.component.ts index ca6d782..f57239d 100644 --- a/src/app/pages/agenda/agenda.component.ts +++ b/src/app/pages/agenda/agenda.component.ts @@ -81,9 +81,13 @@ export class AgendaComponent implements OnInit { } getAppointmentsForHour(hour: number) { - return this.appointments.filter(appointment => appointment.startHour === hour); + return this.appointments.filter(appointment => { + const startDateTime = new Date(appointment.startDateTime); + return startDateTime.getHours() === hour; + }); } + getDate(): string { const date = this.selectedDate @@ -182,8 +186,8 @@ export class AgendaComponent implements OnInit { getInlineStyles(appointment: AppointmentDto): { [key: string]: string } { return { '--duration': `${appointment.durationInMinutes}`, - '--start-minute': `${appointment.startMinute}`, - 'top': `${appointment.startMinute}px`, // Startpositie binnen het uur + '--start-minute': `${appointment.startDateTime.getMinutes()}`, + 'top': `${appointment.startDateTime.getMinutes()}px`, // Startpositie binnen het uur 'height': `${appointment.durationInMinutes}px`, // Hoogte over meerdere uren }; } @@ -193,8 +197,8 @@ export class AgendaComponent implements OnInit { } getAppointmentHeight(appointment: AppointmentDto): number { - const startInMinutes = (appointment.startHour * 60) + appointment.startMinute; - const endInMinutes = (appointment.endHour * 60) + appointment.endMinute; + const startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes(); + const endInMinutes = (appointment.endDateTime.getHours() * 60) + appointment.endDateTime.getMinutes(); return (endInMinutes - startInMinutes); // 50px per uur } diff --git a/src/app/services/appointment.service.ts b/src/app/services/appointment.service.ts index 3fbea2c..4e11bec 100644 --- a/src/app/services/appointment.service.ts +++ b/src/app/services/appointment.service.ts @@ -1,9 +1,8 @@ import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; -import {Appointment} from '../models/appointment'; import {environment} from '../../environments/environment'; -import {AuthService} from './auth.service'; import {AppointmentDto} from '../models/appointment-dto'; +import {map} from 'rxjs'; @Injectable({ providedIn: 'root', @@ -22,7 +21,15 @@ export class AppointmentService { const day = date.getDate().toString().padStart(2, '0') const month = (date.getMonth() + 1).toString().padStart(2, '0') const year = date.getFullYear(); - return this.http.get(`${this.baseApi}/date?start=${year}-${month}-${day}`, {}); + return this.http.get(`${this.baseApi}/date?start=${year}-${month}-${day}`, {}).pipe( + map(appointments => + appointments.map(dto => ({ + ...dto, + startDateTime: new Date(dto.startDateTime), + endDateTime: new Date(dto.endDateTime), + })) + ) + ) } getAppointmentsByWeek(date: Date, endDate: Date) { @@ -32,7 +39,15 @@ export class AppointmentService { const endDay = endDate.getDate().toString().padStart(2, '0') const endMonth = (endDate.getMonth() + 1).toString().padStart(2, '0') const endYear = endDate.getFullYear(); - return this.http.get(`${this.baseApi}/date/week?start=${year}-${month}-${day}&end=${endYear}-${endMonth}-${endDay}`, {}); + return this.http.get(`${this.baseApi}/date/week?start=${year}-${month}-${day}&end=${endYear}-${endMonth}-${endDay}`, {}).pipe( + map(appointments => + appointments.map(dto => ({ + ...dto, + startDateTime: new Date(dto.startDateTime), + endDateTime: new Date(dto.endDateTime), + })) + ) + ) } addAppointment(appointment: AppointmentDto, companyId: number) {