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

<form [formGroup]="appointmentForm">
  <tui-input formControlName="title">
    Titel
    <input
      tuiTextfieldLegacy
      formControlName="title"
      type="text"
      id="titel"
    />
  </tui-input>
  <div
    *ngIf="appointmentForm.get('title').value == ''"
    tuiGroup
    class="group"
    [collapsed]="true">
    <button
      *ngFor="let action of quickActions"
      appearance="outline"
      tuiButton
      [attr.id]="action"
      size="s"
      (click)="addAction(action)"
      type="button">{{ action }}
    </button>
  </div>

  <br>
  <div class="toolbar">
    <tui-combo-box
      [formControl]="customerControl"
      [stringify]="stringify"
      id="klant"
      tuiTextfieldSize="m">
      Klant
      <tui-data-list-wrapper
        *tuiDataList
        [itemContent]="stringify | tuiStringifyContent"
        [items]="items | tuiFilterByInput"
      />
    </tui-combo-box>
    <button
      size="m"
      tuiButton
      id="klantToevoegen"
      (click)="toggleCustomerModal()"
      iconStart="@tui.plus"
      type="button">
    </button>
  </div>

  <br>
  <div
    tuiGroup
    class="group">
    <div>
      <tui-input-date
        formControlName="date"
        tuiTextfieldSize="m"
        class="tui-space_vertical-4"
        id="datum"
        [tuiTextfieldLabelOutside]="false">
        Datum
      </tui-input-date>
    </div>
    <div>
      <tui-input-time
        formControlName="startTime"
        tuiTextfieldSize="m"
        class="tui-space_top-2"
        id="van"
        [tuiTextfieldLabelOutside]="false">
        Van
      </tui-input-time>
    </div>
    <div>
      <tui-input-time
        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 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" [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"
          [style.color]="'var(--tui-background-accent-1)'"/>
          {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
        <span class="time">
        <tui-icon
          icon="@tui.clock"
          [style.font-size.rem]="1"
          [style.color]="'var(--tui-background-accent-1)'"/>
          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
    </span>
      </div>
    </div>
  </ng-container>
  <br>
  <tui-textarea formControlName="notes">Notities</tui-textarea>
</form>
<br>
<button
  size="m"
  tuiButton
  type="button" (click)="registerAppointment()"
  id="afspraakMaken"
  [tuiAppearanceState]="formIsValid()">
  Afspraak maken
</button>

<app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
  <form [formGroup]="customerForm">
    <tui-input
      formControlName="firstName"
      tuiTextfieldSize="m"
      id="voornaam-nieuwe-klant"
      [tuiTextfieldCleaner]="true">
      Voornaam
      <input
        tuiTextfieldLegacy
        type="text"
        formControlName="firstName"/>
    </tui-input>
    <br>
    <tui-input
      formControlName="lastName"
      tuiTextfieldSize="m"
      id="achternaam-nieuwe-klant"
      [tuiTextfieldCleaner]="true">
      Achternaam
      <input
        tuiTextfieldLegacy
        type="text"
        formControlName="lastName"/>
    </tui-input>
    <br>
    <tui-input
      formControlName="email"
      tuiTextfieldSize="m"
      id="email-nieuwe-klant"
      [tuiTextfieldCleaner]="true">
      Email
      <input
        tuiTextfieldLegacy
        autocomplete="email"
        type="email"
        formControlName="email"/>
    </tui-input>
    <br>
    <button
      appearance="secondary"
      size="m"
      tuiButton
      id="klant-toevoegen"
      [loading]=waiting
      (click)="saveCustomer()"
      type="button">
      <tui-icon
        icon="@tui.plus"
        [style.height.rem]="1"/>
      Klant toevoegen
    </button>
  </form>
</app-modal>