From a999c5e000f35ac467b6a4f4a431b5010624cf85 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 18 Aug 2020 13:59:37 +0300 Subject: [PATCH 1/2] refactor: get date format from date utils for extensible table --- .../core/src/lib/tests/date-utils.spec.ts | 10 ++++++++++ .../packages/core/src/lib/utils/date-utils.ts | 8 ++++++++ .../extensible-table.component.ts | 20 ++++++++++++++----- 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts index 2fe14b1e9b..06b8642cdb 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts @@ -27,6 +27,16 @@ describe('Date Utils', () => { }); }); + describe('#getShortTimeFormat', () => { + test('should get the short time format from ConfigState and return it', () => { + const getDeepSpy = jest.spyOn(config, 'getDeep'); + getDeepSpy.mockReturnValueOnce(dateTimeFormat); + + expect(getShortDateShortTimeFormat(config)).toBe('h:mm a'); + expect(getDeepSpy).toHaveBeenCalledWith('localization.currentCulture.dateTimeFormat'); + }); + }); + describe('#getShortDateShortTimeFormat', () => { test('should get the short date time format from ConfigState and return it', () => { const getDeepSpy = jest.spyOn(config, 'getDeep'); diff --git a/npm/ng-packs/packages/core/src/lib/utils/date-utils.ts b/npm/ng-packs/packages/core/src/lib/utils/date-utils.ts index 321af986da..ee44fb99cc 100644 --- a/npm/ng-packs/packages/core/src/lib/utils/date-utils.ts +++ b/npm/ng-packs/packages/core/src/lib/utils/date-utils.ts @@ -9,6 +9,14 @@ export function getShortDateFormat(configStateService: ConfigStateService) { return dateTimeFormat.shortDatePattern; } +export function getShortTimeFormat(configStateService: ConfigStateService) { + const dateTimeFormat = configStateService.getDeep( + 'localization.currentCulture.dateTimeFormat', + ) as ApplicationConfiguration.DateTimeFormat; + + return dateTimeFormat.shortTimePattern.replace('tt', 'a'); +} + export function getShortDateShortTimeFormat(configStateService: ConfigStateService) { const dateTimeFormat = configStateService.getDeep( 'localization.currentCulture.dateTimeFormat', diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts index 47a7131201..84b47a02ac 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts @@ -1,4 +1,10 @@ -import { ListService } from '@abp/ng.core'; +import { + ListService, + ConfigStateService, + getShortDateFormat, + getShortDateShortTimeFormat, + getShortTimeFormat, +} from '@abp/ng.core'; import { formatDate } from '@angular/common'; import { ChangeDetectionStrategy, @@ -59,7 +65,11 @@ export class ExtensibleTableComponent implements OnChanges { readonly trackByFn: TrackByFunction> = (_, item) => item.name; - constructor(@Inject(LOCALE_ID) private locale: string, injector: Injector) { + constructor( + @Inject(LOCALE_ID) private locale: string, + private config: ConfigStateService, + injector: Injector, + ) { // tslint:disable-next-line this.getInjected = injector.get.bind(injector); const extensions = injector.get(ExtensionsService); @@ -95,11 +105,11 @@ export class ExtensibleTableComponent implements OnChanges { case ePropType.Boolean: return this.getIcon(value); case ePropType.Date: - return this.getDate(value, 'yyyy-MM-dd'); + return this.getDate(value, getShortDateFormat(this.config)); case ePropType.Time: - return this.getDate(value, 'HH:mm'); + return this.getDate(value, getShortTimeFormat(this.config)); case ePropType.DateTime: - return this.getDate(value, 'yyyy-MM-dd HH:mm:ss Z'); + return this.getDate(value, getShortDateShortTimeFormat(this.config)); default: return value; // More types can be handled in the future From d1bf59845e7c52cb254b818c3d8bcaac311264f6 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 18 Aug 2020 14:22:55 +0300 Subject: [PATCH 2/2] fix: testing error --- .../packages/core/src/lib/tests/date-utils.spec.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts index 06b8642cdb..ba8413e5ef 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts @@ -1,4 +1,9 @@ -import { ConfigStateService, getShortDateFormat, getShortDateShortTimeFormat } from '@abp/ng.core'; +import { + ConfigStateService, + getShortDateFormat, + getShortDateShortTimeFormat, + getShortTimeFormat, +} from '@abp/ng.core'; const dateTimeFormat = { calendarAlgorithmType: 'SolarCalendar', @@ -32,7 +37,7 @@ describe('Date Utils', () => { const getDeepSpy = jest.spyOn(config, 'getDeep'); getDeepSpy.mockReturnValueOnce(dateTimeFormat); - expect(getShortDateShortTimeFormat(config)).toBe('h:mm a'); + expect(getShortTimeFormat(config)).toBe('h:mm a'); expect(getDeepSpy).toHaveBeenCalledWith('localization.currentCulture.dateTimeFormat'); }); });