Merge pull request #20804 from abpframework/issue-datatableLoadingInd…

…icator

Angular - Datatable Loading Indicator Updates

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/ar.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "عرض 0 الي 0 من 0 إدخالات",
     "PagerInfoFiltered": "(تمت تصفيته من _MAX_ مجموع الإدخالات)",
     "NoDataAvailableInDatatable": "لا توجد بيانات متاحة في الجدول",
+    "ErrorLoadingDatatable": "حدث خطأ أثناء الطلب. تحقق من الرسالة للتفاصيل.",
     "Total": "مجموع",
     "Selected": "مختارة",
     "PagerShowMenuEntries": "عرض _MENU_ إدخالات",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/cs.json

@@ -39,6 +39,7 @@
     "PagerInfoFiltered": "(filtrováno ze všech _MAX_ záznamů)",
     "NoDataAvailableInDatatable": "Nejsou žádná data",
     "Total": "celkem",
+    "ErrorLoadingDatatable": "Došlo k chybě během požadavku. Zkontrolujte zprávu pro podrobnosti.",
     "Selected": "vybráno",
     "PagerShowMenuEntries": "Zobrazit _MENU_ záznamů",
     "DatatableActionDropdownDefaultText": "Akce",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/de.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "0 bis 0 von 0 Einträgen anzeigen",
     "PagerInfoFiltered": "(gefiltert aus _MAX_ Einträgen)",
     "NoDataAvailableInDatatable": "Keine Daten verfügbar",
+    "ErrorLoadingDatatable": "Ein Fehler ist während der Anfrage aufgetreten. Überprüfen Sie die Nachricht auf Details.",
     "Total": "gesamt",
     "Selected": "ausgewählt",
     "PagerShowMenuEntries": "_MENU_ Einträge anzeigen",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/el.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Εμφάνιση 0 έως 0 από 0 εγγραφές",
     "PagerInfoFiltered": "(φιλτραρισμένο από _MAX_ συνολικές εγγραφές)",
     "NoDataAvailableInDatatable": "Δεν υπάρχουν διαθέσιμα δεδομένα",
+    "ErrorLoadingDatatable": "Παρουσιάστηκε σφάλμα κατά τη διάρκεια του αιτήματος. Ελέγξτε το μήνυμα για λεπτομέρειες.",
     "Total": "Σύνολο",
     "Selected": "Έχει γίνει επιλογή",
     "PagerShowMenuEntries": "Εμφάνιση στοιχείων _MENU_",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en-GB.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Showing 0 to 0 of 0 entries",
     "PagerInfoFiltered": "(filtered from _MAX_ total entries)",
     "NoDataAvailableInDatatable": "No data available",
+    "ErrorLoadingDatatable": "An error occurred during the request. Check the message for details.",
     "Total": "total",
     "Selected": "selected",
     "PagerShowMenuEntries": "Show _MENU_ entries",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Showing 0 to 0 of 0 entries",
     "PagerInfoFiltered": "(filtered from _MAX_ total entries)",
     "NoDataAvailableInDatatable": "No data available",
+    "ErrorLoadingDatatable": "An error occurred during the request. Check the message for details.",
     "Total": "total",
     "Selected": "selected",
     "PagerShowMenuEntries": "Show _MENU_ entries",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/es.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Mostrando de 0 a 0 de 0 entradas",
     "PagerInfoFiltered": "(filtrado desde _MAX_ entradas totales)",
     "NoDataAvailableInDatatable": "No hay datos disponibles",
+    "ErrorLoadingDatatable": "Se produjo un error durante la solicitud. Consulte el mensaje para más detalles.",
     "Total": "Total",
     "Selected": "Seleccionado",
     "PagerShowMenuEntries": "Mostrar _MENU_ registros",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/fa.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "نمایش از 0 تا 0 از مجموع 0 مورد",
     "PagerInfoFiltered": "(فیلتر شده از مجموع _MAX_ مورد)",
     "NoDataAvailableInDatatable": "داده ای وجود ندارد",
+    "ErrorLoadingDatatable": "در طول درخواست خطایی رخ داد. برای جزئیات پیام را بررسی کنید.",
     "Total": "مجموع",
     "Selected": "انتخاب شده",
     "PagerShowMenuEntries": "نمایش _MENU_ مورد",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/fi.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Näytetään 0 - 0/0 tietueesta",
     "PagerInfoFiltered": "(suodatettu _MAX_ tietueen kokonaismäärästä)",
     "NoDataAvailableInDatatable": "Tietoja ei löydy",
