feat(admin-ui): Show total items in datatables (#1580)

docs/content/developer-guide/deployment.md

@@ -39,7 +39,7 @@ and you should expect to see `UTC` or `Etc/UTC`.
 For a production Vendure server, there are a few security-related points to consider when deploying:
 
 * Set the [Superadmin credentials]({{< relref "auth-options" >}}#superadmincredentials) to something other than the default.
-* Disable introspection in the [ApiOptions]({{ relref "api-options" }}#introspection) (this option is available in v1.5+).
+* Disable introspection in the [ApiOptions]({{< relref "api-options" >}}#introspection) (this option is available in v1.5+).
 * Consider taking steps to harden your GraphQL APIs against DOS attacks. Use the [ApiOptions]({{< relref "api-options" >}}) to set up appropriate Express middleware for things like [request timeouts](https://github.com/expressjs/express/issues/3330) and [rate limits](https://www.npmjs.com/package/express-rate-limit). A tool such as [graphql-query-complexity](https://github.com/slicknode/graphql-query-complexity) can be used to mitigate resource-intensive GraphQL queries. 
 * You may wish to restrict the Admin API to only be accessed from trusted IPs. This could be achieved for instance by configuring an nginx reverse proxy that sits in front of the Vendure server.
 * By default, Vendure uses auto-increment integer IDs as entity primary keys. While easier to work with in development, sequential primary keys can leak information such as the number of orders or customers in the system. For this reason you should consider using the [UuidIdStrategy]({{< relref "entity-id-strategy" >}}#uuididstrategy) for production.

packages/admin-ui/src/lib/core/src/shared/components/data-table/data-table.component.html

@@ -49,6 +49,9 @@
             [itemsPerPage]="itemsPerPage"
             (itemsPerPageChange)="itemsPerPageChange.emit($event)"
         ></vdr-items-per-page-controls>
+        <div>
+            {{ 'common.total-items' | translate: { currentStart, currentEnd, totalItems } }}
+        </div>
 
         <vdr-pagination-controls
             *ngIf="totalItems"

packages/admin-ui/src/lib/core/src/shared/components/data-table/data-table.component.ts

@@ -2,12 +2,11 @@ import {
     AfterContentInit,
     ChangeDetectionStrategy,
     Component,
-    ContentChild,
     ContentChildren,
     EventEmitter,
-    Input,
+    Input, OnChanges,
     Output,
-    QueryList,
+    QueryList, SimpleChanges,
     TemplateRef,
 } from '@angular/core';
 import { PaginationService } from 'ngx-pagination';
@@ -80,7 +79,7 @@ import { DataTableColumnComponent } from './data-table-column.component';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [PaginationService],
 })
-export class DataTableComponent<T> implements AfterContentInit {
+export class DataTableComponent<T> implements AfterContentInit, OnChanges {
     @Input() items: T[];
     @Input() itemsPerPage: number;
     @Input() currentPage: number;
@@ -95,6 +94,8 @@ export class DataTableComponent<T> implements AfterContentInit {
     @ContentChildren(DataTableColumnComponent) columns: QueryList<DataTableColumnComponent>;
     @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>;
     rowTemplate: TemplateRef<any>;
+    currentStart: number;
+    currentEnd: number;
 
     ngAfterContentInit(): void {
         this.rowTemplate = this.templateRefs.last;
@@ -107,4 +108,11 @@ export class DataTableComponent<T> implements AfterContentInit {
             return index;
         }
     }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.items) {
+            this.currentStart = this.itemsPerPage * (this.currentPage - 1);
+            this.currentEnd = this.currentStart + changes.items.currentValue?.length;
+        }
+    }
 }

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -256,6 +256,7 @@
     "theme": "Motiv",
     "there-are-unsaved-changes": "Provedené změny nebyly uloženy. Přechod na jinou stránku způsobí ztrátu těchto změn.",
     "toggle-all": "Přepnout vše",
+    "total-items": "{currentStart} - {currentEnd} z {totalItems}",
     "update": "Aktualizovat",
     "updated-at": "Aktualizováno",
     "username": "Uživatelské jméno",
@@ -680,4 +681,4 @@
     "job-result": "Výsledek úlohy",
     "job-state": "Stav úlohy"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -256,6 +256,7 @@
     "theme": "Theme",
     "there-are-unsaved-changes": "Es gibt ungespeicherte Änderungen. Wenn Sie wechseln, gehen diese Änderungen verloren.",
     "toggle-all": "",
+    "total-items": "{currentStart} - {currentEnd} von {totalItems}",
     "update": "Aktualisieren",
     "updated-at": "Aktualisiert am",
     "username": "Benutzername",
@@ -680,4 +681,4 @@
     "job-result": "Job-Ergebnis",
     "job-state": "Job-Status"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -256,6 +256,7 @@
     "theme": "Theme",
     "there-are-unsaved-changes": "There are unsaved changes. Navigating away will cause these changes to be lost.",
     "toggle-all": "Toggle all",
+    "total-items": "{currentStart} - {currentEnd} of {totalItems}",
     "update": "Update",
     "updated-at": "Updated at",
     "username": "Username",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -256,6 +256,7 @@
     "theme": "Tema",
     "there-are-unsaved-changes": "Hay cambios sin guardar. Si sale de este sitio sus cambios se perderán.",
     "toggle-all": "Activar todo",
+    "total-items": "{currentStart} - {currentEnd} de {totalItems}",
     "update": "Actualizar",
     "updated-at": "Actualizado el",
     "username": "Nombre de usuario",
@@ -680,4 +681,4 @@
     "job-result": "Resultado",
     "job-state": "Estado"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -256,6 +256,7 @@
     "theme": "Thème",
     "there-are-unsaved-changes": "Il y a des changements non enregistrés. Naviguer ailleurs fera perdre ces changements.",
     "toggle-all": "Cocher/décocher Tout",
+    "total-items": "{currentStart} - {currentEnd} de {totalItems}",
     "update": "Mettre à jour",
     "updated-at": "Mis à jour à",
     "username": "Nom d'utilisateur",
@@ -680,4 +681,4 @@
     "job-result": "Résultat de la tâche",
     "job-state": "Etat de la tâche"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/it.json

@@ -256,6 +256,7 @@
     "theme": "Tema",
     "there-are-unsaved-changes": "Ci sono modifiche non salvate. Lasciando questa pagina le modifiche andranno perse.",
     "toggle-all": "Cambia tutti",
+    "total-items": "{currentStart} - {currentEnd} di {totalItems}",
     "update": "Aggiorna",
     "updated-at": "Aggiornare a",
     "username": "Username",
@@ -680,4 +681,4 @@
     "job-result": "Risultato operazione",
     "job-state": "Stato operazione"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -256,6 +256,7 @@
     "theme": "",
     "there-are-unsaved-changes": "Są nie zapisane zmiany. Nawigacja do innej lokalizacji spowoduje utrate zmian.",
     "toggle-all": "",
+    "total-items": "{currentStart} - {currentEnd} z {totalItems}",
     "update": "Aktualizuj",
     "updated-at": "Zaaktualizowano dnia",
     "username": "Nazwa użytkownika",
@@ -680,4 +681,4 @@
     "job-result": "Rezultat zlecenia",
     "job-state": "Status zlecenia"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -256,6 +256,7 @@
     "theme": "Tema",
     "there-are-unsaved-changes": "Há alterações não salvas. Navegar para outra página fará com que essas alterações sejam perdidas.",
     "toggle-all": "Alternar tudo",
+    "total-items": "{currentStart} - {currentEnd} de {totalItems}",
     "update": "Atualização",
     "updated-at": "Atualizado em",
     "username": "Nome do usuário",
@@ -680,4 +681,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_PT.json

@@ -256,6 +256,7 @@
     "theme": "Tema",
     "there-are-unsaved-changes": "Há alterações por guardar. Navegar para outra página fará com que essas alterações sejam perdidas.",
     "toggle-all": "Alternar tudo",
+    "total-items": "{currentStart} - {currentEnd} de {totalItems}",
     "update": "Actualização",
     "updated-at": "Actualizado em",
     "username": "Nome do utilizador",
@@ -680,4 +681,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -256,6 +256,7 @@
     "theme": "Тема",
     "there-are-unsaved-changes": "Есть несохраненные изменения. Если вы выйдете, эти изменения будут потеряны.",
     "toggle-all": "Переключить все",
+    "total-items": "{currentStart} - {currentEnd} из {totalItems}",
     "update": "Обновить",
     "updated-at": "Обновлено в",
     "username": "Имя пользователя",
@@ -680,4 +681,4 @@
     "job-result": "Результат задания",
     "job-state": "Состояние задания"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/uk.json

@@ -256,6 +256,7 @@
     "theme": "Тема",
     "there-are-unsaved-changes": "Є незбережені зміни. Якщо ви вийдете, ці зміни будуть втрачені.",
     "toggle-all": "Переключити все",
+    "total-items": "{currentStart} - {currentEnd} з {totalItems}",
     "update": "Оновити",
     "updated-at": "Оновлено в",
     "username": "Ім'я користувача",
@@ -680,4 +681,4 @@
     "job-result": "Результат завдання",
     "job-state": "Стан завдання"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -256,6 +256,7 @@
     "theme": "主题",
     "there-are-unsaved-changes": "修改尚未被保存，现在离开会导致您的修改会被删除",
     "toggle-all": "全部切换",
+    "total-items": "{currentStart} - {currentEnd} 的 {totalItems}",
     "update": "确认修改",
     "updated-at": "修改时间",
     "username": "用户名",
@@ -680,4 +681,4 @@
     "job-result": "任务结果",
     "job-state": "任务状态"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -256,6 +256,7 @@
     "theme": "",
     "there-are-unsaved-changes": "變更尚未被儲存，離開會失去所有變更",
     "toggle-all": "",
+    "total-items": "{currentStart} - {currentEnd} 的 {totalItems}",
     "update": "確認修改",
     "updated-at": "修改時間",
     "username": "用户名",
@@ -680,4 +681,4 @@
     "job-result": "",
     "job-state": ""
   }
-}
+}