feat(admin-ui): Add empty state placeholder to DataTable component

admin-ui/src/app/shared/components/data-table/data-table.component.html

@@ -1,49 +1,61 @@
-<table class="table">
-    <thead>
-        <tr>
-            <th *ngIf="isRowSelectedFn">
-                <vdr-select-toggle
-                    size="small"
-                    [selected]="allSelected"
-                    (selectedChange)="allSelectChange.emit()"
-                ></vdr-select-toggle>
-            </th>
-            <th *ngFor="let header of columns?.toArray()" class="left">
-                <ng-container *ngTemplateOutlet="header.template"></ng-container>
-            </th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr
-            *ngFor="
-                let item of (items
-                    | paginate
-                        : { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems })
-            "
-        >
-            <td *ngIf="isRowSelectedFn">
-                <vdr-select-toggle
-                    size="small"
-                    [selected]="isRowSelectedFn(item)"
-                    (selectedChange)="rowSelectChange.emit(item)"
-                ></vdr-select-toggle>
-            </td>
-            <ng-container *ngTemplateOutlet="rowTemplate; context: { item: item }"></ng-container>
-        </tr>
-    </tbody>
-</table>
-<div class="table-footer">
-    <vdr-items-per-page-controls
-        *ngIf="totalItems"
-        [itemsPerPage]="itemsPerPage"
-        (itemsPerPageChange)="itemsPerPageChange.emit($event)"
-    ></vdr-items-per-page-controls>
+<ng-container *ngIf="!items || (items && items.length); else: emptyPlaceholder">
+    <table class="table">
+        <thead>
+            <tr>
+                <th *ngIf="isRowSelectedFn">
+                    <vdr-select-toggle
+                        size="small"
+                        [selected]="allSelected"
+                        (selectedChange)="allSelectChange.emit()"
+                    ></vdr-select-toggle>
+                </th>
+                <th *ngFor="let header of columns?.toArray()" class="left">
+                    <ng-container *ngTemplateOutlet="header.template"></ng-container>
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr
+                *ngFor="
+                    let item of (items
+                        | paginate
+                            : {
+                                  itemsPerPage: itemsPerPage,
+                                  currentPage: currentPage,
+                                  totalItems: totalItems
+                              })
+                "
+            >
+                <td *ngIf="isRowSelectedFn">
+                    <vdr-select-toggle
+                        size="small"
+                        [selected]="isRowSelectedFn(item)"
+                        (selectedChange)="rowSelectChange.emit(item)"
+                    ></vdr-select-toggle>
+                </td>
+                <ng-container *ngTemplateOutlet="rowTemplate; context: { item: item }"></ng-container>
+            </tr>
+        </tbody>
+    </table>
+    <div class="table-footer">
+        <vdr-items-per-page-controls
+            *ngIf="totalItems"
+            [itemsPerPage]="itemsPerPage"
+            (itemsPerPageChange)="itemsPerPageChange.emit($event)"
+        ></vdr-items-per-page-controls>
 
-    <vdr-pagination-controls
-        *ngIf="totalItems"
-        [currentPage]="currentPage"
-        [itemsPerPage]="itemsPerPage"
-        [totalItems]="totalItems"
-        (pageChange)="pageChange.emit($event)"
-    ></vdr-pagination-controls>
-</div>
+        <vdr-pagination-controls
+            *ngIf="totalItems"
+            [currentPage]="currentPage"
+            [itemsPerPage]="itemsPerPage"
+            [totalItems]="totalItems"
+            (pageChange)="pageChange.emit($event)"
+        ></vdr-pagination-controls>
+    </div>
+</ng-container>
+<ng-template #emptyPlaceholder>
+    <div class="empty-state">
+        <clr-icon shape="bubble-exclamation" size="64"></clr-icon>
+        <div class="empty-label">{{ emptyStateLabel || ('common.no-results' | translate) }}</div>
+    </div>
+</ng-template>

admin-ui/src/app/shared/components/data-table/data-table.component.scss

@@ -11,3 +11,14 @@ thead th {
     align-items: baseline;
     justify-content: space-between;
 }
+
+.empty-state {
+    text-align: center;
+    padding: 60px;
+    color: $color-grey-4;
+
+    .empty-label {
+        margin-top: 12px;
+        font-size: 22px;
+    }
+}

admin-ui/src/app/shared/components/data-table/data-table.component.ts

@@ -27,6 +27,7 @@ export class DataTableComponent<T> {
     @Input() totalItems: number;
     @Input() allSelected: boolean;
     @Input() isRowSelectedFn: (item: T) => boolean;
+    @Input() emptyStateLabel: string;
     @Output() allSelectChange = new EventEmitter<void>();
     @Output() rowSelectChange = new EventEmitter<T>();
     @Output() pageChange = new EventEmitter<number>();