diff --git a/src/app/components/edit-item/edit-item.component.html b/src/app/components/edit-item/edit-item.component.html
index b289940..248373f 100644
--- a/src/app/components/edit-item/edit-item.component.html
+++ b/src/app/components/edit-item/edit-item.component.html
@@ -99,56 +99,5 @@
-
+
diff --git a/src/app/components/edit-item/edit-item.component.ts b/src/app/components/edit-item/edit-item.component.ts
index 84ef2a9..bdcc5b4 100644
--- a/src/app/components/edit-item/edit-item.component.ts
+++ b/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 {
- TuiButtonLoading,
- TuiDataListWrapperComponent,
- TuiFilterByInputPipe,
- TuiStringifyContentPipe
-} from '@taiga-ui/kit';
+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 {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,
- TuiButtonLoading
+ NewCustomerComponent
],
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()
- })
+ this.showNewCustomer = false;
+ this.getCustomers()
}
getCustomers() {
diff --git a/src/app/components/new-customer/new-customer.component.html b/src/app/components/new-customer/new-customer.component.html
new file mode 100644
index 0000000..7188b8a
--- /dev/null
+++ b/src/app/components/new-customer/new-customer.component.html
@@ -0,0 +1,53 @@
+
diff --git a/src/app/components/new-customer/new-customer.component.scss b/src/app/components/new-customer/new-customer.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/new-customer/new-customer.component.ts b/src/app/components/new-customer/new-customer.component.ts
new file mode 100644
index 0000000..dc170a3
--- /dev/null
+++ b/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 = 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);
+ })
+ }
+}
diff --git a/src/app/components/new-item/new-item.component.html b/src/app/components/new-item/new-item.component.html
index cd86bad..beabd9d 100644
--- a/src/app/components/new-item/new-item.component.html
+++ b/src/app/components/new-item/new-item.component.html
@@ -123,56 +123,5 @@
-
+
diff --git a/src/app/components/new-item/new-item.component.ts b/src/app/components/new-item/new-item.component.ts
index 93f6557..cf87c2d 100644
--- a/src/app/components/new-item/new-item.component.ts
+++ b/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 {
- TuiButtonLoading,
- TuiDataListWrapperComponent,
- TuiFilterByInputPipe,
- TuiStringifyContentPipe
-} from '@taiga-ui/kit';
+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';
@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()
- })
+ this.showNewCustomer = false;
+ this.getCustomers()
}
getCustomers() {
diff --git a/src/app/pages/klanten/klanten.component.html b/src/app/pages/klanten/klanten.component.html
index 89a8bdc..c47df0e 100644
--- a/src/app/pages/klanten/klanten.component.html
+++ b/src/app/pages/klanten/klanten.component.html
@@ -39,66 +39,7 @@
-
+
diff --git a/src/app/pages/klanten/klanten.component.scss b/src/app/pages/klanten/klanten.component.scss
index 62890b2..a119695 100644
--- a/src/app/pages/klanten/klanten.component.scss
+++ b/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 */
}
diff --git a/src/app/pages/klanten/klanten.component.ts b/src/app/pages/klanten/klanten.component.ts
index f53e35d..860019f 100644
--- a/src/app/pages/klanten/klanten.component.ts
+++ b/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()
- })
+ this.showNewCustomer = false;
+ this.getCustomers()
}
getCustomers() {