From 490c08ff5b03cdbd7c22bcd72cbda3ce0acbed60 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 8 Jun 2020 17:41:38 +0300 Subject: [PATCH] feat: add abpList directive to ThemeSharedModule --- .../theme-shared/src/lib/directives/index.ts | 1 + .../ngx-datatable-list.directive.ts | 74 +++++++++++++++++++ .../src/lib/theme-shared.module.ts | 11 +-- 3 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts index aa2725e328..32b97c163a 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts @@ -1,2 +1,3 @@ export * from './loading.directive'; +export * from './ngx-datatable-list.directive'; export * from './table-sort.directive'; 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 new file mode 100644 index 0000000000..0f603e0eaa --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -0,0 +1,74 @@ +import { ListService } from '@abp/ng.core'; +import { + ChangeDetectorRef, + Directive, + Host, + HostBinding, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, +} from '@angular/core'; +import { DatatableComponent } from '@swimlane/ngx-datatable'; +import { Subscription } from 'rxjs'; + +@Directive({ + exportAs: 'abpList', + selector: 'ngx-datatable[abpList]', +}) +export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit { + private subscription = new Subscription(); + + /* tslint:disable-next-line:no-input-rename */ + @Input('abpList') list: ListService; + @Input() columnMode: 'standard' | 'flex' | 'force' = 'force'; + @Input() externalPaging = true; + @Input() externalSorting = true; + @Input() footerHeight = 50; + @Input() headerHeight = 50; + @Input() rowHeight: Function | number | 'auto' | undefined = 'auto'; + + @HostBinding() @Input() class = 'ngx-datatable material bordered'; + + constructor( + @Host() private cdRef: ChangeDetectorRef, + @Host() private table: DatatableComponent, + ) {} + + ngOnChanges({ list, ...changes }: SimpleChanges) { + if (!(list && list.firstChange)) return; + + ['columnMode', 'externalPaging', 'externalSorting', 'footerHeight', 'headerHeight', 'rowHeight'] + .filter(key => Object.keys(changes).indexOf(key) < 0) + .forEach(key => (this.table[key] = this[key])); + + const { maxResultCount, page } = list.currentValue; + this.table.limit = maxResultCount; + this.table.offset = page; + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } + + ngOnInit() { + const subPage = this.table.page.subscribe(({ offset }) => { + this.list.page = offset; + this.table.offset = offset; + }); + this.subscription.add(subPage); + + const subSort = this.table.sort.subscribe(({ sorts: [{ prop, dir }] }) => { + this.list.sortKey = prop; + this.list.sortOrder = dir; + }); + this.subscription.add(subSort); + + const subIsLoading = this.list.isLoading$.subscribe(loading => { + this.table.loadingIndicator = loading; + this.cdRef.markForCheck(); + }); + this.subscription.add(subIsLoading); + } +} 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 10e112ffed..41c1c043bd 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 @@ -1,9 +1,10 @@ -import { CoreModule, LazyLoadService, noop, ConfigState } from '@abp/ng.core'; +import { ConfigState, CoreModule, noop } from '@abp/ng.core'; import { DatePipe } from '@angular/common'; import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core'; import { NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'; import { NgxValidateCoreModule } from '@ngx-validate/core'; -import { NgxDatatableModule, INgxDatatableConfig } from '@swimlane/ngx-datatable'; +import { Store } from '@ngxs/store'; +import { INgxDatatableConfig, NgxDatatableModule } from '@swimlane/ngx-datatable'; import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component'; import { ButtonComponent } from './components/button/button.component'; import { ChartComponent } from './components/chart/chart.component'; @@ -19,8 +20,8 @@ import { TableEmptyMessageComponent } from './components/table-empty-message/tab import { TableComponent } from './components/table/table.component'; import { ToastContainerComponent } from './components/toast-container/toast-container.component'; import { ToastComponent } from './components/toast/toast.component'; -import styles from './constants/styles'; import { LoadingDirective } from './directives/loading.directive'; +import { NgxDatatableListDirective } from './directives/ngx-datatable-list.directive'; import { TableSortDirective } from './directives/table-sort.directive'; import { ErrorHandler } from './handlers/error.handler'; import { initLazyStyleHandler } from './handlers/lazy-style.handler'; @@ -28,8 +29,6 @@ import { RootParams } from './models/common'; import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token'; import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token'; import { DateParserFormatter } from './utils/date-parser-formatter'; -import { chartJsLoaded$ } from './utils/widget-utils'; -import { Store } from '@ngxs/store'; export function ngxDatatableMessageFactory(store: Store) { const emptyMessage = store.selectSnapshot( @@ -65,6 +64,7 @@ export function ngxDatatableMessageFactory(store: Store) { ToastComponent, ToastContainerComponent, SortOrderIconComponent, + NgxDatatableListDirective, LoadingDirective, TableSortDirective, ], @@ -83,6 +83,7 @@ export function ngxDatatableMessageFactory(store: Store) { ToastComponent, ToastContainerComponent, SortOrderIconComponent, + NgxDatatableListDirective, LoadingDirective, TableSortDirective, ],