Refactoring betreft date object

src/app/components/appointment/appointment.component.html

@@ -12,8 +12,8 @@
     {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
   <span class="appointment-time">
             <tui-icon icon="@tui.clock" [style.font-size.rem]="1"></tui-icon>
-    {{ getFormattedTime(appointment.startHour, appointment.startMinute) }}
+    {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
-    - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+    - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
           </span>
 </div>
 <div

src/app/components/appointment/appointment.component.ts

@@ -27,8 +27,8 @@ export class AppointmentComponent {
   getInlineStyles(appointment: AppointmentDto): { [key: string]: string } {
     return {
       '--duration': `${appointment.durationInMinutes}`,
-      '--start-minute': `${appointment.startMinute}`,
+      '--start-minute': `${appointment.startDateTime.getMinutes()}`,
-      'top': `${appointment.startMinute}px`, // Startpositie binnen het uur
+      'top': `${appointment.startDateTime.getMinutes()}px`, // Startpositie binnen het uur
       'height': `${appointment.durationInMinutes}px`, // Hoogte over meerdere uren
       'width': `${this.width}px`,
     };
@@ -39,8 +39,8 @@ export class AppointmentComponent {
   }
 
   getAppointmentHeight(appointment: AppointmentDto): number {
-    const startInMinutes = (appointment.startHour * 60) + appointment.startMinute;
+    const startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes();
-    const endInMinutes = (appointment.endHour * 60) + appointment.endMinute;
+    const endInMinutes = (appointment.endDateTime.getHours() * 60) + appointment.endDateTime.getMinutes();
     return (endInMinutes - startInMinutes); // 50px per uur
   }
 }

src/app/components/customer-details/customer-details.component.html

@@ -22,5 +22,5 @@
   <h2>
     Eerst volgende afspraak:
   </h2>
-  <h2>{{ appointment.startDate }}</h2>
+  <h2>{{ appointment.startDateTime }}</h2>
 </ng-template>

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,
+    DatePipe
-    NgIf
   ],
   templateUrl: './datepicker.component.html',
   styleUrl: './datepicker.component.scss'

src/app/components/details/details.component.html

@@ -2,14 +2,14 @@
   <tui-icon
     icon="@tui.calendar"
     [style.color]="'var(--tui-background-accent-1)'"/>
-  {{ DateFormatter.getDate(appointment.startDate.toString()) }}
+  {{ DateFormatter.getDate(appointment.startDateTime.toString()) }}
 </h2>
 <h2>
   <tui-icon
     icon="@tui.clock"
     [style.color]="'var(--tui-background-accent-1)'"/>
-  {{ DateFormatter.getFormattedTime(appointment.startHour, appointment.startMinute) }}
+  {{ DateFormatter.getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
-  - {{ DateFormatter.getFormattedTime(appointment.endHour, appointment.endMinute) }}
+  - {{ DateFormatter.getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
 </h2>
 <h2 *ngIf="appointment.customer">
   <tui-icon

src/app/components/dropdown-content/dropdown-content.component.html

@@ -12,7 +12,7 @@
         <tui-icon
           icon="@tui.arrow-left-right"
           [style.color]="'var(--tui-background-accent-1)'"/>
-        Agenda wisselen
+        Agenda beheren
       </button>
     </tui-data-list>
   </div>

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),
+      startTime: new FormControl(new TuiTime(this.appointment.startDateTime.getHours(), this.appointment.startDateTime.getMinutes()), Validators.required),
-      endTime: new FormControl(new TuiTime(this.appointment.endHour, this.appointment.endMinute), 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.startDateTime = startDateTime;
-    this.appointment.startMinute = startTime.minutes
+    this.appointment.endDateTime = endDateTime;
-    this.appointment.endHour = endTime.hours
-    this.appointment.endMinute = endTime.minutes
     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(() => {

src/app/components/new-item/new-item.component.html

@@ -91,7 +91,7 @@
   <ng-container *ngIf="appointments.length > 0">
     <h3>Geplande afspraken die dag:</h3>
     <div class="appointments-container">
-      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDate + '-' + appointment.startHour + appointment.startMinute">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDateTime + '-' + appointment.startDateTime.getHours() + appointment.startDateTime.getMinutes()">
         <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
         <span class="name" id="titel-naam">
         <tui-icon
@@ -104,8 +104,8 @@
           icon="@tui.clock"
           [style.font-size.rem]="1"
           [style.color]="'var(--tui-background-accent-1)'"/>
-          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
+          {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} -
-          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+          {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
     </span>
       </div>
     </div>

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

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 =>
+    const targetHour = Number(hour.substring(0, 2));
-      appointment.startHour === Number(hour.substring(0, 2)) &&
+
-      appointment.startDate.toString().startsWith(this.formatDateToISO(day))
+    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();
+  }
 }

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;
+  startDateTime: Date;
-  startHour: number;
+  endDateTime: Date;
-  startMinute: number;
-  endHour: number;
-  endMinute: number;
   durationInMinutes: number;
   customer: Customer;
   company: CompanyDTO;
 
-
+  constructor(title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer) {
-  constructor(title: string, description: string, startHour: number, startMinute: number, endHour: number, endMinute: number, date: Date, customer: Customer) {
     this.title = title;
     this.description = description;
-    this.startHour = startHour;
+    this.startDateTime = startDateTime;
-    this.startMinute = startMinute;
+    this.endDateTime = endDateTime;
-    this.endHour = endHour;
-    this.endMinute = endMinute;
-    this.startDate = date;
     this.customer = customer;
 
-    // Bereken de totale duur in minuten
+    this.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;
-    this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
   }
+
 }

src/app/models/appointment.ts

@@ -4,26 +4,20 @@ export class Appointment {
   id: string;
   title: string;
   description: string;
-  startDate: Date;
+  startDateTime: Date;
-  startHour: number;
+  endDateTime: Date;
-  startMinute: number;
-  endHour: number;
-  endMinute: number;
   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.startDateTime = startDateTime;
-    this.startMinute = startMinute;
+    this.endDateTime = endDateTime;
-    this.endHour = endHour;
-    this.endMinute = endMinute;
-    this.startDate = date;
     this.customer = customer;
 
-    // Bereken de totale duur in minuten
+    this.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;
-    this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
   }
 
 }

src/app/pages/agenda/agenda.component.html

@@ -127,8 +127,8 @@
             {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
           <span class="appointment-time">
             <tui-icon icon="@tui.clock" [style.font-size.rem]="1"></tui-icon>
-            {{ getFormattedTime(appointment.startHour, appointment.startMinute) }}
+            {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
-            - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+            - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
           </span>
         </div>
       </div>

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}`,
+      '--start-minute': `${appointment.startDateTime.getMinutes()}`,
-      'top': `${appointment.startMinute}px`, // Startpositie binnen het uur
+      '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 startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes();
-    const endInMinutes = (appointment.endHour * 60) + appointment.endMinute;
+    const endInMinutes = (appointment.endDateTime.getHours() * 60) + appointment.endDateTime.getMinutes();
     return (endInMinutes - startInMinutes); // 50px per uur
   }
 

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<AppointmentDto[]>(`${this.baseApi}/date?start=${year}-${month}-${day}`, {});
+    return this.http.get<AppointmentDto[]>(`${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<AppointmentDto[]>(`${this.baseApi}/date/week?start=${year}-${month}-${day}&end=${endYear}-${endMonth}-${endDay}`, {});
+    return this.http.get<AppointmentDto[]>(`${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) {