id's toegevoegd

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

@@ -5,6 +5,7 @@
       tuiTextfieldLegacy
       formControlName="title"
       type="text"
+      id="titel"
     />
   </tui-input>
   <div
@@ -16,6 +17,7 @@
       *ngFor="let action of quickActions"
       appearance="outline"
       tuiButton
+      [attr.id]="action"
       size="s"
       (click)="addAction(action)"
       type="button">{{ action }}
@@ -27,6 +29,7 @@
     <tui-combo-box
       [formControl]="customerControl"
       [stringify]="stringify"
+      id="klant"
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
@@ -38,6 +41,7 @@
     <button
       size="m"
       tuiButton
+      id="klantToevoegen"
       (click)="toggleCustomerModal()"
       iconStart="@tui.plus"
       type="button">
@@ -53,6 +57,7 @@
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
+        id="datum"
         [tuiTextfieldLabelOutside]="false">
         Datum
       </tui-input-date>
@@ -62,6 +67,7 @@
         formControlName="startTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="van"
         [tuiTextfieldLabelOutside]="false">
         Van
       </tui-input-time>
@@ -71,21 +77,22 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="tot"
         [tuiTextfieldLabelOutside]="false">
         Tot
       </tui-input-time>
     </div>
   </div>
   <span *ngIf="appointmentForm.get('endTime')?.errors?.['endTimeInvalid']">
-      	<tui-error [error]="timeError"/>
+      	<tui-error id="timeError" [error]="timeError"/>
     </span>
   <br>
   <ng-container *ngIf="appointments.length > 0">
     <h3>Geplande afspraken die dag:</h3>
     <div class="appointments-container">
-      <div *ngFor="let appointment of appointments" class="appointment-object">
-        <span class="title">{{ appointment.title }}</span>
-        <span class="name">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title + '-' + appointment.customer">
+        <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
+        <span class="name" id="titel-naam">
         <tui-icon
           icon="@tui.user"
           [style.font-size.rem]="1"
@@ -102,7 +109,6 @@
       </div>
     </div>
   </ng-container>
-
   <br>
   <tui-textarea formControlName="notes">Notities</tui-textarea>
 </form>
@@ -111,6 +117,7 @@
   size="m"
   tuiButton
   type="button" (click)="registerAppointment()"
+  id="afspraakMaken"
   [tuiAppearanceState]="formIsValid()">
   Afspraak maken
 </button>
@@ -120,6 +127,7 @@
     <tui-input
       formControlName="firstName"
       tuiTextfieldSize="m"
+      id="voornaam-nieuwe-klant"
       [tuiTextfieldCleaner]="true">
       Voornaam
       <input
@@ -131,6 +139,7 @@
     <tui-input
       formControlName="lastName"
       tuiTextfieldSize="m"
+      id="achternaam-nieuwe-klant"
       [tuiTextfieldCleaner]="true">
       Achternaam
       <input
@@ -142,6 +151,7 @@
     <tui-input
       formControlName="email"
       tuiTextfieldSize="m"
+      id="email-nieuwe-klant"
       [tuiTextfieldCleaner]="true">
       Email
       <input
@@ -155,6 +165,7 @@
       appearance="secondary"
       size="m"
       tuiButton
+      id="klant-toevoegen"
       [loading]=waiting
       (click)="saveCustomer()"
       type="button">