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>
+