+    "ErrorLoadingDatatable": "Pyynnön aikana tapahtui virhe. Tarkista viesti yksityiskohtia varten.",
     "Total": "kaikki yhteensä",
     "Selected": "valittu",
     "PagerShowMenuEntries": "Näytä _MENU_ tietueet",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/fr.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Affichage de 0 à 0 sur 0 entrées",
     "PagerInfoFiltered": "(filtré à partir des entrées _MAX_ totale)",
     "NoDataAvailableInDatatable": "Aucune donnée disponible",
+    "ErrorLoadingDatatable": "Une erreur est survenue lors de la requête. Vérifiez le message pour plus de détails.",
     "Total": "Total",
     "Selected": "Sélectionné",
     "PagerShowMenuEntries": "Afficher les entrées _MENU_",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/hi.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "0 से 0 प्रविष्टियों को दिखा रहा है",
     "PagerInfoFiltered": "(_MAX_ कुल प्रविष्टियों से फ़िल्टर किया गया)",
     "NoDataAvailableInDatatable": "कोई डेटा उपलब्ध नहीं है",
+    "ErrorLoadingDatatable": "अनुरोध के दौरान एक त्रुटि हुई। विवरण के लिए संदेश देखें।",
     "Total": "संपूर्ण",
     "Selected": "चयनित",
     "PagerShowMenuEntries": "_MENU_ प्रविष्टियाँ दिखाएँ",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/hr.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Prikazano 0 do 0 od 0 zapisa",
     "PagerInfoFiltered": "(filtrirano od _MAX_ ukupnih zapisa)",
     "NoDataAvailableInDatatable": "Nema dostupnih podataka",
+    "ErrorLoadingDatatable": "Došlo je do pogreške tijekom zahtjeva. Provjerite poruku za detalje.",
     "Total": "ukupno",
     "Selected": "odabrano",
     "PagerShowMenuEntries": "Pokaži _MENU_ zapise",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/hu.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Látható 0-tól 0-ig 0 elemből",
     "PagerInfoFiltered": "(szűrve _MAX_ elemből)",
     "NoDataAvailableInDatatable": "Nem elérhető adat",
+    "ErrorLoadingDatatable": "Hiba történt a kérés során. Ellenőrizze az üzenetet a részletekért.",
     "Total": "összesen",
     "Selected": "kiválasztott",
     "PagerShowMenuEntries": "Megjelenítve _MENU_ elem",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/is.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Sýnir 0 til 0 af 0 færslum",
     "PagerInfoFiltered": "(síað úr _MAX_ heildar færslum)",
     "NoDataAvailableInDatatable": "Engar upplýsingar fáanlegar",
+    "ErrorLoadingDatatable": "Villa kom upp við beiðni. Athugaðu skilaboðin til að fá frekari upplýsingar.",
     "Total": "Samtals",
     "Selected": "valið",
     "PagerShowMenuEntries": "Sýna færslur _MENU_",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/it.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Risultati da 0 a 0 di 0 elementi",
     "PagerInfoFiltered": "(filtrati da _MAX_ elementi totali)",
     "NoDataAvailableInDatatable": "Nessun dato disponibile",
+    "ErrorLoadingDatatable": "Si è verificato un errore durante la richiesta. Controlla il messaggio per i dettagli.",
     "Total": "Totale",
     "Selected": "Selezionato",
     "PagerShowMenuEntries": "Righe per pagina _MENU_",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/nl.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Toont 0 tot 0 van 0 vermeldingen",
     "PagerInfoFiltered": "(gefilterd uit in totaal _MAX_ vermeldingen)",
     "NoDataAvailableInDatatable": "Geen gegevens beschikbaar",
+    "ErrorLoadingDatatable": "Er is een fout opgetreden tijdens het verzoek. Controleer het bericht voor details.",
     "Total": "totaal",
     "Selected": "geselecteed",
     "PagerShowMenuEntries": "Toon _MENU_-vermeldingen",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/pl-PL.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Pokaż od 0 do 0 z 0 rekordów",
     "PagerInfoFiltered": "(filtruj od _MAX_ wszystkich rekordów)",
     "NoDataAvailableInDatatable": "Nie znaleziono danych w tabeli",
+    "ErrorLoadingDatatable": "Wystąpił błąd podczas żądania. Sprawdź wiadomość, aby uzyskać szczegóły.",
     "Total": "całkowity",
     "Selected": "wybrany",
     "PagerShowMenuEntries": "Pokaż _MENU_ rekordów",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/pt-BR.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Mostrando 0 até 0 de 0 registros",
     "PagerInfoFiltered": "(filtrado de um total de _MAX_ registros)",
     "NoDataAvailableInDatatable": "Nenhum dado disponível",
