list-owners.component.html 1.63 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error! </strong> {{ errorMessage }}
  <button type="button" (click)="vanishError()" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="container">
  <h1>Horse Owners List</h1>
  <form class="search-form" id="searchForm" (ngSubmit)="loadFilteredOwners()" #searchForm="ngForm">
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" name="name" [(ngModel)]="filters.name" placeholder="Name">
      </div>
      <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
      <button type="button" onclick="document.getElementById('searchForm').reset();" class="btn btn-danger"><i class="fas fa-times"></i></button>
17
      <a href="owner/add" class="btn btn-success"><i class="fas fa-plus"></i></a>
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
    </div>
  </form>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let owner of owners; let id = index">
        <td>{{ id + 1 }}</td>
        <td>{{ owner.name }}</td>
        <td>
33
          <a class="btn btn-primary" href="owner/{{ owner.id }}"><i class="fas fa-external-link-alt"></i></a>
34
          <a class="btn btn-success" href="owner/{{ owner.id }}/edit"><i class="fas fa-edit"></i></a>
35
          <button class="btn btn-danger" (click)="deleteOwner(owner.id, owner.name)"><i class="fas fa-trash"></i></button>
36 37 38 39 40
        </td>
      </tr>
    </tbody>
  </table>
</div>