From 383e3e1e50ea0788a8bd3ba0ceaeef37061e0fa4 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 3 Jan 2020 17:52:13 +0300 Subject: [PATCH 01/24] feat(theme-shared): create paginator component #2537 --- .../paginator/paginator.component.html | 38 ++++++++++++++ .../paginator/paginator.component.ts | 51 +++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html new file mode 100644 index 0000000000..56e1e5545f --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html @@ -0,0 +1,38 @@ +
+ {{ page }} +
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts new file mode 100644 index 0000000000..453b79193d --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts @@ -0,0 +1,51 @@ +import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'abp-paginator', + templateUrl: 'paginator.component.html', +}) +export class PaginatorComponent implements OnInit { + private _value = 1; + @Input() + get value(): number { + return this._value; + } + set value(newValue: number) { + if (newValue < 1) return; + else if (newValue > this.totalPages) return; + + this._value = newValue; + this.valueChange.emit(newValue); + } + + @Output() + readonly valueChange = new EventEmitter(); + + @Input() + totalPages = 0; + + get pageArray(): number[] { + const count = this.totalPages < 5 ? this.totalPages : 5; + + if (this.value === 1 || this.value === 2) { + return Array.from(new Array(count)).map((_, index) => index + 1); + } else if (this.value === this.totalPages || this.value === this.totalPages - 1) { + return Array.from(new Array(count)).map((_, index) => this.totalPages - count + 1 + index); + } else { + return [this.value - 2, this.value - 1, this.value, this.value + 1, this.value + 2]; + } + } + + ngOnInit() { + if (!this.value || this.value < 1 || this.value > this.totalPages) { + this.value = 1; + } + } + + changePage(page: number) { + if (page < 1) return; + else if (page > this.totalPages) return; + + this.value = page; + } +} From a262ac1a8dc8b5eb80048f5e1cfe63bbb1904517 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 3 Jan 2020 18:19:21 +0300 Subject: [PATCH 02/24] feat(theme-shared): create table component #2537 --- .../theme-shared/src/lib/components/index.ts | 4 +- .../lib/components/table/table.component.html | 26 ++++++++ .../lib/components/table/table.component.scss | 3 + .../lib/components/table/table.component.ts | 64 +++++++++++++++++++ .../src/lib/theme-shared.module.ts | 15 +++-- 5 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/table/table.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 c812fc601e..13fe3365d3 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 @@ -4,6 +4,8 @@ export * from './chart/chart.component'; export * from './confirmation/confirmation.component'; export * from './loader-bar/loader-bar.component'; export * from './modal/modal.component'; +export * from './paginator/paginator.component'; +export * from './sort-order-icon/sort-order-icon.component'; export * from './table-empty-message/table-empty-message.component'; +export * from './table/table.component'; export * from './toast/toast.component'; -export * from './sort-order-icon/sort-order-icon.component'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html new file mode 100644 index 0000000000..6f0d080e9d --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -0,0 +1,26 @@ +
+
+
+ + + + + + + + + + +
+
+ +
+
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss new file mode 100644 index 0000000000..4881816a52 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss @@ -0,0 +1,3 @@ +.ui-table-scrollable-wrapper { + overflow: auto; +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts new file mode 100644 index 0000000000..f9811c219c --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -0,0 +1,64 @@ +import { Component, OnInit, Input, TemplateRef, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'abp-table', + templateUrl: 'table.component.html', + styleUrls: ['table.component.scss'], +}) +export class TableComponent implements OnInit { + private _totalRecords: number; + + @Input() + value: any[]; + + @Input() + headerTemplate: TemplateRef; + + @Input() + bodyTemplate: TemplateRef; + + @Input() + colgroupTemplate: TemplateRef; + + @Input() + maxHeight: number; + + @Input() + rows: number; + + @Output() + readonly pageChange = new EventEmitter(); + + page = 1; + + @Input() + get totalRecords(): number { + return this._totalRecords || this.value.length; + } + set totalRecords(newValue: number) { + if (newValue < 0) this._totalRecords = 0; + + this._totalRecords = newValue; + } + + get totalPages(): number { + if (!this.rows) { + return; + } + + return Math.ceil(this.totalRecords / this.rows); + } + + get slicedValue(): any[] { + if (!this.rows || this.rows > this.value.length) { + return this.value; + } + + const start = (this.page - 1) * this.rows; + return this.value.slice(start, start + this.rows); + } + + constructor() {} + + ngOnInit() {} +} 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 b40a4ea05a..370262be97 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 } from '@abp/ng.core'; +import { DatePipe } from '@angular/common'; import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core'; +import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; import { NgxValidateCoreModule } from '@ngx-validate/core'; import { MessageService } from 'primeng/components/common/messageservice'; import { ToastModule } from 'primeng/toast'; -import { forkJoin } from 'rxjs'; import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component'; import { ButtonComponent } from './components/button/button.component'; import { ChartComponent } from './components/chart/chart.component'; @@ -13,16 +14,16 @@ import { LoaderBarComponent } from './components/loader-bar/loader-bar.component import { ModalComponent } from './components/modal/modal.component'; import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component'; import { TableEmptyMessageComponent } from './components/table-empty-message/table-empty-message.component'; +import { TableComponent } from './components/table/table.component'; import { ToastComponent } from './components/toast/toast.component'; import styles from './constants/styles'; import { TableSortDirective } from './directives/table-sort.directive'; import { ErrorHandler } from './handlers/error.handler'; -import { chartJsLoaded$ } from './utils/widget-utils'; import { RootParams } from './models/common'; -import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token'; -import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; +import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token'; import { DateParserFormatter } from './utils/date-parser-formatter'; -import { DatePipe } from '@angular/common'; +import { chartJsLoaded$ } from './utils/widget-utils'; +import { PaginatorComponent } from './components/paginator/paginator.component'; export function appendScript(injector: Injector) { const fn = () => { @@ -45,6 +46,8 @@ export function appendScript(injector: Injector) { HttpErrorWrapperComponent, LoaderBarComponent, ModalComponent, + PaginatorComponent, + TableComponent, TableEmptyMessageComponent, ToastComponent, SortOrderIconComponent, @@ -57,6 +60,8 @@ export function appendScript(injector: Injector) { ConfirmationComponent, LoaderBarComponent, ModalComponent, + PaginatorComponent, + TableComponent, TableEmptyMessageComponent, ToastComponent, SortOrderIconComponent, From 746d156e15cf62b405c20fef8079b296405efd40 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 6 Jan 2020 12:02:00 +0300 Subject: [PATCH 03/24] refactor(theme-shared): improve table scrolling user experience #2537 --- .../lib/components/table/table.component.html | 78 ++++++++++++++----- .../lib/components/table/table.component.scss | 3 - .../lib/components/table/table.component.ts | 8 +- .../theme-shared/src/lib/constants/styles.ts | 1 + 4 files changed, 67 insertions(+), 23 deletions(-) delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html index 6f0d080e9d..fa53170728 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -1,22 +1,8 @@ -
+
-
- - - - - - - - - - -
-
+
+ + +
+
+
+
+ + + + +
+
+
+
+ + + +
+
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss deleted file mode 100644 index 4881816a52..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.ui-table-scrollable-wrapper { - overflow: auto; -} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts index f9811c219c..27436393ba 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -3,7 +3,6 @@ import { Component, OnInit, Input, TemplateRef, Output, EventEmitter } from '@an @Component({ selector: 'abp-table', templateUrl: 'table.component.html', - styleUrls: ['table.component.scss'], }) export class TableComponent implements OnInit { private _totalRecords: number; @@ -21,7 +20,10 @@ export class TableComponent implements OnInit { colgroupTemplate: TemplateRef; @Input() - maxHeight: number; + scrollHeight: string; + + @Input() + scrollable: boolean; @Input() rows: number; @@ -31,6 +33,8 @@ export class TableComponent implements OnInit { page = 1; + bodyScrollLeft = 0; + @Input() get totalRecords(): number { return this._totalRecords || this.value.length; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts index 30185ec6c6..24f7a9a8ea 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts @@ -30,6 +30,7 @@ export default ` .ui-table-scrollable-body::-webkit-scrollbar { height: 5px !important; + width: 5px !important; } .ui-table-scrollable-body::-webkit-scrollbar-track { From 1588f3b88cba898a8cf17752e78cffe7aa014090 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 6 Jan 2020 12:48:51 +0300 Subject: [PATCH 04/24] chore: remove ngx-perfect-scrollbar from theme-shared dependencies --- npm/ng-packs/package.json | 1 - npm/ng-packs/packages/theme-shared/ng-package.json | 1 - npm/ng-packs/packages/theme-shared/package.json | 1 - 3 files changed, 3 deletions(-) diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json index c831267d7d..fa9799048e 100644 --- a/npm/ng-packs/package.json +++ b/npm/ng-packs/package.json @@ -74,7 +74,6 @@ "just-compare": "^1.3.0", "lerna": "^3.19.0", "ng-packagr": "^5.7.1", - "ngx-perfect-scrollbar": "^8.0.0", "ngxs-reset-plugin": "^1.2.0", "ngxs-schematic": "^1.1.9", "prettier": "^1.18.2", diff --git a/npm/ng-packs/packages/theme-shared/ng-package.json b/npm/ng-packs/packages/theme-shared/ng-package.json index a879347afd..73ed96741c 100644 --- a/npm/ng-packs/packages/theme-shared/ng-package.json +++ b/npm/ng-packs/packages/theme-shared/ng-package.json @@ -12,7 +12,6 @@ "@ngx-validate/core", "bootstrap", "font-awesome", - "ngx-perfect-scrollbar", "primeicons", "primeng", "chart.js" diff --git a/npm/ng-packs/packages/theme-shared/package.json b/npm/ng-packs/packages/theme-shared/package.json index 9972b3cfd1..999190ec73 100644 --- a/npm/ng-packs/packages/theme-shared/package.json +++ b/npm/ng-packs/packages/theme-shared/package.json @@ -15,7 +15,6 @@ "bootstrap": "^4.3.1", "chart.js": "^2.9.2", "font-awesome": "^4.7.0", - "ngx-perfect-scrollbar": "^8.0.0", "primeicons": "^2.0.0", "primeng": "^8.1.1" }, From 628675e9dfc5a5cc38ef37664096705aaa2f7142 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 6 Jan 2020 14:38:01 +0300 Subject: [PATCH 05/24] refactor(core): add valueFn and valueLimitFn functions to ng-model.component --- .../src/lib/abstracts/ng-model.component.ts | 49 +++++++++++++------ 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts b/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts index 4614011b92..7176803b74 100644 --- a/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts +++ b/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts @@ -1,27 +1,48 @@ import { ControlValueAccessor } from '@angular/forms'; -import { ChangeDetectorRef, Component, Injector, Input, Type } from '@angular/core'; +import { ChangeDetectorRef, Component, Injector, Input } from '@angular/core'; -@Component({ selector: 'abp-abstract-ng-model', template: '' }) -export class AbstractNgModelComponent implements ControlValueAccessor { - @Input() disabled: boolean; +// Not an abstract class on purpose. Do not change! +// tslint:disable-next-line: use-component-selector +@Component({ template: '' }) +export class AbstractNgModelComponent implements ControlValueAccessor { + protected _value: T; + protected cdRef: ChangeDetectorRef; + onChange: (value: T) => {}; + onTouched: () => {}; + + @Input() + disabled: boolean; + + @Input() + readonly: boolean; + + @Input() + valueFn: (value: U, previousValue?: T) => T = value => (value as any) as T; + + @Input() + valueLimitFn: (value: T, previousValue?: T) => any = value => false; + + @Input() + set value(value: T) { + value = this.valueFn((value as any) as U, this._value); + + if (this.valueLimitFn(value, this._value) !== false || this.readonly) return; - @Input() set value(value: T) { this._value = value; this.notifyValueChange(); } get value(): T { - return this._value; + return this._value || this.defaultValue; } - onChange: (value: T) => {}; - onTouched: () => {}; - - protected _value: T; - protected cdRef: ChangeDetectorRef; + get defaultValue(): T { + return this._value; + } constructor(public injector: Injector) { - this.cdRef = injector.get(ChangeDetectorRef as Type); + // tslint:disable-next-line: deprecation + this.cdRef = injector.get(ChangeDetectorRef); } notifyValueChange(): void { @@ -31,8 +52,8 @@ export class AbstractNgModelComponent implements ControlValueAccessor { } writeValue(value: T): void { - this._value = value; - setTimeout(() => this.cdRef.detectChanges(), 0); + this._value = this.valueLimitFn(value, this._value) || value; + setTimeout(() => this.cdRef.markForCheck(), 0); } registerOnChange(fn: any): void { From ea2eeb3ebbf27dbcce6531363232e5c6a1934f7d Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 6 Jan 2020 18:46:01 +0300 Subject: [PATCH 06/24] feat(theme-shared): add loading directive and component #2537 --- .../components/loading/loading.component.ts | 39 ++++++++++ .../src/lib/directives/loading.directive.ts | 74 +++++++++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts 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 new file mode 100644 index 0000000000..6c2201e940 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'abp-loading', + template: ` +
+ +
+ `, + styles: [ + ` + .abp-loading { + background: rgba(0, 0, 0, 0.3); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1040; + } + + .abp-loading .abp-spinner { + position: absolute; + top: 50%; + left: 50%; + -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%); + } + `, + ], +}) +export class LoadingComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} 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 new file mode 100644 index 0000000000..d38b3713b7 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts @@ -0,0 +1,74 @@ +import { + Directive, + ElementRef, + AfterViewInit, + ViewContainerRef, + ComponentFactoryResolver, + Input, + Injector, + ComponentRef, + ComponentFactory, + HostBinding, + EmbeddedViewRef, + Renderer2, + OnInit, +} from '@angular/core'; +import { LoadingComponent } from '../components/loading/loading.component'; + +@Directive({ selector: '[abpLoading]' }) +export class LoadingDirective implements OnInit { + private _loading: boolean; + + @HostBinding('style.position') + position = 'relative'; + + @Input('abpLoading') + get loading(): boolean { + return this._loading; + } + + set loading(newValue: boolean) { + setTimeout(() => { + if (!this.componentRef) { + this.componentRef = this.cdRes + .resolveComponentFactory(LoadingComponent) + .create(this.injector); + } + + if (newValue && !this.rootNode) { + this.rootNode = (this.componentRef.hostView as EmbeddedViewRef).rootNodes[0]; + this.targetElement.appendChild(this.rootNode); + } else { + this.renderer.removeChild(this.rootNode.parentElement, this.rootNode); + this.rootNode = null; + } + + this._loading = newValue; + }, 0); + } + + @Input('abpLoadingTargetElement') + targetElement: HTMLElement; + + componentRef: ComponentRef; + rootNode: HTMLDivElement; + + 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; + if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children.length) { + this.targetElement = this.elRef.nativeElement.children[0] as HTMLElement; + } else { + this.targetElement = this.elRef.nativeElement; + } + } + } +} From a9df4c7ad0183badbe557da937ddec429d93831a Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 6 Jan 2020 18:47:04 +0300 Subject: [PATCH 07/24] refactor(theme-shared): add trackByFn #2537 --- .../theme-shared/src/lib/components/index.ts | 1 + .../paginator/paginator.component.html | 2 +- .../components/paginator/paginator.component.ts | 7 ++++--- .../lib/components/table/table.component.html | 6 ++---- .../src/lib/components/table/table.component.ts | 17 ++++++++++++++++- .../theme-shared/src/lib/directives/index.ts | 1 + .../theme-shared/src/lib/theme-shared.module.ts | 8 +++++++- 7 files changed, 32 insertions(+), 10 deletions(-) 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 13fe3365d3..2e010417ce 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 @@ -2,6 +2,7 @@ export * from './breadcrumb/breadcrumb.component'; export * from './button/button.component'; export * from './chart/chart.component'; export * from './confirmation/confirmation.component'; +export * from './loading/loading.component'; export * from './loader-bar/loader-bar.component'; export * from './modal/modal.component'; export * from './paginator/paginator.component'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html index 56e1e5545f..b42f45a148 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html @@ -15,7 +15,7 @@ > this.totalPages) return; + if (newValue < 1 || newValue > this.totalPages || newValue === this._value) return; this._value = newValue; this.valueChange.emit(newValue); @@ -36,6 +35,8 @@ export class PaginatorComponent implements OnInit { } } + trackByFn: TrackByFunction = (_, page) => page; + ngOnInit() { if (!this.value || this.value < 1 || this.value > this.totalPages) { this.value = 1; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html index fa53170728..b3be1cafb5 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -46,9 +46,7 @@ - - - + @@ -60,7 +58,7 @@ diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts index 27436393ba..33c6126a24 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -1,4 +1,12 @@ -import { Component, OnInit, Input, TemplateRef, Output, EventEmitter } from '@angular/core'; +import { + Component, + OnInit, + Input, + TemplateRef, + Output, + EventEmitter, + TrackByFunction, +} from '@angular/core'; @Component({ selector: 'abp-table', @@ -28,6 +36,9 @@ export class TableComponent implements OnInit { @Input() rows: number; + @Input() + trackingProp = 'id'; + @Output() readonly pageChange = new EventEmitter(); @@ -35,6 +46,10 @@ export class TableComponent implements OnInit { bodyScrollLeft = 0; + trackByFn: TrackByFunction = (_, value) => { + return typeof value === 'object' ? value[this.trackingProp] || value : value; + }; + @Input() get totalRecords(): number { return this._totalRecords || this.value.length; 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 8efed514bf..aa2725e328 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 +1,2 @@ +export * from './loading.directive'; export * from './table-sort.directive'; 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 370262be97..6132f01a25 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 @@ -24,6 +24,8 @@ import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.t import { DateParserFormatter } from './utils/date-parser-formatter'; import { chartJsLoaded$ } from './utils/widget-utils'; import { PaginatorComponent } from './components/paginator/paginator.component'; +import { LoadingComponent } from './components/loading/loading.component'; +import { LoadingDirective } from './directives/loading.directive'; export function appendScript(injector: Injector) { const fn = () => { @@ -45,12 +47,14 @@ export function appendScript(injector: Injector) { ConfirmationComponent, HttpErrorWrapperComponent, LoaderBarComponent, + LoadingComponent, ModalComponent, PaginatorComponent, TableComponent, TableEmptyMessageComponent, ToastComponent, SortOrderIconComponent, + LoadingDirective, TableSortDirective, ], exports: [ @@ -59,16 +63,18 @@ export function appendScript(injector: Injector) { ChartComponent, ConfirmationComponent, LoaderBarComponent, + LoadingComponent, ModalComponent, PaginatorComponent, TableComponent, TableEmptyMessageComponent, ToastComponent, SortOrderIconComponent, + LoadingDirective, TableSortDirective, ], providers: [DatePipe], - entryComponents: [HttpErrorWrapperComponent], + entryComponents: [HttpErrorWrapperComponent, LoadingComponent], }) export class ThemeSharedModule { constructor(private errorHandler: ErrorHandler) {} From 93c819a3a7891889ba576f70313862b4b1487c1a Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 6 Jan 2020 18:48:12 +0300 Subject: [PATCH 08/24] chore(template): add theme-shared to tsconfig.app.json --- npm/ng-packs/apps/dev-app/tsconfig.app.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/apps/dev-app/tsconfig.app.json b/npm/ng-packs/apps/dev-app/tsconfig.app.json index cc22d70d1c..464faaec10 100644 --- a/npm/ng-packs/apps/dev-app/tsconfig.app.json +++ b/npm/ng-packs/apps/dev-app/tsconfig.app.json @@ -6,8 +6,8 @@ "paths": { "@abp/ng.core": ["packages/core/src/public-api.ts"], "@abp/ng.core/*": ["packages/core/src/lib/*"], - // "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], - // "@abp/ng.theme.shared/*": ["packages/theme-shared/src/lib/*"], + "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], + "@abp/ng.theme.shared/*": ["packages/theme-shared/src/lib/*"], "@abp/ng.theme.basic": ["packages/theme-basic/src/public-api.ts"], "@abp/ng.theme.basic/*": ["packages/theme-basic/src/lib/*"], "@abp/ng.account": ["packages/account/src/public-api.ts"], From 9d448efd678348617513e5df7a329588745fd935 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 13:31:34 +0300 Subject: [PATCH 09/24] feat(theme-shared): add empty template to table component #2537 --- .../lib/components/table/table.component.html | 16 ++++++++++++-- .../lib/components/table/table.component.ts | 22 ++++++++++++++----- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html index b3be1cafb5..aa6a5519be 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -1,4 +1,4 @@ -
+
+ + > + + + + + {{ emptyMessage | abpLocalization }} + + + diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts index 33c6126a24..f3524d52aa 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -1,18 +1,20 @@ import { + AfterViewInit, Component, - OnInit, + ElementRef, + EventEmitter, Input, - TemplateRef, Output, - EventEmitter, + TemplateRef, TrackByFunction, + ViewChild, } from '@angular/core'; @Component({ selector: 'abp-table', templateUrl: 'table.component.html', }) -export class TableComponent implements OnInit { +export class TableComponent implements AfterViewInit { private _totalRecords: number; @Input() @@ -39,13 +41,21 @@ export class TableComponent implements OnInit { @Input() trackingProp = 'id'; + @Input() + emptyMessage = 'AbpAccount::NoDataAvailableInDatatable'; + @Output() readonly pageChange = new EventEmitter(); + @ViewChild('wrapper', { read: ElementRef, static: false }) + wrapperRef: ElementRef; + page = 1; bodyScrollLeft = 0; + colspan = 1; + trackByFn: TrackByFunction = (_, value) => { return typeof value === 'object' ? value[this.trackingProp] || value : value; }; @@ -79,5 +89,7 @@ export class TableComponent implements OnInit { constructor() {} - ngOnInit() {} + ngAfterViewInit() { + this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length; + } } From e92e1641bbceb7405a82e0cff97537e4e6d30f03 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 15:59:36 +0300 Subject: [PATCH 10/24] feat(theme-shared): remove prime table instance from table sort directive and add abp table instance #2537 --- .../lib/directives/table-sort.directive.ts | 39 ++++++++++++++++--- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts index 5f42cc0144..6563f55d26 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts @@ -1,7 +1,17 @@ -import { Directive, Input, Optional, Self, SimpleChanges, OnChanges } from '@angular/core'; -import { Table } from 'primeng/table'; +import { SortOrder, SortPipe } from '@abp/ng.core'; +import { + ChangeDetectorRef, + Directive, + Host, + Input, + OnChanges, + Optional, + Self, + SimpleChanges, +} from '@angular/core'; import clone from 'just-clone'; -import { SortPipe, SortOrder } from '@abp/ng.core'; +import snq from 'snq'; +import { TableComponent } from '../components/table/table.component'; export interface TableSortOptions { key: string; @@ -15,13 +25,30 @@ export interface TableSortOptions { export class TableSortDirective implements OnChanges { @Input() abpTableSort: TableSortOptions; + @Input() value: any[] = []; - constructor(@Optional() @Self() private table: Table, private sortPipe: SortPipe) {} + + get table(): TableComponent | any { + return ( + this.abpTable || snq(() => this.cdRef['_view'].component) || snq(() => this.cdRef['context']) // 'context' for ivy + ); + } + + constructor( + @Host() @Optional() @Self() private abpTable: TableComponent, + private sortPipe: SortPipe, + private cdRef: ChangeDetectorRef, + ) {} + ngOnChanges({ value, abpTableSort }: SimpleChanges) { - if (value || abpTableSort) { + if (this.table && (value || abpTableSort)) { this.abpTableSort = this.abpTableSort || ({} as TableSortOptions); - this.table.value = this.sortPipe.transform(clone(this.value), this.abpTableSort.order, this.abpTableSort.key); + this.table.value = this.sortPipe.transform( + clone(this.value), + this.abpTableSort.order, + this.abpTableSort.key, + ); } } } From 1486b787ed4ec199740c431b9d9ce3940ca489cf Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 16:06:49 +0300 Subject: [PATCH 11/24] feat(identity): implement abp table to roles --- .../lib/components/roles/roles.component.html | 33 +++++++------------ .../lib/components/roles/roles.component.ts | 7 ++-- 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html index 6c4f946c5a..29ad72a317 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html @@ -20,37 +20,28 @@
- - + - - - - + {{ 'AbpIdentity::Actions' | abpLocalization }} - + {{ 'AbpIdentity::RoleName' | abpLocalization }} - +
@@ -109,7 +100,7 @@ - +
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts index 0bd4826699..3ac929bc5d 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts @@ -36,7 +36,7 @@ export class RolesComponent implements OnInit { providerKey: string; - pageQuery: ABP.PageQueryParams = {}; + pageQuery: ABP.PageQueryParams = { maxResultCount: 10 }; loading = false; @@ -123,9 +123,8 @@ export class RolesComponent implements OnInit { }); } - onPageChange(data) { - this.pageQuery.skipCount = data.first; - this.pageQuery.maxResultCount = data.rows; + onPageChange(page: number) { + this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount; this.get(); } From 36d89f15c6dae7f4f111516863b6f71e3fda90ef Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 16:15:49 +0300 Subject: [PATCH 12/24] feat(identity): implement abp table to users --- .../lib/components/roles/roles.component.html | 2 +- .../lib/components/users/users.component.html | 39 +++++++------------ .../lib/components/users/users.component.ts | 9 ++--- 3 files changed, 20 insertions(+), 30 deletions(-) diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html index 29ad72a317..57858686fa 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html @@ -28,7 +28,7 @@ [headerTemplate]="tableHeader" [bodyTemplate]="tableBody" [value]="data$ | async" - [rows]="10" + [rows]="pageQuery.maxResultCount" [totalRecords]="totalCount$ | async" [scrollable]="true" (pageChange)="onPageChange($event)" diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index e89d72ae72..82995a423f 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -28,37 +28,28 @@ (input.debounce)="onSearch($event.target.value)" />
- - + - - - - + {{ 'AbpIdentity::Actions' | abpLocalization }} - + {{ 'AbpIdentity::UserName' | abpLocalization }} - + {{ 'AbpIdentity::EmailAddress' | abpLocalization }} - + {{ 'AbpIdentity::PhoneNumber' | abpLocalization }} - +
@@ -129,7 +120,7 @@ {{ data.phoneNumber }} - +
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts index 1917113dc7..d33430d98c 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts @@ -51,7 +51,7 @@ export class UsersComponent implements OnInit { providerKey: string; - pageQuery: ABP.PageQueryParams = {}; + pageQuery: ABP.PageQueryParams = { maxResultCount: 10 }; isModalVisible: boolean; @@ -111,7 +111,7 @@ export class UsersComponent implements OnInit { } } - onSearch(value) { + onSearch(value: string) { this.pageQuery.filter = value; this.get(); } @@ -226,9 +226,8 @@ export class UsersComponent implements OnInit { }); } - onPageChange(data) { - this.pageQuery.skipCount = data.first; - this.pageQuery.maxResultCount = data.rows; + onPageChange(page: number) { + this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount; this.get(); } From 25e944e1712046abc931a4068a053109ef41b03f Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 16:17:09 +0300 Subject: [PATCH 13/24] feat(tenant-management): implement abp table to tenants --- .../components/tenants/tenants.component.html | 34 +++++++------------ .../components/tenants/tenants.component.ts | 9 +++-- .../components/loading/loading.component.ts | 2 +- 3 files changed, 18 insertions(+), 27 deletions(-) diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html index 6106ed7e1b..d142489474 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html @@ -28,37 +28,29 @@ (input.debounce)="onSearch($event.target.value)" />
- - + - - - - + {{ 'AbpTenantManagement::Actions' | abpLocalization }} - + {{ 'AbpTenantManagement::TenantName' | abpLocalization }} - +
@@ -117,7 +109,7 @@ {{ data.name }} - +
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts index 0d77596270..fcc2afd3da 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts @@ -50,7 +50,7 @@ export class TenantsComponent implements OnInit { _useSharedDatabase: boolean; - pageQuery: ABP.PageQueryParams = {}; + pageQuery: ABP.PageQueryParams = { maxResultCount: 10 }; loading = false; @@ -109,7 +109,7 @@ export class TenantsComponent implements OnInit { this.get(); } - onSearch(value) { + onSearch(value: string) { this.pageQuery.filter = value; this.get(); } @@ -246,9 +246,8 @@ export class TenantsComponent implements OnInit { }); } - onPageChange(data) { - this.pageQuery.skipCount = data.first; - this.pageQuery.maxResultCount = data.rows; + onPageChange(page: number) { + this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount; this.get(); } 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 6c2201e940..0271ced29b 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 @@ -10,7 +10,7 @@ import { Component, OnInit } from '@angular/core'; styles: [ ` .abp-loading { - background: rgba(0, 0, 0, 0.3); + background: rgba(0, 0, 0, 0.2); position: absolute; width: 100%; height: 100%; From 6db7d50a0ff4c5cf7175a6a078b8dbbdef13417e Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 16:50:24 +0300 Subject: [PATCH 14/24] feat(theme-shared): add hover to table rows #2537 --- .../src/lib/components/table/table.component.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts index f3524d52aa..12084c9ae1 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -8,11 +8,21 @@ import { TemplateRef, TrackByFunction, ViewChild, + ViewEncapsulation, } from '@angular/core'; @Component({ selector: 'abp-table', templateUrl: 'table.component.html', + styles: [ + ` + .ui-table .ui-table-tbody > tr:nth-child(even):hover, + .ui-table .ui-table-tbody > tr:hover { + background-color: #eaeaea; + } + `, + ], + encapsulation: ViewEncapsulation.None, }) export class TableComponent implements AfterViewInit { private _totalRecords: number; From 55f5d8f52ea5d0e6bc2e6c187af572da3f451421 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 17:59:50 +0300 Subject: [PATCH 15/24] chore(theme-shared): rename paginator to pagination #2537 --- .../theme-shared/src/lib/components/index.ts | 2 +- .../pagination.component.html} | 0 .../pagination.component.ts} | 8 +++---- .../lib/components/table/table.component.html | 21 +++++++++---------- .../lib/components/table/table.component.ts | 2 +- .../src/lib/theme-shared.module.ts | 6 +++--- 6 files changed, 18 insertions(+), 21 deletions(-) rename npm/ng-packs/packages/theme-shared/src/lib/components/{paginator/paginator.component.html => pagination/pagination.component.html} (100%) rename npm/ng-packs/packages/theme-shared/src/lib/components/{paginator/paginator.component.ts => pagination/pagination.component.ts} (85%) 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 2e010417ce..55b7b187d1 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 @@ -5,7 +5,7 @@ export * from './confirmation/confirmation.component'; export * from './loading/loading.component'; export * from './loader-bar/loader-bar.component'; export * from './modal/modal.component'; -export * from './paginator/paginator.component'; +export * from './pagination/pagination.component'; export * from './sort-order-icon/sort-order-icon.component'; export * from './table-empty-message/table-empty-message.component'; export * from './table/table.component'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.html similarity index 100% rename from npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.html rename to npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.html diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts similarity index 85% rename from npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts rename to npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts index 2f3d763a28..69fcdf31ff 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/paginator/paginator.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts @@ -1,18 +1,16 @@ import { Component, Input, OnInit, Output, EventEmitter, TrackByFunction } from '@angular/core'; @Component({ - selector: 'abp-paginator', - templateUrl: 'paginator.component.html', + selector: 'abp-pagination', + templateUrl: 'pagination.component.html', }) -export class PaginatorComponent implements OnInit { +export class PaginationComponent implements OnInit { private _value = 1; @Input() get value(): number { return this._value; } set value(newValue: number) { - if (newValue < 1 || newValue > this.totalPages || newValue === this._value) return; - this._value = newValue; this.valueChange.emit(newValue); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html index aa6a5519be..05396cf320 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -3,11 +3,11 @@ - + > @@ -57,15 +57,14 @@ - - + + + diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts index 12084c9ae1..48cddbd1f4 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -64,7 +64,7 @@ export class TableComponent implements AfterViewInit { bodyScrollLeft = 0; - colspan = 1; + colspan = 0; trackByFn: TrackByFunction = (_, value) => { return typeof value === 'object' ? value[this.trackingProp] || value : value; 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 6132f01a25..c67f553d37 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 @@ -23,7 +23,7 @@ import { RootParams } from './models/common'; import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token'; import { DateParserFormatter } from './utils/date-parser-formatter'; import { chartJsLoaded$ } from './utils/widget-utils'; -import { PaginatorComponent } from './components/paginator/paginator.component'; +import { PaginationComponent } from './components/pagination/pagination.component'; import { LoadingComponent } from './components/loading/loading.component'; import { LoadingDirective } from './directives/loading.directive'; @@ -49,7 +49,7 @@ export function appendScript(injector: Injector) { LoaderBarComponent, LoadingComponent, ModalComponent, - PaginatorComponent, + PaginationComponent, TableComponent, TableEmptyMessageComponent, ToastComponent, @@ -65,7 +65,7 @@ export function appendScript(injector: Injector) { LoaderBarComponent, LoadingComponent, ModalComponent, - PaginatorComponent, + PaginationComponent, TableComponent, TableEmptyMessageComponent, ToastComponent, From 900d0b293e3912ddb621fa1d6eb1d16575f27bcb Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Jan 2020 18:00:30 +0300 Subject: [PATCH 16/24] tests(theme-shared): add pagination.component.spec #2537 --- .../lib/tests/pagination.component.spec.ts | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts new file mode 100644 index 0000000000..1428c7eb9d --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts @@ -0,0 +1,63 @@ +import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; +import { PaginationComponent } from '../components'; + +describe('PaginationComponent', () => { + let spectator: SpectatorHost; + const createHost = createHostFactory({ + component: PaginationComponent, + }); + + beforeEach(() => { + spectator = createHost( + '', + { + hostProps: { + value: 5, + totalPages: 12, + }, + }, + ); + }); + + it('should add ui-state-active class to current page', () => { + expect(spectator.query('.ui-state-active').textContent).toBe('5'); + }); + + it('should display the correct pages', () => { + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '3', + '4', + '5', + '6', + '7', + ]); + + spectator.setHostInput({ value: 2 }); + + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '1', + '2', + '3', + '4', + '5', + ]); + + spectator.setHostInput({ value: 12 }); + + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '8', + '9', + '10', + '11', + '12', + ]); + + spectator.setHostInput({ value: 1, totalPages: 3 }); + + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '1', + '2', + '3', + ]); + }); +}); From 475d3bbed6ba0f015afaee39cbf915cee9b7225b Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 8 Jan 2020 09:23:21 +0300 Subject: [PATCH 17/24] tests(theme-shared): add loading.directive.spec #2537 --- .../src/lib/tests/loading.directive.spec.ts | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts new file mode 100644 index 0000000000..e19dfa9853 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts @@ -0,0 +1,82 @@ +import { SpectatorDirective, createDirectiveFactory } from '@ngneat/spectator/jest'; +import { LoadingDirective } from '../directives'; +import { LoadingComponent } from '../components'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'abp-dummy', + template: '
Testing Loading Directive
', +}) +export class DummyComponent {} + +describe('LoadingDirective', () => { + let spectator: SpectatorDirective; + const createDirective = createDirectiveFactory({ + directive: LoadingDirective, + declarations: [LoadingComponent, DummyComponent], + entryComponents: [LoadingComponent], + }); + + describe('default', () => { + beforeEach(() => { + spectator = createDirective('
Testing Loading Directive
', { + hostProps: { status: true }, + }); + }); + + it('should create the loading component', done => { + setTimeout(() => { + expect(spectator.directive.rootNode).toBeTruthy(); + expect(spectator.directive.componentRef).toBeTruthy(); + done(); + }, 0); + }); + }); + + describe('with custom target', () => { + const mockTarget = document.createElement('div'); + const spy = jest.spyOn(mockTarget, 'appendChild'); + + beforeEach(() => { + spectator = createDirective( + '
Testing Loading Directive
', + { + hostProps: { status: true, target: mockTarget }, + }, + ); + }); + + it('should add the loading component to the DOM', done => { + setTimeout(() => { + expect(spy).toHaveBeenCalled(); + done(); + }, 0); + }); + + it('should remove the loading component to the DOM', done => { + const spy = jest.spyOn(spectator.directive['renderer'], 'removeChild'); + spectator.setHostInput({ status: false }); + setTimeout(() => { + expect(spy).toHaveBeenCalled(); + expect(spectator.directive.rootNode).toBeFalsy(); + done(); + }, 0); + }); + }); + + describe('with a component selector', () => { + beforeEach(() => { + spectator = createDirective('', { + hostProps: { status: true }, + }); + }); + + it('should select the child element', done => { + setTimeout(() => { + expect(spectator.directive.targetElement.id).toBe('dummy'); + done(); + }, 0); + }); + }); +}); From 49a14b999ed4f8c95e1202be4889e21b6f131f6f Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 8 Jan 2020 15:47:10 +0300 Subject: [PATCH 18/24] refactor(theme-shared): change td element to div #2537 --- .../lib/components/table/table.component.html | 6 ++--- .../lib/components/table/table.component.ts | 23 ++++++++++++++----- .../lib/tests/pagination.component.spec.ts | 2 +- 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html index 05396cf320..99fe8c31f2 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -69,9 +69,9 @@ - - + +
{{ emptyMessage | abpLocalization }} - +
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts index 48cddbd1f4..2dc864e496 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -1,5 +1,4 @@ import { - AfterViewInit, Component, ElementRef, EventEmitter, @@ -9,7 +8,10 @@ import { TrackByFunction, ViewChild, ViewEncapsulation, + AfterViewInit, } from '@angular/core'; +import { Observable, of } from 'rxjs'; +import { delay } from 'rxjs/operators'; @Component({ selector: 'abp-table', @@ -20,6 +22,15 @@ import { .ui-table .ui-table-tbody > tr:hover { background-color: #eaeaea; } + + .ui-table .ui-table-tbody > tr.empty-row:hover { + background-color: transparent; + } + + .ui-table .ui-table-tbody > tr.empty-row > div { + margin: 10px; + text-align: center; + } `, ], encapsulation: ViewEncapsulation.None, @@ -64,7 +75,7 @@ export class TableComponent implements AfterViewInit { bodyScrollLeft = 0; - colspan = 0; + colspan: number; trackByFn: TrackByFunction = (_, value) => { return typeof value === 'object' ? value[this.trackingProp] || value : value; @@ -89,7 +100,7 @@ export class TableComponent implements AfterViewInit { } get slicedValue(): any[] { - if (!this.rows || this.rows > this.value.length) { + if (!this.rows || this.rows >= this.value.length) { return this.value; } @@ -97,9 +108,9 @@ export class TableComponent implements AfterViewInit { return this.value.slice(start, start + this.rows); } - constructor() {} - ngAfterViewInit() { - this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length; + setTimeout(() => { + this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length; + }, 0); } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts index 1428c7eb9d..98f63e75f6 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts @@ -32,7 +32,7 @@ describe('PaginationComponent', () => { '7', ]); - spectator.setHostInput({ value: 2 }); + spectator.click('.ui-paginator-first'); expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ '1', From 0060f6ef730de92b8b18230369c011a64d90b693 Mon Sep 17 00:00:00 2001 From: olicooper Date: Wed, 8 Jan 2020 16:10:38 +0000 Subject: [PATCH 19/24] Grammatical issue with Identity en localization --- .../Volo/Abp/Identity/Localization/en.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json b/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json index e7a038fd57..886594ac84 100644 --- a/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json +++ b/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json @@ -7,7 +7,7 @@ "UserName": "User name", "EmailAddress": "Email address", "PhoneNumber": "Phone number", - "UserInformations": "User informations", + "UserInformations": "User information", "DisplayName:IsDefault": "Default", "DisplayName:IsStatic": "Static", "DisplayName:IsPublic": "Public", @@ -99,4 +99,4 @@ "Description:Abp.Identity.User.IsUserNameUpdateEnabled": "Whether the username can be updated by the user.", "Description:Abp.Identity.User.IsEmailUpdateEnabled": "Whether the email can be updated by the user." } -} \ No newline at end of file +} From 201f08856482930649f1bbc406e7088db7a76183 Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 9 Jan 2020 09:43:27 +0800 Subject: [PATCH 20/24] Update Virtual-File-System.md --- docs/en/Virtual-File-System.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/en/Virtual-File-System.md b/docs/en/Virtual-File-System.md index d13bbf491b..f2f85049bd 100644 --- a/docs/en/Virtual-File-System.md +++ b/docs/en/Virtual-File-System.md @@ -38,7 +38,8 @@ If you want to add multiple files, this can be tedious. Alternatively, you can d ````C# - + + ```` From 90dea581b685314de487dfe19120c6376e655f57 Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 9 Jan 2020 09:43:57 +0800 Subject: [PATCH 21/24] Update Virtual-File-System.md --- docs/zh-Hans/Virtual-File-System.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/zh-Hans/Virtual-File-System.md b/docs/zh-Hans/Virtual-File-System.md index 49c97c8162..97cf22c73e 100644 --- a/docs/zh-Hans/Virtual-File-System.md +++ b/docs/zh-Hans/Virtual-File-System.md @@ -39,7 +39,8 @@ namespace MyCompany.MyProject ````C# - + + ```` From 24ed94a32808588d8a208941bd19916bdf5130a0 Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 9 Jan 2020 15:44:42 +0800 Subject: [PATCH 22/24] Make AbpDictionaryValueComparer support generics to resolve migration errors. --- .../Modeling/AbpEntityTypeBuilderExtensions.cs | 2 +- .../ValueComparers/AbpDictionaryValueComparer.cs | 2 +- .../IdentityServerDbContextModelCreatingExtensions.cs | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs index dceaeaf74f..6db09d4d17 100644 --- a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs +++ b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs @@ -59,7 +59,7 @@ namespace Volo.Abp.EntityFrameworkCore.Modeling b.Property>(nameof(IHasExtraProperties.ExtraProperties)) .HasColumnName(nameof(IHasExtraProperties.ExtraProperties)) .HasConversion(new AbpJsonValueConverter>()) - .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); + .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); } } diff --git a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs index 4efd8bfa63..c6959b0801 100644 --- a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs +++ b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs @@ -5,7 +5,7 @@ using Microsoft.EntityFrameworkCore.ChangeTracking; namespace Volo.Abp.EntityFrameworkCore.ValueComparers { - public class AbpDictionaryValueComparer : ValueComparer> + public class AbpDictionaryValueComparer : ValueComparer> { public AbpDictionaryValueComparer() : base( diff --git a/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs b/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs index 8776d6ed83..9f65e4e419 100644 --- a/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs +++ b/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs @@ -204,8 +204,8 @@ namespace Volo.Abp.IdentityServer.EntityFrameworkCore identityResource.Property(x => x.DisplayName).HasMaxLength(IdentityResourceConsts.DisplayNameMaxLength); identityResource.Property(x => x.Description).HasMaxLength(IdentityResourceConsts.DescriptionMaxLength); identityResource.Property(x => x.Properties) - .HasConversion(new AbpJsonValueConverter>()) - .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); + .HasConversion(new AbpJsonValueConverter>()) + .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); identityResource.HasMany(x => x.UserClaims).WithOne().HasForeignKey(x => x.IdentityResourceId).IsRequired(); }); @@ -229,8 +229,8 @@ namespace Volo.Abp.IdentityServer.EntityFrameworkCore apiResource.Property(x => x.DisplayName).HasMaxLength(ApiResourceConsts.DisplayNameMaxLength); apiResource.Property(x => x.Description).HasMaxLength(ApiResourceConsts.DescriptionMaxLength); apiResource.Property(x => x.Properties) - .HasConversion(new AbpJsonValueConverter>()) - .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); + .HasConversion(new AbpJsonValueConverter>()) + .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); apiResource.HasMany(x => x.Secrets).WithOne().HasForeignKey(x => x.ApiResourceId).IsRequired(); apiResource.HasMany(x => x.Scopes).WithOne().HasForeignKey(x => x.ApiResourceId).IsRequired(); From 1b2476ad7bd60d5a9fdce270f8f1c3944aaf7e55 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Thu, 9 Jan 2020 17:45:53 +0300 Subject: [PATCH 23/24] tests(theme-shared): add table.component.spec #2537 --- .../src/lib/tests/loading.directive.spec.ts | 4 +- .../src/lib/tests/table.component.spec.ts | 74 +++++++++++++++++++ 2 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts index e19dfa9853..1b49b8581c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts @@ -55,10 +55,10 @@ describe('LoadingDirective', () => { }); it('should remove the loading component to the DOM', done => { - const spy = jest.spyOn(spectator.directive['renderer'], 'removeChild'); + const rendererSpy = jest.spyOn(spectator.directive['renderer'], 'removeChild'); spectator.setHostInput({ status: false }); setTimeout(() => { - expect(spy).toHaveBeenCalled(); + expect(rendererSpy).toHaveBeenCalled(); expect(spectator.directive.rootNode).toBeFalsy(); done(); }, 0); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts new file mode 100644 index 0000000000..df2894cc3e --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts @@ -0,0 +1,74 @@ +import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; +import { PaginationComponent, TableComponent } from '../components'; + +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'abpLocalization', +}) +export class DummyLocalizationPipe implements PipeTransform { + transform(value: any, ...args: any[]): any { + return value; + } +} + +describe('TableComponent', () => { + let spectator: SpectatorHost; + const createHost = createHostFactory({ + component: TableComponent, + declarations: [PaginationComponent, DummyLocalizationPipe], + }); + + describe('without value', () => { + beforeEach(() => { + spectator = createHost( + ` + + + name`, + { + hostProps: { + value: [], + }, + }, + ); + }); + + it('should display the empty message', () => { + expect(spectator.query('tr.empty-row>div')).toHaveText( + 'AbpAccount::NoDataAvailableInDatatable', + ); + }); + + it('should display the header', () => { + expect(spectator.query('thead')).toBeTruthy(); + expect(spectator.query('th')).toHaveText('name'); + }); + + it('should place the colgroup template', () => { + expect(spectator.query('colgroup')).toBeTruthy(); + expect(spectator.query('col')).toBeTruthy(); + }); + }); + + describe('with value', () => { + // TODO + beforeEach(() => { + spectator = createHost( + ` + name + `, + { + hostProps: { + value: [], + }, + }, + ); + }); + }); +}); From 4f3df423abb80d94943beb27b16b4795a3fdb9a2 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Thu, 9 Jan 2020 17:47:00 +0300 Subject: [PATCH 24/24] refactor(theme-shared): change the table row hover style #2537 --- .../pagination/pagination.component.ts | 2 ++ .../lib/components/table/table.component.html | 7 ++-- .../lib/components/table/table.component.ts | 32 +++++++------------ 3 files changed, 17 insertions(+), 24 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts index 69fcdf31ff..964445c192 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts @@ -11,6 +11,8 @@ export class PaginationComponent implements OnInit { return this._value; } set value(newValue: number) { + if (this._value === newValue) return; + this._value = newValue; this.valueChange.emit(newValue); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html index 99fe8c31f2..6898a9964b 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -6,7 +6,8 @@ @@ -60,9 +61,9 @@ diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts index 2dc864e496..3c9995a388 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -1,4 +1,5 @@ import { + AfterViewInit, Component, ElementRef, EventEmitter, @@ -8,10 +9,7 @@ import { TrackByFunction, ViewChild, ViewEncapsulation, - AfterViewInit, } from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; @Component({ selector: 'abp-table', @@ -20,11 +18,11 @@ import { delay } from 'rxjs/operators'; ` .ui-table .ui-table-tbody > tr:nth-child(even):hover, .ui-table .ui-table-tbody > tr:hover { - background-color: #eaeaea; + filter: brightness(90%); } .ui-table .ui-table-tbody > tr.empty-row:hover { - background-color: transparent; + filter: none; } .ui-table .ui-table-tbody > tr.empty-row > div { @@ -35,8 +33,9 @@ import { delay } from 'rxjs/operators'; ], encapsulation: ViewEncapsulation.None, }) -export class TableComponent implements AfterViewInit { +export class TableComponent { private _totalRecords: number; + bodyScrollLeft = 0; @Input() value: any[]; @@ -59,6 +58,9 @@ export class TableComponent implements AfterViewInit { @Input() rows: number; + @Input() + page = 1; + @Input() trackingProp = 'id'; @@ -71,16 +73,6 @@ export class TableComponent implements AfterViewInit { @ViewChild('wrapper', { read: ElementRef, static: false }) wrapperRef: ElementRef; - page = 1; - - bodyScrollLeft = 0; - - colspan: number; - - trackByFn: TrackByFunction = (_, value) => { - return typeof value === 'object' ? value[this.trackingProp] || value : value; - }; - @Input() get totalRecords(): number { return this._totalRecords || this.value.length; @@ -108,9 +100,7 @@ export class TableComponent implements AfterViewInit { return this.value.slice(start, start + this.rows); } - ngAfterViewInit() { - setTimeout(() => { - this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length; - }, 0); - } + trackByFn: TrackByFunction = (_, value) => { + return typeof value === 'object' ? value[this.trackingProp] || value : value; + }; }