+    "ErrorLoadingDatatable": "Ocorreu um erro durante a solicitação. Verifique a mensagem para mais detalhes.",
     "Total": "total",
     "Selected": "selecionado",
     "PagerShowMenuEntries": "Mostrando _MENU_ registros",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/ro-RO.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Afişate 0 din 0 înregistrări",
     "PagerInfoFiltered": "(filtrate de la _MAX_ înregistrări totale)",
     "NoDataAvailableInDatatable": "Nicio informaţie disponibilă",
+    "ErrorLoadingDatatable": "A apărut o eroare în timpul solicitării. Verificați mesajul pentru detalii.",
     "Total": "total",
     "Selected": "selectate",
     "PagerShowMenuEntries": "Afişează _MENU_ intrări",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/ru.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Записи с 0 до 0 из 0 записей.",
     "PagerInfoFiltered": "(отфильтровано из _MAX_ записей)",
     "NoDataAvailableInDatatable": "Данные в таблице отсутствуют",
+    "ErrorLoadingDatatable": "Произошла ошибка во время запроса. Проверьте сообщение для получения деталей.",
     "Total": "общий",
     "Selected": "выбранный",
     "PagerShowMenuEntries": "Показать _MENU_ записей",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/sk.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Zobrazených 0 až 0 z 0 záznamov",
     "PagerInfoFiltered": "(filtrované z celkom _MAX_ záznamov)",
     "NoDataAvailableInDatatable": "Nie sú k dispozícii žiadne údaje",
+    "ErrorLoadingDatatable": "Počas žiadosti došlo k chybe. Skontrolujte správu pre podrobnosti.",
     "Total": "celkom",
     "Selected": "vybrané",
     "PagerShowMenuEntries": "Zobraziť _MENU_ záznamov",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/sl.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Prikazanih 0 do 0 od 0 zapisov",
     "PagerInfoFiltered": "(filtrirano od vseh _MAX_ zapisov)",
     "NoDataAvailableInDatatable": "V tabeli ni na voljo podatkov",
+    "ErrorLoadingDatatable": "Pri zahtevi je prišlo do napake. Preverite sporočilo za podrobnosti.",
     "Total": "skupaj",
     "Selected": "izbrani",
     "PagerShowMenuEntries": "Prikaži _MENU_ zapise",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "0 kayıttan 0 ile 0 arası gösteriliyor.",
     "PagerInfoFiltered": "(_MAX_ kayıt arasından filtrelendi)",
     "NoDataAvailableInDatatable": "Tabloda kayıt mevcut değil.",
+    "ErrorLoadingDatatable": "İstek sırasında bir hata oluştu. Detaylar için mesajı kontrol edin.",
     "Total": "toplam",
     "Selected": "seçilen",
     "PagerShowMenuEntries": "Sayfada _MENU_ kayıt göster.",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/vi.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "Hiển thị từ 0 đến 0 trong 0 mục",
     "PagerInfoFiltered": "(được lọc từ tổng số _MAX_ mục)",
     "NoDataAvailableInDatatable": "Không có dữ liệu trong bảng",
+    "ErrorLoadingDatatable": "Đã xảy ra lỗi trong quá trình yêu cầu. Kiểm tra tin nhắn để biết chi tiết.",
     "Total": "toàn bộ",
     "Selected": "đã chọn",
     "PagerShowMenuEntries": "Hiển thị _MENU_ mục",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/zh-Hans.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "显示0个条目中的0到0",
     "PagerInfoFiltered": "(从 _MAX_ 总条目中过滤掉)",
     "NoDataAvailableInDatatable": "表中没有数据",
+    "ErrorLoadingDatatable": " 请求过程中发生错误。检查消息以获取详细信息",
     "Total": "总计",
     "Selected": "已选",
     "PagerShowMenuEntries": "显示 _MENU_ 条数据",

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/zh-Hant.json

@@ -38,6 +38,7 @@
     "PagerInfoEmpty": "顯示0個紀錄中的0到0",
     "PagerInfoFiltered": "(從 _MAX_ 所有紀錄中過濾掉)",
     "NoDataAvailableInDatatable": "資料表中沒有資料",
