component gemaakt van nieuwe klant toevoegen + correcte validatie email

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

@@ -99,56 +99,5 @@
 </button>
 
 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      id="voornaam-nieuwe-klant"
-      [tuiTextfieldCleaner]="true">
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="firstName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      id="achternaam-nieuwe-klant"
-      [tuiTextfieldCleaner]="true">
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="lastName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      id="email-nieuwe-klant"
-      [tuiTextfieldCleaner]="true">
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        type="email"
-        formControlName="email"/>
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      id="klant-toevoegen"
-      [loading]=waiting
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"/>
-      Klant toevoegen
-    </button>
-  </form>
 </app-modal>

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

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
 import {NgForOf, NgIf} from "@angular/common";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from "@taiga-ui/core";
+import {TuiAlertService, TuiButton, TuiGroup} from "@taiga-ui/core";
 import {
   TuiComboBoxModule,
   TuiInputDateModule,
@@ -13,15 +13,11 @@ import {
 import {Appointment} from '../../models/appointment';
 import {TuiDay, TuiTime} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
-import {
+import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
-  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 {NewCustomerComponent} from '../new-customer/new-customer.component';
 
 @Component({
   selector: 'app-edit-item',
@@ -41,8 +37,7 @@ import {ModalComponent} from '../modal/modal.component';
     TuiStringifyContentPipe,
     TuiFilterByInputPipe,
     ModalComponent,
-    TuiIcon,
+    NewCustomerComponent
-    TuiButtonLoading
   ],
   templateUrl: './edit-item.component.html',
   styleUrl: './edit-item.component.scss'
@@ -132,15 +127,8 @@ export class EditItemComponent implements OnInit {
     `${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() {

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

@@ -0,0 +1,53 @@
+<form [formGroup]="customerForm">
+  <tui-input
+    formControlName="firstName"
+    tuiTextfieldSize="m"
+    id="voornaam-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Voornaam
+    <input
+      tuiTextfieldLegacy
+      type="text"
+      formControlName="firstName"/>
+  </tui-input>
+  <br>
+  <tui-input
+    formControlName="lastName"
+    tuiTextfieldSize="m"
+    id="achternaam-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Achternaam
+    <input
+      tuiTextfieldLegacy
+      type="text"
+      formControlName="lastName"/>
+  </tui-input>
+  <br>
+  <tui-input
+    formControlName="email"
+    tuiTextfieldSize="m"
+    id="email-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Email
+    <input
+      tuiTextfieldLegacy
+      autocomplete="email"
+      type="email"
+      formControlName="email"/>
+  </tui-input>
+  <br>
+  <button
+    appearance="secondary"
+    size="m"
+    tuiButton
+    id="klant-toevoegen"
+    [disabled]="customerForm.invalid"
+    [loading]=waiting
+    (click)="saveCustomer()"
+    type="button">
+    <tui-icon
+      icon="@tui.plus"
+      [style.height.rem]="1"/>
+    Klant toevoegen
+  </button>
+</form>

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

@@ -0,0 +1,48 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TuiInputModule} from '@taiga-ui/legacy';
+import {TuiButton, TuiIcon, TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiButtonLoading} from '@taiga-ui/kit';
+import {Customer} from '../../models/customer';
+import {CustomerService} from '../../services/customer.service';
+
+@Component({
+  selector: 'app-new-customer',
+  imports: [
+    ReactiveFormsModule,
+    TuiInputModule,
+    TuiTextfieldOptionsDirective,
+    TuiButton,
+    TuiIcon,
+    TuiButtonLoading
+  ],
+  templateUrl: './new-customer.component.html',
+  styleUrl: './new-customer.component.scss'
+})
+export class NewCustomerComponent {
+  waiting: boolean = false;
+  customerForm: FormGroup;
+  @Output() customerAdded: EventEmitter<any> = new EventEmitter();
+  emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+
+  constructor(private customerService: CustomerService) {
+
+    this.customerForm = new FormGroup({
+      firstName: new FormControl('', [Validators.required]),
+      lastName: new FormControl('', [Validators.required]),
+      email: new FormControl('', [Validators.required, Validators.pattern(this.emailRegex)]),
+    })
+  }
+
+  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.customerAdded.emit(customer);
+    })
+  }
+}

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

@@ -123,56 +123,5 @@
 </button>
 
 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      id="voornaam-nieuwe-klant"
-      [tuiTextfieldCleaner]="true">
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="firstName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      id="achternaam-nieuwe-klant"
-      [tuiTextfieldCleaner]="true">
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="lastName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      id="email-nieuwe-klant"
-      [tuiTextfieldCleaner]="true">
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        type="email"
-        formControlName="email"/>
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      id="klant-toevoegen"
-      [loading]=waiting
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"/>
-      Klant toevoegen
-    </button>
-  </form>
 </app-modal>

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

@@ -13,16 +13,12 @@ import {
 import {Appointment} from '../../models/appointment';
 import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
-import {
+import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
-  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';
+import {NewCustomerComponent} from '../new-customer/new-customer.component';
 
 @Component({
   selector: 'app-new-item',
@@ -43,8 +39,8 @@ import {timeAfterStartValidator} from '../../models/validators/time-after-start-
     TuiFilterByInputPipe,
     ModalComponent,
     TuiIcon,
-    TuiButtonLoading,
+    TuiError,
-    TuiError
+    NewCustomerComponent
   ],
   templateUrl: './new-item.component.html',
   styleUrl: './new-item.component.scss'
@@ -72,7 +68,7 @@ export class NewItemComponent implements OnInit {
     this.customerForm = new FormGroup({
       firstName: new FormControl('', Validators.required),
       lastName: new FormControl('', Validators.required),
-      email: new FormControl('', Validators.required),
+      email: new FormControl('', [Validators.required, Validators.email]),
     })
     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')])
@@ -133,15 +129,8 @@ export class NewItemComponent implements OnInit {
     `${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() {

src/app/pages/klanten/klanten.component.html

@@ -39,66 +39,7 @@
 </div>
 
 <app-modal title="Nieuwe klant toevoegen" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        id="input-voornaam"
-        formControlName="firstName"
-      />
-    </tui-input>
-    <br>
-
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        id="input-achternaam"
-        formControlName="lastName"
-      />
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        id="input-email"
-        type="email"
-        formControlName="email"
-      />
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      id="opslaanKlant"
-      (click)="saveCustomer()"
-      [disabled]="customerForm.invalid"
-      type="button">
-      <tui-icon
-        icon="@tui.save"
-        [style.height.rem]="1"
-      />
-      Opslaan
-    </button>
-  </form>
 </app-modal>
 
 <app-modal title="Klant bekijken" *ngIf="selectedCustomer != undefined" (close)="selectedCustomer = undefined">

src/app/pages/klanten/klanten.component.scss

@@ -40,6 +40,12 @@ h2 {
   padding: 12px 15px; /* Ruimte binnen de cellen */
 }
 
+.styled-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
 .styled-table tbody tr {
   border-bottom: 1px solid #dddddd; /* Lichte scheidingslijn */
 }

src/app/pages/klanten/klanten.component.ts

@@ -7,6 +7,7 @@ import {ModalComponent} from '../../components/modal/modal.component';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {TuiInputCopyModule, TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {CustomerDetailsComponent} from '../../components/customer-details/customer-details.component';
+import {NewCustomerComponent} from '../../components/new-customer/new-customer.component';
 
 @Component({
   selector: 'app-klanten',
@@ -20,7 +21,8 @@ import {CustomerDetailsComponent} from '../../components/customer-details/custom
     TuiInputCopyModule,
     TuiInputModule,
     TuiTextfieldControllerModule,
-    CustomerDetailsComponent
+    CustomerDetailsComponent,
+    NewCustomerComponent
   ],
   templateUrl: './klanten.component.html',
   styleUrl: './klanten.component.scss'
@@ -48,15 +50,8 @@ export class KlantenComponent implements OnInit {
   }
 
   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() {