organisation-waiters.component.html

<div fxLayout="row break" fxLayoutAlign="space-between center">
  <h1>"{{ selectedOrganisation?.name }}" {{ 'HOME_WAITERS_NAV_ORGANISATION' | tr }}</h1>
  <a routerLink="../create" class="btn btn-outline-success">
    <i-bs name="plus-circle"></i-bs>
    {{ 'ADD_2' | tr }}</a
  >
</div>

<div class="spinner-row" *ngIf="!entitiesLoaded">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">{{ 'LOADING' | tr }}</span>
  </div>
</div>

<form class="mt-2" [hidden]="!entitiesLoaded">
  <div class="input-group">
    <input class="form-control ml-2 bg-dark text-white" type="text" [formControl]="filter" placeholder="{{ 'SEARCH' | tr }}" />
    <button
      class="btn btn-outline-secondary"
      type="button"
      ngbTooltip="{{ 'CLEAR' | tr }}"
      placement="bottom"
      (click)="filter.reset()"
      *ngIf="filter?.value?.length > 0">
      <i-bs name="x-circle-fill"></i-bs>
    </button>
  </div>
</form>

<div class="table-responsive" [hidden]="!entitiesLoaded">
  <table class="table table-dark table-hover">
    <thead>
      <tr class="table-dark">
        <th sortable="name" (sort)="onSort($event)" style="min-width: 20vh">{{ 'NAME' | tr }}</th>
        <th style="min-width: 20vh">{{ 'ACTIONS' | tr }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let waiter of entitiesCopy" class="table-dark clickable" (click)="openQRCode(waiter)">
        <td>{{ waiter.name }}</td>
        <td (click)="$event.stopPropagation()">
          <a class="btn btn-sm m-1 btn-outline-success text-white" routerLink="../{{ waiter.id }}" ngbTooltip="{{ 'EDIT' | tr }}">
            <i-bs name="pencil-square"></i-bs>
          </a>
          <button
            type="button"
            class="btn btn-sm m-1 btn-outline-danger text-white"
            ngbTooltip="{{ 'DELETE' | tr }}"
            (click)="onDelete(waiter.id)">
            <i-bs name="trash"></i-bs>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>