From 291fcbcd92cde119fbefc0e9252affab796fdc31 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Fri, 13 Sep 2024 10:49:09 +0300 Subject: [PATCH 01/21] add: loading state management for extensible table --- .../extensible-table.component.html | 1 + .../extensible-table.component.ts | 45 +++++++++++++++++-- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index 471aad0f15..576913b713 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html @@ -1,5 +1,6 @@ implements OnChanges { +export class ExtensibleTableComponent implements OnChanges, OnDestroy { protected _actionsText!: string; @Input() set actionsText(value: string) { @@ -110,6 +113,11 @@ export class ExtensibleTableComponent implements OnChanges { #injector = inject(Injector); getInjected = this.#injector.get.bind(this.#injector); permissionService = this.#injector.get(PermissionService); + subscriptionService = this.#injector.get(SubscriptionService); + listService = this.#injector.get(ListService); + routerWaitService = this.#injector.get(RouterWaitService); + cdRef = this.#injector.get(ChangeDetectorRef); + isLoading = true; constructor() { const extensions = this.#injector.get(ExtensionsService); @@ -123,6 +131,8 @@ export class ExtensibleTableComponent implements OnChanges { this.actionList.toArray().map(action => ({ requiredPolicy: action.permission })), ).length > 0; this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH); + + this.subscribeLoading(); } private setColumnWidths(actionsColumn: number | undefined) { @@ -227,4 +237,33 @@ export class ExtensibleTableComponent implements OnChanges { return visibleActions.length > 0; } + + subscribeLoading() { + this.subscriptionService.addOne( + combineLatest([this.listService.isLoading$, this.routerWaitService.getLoading$()]), + ([listLoading, routerLoading]) => { + if (listLoading || routerLoading) { + this.startLoading(); + } else { + this.stopLoading(); + } + }, + ); + } + + startLoading() { + if (this.isLoading) { + return; + } + this.isLoading = true; + this.cdRef.detectChanges(); + } + + stopLoading() { + this.isLoading = false; + } + + ngOnDestroy() { + this.subscriptionService.closeAll(); + } } From a584787522361ab47dda9d681d65fb882da4d220 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Fri, 13 Sep 2024 10:49:36 +0300 Subject: [PATCH 02/21] add: spinner component for theme-shared --- .../theme-shared/src/lib/components/index.ts | 3 ++- .../lib/components/spinner/spinner.component.ts | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts index 3adc055b8c..8eded1d615 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts @@ -14,4 +14,5 @@ export * from './password/password.component'; export * from './card/index'; export * from './checkbox/checkbox.component'; export * from './form-input/form-input.component'; -export * from './internet-connection-status/internet-connection-status.component' +export * from './internet-connection-status/internet-connection-status.component'; +export * from './spinner/spinner.component'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts new file mode 100644 index 0000000000..1f4df7f251 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + exportAs: 'spinner', + selector: 'abp-spinner', + standalone: true, + imports: [], + template: ` +
+ +
+ `, +}) +export class SpinnerComponent {} From 49ee0615119fd5bdbb75f8a66fc9504cf2a17995 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Fri, 13 Sep 2024 10:50:59 +0300 Subject: [PATCH 03/21] update: datatable directive to handle loading indicator --- .../ngx-datatable-default.directive.ts | 95 +++++++++++++++++-- 1 file changed, 87 insertions(+), 8 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts index eb781666c1..8f0f49d79e 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts @@ -1,34 +1,63 @@ import { DOCUMENT } from '@angular/common'; -import { AfterViewInit, Directive, HostBinding, Inject, Input, OnDestroy } from '@angular/core'; +import { + AfterViewInit, + Directive, + effect, + ElementRef, + HostBinding, + inject, + Inject, + input, + Input, + OnDestroy, + OnInit, + Renderer2, + ViewContainerRef, +} from '@angular/core'; import { ColumnMode, DatatableComponent, ScrollerComponent } from '@swimlane/ngx-datatable'; import { fromEvent, Subscription } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; +import { SpinnerComponent } from '../components'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector selector: 'ngx-datatable[default]', - standalone:true, + standalone: true, exportAs: 'ngxDatatableDefault', }) -export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy { - private subscription = new Subscription(); +export class NgxDatatableDefaultDirective implements OnInit, AfterViewInit, OnDestroy { + @Input() class = 'material bordered'; + loadingIndicator = input(true); - private resizeDiff = 0; + private _loading = true; + private mutationObserver: MutationObserver | null = null; - @Input() class = 'material bordered'; + private subscription = new Subscription(); + private resizeDiff = 0; + private elRef = inject(ElementRef); + private renderer = inject(Renderer2); + private viewContainerRef = inject(ViewContainerRef); @HostBinding('class') get classes(): string { return `ngx-datatable ${this.class}`; } - constructor(private table: DatatableComponent, @Inject(DOCUMENT) private document: MockDocument) { + constructor( + private table: DatatableComponent, + @Inject(DOCUMENT) private document: MockDocument, + ) { this.table.columnMode = ColumnMode.force; this.table.footerHeight = 50; this.table.headerHeight = 50; this.table.rowHeight = 'auto'; this.table.scrollbarH = true; this.table.virtualization = false; + + effect(() => { + this._loading = this.loadingIndicator(); + this.updateLoadingIndicator(); + }); } private fixHorizontalGap(scroller: ScrollerComponent) { @@ -60,17 +89,67 @@ export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy { this.subscription.add(subscription); } + private observeMutations() { + this.mutationObserver = new MutationObserver(() => { + if (this._loading) { + this.updateLoadingIndicator(); + } + }); + + this.mutationObserver.observe(this.elRef.nativeElement, { + childList: true, + subtree: true, + }); + } + + private updateLoadingIndicator() { + const progressElement = this.elRef.nativeElement.querySelector('datatable-progress'); + + if (this._loading) { + if (progressElement) { + this.renderer.removeChild(progressElement.parentNode, progressElement); + this.addSpinner(progressElement); + } + } else { + this.removeSpinner(); + } + } + + private addSpinner(placeholder: Comment) { + this.viewContainerRef.clear(); + + const spinnerRef = this.viewContainerRef.createComponent(SpinnerComponent); + + this.renderer.insertBefore( + placeholder.parentNode, + spinnerRef.location.nativeElement, + placeholder, + ); + this.renderer.removeChild(placeholder.parentNode, placeholder); + } + + private removeSpinner() { + this.viewContainerRef.clear(); + } + + ngOnInit() { + this.observeMutations(); + } + ngAfterViewInit() { this.fixStyleOnWindowResize(); } ngOnDestroy() { this.subscription.unsubscribe(); + if (this.mutationObserver) { + this.mutationObserver.disconnect(); + } } } // fix: https://github.com/angular/angular/issues/20351 -interface MockDocument { +interface MockDocument extends ParentNode { body: MockBody; documentElement: MockDocumentElement; } From 27625c7e45fdb2ddd4f663a0693659828fef37d9 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Fri, 13 Sep 2024 11:00:44 +0300 Subject: [PATCH 04/21] remove: unused extension for `MockDocument` interface --- .../src/lib/directives/ngx-datatable-default.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts index 8f0f49d79e..58f315458c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts @@ -149,7 +149,7 @@ export class NgxDatatableDefaultDirective implements OnInit, AfterViewInit, OnDe } // fix: https://github.com/angular/angular/issues/20351 -interface MockDocument extends ParentNode { +interface MockDocument { body: MockBody; documentElement: MockDocumentElement; } From a4fc18157573700beea44c30927d2c1b61b89caf Mon Sep 17 00:00:00 2001 From: masum-ulu Date: Fri, 13 Sep 2024 15:35:10 +0300 Subject: [PATCH 05/21] add: solution template for loading-indicator --- .../extensible-table.component.ts | 16 +++--- .../ngx-datatable-list.directive.ts | 51 +++++++++++++------ 2 files changed, 44 insertions(+), 23 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts index 8af2a46684..135456db2e 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts @@ -74,7 +74,14 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150; templateUrl: './extensible-table.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ExtensibleTableComponent implements OnChanges, OnDestroy { +export class ExtensibleTableComponent implements OnChanges { + readonly #injector = inject(Injector); + readonly getInjected = this.#injector.get.bind(this.#injector); + 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) { @@ -106,13 +113,6 @@ export class ExtensibleTableComponent implements OnChanges, OnDestroy { readonly actionList: EntityActionList; readonly trackByFn: TrackByFunction> = (_, 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); subscriptionService = this.#injector.get(SubscriptionService); listService = this.#injector.get(ListService); routerWaitService = this.#injector.get(RouterWaitService); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index b946ba2639..811693f31f 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -7,7 +7,7 @@ import { DoCheck, SimpleChanges, inject, - DestroyRef + DestroyRef, } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { DatatableComponent } from '@swimlane/ngx-datatable'; @@ -24,14 +24,14 @@ import { exportAs: 'ngxDatatableList', }) export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { - @Input() list!: ListService; - protected readonly table = inject(DatatableComponent); protected readonly cdRef = inject(ChangeDetectorRef); protected readonly destroyRef = inject(DestroyRef); protected readonly localizationService = inject(LocalizationService); protected readonly ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true }); + @Input() list!: ListService; + constructor() { this.setInitialValues(); } @@ -43,6 +43,25 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { ngOnInit() { this.subscribeToPage(); this.subscribeToSort(); + const indicator = document.createElement(`div`); + indicator.innerHTML = ` +
+ +
+ `; + + let ref: HTMLDivElement; + this.list.isLoading$.subscribe(isLoading => { + if (isLoading) { + ref = this.table.element.querySelector('.datatable-body').appendChild(indicator); + } else { + const { emptyMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages; + this.table.messages.emptyMessage = this.localizationService.instant(emptyMessage); + ref?.remove(); + } + }); } ngOnChanges({ list }: SimpleChanges) { @@ -63,24 +82,26 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { this.ngxDatatableMessages || defaultNgxDatatableMessages; this.table.messages = { - emptyMessage: this.localizationService.instant(emptyMessage), + emptyMessage: '', totalMessage: this.localizationService.instant(totalMessage), selectedMessage: this.localizationService.instant(selectedMessage), }; } protected subscribeToSort() { - this.table.sort.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ sorts: [{ prop, dir }] }) => { - if (prop === this.list.sortKey && this.list.sortOrder === 'desc') { - this.list.sortKey = ''; - this.list.sortOrder = ''; - this.table.sorts = []; - this.cdRef.detectChanges(); - } else { - this.list.sortKey = prop; - this.list.sortOrder = dir; - } - }); + this.table.sort + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe(({ sorts: [{ prop, dir }] }) => { + if (prop === this.list.sortKey && this.list.sortOrder === 'desc') { + this.list.sortKey = ''; + this.list.sortOrder = ''; + this.table.sorts = []; + this.cdRef.detectChanges(); + } else { + this.list.sortKey = prop; + this.list.sortOrder = dir; + } + }); } protected subscribeToPage() { From 7822e1fb993ad9048fa1c03d5890f0e17ecd01ae Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Mon, 16 Sep 2024 14:55:32 +0300 Subject: [PATCH 06/21] update: remove loading indicator config from extensible table --- .../extensible-table.component.html | 1 - .../extensible-table.component.ts | 34 +------------------ 2 files changed, 1 insertion(+), 34 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index 576913b713..471aad0f15 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html @@ -1,6 +1,5 @@ implements OnChanges { this.actionList.toArray().map(action => ({ requiredPolicy: action.permission })), ).length > 0; this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH); - - this.subscribeLoading(); } private setColumnWidths(actionsColumn: number | undefined) { @@ -237,33 +234,4 @@ export class ExtensibleTableComponent implements OnChanges { return visibleActions.length > 0; } - - subscribeLoading() { - this.subscriptionService.addOne( - combineLatest([this.listService.isLoading$, this.routerWaitService.getLoading$()]), - ([listLoading, routerLoading]) => { - if (listLoading || routerLoading) { - this.startLoading(); - } else { - this.stopLoading(); - } - }, - ); - } - - startLoading() { - if (this.isLoading) { - return; - } - this.isLoading = true; - this.cdRef.detectChanges(); - } - - stopLoading() { - this.isLoading = false; - } - - ngOnDestroy() { - this.subscriptionService.closeAll(); - } } From 021f95d83919c6da31d3e1f86fb03e59fb4aa0d4 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Mon, 16 Sep 2024 14:57:42 +0300 Subject: [PATCH 07/21] update: migrating the loading indicator logic to list directive --- .../ngx-datatable-default.directive.ts | 81 +------------- .../ngx-datatable-list.directive.ts | 101 ++++++++++++++---- 2 files changed, 81 insertions(+), 101 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts index 58f315458c..e6ce7d3435 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts @@ -1,23 +1,8 @@ import { DOCUMENT } from '@angular/common'; -import { - AfterViewInit, - Directive, - effect, - ElementRef, - HostBinding, - inject, - Inject, - input, - Input, - OnDestroy, - OnInit, - Renderer2, - ViewContainerRef, -} from '@angular/core'; +import { AfterViewInit, Directive, HostBinding, Inject, Input, OnDestroy } from '@angular/core'; import { ColumnMode, DatatableComponent, ScrollerComponent } from '@swimlane/ngx-datatable'; import { fromEvent, Subscription } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; -import { SpinnerComponent } from '../components'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector @@ -25,18 +10,11 @@ import { SpinnerComponent } from '../components'; standalone: true, exportAs: 'ngxDatatableDefault', }) -export class NgxDatatableDefaultDirective implements OnInit, AfterViewInit, OnDestroy { +export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy { @Input() class = 'material bordered'; - loadingIndicator = input(true); - - private _loading = true; - private mutationObserver: MutationObserver | null = null; private subscription = new Subscription(); private resizeDiff = 0; - private elRef = inject(ElementRef); - private renderer = inject(Renderer2); - private viewContainerRef = inject(ViewContainerRef); @HostBinding('class') get classes(): string { @@ -53,11 +31,6 @@ export class NgxDatatableDefaultDirective implements OnInit, AfterViewInit, OnDe this.table.rowHeight = 'auto'; this.table.scrollbarH = true; this.table.virtualization = false; - - effect(() => { - this._loading = this.loadingIndicator(); - this.updateLoadingIndicator(); - }); } private fixHorizontalGap(scroller: ScrollerComponent) { @@ -89,62 +62,12 @@ export class NgxDatatableDefaultDirective implements OnInit, AfterViewInit, OnDe this.subscription.add(subscription); } - private observeMutations() { - this.mutationObserver = new MutationObserver(() => { - if (this._loading) { - this.updateLoadingIndicator(); - } - }); - - this.mutationObserver.observe(this.elRef.nativeElement, { - childList: true, - subtree: true, - }); - } - - private updateLoadingIndicator() { - const progressElement = this.elRef.nativeElement.querySelector('datatable-progress'); - - if (this._loading) { - if (progressElement) { - this.renderer.removeChild(progressElement.parentNode, progressElement); - this.addSpinner(progressElement); - } - } else { - this.removeSpinner(); - } - } - - private addSpinner(placeholder: Comment) { - this.viewContainerRef.clear(); - - const spinnerRef = this.viewContainerRef.createComponent(SpinnerComponent); - - this.renderer.insertBefore( - placeholder.parentNode, - spinnerRef.location.nativeElement, - placeholder, - ); - this.renderer.removeChild(placeholder.parentNode, placeholder); - } - - private removeSpinner() { - this.viewContainerRef.clear(); - } - - ngOnInit() { - this.observeMutations(); - } - ngAfterViewInit() { this.fixStyleOnWindowResize(); } ngOnDestroy() { this.subscription.unsubscribe(); - if (this.mutationObserver) { - this.mutationObserver.disconnect(); - } } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index 811693f31f..e8e49bad34 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -8,14 +8,19 @@ import { SimpleChanges, inject, DestroyRef, + ViewContainerRef, + Renderer2, + AfterViewInit, } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { DatatableComponent } from '@swimlane/ngx-datatable'; -import { ListService, LocalizationService } from '@abp/ng.core'; +import { combineLatest } from 'rxjs'; +import { ListService, LocalizationService, RouterWaitService } from '@abp/ng.core'; import { defaultNgxDatatableMessages, NGX_DATATABLE_MESSAGES, } from '../tokens/ngx-datatable-messages.token'; +import { SpinnerComponent } from '../components'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector @@ -23,12 +28,17 @@ import { standalone: true, exportAs: 'ngxDatatableList', }) -export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { +export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck, AfterViewInit { protected readonly table = inject(DatatableComponent); protected readonly cdRef = inject(ChangeDetectorRef); protected readonly destroyRef = inject(DestroyRef); protected readonly localizationService = inject(LocalizationService); protected readonly ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true }); + protected readonly routerWaitService = inject(RouterWaitService); + protected readonly viewContainerRef = inject(ViewContainerRef); + protected readonly renderer = inject(Renderer2); + + protected _loading = true; @Input() list!: ListService; @@ -40,28 +50,15 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { this.refreshPageIfDataExist(); } + ngAfterViewInit() { + this.table.loadingIndicator = this._loading; + this.handleLoadingStart(); + } + ngOnInit() { this.subscribeToPage(); this.subscribeToSort(); - const indicator = document.createElement(`div`); - indicator.innerHTML = ` -
- -
- `; - - let ref: HTMLDivElement; - this.list.isLoading$.subscribe(isLoading => { - if (isLoading) { - ref = this.table.element.querySelector('.datatable-body').appendChild(indicator); - } else { - const { emptyMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages; - this.table.messages.emptyMessage = this.localizationService.instant(emptyMessage); - ref?.remove(); - } - }); + this.subscribeToLoadingState(); } ngOnChanges({ list }: SimpleChanges) { @@ -74,6 +71,66 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { this.table.offset = page; } + protected subscribeToLoadingState() { + combineLatest([this.list.isLoading$, this.routerWaitService.getLoading$()]).subscribe( + ([listLoading, routerLoading]) => { + const isLoading = listLoading || routerLoading; + if (isLoading) { + this.handleLoadingStart(); + } else { + this.handleLoadingStop(); + } + }, + ); + } + + protected handleLoadingStop() { + if (this._loading) { + this.setLoadingState(false); + this.removeSpinner(); + } + } + + protected handleLoadingStart() { + if (!this._loading) { + this.setLoadingState(true); + this.updateLoadingIndicator(); + } + } + + protected setLoadingState(loading: boolean) { + this._loading = loading; + this.table.loadingIndicator = loading; + this.cdRef.detectChanges(); + } + + protected updateLoadingIndicator() { + const body = this.table.element.querySelector('datatable-body'); + const progress = this.table.element.querySelector('datatable-progress'); + + if (!body) { + return; + } + + if (progress) { + this.replaceLoadingIndicator(body, progress); + } + } + + protected replaceLoadingIndicator(parent: Element, placeholder: Element) { + this.viewContainerRef.clear(); + + const spinnerRef = this.viewContainerRef.createComponent(SpinnerComponent); + const spinnerElement = spinnerRef.location.nativeElement; + + this.renderer.insertBefore(parent, spinnerElement, placeholder); + this.renderer.removeChild(parent, placeholder); + } + + protected removeSpinner() { + this.viewContainerRef.clear(); + } + protected setInitialValues() { this.table.externalPaging = true; this.table.externalSorting = true; @@ -82,7 +139,7 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { this.ngxDatatableMessages || defaultNgxDatatableMessages; this.table.messages = { - emptyMessage: '', + emptyMessage: this.localizationService.instant(emptyMessage), totalMessage: this.localizationService.instant(totalMessage), selectedMessage: this.localizationService.instant(selectedMessage), }; From 8b98b29f3a1b58cb024977723f89e95e4a977502 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Tue, 17 Sep 2024 08:27:18 +0300 Subject: [PATCH 08/21] remove: redundant variables --- .../extensible-table/extensible-table.component.ts | 5 ----- .../src/lib/components/spinner/spinner.component.ts | 2 -- 2 files changed, 7 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts index a563137408..19841dd838 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts @@ -112,11 +112,6 @@ export class ExtensibleTableComponent implements OnChanges { readonly actionList: EntityActionList; readonly trackByFn: TrackByFunction> = (_, item) => item.name; - subscriptionService = this.#injector.get(SubscriptionService); - listService = this.#injector.get(ListService); - routerWaitService = this.#injector.get(RouterWaitService); - cdRef = this.#injector.get(ChangeDetectorRef); - isLoading = true; constructor() { const extensions = this.#injector.get(ExtensionsService); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts index 1f4df7f251..abb692ed60 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/spinner/spinner.component.ts @@ -1,10 +1,8 @@ import { Component } from '@angular/core'; @Component({ - exportAs: 'spinner', selector: 'abp-spinner', standalone: true, - imports: [], template: `