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 {TuiDay, TuiValidationError} from '@taiga-ui/cdk';
import {AppointmentService} from '../../services/appointment.service';
import {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';
import {NewCustomerComponent} from '../new-customer/new-customer.component';
import {UserService} from '../../services/user.service';
import {AppointmentDto} from '../../models/appointment-dto';

@Component({
  selector: 'app-new-item',
  imports: [
    NgForOf,
    NgIf,
    ReactiveFormsModule,
    TuiButton,
    TuiGroup,
    TuiInputDateModule,
    TuiInputModule,
    TuiInputTimeModule,
    TuiTextareaModule,
    TuiTextfieldControllerModule,
    TuiComboBoxModule,
    TuiDataListWrapperComponent,
    TuiStringifyContentPipe,
    TuiFilterByInputPipe,
    ModalComponent,
    TuiIcon,
    TuiError,
    NewCustomerComponent
  ],
  templateUrl: './new-item.component.html',
  styleUrl: './new-item.component.scss'
})
export class NewItemComponent implements OnInit {

  @Input() appointmentForm: FormGroup;
  @Input() appointments: AppointmentDto[];
  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, private userService: UserService,) {
  }

  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, Validators.email]),
    })
    this.appointmentForm.get('startTime').setValue('', Validators.required)
    this.appointmentForm.get('endTime').setValue('', [Validators.required, timeAfterStartValidator('startTime')])
    this.appointments.sort((a, b) => {
      return a.startDateTime.getHours() - b.startDateTime.getHours() || a.startDateTime.getMinutes() - b.startDateTime.getMinutes();
    });
  }

  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);

    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;

    // 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
      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() {
    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')}`;
  }
}