github.com/readium/readium-lcp-server@v0.0.0-20240101192032-6e95190e99f1/frontend/manage/app/purchase/purchase-list.component.html (about)

     1  <h1>Purchases</h1>
     2  
     3  <div>
     4    <ol class="breadcrumb">
     5      <li class="breadcrumb-item active">Purchases</li>
     6      <li class="breadcrumb-item">
     7        <a routerLink="/purchases/add" role="button">Add a purchase</a>
     8      </li>
     9    </ol>
    10  </div>
    11  <span class="table-search-input"><label>Search : </label><input type="text" placeholder="Enter a title or an user name" [(ngModel)]="search"></span>
    12  <table *ngIf="purchases.length > 0" class="table">
    13    <thead class="thead-inverse">
    14      <tr>
    15         <th class="order-title" (click)="orderBy('id')">
    16          #
    17          <span *ngIf="order == 'id'&&!reverse" class="fa fa-caret-down"></span>
    18          <span *ngIf="order == 'id'&&reverse" class="fa fa-caret-up"></span>
    19        </th>
    20         <th class="order-title" (click)="orderBy('transactionDate')">
    21          Date
    22          <span *ngIf="order == 'transactionDate'&&!reverse" class="fa fa-caret-down"></span>
    23          <span *ngIf="order == 'transactionDate'&&reverse" class="fa fa-caret-up"></span>
    24        </th>
    25         <th class="order-title" (click)="orderBy('publication.title')">
    26          Publication
    27          <span *ngIf="order == 'publication.title'&&!reverse" class="fa fa-caret-down"></span>
    28          <span *ngIf="order == 'publication.title'&&reverse" class="fa fa-caret-up"></span>
    29        </th>
    30         <th class="order-title" (click)="orderBy('user.name')">
    31          User
    32          <span *ngIf="order == 'user.name'&&!reverse" class="fa fa-caret-down"></span>
    33          <span *ngIf="order == 'user.name'&&reverse" class="fa fa-caret-up"></span>
    34        </th>
    35         <th class="order-title" (click)="orderBy('type')">
    36          Type
    37          <span *ngIf="order == 'type'&&!reverse" class="fa fa-caret-down"></span>
    38          <span *ngIf="order == 'type'&&reverse" class="fa fa-caret-up"></span>
    39        </th>
    40         <th class="order-title" (click)="orderBy('startDate')">
    41          Start Date
    42          <span *ngIf="order == 'startDate'&&!reverse" class="fa fa-caret-down"></span>
    43          <span *ngIf="order == 'startDate'&&reverse" class="fa fa-caret-up"></span>
    44        </th>
    45         <th class="order-title" (click)="orderBy('endDate')">
    46          End Date
    47          <span *ngIf="order == 'endDate'&&!reverse" class="fa fa-caret-down"></span>
    48          <span *ngIf="order == 'endDate'&&reverse" class="fa fa-caret-up"></span>
    49        </th>
    50         <th>
    51          Delivered
    52        </th>
    53        <th>Actions</th>
    54      </tr>
    55    </thead>
    56    <tbody>
    57      <tr *ngFor="let purchase of purchases | sortBy:order:reverse">
    58        <td *ngIf="keptWithFilter(purchase)">{{purchase.id}}</td>
    59        <td *ngIf="keptWithFilter(purchase)">{{formatDate(purchase.transactionDate)}}</td>
    60        <td *ngIf="keptWithFilter(purchase)">{{purchase.publication.title}}</td>
    61        <td *ngIf="keptWithFilter(purchase)">{{purchase.user.name}}</td>
    62        <td *ngIf="keptWithFilter(purchase)">{{purchase.type}}</td>
    63        <td *ngIf="keptWithFilter(purchase)"><span *ngIf="purchase.type == 'LOAN'">{{formatDate(purchase.startDate)}}</span></td>
    64        <td *ngIf="keptWithFilter(purchase)"><span *ngIf="purchase.type == 'LOAN'">{{formatDate(purchase.endDate)}}</span></td>
    65        <td *ngIf="keptWithFilter(purchase)"><span class="badge badge-{{buildLicenseDeliveredClass(purchase.licenseUuid)}}">{{purchase.licenseUuid != null}}</span></td>
    66        <td *ngIf="keptWithFilter(purchase)">
    67          <div *ngIf="purchase.status == 'ok'">
    68            <a [routerLink]="['/purchases', purchase.id, 'status']"
    69              role="button"
    70              class="btn btn-secondary btn-sm">
    71              <i class="fa fa-battery-half" aria-hidden="true"></i> Status
    72            </a>
    73          </div>
    74        </td>
    75      </tr>
    76    </tbody>
    77  </table>