list-horses.component.html 2.96 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
<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 List</h1>
  <form class="search-form" id="searchForm" (ngSubmit)="loadFilteredHorses()" #searchForm="ngForm">
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" name="name" [(ngModel)]="filters.name" placeholder="Name">
      </div>

      <div class="col">
        <input type="text" class="form-control" name="description" [(ngModel)]="filters.description" placeholder="Keywords from description">
      </div>

      <div class="col">
        <input type="date" class="form-control" name="birthday" [(ngModel)]="filters.birthday" required pattern="\d{4}-\d{2}-\d{2}">
      </div>

      <div class="col">
        <select class="form-control" [(ngModel)]="filters.race" name="race">
          <option value="" disabled selected>Race</option>
          <option value="ARABIAN">Arabian</option>
          <option value="MORGAN">Morgan</option>
          <option value="PAINT">Paint</option>
          <option value="APPALOOSA">Appaloosa</option>
        </select>
      </div>

      <div class="col">
        <select class="form-control" [(ngModel)]="filters.score" name="score">
          <option value="" disabled selected>Score</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </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>
    </div>
  </form>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Description</th>
        <th scope="col">Score</th>
        <th scope="col">Birthday</th>
        <th scope="col">Race</th>
58
        <th scope="col">Actions</th>
59 60 61 62 63 64 65 66 67 68 69
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let horse of horses; let id = index" scope="row">
        <td>{{ id + 1 }}</td>
        <td>{{ horse.name }}</td>
        <td>{{ horse.description }}</td>
        <td>{{ horse.score }}</td>
        <td>{{ horse.birthday }}</td>
        <td>{{ horse.race }}</td>
        <td>
70
          <a class="btn btn-primary" href="horse/{{ horse.id }}"><i class="fas fa-external-link-alt"></i></a>
71
          <a class="btn btn-success" href="horse/{{ horse.id }}/edit"><i class="fas fa-edit"></i></a>
72
          <button class="btn btn-danger" (click)="deleteHorse(horse.id, horse.name)"><i class="fas fa-trash"></i></button>
73 74 75 76 77
        </td>
      </tr>
    </tbody>
  </table>
</div>