new shizzle for nizzle

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

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {NgForOf, NgIf} from "@angular/common";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {TuiButton, TuiGroup, TuiIcon} from "@taiga-ui/core";
+import {TuiButton, TuiError, TuiGroup, TuiIcon} from "@taiga-ui/core";
 import {
   TuiComboBoxModule,
   TuiInputDateModule,
@@ -11,7 +11,7 @@ import {
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
 import {Appointment} from '../../models/appointment';
-import {TuiDay} from '@taiga-ui/cdk';
+import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {
   TuiButtonLoading,
@@ -22,6 +22,7 @@ import {
 import {Customer} from '../../models/customer';
 import {CustomerService} from '../../services/customer.service';
 import {ModalComponent} from '../modal/modal.component';
+import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
 
 @Component({
   selector: 'app-new-item',
@@ -42,42 +43,65 @@ import {ModalComponent} from '../modal/modal.component';
     TuiFilterByInputPipe,
     ModalComponent,
     TuiIcon,
-    TuiButtonLoading
+    TuiButtonLoading,
+    TuiError
   ],
   templateUrl: './new-item.component.html',
   styleUrl: './new-item.component.scss'
 })
 export class NewItemComponent implements OnInit {
 
-  @Input() testForm: FormGroup;
+  @Input() appointmentForm: FormGroup;
+  @Input() appointments: Appointment[];
   quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
   waiting: boolean = false;
   protected value: TuiDay | null = null;
   @Output() appointmentAddedEvent = new EventEmitter();
   showNewCustomer = false;
   customerForm: FormGroup;
+  today: Date;
+  timeError = new TuiValidationError('Begintijd moet voor de eindtijd liggen.');
+
 
   constructor(private appointmentService: AppointmentService, private customerService: CustomerService) {
   }
 
   ngOnInit(): void {
     this.getCustomers()
+    this.today = new Date();
     this.customerForm = new FormGroup({
       firstName: new FormControl('', Validators.required),
       lastName: new FormControl('', Validators.required),
       email: new FormControl('', Validators.required),
     })
+    this.appointmentForm.get('startTime').setValue(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required)
+    this.appointmentForm.get('endTime').setValue(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')])
+    this.appointments.sort((a, b) => {
+      return a.startHour - b.startHour || a.startMinute - b.startMinute;
+    });
+  }
+
+  getEndTime(): Date {
+    const endTime = new Date(this.today); // Kopieer startTime
+    endTime.setMinutes(endTime.getMinutes() + 30); // 30 minuten toevoegen
+
+    // Controleer of de dag nog steeds hetzelfde is
+    if (endTime.getDate() !== this.today.getDate()) {
+      endTime.setHours(23, 59, 59, 999); // Zet naar 23:59:59 als het overloopt
+    }
+
+    return endTime;
   }
 
   registerAppointment() {
-    const title = this.testForm.get('title').value
-    const description = this.testForm.get('notes').value
-    const startTime = this.testForm.get('startTime').value
-    const endTime = this.testForm.get('endTime').value
-    let date = this.testForm.get('date').value
+    const title = this.appointmentForm.get('title').value
+    const description = this.appointmentForm.get('notes').value
+    const startTime = this.appointmentForm.get('startTime').value
+    const endTime = this.appointmentForm.get('endTime').value
+    let date = this.appointmentForm.get('date').value
     let correctDate = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes);
 
-    const customer = this.control.value;
+    const customer = this.customerControl.value;
 
     const appointment = new Appointment(title, description, startTime.hours, startTime.minutes, endTime.hours, endTime.minutes, correctDate, customer)
     this.waiting = true
@@ -88,15 +112,15 @@ export class NewItemComponent implements OnInit {
   }
 
   formIsValid() {
-    return this.testForm.valid ? 'active' : 'disabled'
+    return this.appointmentForm.valid && this.customerControl.valid ? 'active' : 'disabled'
   }
 
   addAction(action: string) {
-    this.testForm.get('title').setValue(`${action} `)
+    this.appointmentForm.get('title').setValue(`${action} `)
   }
 
-  protected readonly control = new FormControl<Customer | null>(
-    null,
+  protected readonly customerControl = new FormControl<Customer | null>(
+    null, Validators.required
   );
 
   toggleCustomerModal() {
@@ -125,4 +149,8 @@ export class NewItemComponent implements OnInit {
       this.items = response;
     })
   }
+
+  getFormattedTime(hour: number, minute: number): string {
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  }
 }