git init v2

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

@@ -0,0 +1,101 @@
+<div class="container">
+  <div class="heading">
+    <h1>Klanten</h1>
+  </div>
+  <div class="content">
+    <div class="toolbar">
+      <button
+        size="m"
+        tuiButton
+        appearance="secondary"
+        type="button"
+        (click)="toggleCustomerModal()"
+      >
+        <tui-icon
+          icon="@tui.plus"
+          [style.height.rem]="1"
+        />
+        Klant toevoegen
+      </button>
+    </div>
+    <table class="styled-table">
+      <thead>
+      <tr>
+        <th>Naam</th>
+        <th>Email</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let customer of customers" (click)="selectCustomer(customer)">
+        <td>{{ customer.firstName }} {{ customer.lastName }}</td>
+        <td>{{ customer.email }}</td>
+      </tr>
+      </tbody>
+    </table>
+
+  </div>
+</div>
+
+<app-modal title="Nieuwe klant toevoegen" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
+  <form [formGroup]="customerForm">
+    <tui-input
+      formControlName="firstName"
+      tuiTextfieldSize="m"
+      [tuiTextfieldCleaner]="true"
+    >
+      Voornaam
+      <input
+        tuiTextfieldLegacy
+        type="text"
+        formControlName="firstName"
+      />
+    </tui-input>
+    <br>
+
+    <tui-input
+      formControlName="lastName"
+      tuiTextfieldSize="m"
+      [tuiTextfieldCleaner]="true"
+    >
+      Achternaam
+      <input
+        tuiTextfieldLegacy
+        type="text"
+        formControlName="lastName"
+      />
+    </tui-input>
+    <br>
+    <tui-input
+      formControlName="email"
+      tuiTextfieldSize="m"
+      [tuiTextfieldCleaner]="true"
+    >
+      Email
+      <input
+        tuiTextfieldLegacy
+        autocomplete="email"
+        type="email"
+        formControlName="email"
+      />
+    </tui-input>
+    <br>
+    <button
+      appearance="secondary"
+      size="m"
+      tuiButton
+      (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">
+  <app-customer-details [customer]="selectedCustomer"></app-customer-details>
+</app-modal>
+

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

@@ -0,0 +1,72 @@
+h1 {
+  text-align: center;
+}
+
+h2 {
+  margin-left: 8px;
+}
+
+
+.heading {
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.styled-table {
+  width: 100%;               /* Tabel breedte */
+  border-collapse: collapse;  /* Verwijdert dubbele randen */
+  margin: 20px 0;            /* Ruimte rondom de tabel */
+  font-size: 16px;
+  text-align: left;          /* Tekst uitlijning */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Zachte schaduw */
+  border-radius: 10px;       /* Afgeronde hoeken */
+  overflow: hidden;          /* Hoeken correct afronden */
+}
+
+.styled-table thead {
+  background-color: #868383; /* Blauwe kopregel */
+  color: #ffffff;           /* Witte tekst */
+  //text-transform: uppercase; /* Hoofdletters */
+  font-weight: bold;
+}
+
+.styled-table th, .styled-table td {
+  padding: 12px 15px;        /* Ruimte binnen de cellen */
+}
+
+.styled-table tbody tr {
+  border-bottom: 1px solid #dddddd; /* Lichte scheidingslijn */
+}
+
+.styled-table tbody tr:nth-child(even) {
+  background-color: #f3f3f3; /* Afwisselende rijkleuren */
+}
+
+.styled-table tbody tr:hover {
+  background-color: #d3d2d2; /* Hover effect */
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.styled-table tbody tr:last-of-type {
+  border-bottom: none; /* Verwijdert de onderste scheidingslijn */
+}
+
+.toolbar {
+  button {
+    margin-left: 8px;
+  }
+
+  margin-bottom: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+}
+
+

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

@@ -0,0 +1,71 @@
+import {Component, OnInit} from '@angular/core';
+import {NgForOf, NgIf} from '@angular/common';
+import {Customer} from '../../models/customer';
+import {CustomerService} from '../../services/customer.service';
+import {TuiButton, TuiIcon} from '@taiga-ui/core';
+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';
+
+@Component({
+  selector: 'app-klanten',
+  imports: [
+    NgForOf,
+    TuiButton,
+    TuiIcon,
+    ModalComponent,
+    NgIf,
+    ReactiveFormsModule,
+    TuiInputCopyModule,
+    TuiInputModule,
+    TuiTextfieldControllerModule,
+    CustomerDetailsComponent
+  ],
+  templateUrl: './klanten.component.html',
+  styleUrl: './klanten.component.scss'
+})
+export class KlantenComponent implements OnInit {
+  customers: Customer[];
+  showNewCustomer: boolean = false;
+  customerForm: FormGroup;
+  selectedCustomer: Customer;
+
+  constructor(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, Validators.email]),
+    })
+  }
+
+  toggleCustomerModal() {
+    this.showNewCustomer = !this.showNewCustomer;
+  }
+
+  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(customers => {
+      this.customers = customers
+    });
+  }
+
+  selectCustomer(customer: Customer) {
+    this.selectedCustomer = customer
+  }
+}