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

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, TuiError, TuiGroup, TuiIcon} from "@taiga-ui/core";
import {
  TuiComboBoxModule,
  TuiInputDateModule,
  TuiInputModule,
  TuiInputTimeModule,
  TuiTextareaModule,
  TuiTextfieldControllerModule
} from "@taiga-ui/legacy";
import {Appointment} from '../../models/appointment';
import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
import {AppointmentService} from '../../services/appointment.service';
import {
  TuiButtonLoading,
  TuiDataListWrapperComponent,
  TuiFilterByInputPipe,
  TuiStringifyContentPipe
} from '@taiga-ui/kit';
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',
  imports: [
    NgForOf,
    NgIf,
    ReactiveFormsModule,
    TuiButton,
    TuiGroup,
    TuiInputDateModule,
    TuiInputModule,
    TuiInputTimeModule,
    TuiTextareaModule,
    TuiTextfieldControllerModule,
    TuiComboBoxModule,
    TuiDataListWrapperComponent,
    TuiStringifyContentPipe,
    TuiFilterByInputPipe,
    ModalComponent,
    TuiIcon,
    TuiButtonLoading,
    TuiError
  ],
  templateUrl: './new-item.component.html',
  styleUrl: './new-item.component.scss'
})
export class NewItemComponent implements OnInit {

  @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.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.customerControl.value;

    const appointment = new Appointment(title, description, startTime.hours, startTime.minutes, endTime.hours, endTime.minutes, correctDate, customer)
    this.waiting = true
    this.appointmentService.addAppointment(appointment).subscribe(() => {
      this.waiting = false
      this.appointmentAddedEvent.emit(title)
    })
  }

  formIsValid() {
    return this.appointmentForm.valid && this.customerControl.valid ? 'active' : 'disabled'
  }

  addAction(action: string) {
    this.appointmentForm.get('title').setValue(`${action} `)
  }

  protected readonly customerControl = new FormControl<Customer | null>(
    null, Validators.required
  );

  toggleCustomerModal() {
    this.showNewCustomer = !this.showNewCustomer;
  }

  protected items: Customer[] = [];

  protected readonly stringify = (item: Customer): string =>
    `${item.firstName} ${item.lastName}`;

  saveCustomer() {
    const firstName = this.customerForm.get('firstName').value
    const lastName = this.customerForm.get('lastName').value
    const email = this.customerForm.get('email').value
    const customer = new Customer(firstName, lastName, email);

    this.customerService.addCustomer(customer).subscribe(() => {
      this.showNewCustomer = false;
      this.getCustomers()
    })
  }

  getCustomers() {
    this.customerService.getCustomers().subscribe(response => {
      this.items = response;
    })
  }

  getFormattedTime(hour: number, minute: number): string {
    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
  }
}