client/src/app/+admin/follows/following-list/following-list.component.html

   1 <h1>
   2   <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
   3   <ng-container i18n>Your instance subscriptions</ng-container>
   4 </h1>
   5
   6 <p-table
   7   [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
   8   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
   9   [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  10   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  11   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} hosts"
  12 >
  13   <ng-template pTemplate="caption">
  14     <div class="caption">
  15       <div class="left-buttons">
  16         <a class="follow-button" (click)="openFollowModal()" (key.enter)="openFollowModal()">
  17           <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
  18           <ng-container i18n>Follow</ng-container>
  19         </a>
  20       </div>
  21
  22       <div class="ml-auto">
  23         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
  24       </div>
  25     </div>
  26   </ng-template>
  27
  28   <ng-template pTemplate="header">
  29     <tr>
  30       <th style="width: 150px;" i18n>Action</th>
  31       <th i18n>Following</th>
  32       <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
  33       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  34       <th style="width: 160px;" i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th>
  35     </tr>
  36   </ng-template>
  37
  38   <ng-template pTemplate="body" let-follow>
  39     <tr>
  40       <td class="action-cell">
  41         <my-delete-button label (click)="removeFollowing(follow)"></my-delete-button>
  42       </td>
  43       <td>
  44         <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
  45           {{ follow.following.name + '@' + follow.following.host }}
  46           <span class="glyphicon glyphicon-new-window"></span>
  47         </a>
  48       </td>
  49
  50       <td *ngIf="follow.state === 'accepted'">
  51         <span class="badge badge-green" i18n>Accepted</span>
  52       </td>
  53       <td *ngIf="follow.state === 'pending'">
  54         <span class="badge badge-yellow" i18n>Pending</span>
  55       </td>
  56
  57       <td>{{ follow.createdAt | date: 'short' }}</td>
  58       <td>
  59         <my-redundancy-checkbox
  60           *ngIf="isInstanceFollowing(follow)"
  61           [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed"
  62         ></my-redundancy-checkbox>
  63       </td>
  64     </tr>
  65   </ng-template>
  66
  67   <ng-template pTemplate="emptymessage">
  68     <tr>
  69       <td colspan="6">
  70         <div class="no-results">
  71           <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
  72           <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>
  73         </div>
  74       </td>
  75     </tr>
  76   </ng-template>
  77 </p-table>
  78
  79 <my-follow-modal #followModal></my-follow-modal>