102 lines
2.2 KiB
HTML
102 lines
2.2 KiB
HTML
<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>
|
|
|