feat: add abpList directive to ThemeSharedModule

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';

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);
+  }
+}

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,
   ],