new shizzle for nizzle

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

@@ -58,7 +58,6 @@ export class EditItemComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    console.log(this.appointment);
     let date = new Date(this.appointment.startDate);
     this.testForm = new FormGroup({
       title: new FormControl(this.appointment.title, Validators.required),

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

@@ -1,4 +1,4 @@
-<form [formGroup]="testForm">
+<form [formGroup]="appointmentForm">
   <tui-input formControlName="title">
     Titel
     <input
@@ -8,7 +8,7 @@
     />
   </tui-input>
   <div
-    *ngIf="testForm.get('title').value == ''"
+    *ngIf="appointmentForm.get('title').value == ''"
     tuiGroup
     class="group"
     [collapsed]="true">
@@ -25,7 +25,7 @@
   <br>
   <div class="toolbar">
     <tui-combo-box
-      [formControl]="control"
+      [formControl]="customerControl"
       [stringify]="stringify"
       tuiTextfieldSize="m">
       Klant
@@ -43,18 +43,17 @@
       type="button">
     </button>
   </div>
+
   <br>
   <div
     tuiGroup
-    class="group"
-  >
+    class="group">
     <div>
       <tui-input-date
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
-        [tuiTextfieldLabelOutside]="false"
-      >
+        [tuiTextfieldLabelOutside]="false">
         Datum
       </tui-input-date>
     </div>
@@ -72,12 +71,38 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
-        [tuiTextfieldLabelOutside]="false"
-      >
+        [tuiTextfieldLabelOutside]="false">
         Tot
       </tui-input-time>
     </div>
   </div>
+  <span *ngIf="appointmentForm.get('endTime')?.errors?.['endTimeInvalid']">
+      	<tui-error [error]="timeError"/>
+    </span>
+  <br>
+  <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">
+        <span class="title">{{ appointment.title }}</span>
+        <span class="name">
+        <tui-icon
+          icon="@tui.user"
+          [style.font-size.rem]="1"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+          {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
+        <span class="time">
+        <tui-icon
+          icon="@tui.clock"
+          [style.font-size.rem]="1"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
+          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+    </span>
+      </div>
+    </div>
+  </ng-container>
+
   <br>
   <tui-textarea formControlName="notes">Notities</tui-textarea>
 </form>
@@ -95,42 +120,35 @@
     <tui-input
       formControlName="firstName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Voornaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="firstName"
-      />
+        formControlName="firstName"/>
     </tui-input>
     <br>
-
     <tui-input
       formControlName="lastName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Achternaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="lastName"
-      />
+        formControlName="lastName"/>
     </tui-input>
     <br>
     <tui-input
       formControlName="email"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Email
       <input
         tuiTextfieldLegacy
         autocomplete="email"
         type="email"
-        formControlName="email"
-      />
+        formControlName="email"/>
     </tui-input>
     <br>
     <button
@@ -142,8 +160,7 @@
       type="button">
       <tui-icon
         icon="@tui.plus"
-        [style.height.rem]="1"
-      />
+        [style.height.rem]="1"/>
       Klant toevoegen
     </button>
   </form>

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

@@ -13,3 +13,48 @@
   justify-content: center;
 
 }
+
+[tuiAppearance][data-appearance='custom'] {
+  background: #526ed3;
+  color: white;
+  margin-right: 8px;
+}
+
+.appointments-container {
+  display: flex;
+  gap: 5px; /* Ruimte tussen de objecten */
+  overflow-x: auto; /* Alleen horizontaal scrollen als nodig */
+  white-space: nowrap; /* Voorkomt dat items naar een nieuwe regel springen */
+  padding-bottom: 5px; /* Ruimte voor scrollbar */
+}
+
+.appointment-object {
+  background-color: #f5f5f5;
+  padding: 5px;
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+  min-width: 120px;
+  text-align: left;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-shrink: 0; /* Voorkomt dat items kleiner worden bij weinig ruimte */
+}
+
+
+/* Optioneel: Specifieke styling voor de tekstregels */
+.name {
+  color: #555;
+}
+
+.title {
+  font-weight: bold;
+}
+
+.time {
+  font-size: 11px;
+  color: #777;
+}
+
+

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')}`;
+  }
 }