From c3663e4c6e3a60eae0a20ef59de9df8d1fc3d7c3 Mon Sep 17 00:00:00 2001 From: veenm Date: Wed, 12 Mar 2025 23:44:29 +0100 Subject: [PATCH] new shizzle for nizzle --- .../edit-item/edit-item.component.ts | 1 - .../new-item/new-item.component.html | 65 ++++++++++++------- .../new-item/new-item.component.scss | 45 +++++++++++++ .../components/new-item/new-item.component.ts | 56 ++++++++++++---- src/app/interceptors/auth-interceptor.ts | 4 +- src/app/models/appointment.ts | 2 - src/app/models/user-dto.ts | 8 +-- .../validators/time-after-start-validator.ts | 18 +++++ src/app/pages/agenda/agenda.component.html | 3 +- src/app/pages/agenda/agenda.component.ts | 6 +- src/app/pages/home/home.component.html | 2 +- src/app/pages/home/home.component.scss | 4 +- src/app/pages/klanten/klanten.component.scss | 16 ++--- src/app/pages/login/login.component.html | 2 +- src/app/pages/login/login.component.scss | 2 +- src/app/services/appointment.service.ts | 1 + src/app/services/auth.service.ts | 13 ++-- src/app/services/customer.service.ts | 1 + src/app/utils/date-formatter.ts | 1 - 19 files changed, 179 insertions(+), 71 deletions(-) create mode 100644 src/app/models/validators/time-after-start-validator.ts diff --git a/src/app/components/edit-item/edit-item.component.ts b/src/app/components/edit-item/edit-item.component.ts index 299bc56..f33a41d 100644 --- a/src/app/components/edit-item/edit-item.component.ts +++ b/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), diff --git a/src/app/components/new-item/new-item.component.html b/src/app/components/new-item/new-item.component.html index 64e300b..31cb940 100644 --- a/src/app/components/new-item/new-item.component.html +++ b/src/app/components/new-item/new-item.component.html @@ -1,4 +1,4 @@ -
+ Titel
@@ -25,7 +25,7 @@
Klant @@ -43,18 +43,17 @@ type="button">
+
+ class="group">
+ [tuiTextfieldLabelOutside]="false"> Datum
@@ -72,12 +71,38 @@ formControlName="endTime" tuiTextfieldSize="m" class="tui-space_top-2" - [tuiTextfieldLabelOutside]="false" - > + [tuiTextfieldLabelOutside]="false"> Tot
+ + + +
+ +

Geplande afspraken die dag:

+
+
+ {{ appointment.title }} + + + {{ appointment.customer.firstName }} {{ appointment.customer.lastName }} + + + {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} - + {{ getFormattedTime(appointment.endHour, appointment.endMinute) }} + +
+
+ +
Notities
@@ -95,42 +120,35 @@ + [tuiTextfieldCleaner]="true"> Voornaam + formControlName="firstName"/>
- + [tuiTextfieldCleaner]="true"> Achternaam + formControlName="lastName"/>
+ [tuiTextfieldCleaner]="true"> Email + formControlName="email"/>
diff --git a/src/app/components/new-item/new-item.component.scss b/src/app/components/new-item/new-item.component.scss index 92d5777..37a07cc 100644 --- a/src/app/components/new-item/new-item.component.scss +++ b/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; +} + + diff --git a/src/app/components/new-item/new-item.component.ts b/src/app/components/new-item/new-item.component.ts index 089d7f4..93f6557 100644 --- a/src/app/components/new-item/new-item.component.ts +++ b/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( - null, + protected readonly customerControl = new FormControl( + 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')}`; + } } diff --git a/src/app/interceptors/auth-interceptor.ts b/src/app/interceptors/auth-interceptor.ts index 4c087f9..e3dbf1e 100644 --- a/src/app/interceptors/auth-interceptor.ts +++ b/src/app/interceptors/auth-interceptor.ts @@ -1,5 +1,5 @@ -import { HttpInterceptorFn } from '@angular/common/http'; -import { inject } from '@angular/core'; +import {HttpInterceptorFn} from '@angular/common/http'; +import {inject} from '@angular/core'; import {AuthService} from '../services/auth.service'; const excludedUrls = ['/auth/login']; diff --git a/src/app/models/appointment.ts b/src/app/models/appointment.ts index ddc9a61..b0bde88 100644 --- a/src/app/models/appointment.ts +++ b/src/app/models/appointment.ts @@ -22,8 +22,6 @@ export class Appointment { this.startDate = date; this.customer = customer; - console.log(this) - // Bereken de totale duur in minuten this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute); } diff --git a/src/app/models/user-dto.ts b/src/app/models/user-dto.ts index 9596a7b..c85512c 100644 --- a/src/app/models/user-dto.ts +++ b/src/app/models/user-dto.ts @@ -1,8 +1,8 @@ export class UserDto { - username:string - fullName:string - email:string - token:string + username: string + fullName: string + email: string + token: string constructor() { } diff --git a/src/app/models/validators/time-after-start-validator.ts b/src/app/models/validators/time-after-start-validator.ts new file mode 100644 index 0000000..923d79d --- /dev/null +++ b/src/app/models/validators/time-after-start-validator.ts @@ -0,0 +1,18 @@ +import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms'; + +export function timeAfterStartValidator(startTimeField: string): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const startTime = control.parent?.get(startTimeField)?.value; + const endTime = control.value; + + if (!startTime || !endTime) { + return null; // Niet valideren als een van beide leeg is + } + + // Omzetten naar Date-objecten voor vergelijking + const start = new Date(`1970-01-01T${startTime}:00`); + const end = new Date(`1970-01-01T${endTime}:00`); + + return end > start ? null : {endTimeInvalid: true}; + }; +} diff --git a/src/app/pages/agenda/agenda.component.html b/src/app/pages/agenda/agenda.component.html index ee4d62a..d94ae96 100644 --- a/src/app/pages/agenda/agenda.component.html +++ b/src/app/pages/agenda/agenda.component.html @@ -74,7 +74,8 @@ - + 23) { return 23 } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 6532c47..f948abc 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -23,7 +23,7 @@
-

{{fullName}}

+

{{ fullName }}