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>Subscriptions of your instance</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   [(selection)]="selectedRows"
  13 >
  14   <ng-template pTemplate="caption">
  15     <div class="caption">
  16       <div class="left-buttons">
  17         <my-action-dropdown
  18           *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
  19           [actions]="bulkActions" [entry]="selectedRows"
  20         >
  21         </my-action-dropdown>
  22
  23         <a *ngIf="!isInSelectionMode()" class="follow-button" (click)="openFollowModal()" (key.enter)="openFollowModal()">
  24           <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
  25           <ng-container i18n>Follow</ng-container>
  26         </a>
  27       </div>
  28
  29       <div class="ms-auto">
  30         <my-advanced-input-filter [filters]="searchFilters" (search)="onSearch($event)"></my-advanced-input-filter>
  31       </div>
  32     </div>
  33   </ng-template>
  34
  35   <ng-template pTemplate="header">
  36     <tr>
  37       <th style="width: 40px">
  38         <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
  39       </th>
  40       <th style="width: 150px;" i18n>Action</th>
  41       <th i18n>Following</th>
  42       <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
  43       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  44       <th style="width: 160px;" i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th>
  45     </tr>
  46   </ng-template>
  47
  48   <ng-template pTemplate="body" let-follow>
  49     <tr pSelectableRow="follow">
  50       <td class="checkbox-cell">
  51         <p-tableCheckbox [value]="follow" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
  52       </td>
  53
  54       <td class="action-cell">
  55         <my-delete-button label (click)="removeFollowing([ follow ])"></my-delete-button>
  56       </td>
  57       <td>
  58         <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
  59           {{ buildFollowingName(follow) }}
  60           <my-global-icon iconName="external-link"></my-global-icon>
  61         </a>
  62       </td>
  63
  64       <td>
  65         <span *ngIf="follow.state === 'accepted'" class="pt-badge badge-green" i18n>Accepted</span>
  66         <span *ngIf="follow.state === 'pending'" class="pt-badge badge-yellow" i18n>Pending</span>
  67         <span *ngIf="follow.state === 'rejected'" class="pt-badge badge-red" i18n>Rejected</span>
  68       </td>
  69
  70       <td>{{ follow.createdAt | date: 'short' }}</td>
  71       <td>
  72         <my-redundancy-checkbox
  73           *ngIf="isInstanceFollowing(follow)"
  74           [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed"
  75         ></my-redundancy-checkbox>
  76       </td>
  77     </tr>
  78   </ng-template>
  79
  80   <ng-template pTemplate="emptymessage">
  81     <tr>
  82       <td colspan="6">
  83         <div class="no-results">
  84           <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
  85           <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>
  86         </div>
  87       </td>
  88     </tr>
  89   </ng-template>
  90 </p-table>
  91
  92 <my-follow-modal #followModal></my-follow-modal>