git init v2

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

@@ -0,0 +1,128 @@
+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 {
+  TuiComboBoxModule,
+  TuiInputDateModule,
+  TuiInputModule,
+  TuiInputTimeModule,
+  TuiTextareaModule,
+  TuiTextfieldControllerModule
+} from "@taiga-ui/legacy";
+import {Appointment} from '../../models/appointment';
+import {TuiDay} 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';
+
+@Component({
+  selector: 'app-new-item',
+  imports: [
+    NgForOf,
+    NgIf,
+    ReactiveFormsModule,
+    TuiButton,
+    TuiGroup,
+    TuiInputDateModule,
+    TuiInputModule,
+    TuiInputTimeModule,
+    TuiTextareaModule,
+    TuiTextfieldControllerModule,
+    TuiComboBoxModule,
+    TuiDataListWrapperComponent,
+    TuiStringifyContentPipe,
+    TuiFilterByInputPipe,
+    ModalComponent,
+    TuiIcon,
+    TuiButtonLoading
+  ],
+  templateUrl: './new-item.component.html',
+  styleUrl: './new-item.component.scss'
+})
+export class NewItemComponent implements OnInit {
+
+  @Input() testForm: FormGroup;
+  quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
+  waiting: boolean = false;
+  protected value: TuiDay | null = null;
+  @Output() appointmentAddedEvent = new EventEmitter();
+  showNewCustomer = false;
+  customerForm: FormGroup;
+
+  constructor(private appointmentService: AppointmentService, private customerService: CustomerService) {
+  }
+
+  ngOnInit(): void {
+    this.getCustomers()
+    this.customerForm = new FormGroup({
+      firstName: new FormControl('', Validators.required),
+      lastName: new FormControl('', Validators.required),
+      email: new FormControl('', Validators.required),
+    })
+  }
+
+  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
+    let correctDate = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes);
+
+    const customer = this.control.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.testForm.valid ? 'active' : 'disabled'
+  }
+
+  addAction(action: string) {
+    this.testForm.get('title').setValue(`${action} `)
+  }
+
+  protected readonly control = new FormControl<Customer | null>(
+    null,
+  );
+
+  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;
+    })
+  }
+}