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" [first]="pagination.start"
   8   [rowsPerPageOptions]="rowsPerPageOptions" [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($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="ms-auto">
  23         <my-advanced-input-filter [filters]="searchFilters" (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           <my-global-icon iconName="external-link"></my-global-icon>
  47         </a>
  48       </td>
  49
  50       <td>
  51         <span *ngIf="follow.state === 'accepted'" class="pt-badge badge-green" i18n>Accepted</span>
  52         <span *ngIf="follow.state === 'pending'" class="pt-badge badge-yellow" i18n>Pending</span>
  53         <span *ngIf="follow.state === 'rejected'" class="pt-badge badge-red" i18n>Rejected</span>
  54       </td>
  55
  56       <td>{{ follow.createdAt | date: 'short' }}</td>
  57       <td>
  58         <my-redundancy-checkbox
  59           *ngIf="isInstanceFollowing(follow)"
  60           [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed"
  61         ></my-redundancy-checkbox>
  62       </td>
  63     </tr>
  64   </ng-template>
  65
  66   <ng-template pTemplate="emptymessage">
  67     <tr>
  68       <td colspan="5">
  69         <div class="no-results">
  70           <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
  71           <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>
  72         </div>
  73       </td>
  74     </tr>
  75   </ng-template>
  76 </p-table>
  77
  78 <my-follow-modal #followModal></my-follow-modal>