From 6b7f2ae2ca47001c7f8bd977ea9827c9b273a6ea Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 8 Oct 2019 14:08:48 +0300 Subject: [PATCH] feat(core): add sort method to sort.pipe --- .../packages/core/src/lib/core.module.ts | 3 ++ .../core/src/lib/directives/sort.directive.ts | 12 +++++ npm/ng-packs/packages/core/src/public-api.ts | 1 + .../lib/components/users/users.component.html | 22 ++++++--- .../lib/components/users/users.component.ts | 22 +-------- .../components/tenants/tenants.component.html | 9 +++- .../components/tenants/tenants.component.ts | 22 +-------- .../sort-order-icon.component.ts | 46 ++++++++++++++++--- 8 files changed, 82 insertions(+), 55 deletions(-) create mode 100644 npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index d3c98f9925..7e002884db 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -27,6 +27,7 @@ import { getInitialData, localeInitializer } from './utils/initial-utils'; import { ConfigPlugin, NGXS_CONFIG_PLUGIN_OPTIONS } from './plugins/config/config.plugin'; import { ForDirective } from './directives/for.directive'; import { AbstractNgModelComponent } from './abstracts/ng-model.component'; +import { SortDirective } from './directives/sort.directive'; @NgModule({ imports: [ @@ -46,6 +47,7 @@ import { AbstractNgModelComponent } from './abstracts/ng-model.component'; EllipsisDirective, ForDirective, FormSubmitDirective, + SortDirective, LocalizationPipe, SortPipe, PermissionDirective, @@ -68,6 +70,7 @@ import { AbstractNgModelComponent } from './abstracts/ng-model.component'; FormSubmitDirective, LocalizationPipe, SortPipe, + SortDirective, PermissionDirective, VisibilityDirective, InputEventDebounceDirective, diff --git a/npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts new file mode 100644 index 0000000000..c00892998d --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts @@ -0,0 +1,12 @@ +import { Directive, ElementRef, Input, Optional, Self } from '@angular/core'; +import { Table } from 'primeng/table'; + +@Directive({ + selector: '[abpSort]', +}) +export class SortDirective { + constructor(private elementRef: ElementRef, @Optional() @Self() table: Table) { + console.warn(elementRef); + setInterval(() => console.warn(table.value), 1000); + } +} diff --git a/npm/ng-packs/packages/core/src/public-api.ts b/npm/ng-packs/packages/core/src/public-api.ts index 4178d9e13f..3513427c2d 100644 --- a/npm/ng-packs/packages/core/src/public-api.ts +++ b/npm/ng-packs/packages/core/src/public-api.ts @@ -12,6 +12,7 @@ export * from './lib/enums'; export * from './lib/guards'; export * from './lib/interceptors'; export * from './lib/models'; +export * from './lib/pipes'; export * from './lib/plugins'; export * from './lib/services'; export * from './lib/states'; 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 84746413fe..4bc837f1fd 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 @@ -29,6 +29,7 @@ /> {{ 'AbpIdentity::Actions' | abpLocalization }} - + {{ 'AbpIdentity::UserName' | abpLocalization }} - + - + {{ 'AbpIdentity::EmailAddress' | abpLocalization }} - + - + {{ 'AbpIdentity::PhoneNumber' | abpLocalization }} - + 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 16fadcfa63..ffc69c58ed 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 @@ -50,9 +50,9 @@ export class UsersComponent { modalBusy = false; - sortOrder: string = ''; + sortOrder = ''; - sortKey: string = ''; + sortKey = ''; trackByFn: TrackByFunction = (index, item) => Object.keys(item)[0] || index; @@ -171,22 +171,4 @@ export class UsersComponent { .pipe(finalize(() => (this.loading = false))) .subscribe(); } - - sortByKey(sortKey: string) { - this.sortKey = sortKey; - switch (this.sortOrder) { - case '': - this.sortOrder = 'asc'; - break; - case 'asc': - this.sortOrder = 'desc'; - break; - case 'desc': - this.sortOrder = ''; - this.sortKey = ''; - break; - default: - break; - } - } } 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 8c27fe180c..ef4a69daf4 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 @@ -58,9 +58,14 @@ {{ 'AbpTenantManagement::Actions' | abpLocalization }} - + {{ 'AbpTenantManagement::TenantName' | abpLocalization }} - + 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 e945cc5e69..439a6dadc1 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 @@ -56,9 +56,9 @@ export class TenantsComponent { modalBusy = false; - sortOrder: string = ''; + sortOrder = ''; - sortKey: string = ''; + sortKey = ''; get useSharedDatabase(): boolean { return this.defaultConnectionStringForm.get('useSharedDatabase').value; @@ -218,22 +218,4 @@ export class TenantsComponent { .pipe(finalize(() => (this.loading = false))) .subscribe(); } - - sortByKey(sortKey: string) { - this.sortKey = sortKey; - switch (this.sortOrder) { - case '': - this.sortOrder = 'asc'; - break; - case 'asc': - this.sortOrder = 'desc'; - break; - case 'desc': - this.sortOrder = ''; - this.sortKey = ''; - break; - default: - break; - } - } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts index 0a71a4b9d7..d42603d3a2 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts @@ -1,18 +1,37 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'abp-sort-order-icon', templateUrl: './sort-order-icon.component.html', }) -export class SortOrderIconComponent implements OnInit { +export class SortOrderIconComponent { + private _order: string; + private _selectedKey: string; + @Input() - selectedKey: string; + set selectedKey(value: string) { + this._selectedKey = value; + this.selectedKeyChange.emit(value); + } + get selectedKey(): string { + return this._selectedKey; + } + + @Output() readonly selectedKeyChange = new EventEmitter(); @Input() key: string; @Input() - order: string; + set order(value: string) { + this._order = value; + this.orderChange.emit(value); + } + get order(): string { + return this._order; + } + + @Output() readonly orderChange = new EventEmitter(); @Input() iconClass: string; @@ -23,7 +42,20 @@ export class SortOrderIconComponent implements OnInit { else return ''; } - constructor() {} - - ngOnInit(): void {} + sort(key: string) { + this.selectedKey = key; + switch (this.order) { + case '': + this.order = 'asc'; + break; + case 'asc': + this.order = 'desc'; + this.orderChange.emit('desc'); + break; + case 'desc': + this.order = ''; + this.selectedKey = ''; + break; + } + } }