+    "ErrorLoadingDatatable": "請求過程中發生錯誤。檢查消息以獲取詳細信息。",
     "Total": "總共",
     "Selected": "已選擇",
     "PagerShowMenuEntries": "顯示 _MENU_ 實體",

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -1,5 +1,7 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   inject,
@@ -14,8 +16,7 @@ import {
 } from '@angular/core';
 import { AsyncPipe, formatDate, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, filter, map } from 'rxjs';
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@@ -71,7 +72,15 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   templateUrl: './extensible-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ExtensibleTableComponent<R = any> implements OnChanges {
+export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewInit {
+  readonly #injector = inject(Injector);
+  readonly getInjected = this.#injector.get.bind(this.#injector);
+  protected readonly cdr = inject(ChangeDetectorRef);
+  protected readonly locale = inject(LOCALE_ID);
+  protected readonly config = inject(ConfigStateService);
+  protected readonly entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
+  protected readonly permissionService = inject(PermissionService);
+
   protected _actionsText!: string;
   @Input()
   set actionsText(value: string) {
@@ -104,13 +113,6 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
 
   readonly trackByFn: TrackByFunction<EntityProp<R>> = (_, item) => item.name;
 
-  locale = inject(LOCALE_ID);
-  private config = inject(ConfigStateService);
-  entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
-  #injector = inject(Injector);
-  getInjected = this.#injector.get.bind(this.#injector);
-  permissionService = this.#injector.get(PermissionService);
-
   constructor() {
     const extensions = this.#injector.get(ExtensionsService);
     const name = this.#injector.get(EXTENSIONS_IDENTIFIER);
@@ -227,4 +229,11 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
 
     return visibleActions.length > 0;
   }
+
+  ngAfterViewInit(): void {
+    this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
+      this.data = [];
+      this.cdr.markForCheck();
+    });
+  }
 }

npm/ng-packs/packages/core/src/lib/services/list.service.ts

@@ -1,16 +1,17 @@
 import { Injectable, Injector, OnDestroy } from '@angular/core';
 import {
+  EMPTY,
   BehaviorSubject,
   MonoTypeOperatorFunction,
   Observable,
-  of,
   ReplaySubject,
   Subject,
 } from 'rxjs';
 import {
   catchError,
   debounceTime,
   filter,
+  finalize,
   shareReplay,
   switchMap,
   takeUntil,
@@ -20,6 +21,8 @@ import { ABP } from '../models/common';
 import { PagedResultDto } from '../models/dtos';
 import { LIST_QUERY_DEBOUNCE_TIME } from '../tokens/list.token';
 
+export type RequestStatus = 'idle' | 'loading' | 'success' | 'error';
+
 @Injectable()
 export class ListService<QueryParamsType = ABP.PageQueryParams | any> implements OnDestroy {
   private _filter = '';
@@ -40,7 +43,6 @@ export class ListService<QueryParamsType = ABP.PageQueryParams | any> implements
     return this._maxResultCount;
   }
 
-  private _skipCount = 0;
   private _page = 0;
   set page(value: number) {
     if (value === this._page) return;
@@ -91,12 +93,21 @@ export class ListService<QueryParamsType = ABP.PageQueryParams | any> implements
 
   private _isLoading$ = new BehaviorSubject(false);
 
+  private _requestStatus = new BehaviorSubject<RequestStatus>('idle');
+
   private destroy$ = new Subject<void>();
 
   private delay: MonoTypeOperatorFunction<QueryParamsType>;
 
+  /**
+   * @deprecated Use `requestStatus$` instead.
+   */
   get isLoading$(): Observable<boolean> {
-    return this._isLoading$.asObservable();
+    return this._isLoading$.asObservable().pipe(takeUntil(this.destroy$));
+  }
+
+  get requestStatus$(): Observable<RequestStatus> {
+    return this._requestStatus.asObservable().pipe(takeUntil(this.destroy$));
   }
 
   get = () => {
@@ -119,9 +130,21 @@ export class ListService<QueryParamsType = ABP.PageQueryParams | any> implements
   ): Observable<PagedResultDto<T>> {
     return this.query$.pipe(
       tap(() => this._isLoading$.next(true)),
-      switchMap(query => streamCreatorCallback(query).pipe(catchError(() => of(null)))),
+      tap(() => this._requestStatus.next('loading')),
+      switchMap(query =>
+        streamCreatorCallback(query).pipe(
+          catchError(() => {
+            this._requestStatus.next('error');
+            return EMPTY;
+          }),
+          tap(() => this._requestStatus.next('success')),
+          finalize(() => {
+            this._isLoading$.next(false);
+            this._requestStatus.next('idle');
+          }),
+        ),
+      ),
       filter(Boolean),
-      tap(() => this._isLoading$.next(false)),
       shareReplay<any>({ bufferSize: 1, refCount: true }),
       takeUntil(this.destroy$),
     );
@@ -130,18 +153,15 @@ export class ListService<QueryParamsType = ABP.PageQueryParams | any> implements
   ngOnDestroy() {
     this.destroy$.next();
   }
-
   private resetPageWhenUnchanged() {
     const maxPage = Number(Number(this.totalCount / this._maxResultCount).toFixed());
     const skipCount = this._page * this._maxResultCount;
 
     if (skipCount !== this._totalCount) {
-      this._skipCount = skipCount;
       return;
     }
 
     if (this.page === maxPage && this.page > 0) {
-      this._skipCount = skipCount - this._maxResultCount;
       this.page = this.page - 1;
     }
   }