From b9f387b0faf6d8299bb50ec1e47ae9848de21970 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 26 Dec 2023 22:43:04 +0300 Subject: [PATCH] add loading container component --- .../extensible-table.component.html | 119 +++++++++--------- .../extensible-table.component.ts | 11 +- .../components/loading/loading.component.ts | 20 ++- .../src/lib/directives/loading.directive.ts | 18 ++- .../src/lib/theme-shared.module.ts | 4 +- .../theme-shared/src/lib/tokens/index.ts | 1 + .../src/lib/tokens/loading-container.token.ts | 3 + 7 files changed, 92 insertions(+), 84 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tokens/loading-container.token.ts 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 0ba4b22d45..9a9219c133 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,66 +1,69 @@ - - @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) { - + - - - - - - - - } @for (prop of propList; track prop.name; let i = $index) { - - - @if (prop.tooltip) { - + @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) { + + + + + + + + + } + @for (prop of propList;track prop.name;let i = $index) { + + + @if (prop.tooltip) { + {{ column.name }} - }@else{ - {{ column.name }} - } - - - - - @if (!row['_' + prop.name].component) { -
+ + + @if (!row['_' + prop.name].component) { +
- }@else{ -
+ } @else { + - } - - - - - } - + > + } + + + + + } + + 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 5670ca7343..df7c177f2f 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 @@ -32,7 +32,7 @@ import { TemplateRef, TrackByFunction, } from '@angular/core'; -import { Observable } from 'rxjs'; +import {EMPTY, Observable} from 'rxjs'; import { map } from 'rxjs/operators'; import { ePropType } from '../../enums/props.enum'; import { EntityActionList } from '../../models/entity-actions'; @@ -50,7 +50,7 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import { AbpVisibleDirective, NgxDatatableDefaultDirective, - NgxDatatableListDirective, + NgxDatatableListDirective, ThemeSharedModule, } from '@abp/ng.theme.shared'; const DEFAULT_ACTIONS_COLUMN_WIDTH = 150; @@ -71,6 +71,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150; AsyncPipe, NgTemplateOutlet, NgComponentOutlet, + ThemeSharedModule, ], templateUrl: './extensible-table.component.html', changeDetection: ChangeDetectionStrategy.OnPush, @@ -113,6 +114,7 @@ export class ExtensibleTableComponent implements OnChanges { entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES); #injector = inject(Injector); getInjected = this.#injector.get.bind(this.#injector); + loading$:Observable = EMPTY constructor() { const extensions = this.#injector.get(ExtensionsService); @@ -121,6 +123,8 @@ export class ExtensibleTableComponent implements OnChanges { this.actionList = extensions['entityActions'].get(name) .actions as unknown as EntityActionList; + + const permissionService = this.#injector.get(PermissionService); this.hasAtLeastOnePermittedAction = permissionService.filterItemsByPolicy( @@ -181,6 +185,9 @@ export class ExtensibleTableComponent implements OnChanges { if (data.currentValue.length < 1) { this.list.totalCount = this.recordsTotal; } + if(this.list){ + this.loading$ = this.list.isLoading$; + } this.data = data.currentValue.map((record: any, index: number) => { this.propList.forEach(prop => { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts index 7aa6673553..8868d0c993 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts @@ -4,7 +4,9 @@ import { Component, ViewEncapsulation } from '@angular/core'; selector: 'abp-loading', template: `
- +
`, encapsulation: ViewEncapsulation.None, @@ -17,18 +19,10 @@ import { Component, ViewEncapsulation } from '@angular/core'; top: 0; left: 0; z-index: 1040; - } - - .abp-loading .abp-spinner { - position: absolute; - top: 50%; - left: 50%; - font-size: 14px; - -moz-transform: translateX(-50%) translateY(-50%); - -o-transform: translateX(-50%) translateY(-50%); - -ms-transform: translateX(-50%) translateY(-50%); - -webkit-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); + background: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; } `, ], diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts index d79a4cc698..151428ef92 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts @@ -12,11 +12,11 @@ import { Renderer2, ViewContainerRef, } from '@angular/core'; -import { Subscription, timer } from 'rxjs'; -import { take } from 'rxjs/operators'; -import { LoadingComponent } from '../components/loading/loading.component'; +import {Subscription, timer} from 'rxjs'; +import {take} from 'rxjs/operators'; +import {LoadingComponent} from '../components/loading/loading.component'; -@Directive({ selector: '[abpLoading]' }) +@Directive({selector: '[abpLoading]'}) export class LoadingDirective implements OnInit, OnDestroy { private _loading!: boolean; @@ -46,9 +46,7 @@ export class LoadingDirective implements OnInit, OnDestroy { .pipe(take(1)) .subscribe(() => { if (!this.componentRef) { - this.componentRef = this.cdRes - .resolveComponentFactory(LoadingComponent) - .create(this.injector); + this.componentRef = this.vcRef.createComponent(LoadingComponent, {injector: this.injector}) } if (newValue && !this.rootNode) { @@ -78,14 +76,14 @@ export class LoadingDirective implements OnInit, OnDestroy { constructor( private elRef: ElementRef, private vcRef: ViewContainerRef, - private cdRes: ComponentFactoryResolver, private injector: Injector, private renderer: Renderer2, - ) {} + ) { + } ngOnInit() { if (!this.targetElement) { - const { offsetHeight, offsetWidth } = this.elRef.nativeElement; + const {offsetHeight, offsetWidth} = this.elRef.nativeElement; if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children.length) { this.targetElement = this.elRef.nativeElement.children[0] as HTMLElement; } else { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 53c2498f60..6b8c22d690 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -41,6 +41,7 @@ import { AbpVisibleDirective, DisabledDirective } from './directives'; import { FormInputComponent } from './components/form-input/form-input.component'; import { FormCheckboxComponent } from './components/checkbox/checkbox.component'; import { tenantNotFoundProvider } from './providers/tenant-not-found.provider'; +import {LoadingContainerComponent} from "./components/loading/loading-container.component"; const declarationsWithExports = [ BreadcrumbComponent, @@ -48,7 +49,6 @@ const declarationsWithExports = [ ButtonComponent, ConfirmationComponent, LoaderBarComponent, - LoadingComponent, ModalComponent, ToastComponent, ToastContainerComponent, @@ -56,6 +56,8 @@ const declarationsWithExports = [ ModalCloseDirective, FormInputComponent, FormCheckboxComponent, + LoadingComponent, + LoadingContainerComponent ]; @NgModule({ diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts index 98edb1a87b..da22a3590b 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts @@ -2,3 +2,4 @@ export * from './append-content.token'; export * from './http-error.token'; export * from './ngx-datatable-messages.token'; export * from './suppress-unsaved-changes-warning.token'; +export * from './loading-container.token' diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/loading-container.token.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/loading-container.token.ts new file mode 100644 index 0000000000..a820be1960 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tokens/loading-container.token.ts @@ -0,0 +1,3 @@ +import { InjectionToken } from "@angular/core"; + +export const DISABLE_LOADING_COMPONENT_TOKEN = new InjectionToken('DISABLE_LOADING_COMPONENT_TOKEN')