Empty states for tables

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / follows / following-list / following-list.component.html

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 5bc8fbc2d49c53c05779f086206a70872b9dc11d..e4189d3341beed1586a1cdd2af49a3dc0d8c6cf8 100644 (file)
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -4,29 +4,31 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div>
+      <div class="ml-auto">
         <input
           type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event.target.value)"
+          (keyup)="onSearch($event)"
         >
       </div>
+      <a class="ml-2 follow-button" (click)="addDomainsToFollow()" (key.enter)="addDomainsToFollow()">
+        <my-global-icon iconName="add"></my-global-icon>
+        <ng-container i18n>Follow domain</ng-container>
+      </a>
     </div>
   </ng-template>
 
   <ng-template pTemplate="header">
     <tr>
-      <th i18n style="width: 60px">ID</th>
       <th i18n>Host</th>
-      <th i18n>State</th>
-      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th i18n>Redundancy allowed</th>
-      <th></th>
+      <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th style="width: 200px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 160px;" i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th>
+      <th style="width: 100px;"></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-follow>
     <tr>
-      <td>{{ follow.id }}</td>
       <td>{{ follow.following.host }}</td>
 
       <td *ngIf="follow.state === 'accepted'" i18n>Accepted</td>
@@ -43,4 +45,17 @@
       </td>
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>Your instance is not follwing any host.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
 </p-table>
+
+<my-batch-domains-modal #batchDomainsModal i18n-action action="Follow domains" (domains)="addFollowing($event)"></my-batch-domains-modal>