From d5c96d1cb725ec9e6f31ce84e572cef989918561 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sat, 14 May 2022 10:55:09 +0200 Subject: [PATCH] Bugfix/fix date picker date format (#912) * Fix date picker date format * Update changelog --- CHANGELOG.md | 1 + .../src/app/adapter/custom-date-adapter.ts | 48 +++++-------------- .../admin-market-data-detail.component.ts | 17 ++++++- .../interfaces/interfaces.ts | 2 + .../market-data-detail-dialog.component.ts | 10 +++- ...-or-update-transaction-dialog.component.ts | 8 +++- 6 files changed, 44 insertions(+), 42 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e260a013..a12d937d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- Fixed the date format of the date picker and support manual changes - Fixed the state of the account delete button (disable if account contains activities) - Fixed an issue in the activities filter component (typing a search term) diff --git a/apps/client/src/app/adapter/custom-date-adapter.ts b/apps/client/src/app/adapter/custom-date-adapter.ts index 5c5be28f9..74bf7dd7a 100644 --- a/apps/client/src/app/adapter/custom-date-adapter.ts +++ b/apps/client/src/app/adapter/custom-date-adapter.ts @@ -1,14 +1,15 @@ import { Platform } from '@angular/cdk/platform'; import { Inject, forwardRef } from '@angular/core'; import { MAT_DATE_LOCALE, NativeDateAdapter } from '@angular/material/core'; -import { format, isValid } from 'date-fns'; -import * as deDateFnsLocale from 'date-fns/locale/de/index'; +import { getDateFormatString } from '@ghostfolio/common/helper'; +import { format, parse } from 'date-fns'; export class CustomDateAdapter extends NativeDateAdapter { /** * @constructor */ public constructor( + @Inject(MAT_DATE_LOCALE) public locale: string, @Inject(forwardRef(() => MAT_DATE_LOCALE)) matDateLocale: string, platform: Platform ) { @@ -16,50 +17,23 @@ export class CustomDateAdapter extends NativeDateAdapter { } /** - * Sets the first day of the week to Monday + * Formats a date as a string */ - public getFirstDayOfWeek(): number { - return 1; + public format(aDate: Date, aParseFormat: string): string { + return format(aDate, getDateFormatString(this.locale)); } /** - * Formats a date as a string according to the given format + * Sets the first day of the week to Monday */ - public format(aDate: Date, aParseFormat: string): string { - return format(aDate, aParseFormat, { - locale: deDateFnsLocale - }); + public getFirstDayOfWeek(): number { + return 1; } /** * Parses a date from a provided value */ - public parse(aValue: any): Date { - let date: Date; - - try { - // TODO - // Native date parser from the following formats: - // - 'd.M.yyyy' - // - 'dd.MM.yyyy' - // https://github.com/you-dont-need/You-Dont-Need-Momentjs#string--date-format - const datePattern = /^(\d{1,2}).(\d{1,2}).(\d{4})$/; - const [, day, month, year] = datePattern.exec(aValue); - - date = new Date( - parseInt(year, 10), - parseInt(month, 10) - 1, // monthIndex - parseInt(day, 10) - ); - } catch (error) { - } finally { - const isDateValid = date && isValid(date); - - if (isDateValid) { - return date; - } - - return null; - } + public parse(aValue: string): Date { + return parse(aValue, getDateFormatString(this.locale), new Date()); } } diff --git a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts index f28253b90..b4a715a95 100644 --- a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts +++ b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts @@ -8,11 +8,13 @@ import { Output } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; +import { UserService } from '@ghostfolio/client/services/user/user.service'; import { DATE_FORMAT, getDateFormatString, getLocale } from '@ghostfolio/common/helper'; +import { User } from '@ghostfolio/common/interfaces'; import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface'; import { DataSource, MarketData } from '@prisma/client'; import { @@ -53,14 +55,24 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit { [day: string]: Pick & { day: number }; }; } = {}; + public user: User; private unsubscribeSubject = new Subject(); public constructor( private deviceService: DeviceDetectorService, - private dialog: MatDialog + private dialog: MatDialog, + private userService: UserService ) { this.deviceType = this.deviceService.getDeviceInfo().deviceType; + + this.userService.stateChanged + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe((state) => { + if (state?.user) { + this.user = state.user; + } + }); } public ngOnInit() {} @@ -145,7 +157,8 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit { date, marketPrice, dataSource: this.dataSource, - symbol: this.symbol + symbol: this.symbol, + user: this.user }, height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' diff --git a/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/interfaces/interfaces.ts index a6f543789..81360878b 100644 --- a/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/interfaces/interfaces.ts +++ b/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/interfaces/interfaces.ts @@ -1,3 +1,4 @@ +import { User } from '@ghostfolio/common/interfaces'; import { DataSource } from '@prisma/client'; export interface MarketDataDetailDialogParams { @@ -5,4 +6,5 @@ export interface MarketDataDetailDialogParams { date: Date; marketPrice: number; symbol: string; + user: User; } diff --git a/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.component.ts b/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.component.ts index 01b1f4718..8c761ccdb 100644 --- a/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.component.ts +++ b/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.component.ts @@ -5,6 +5,7 @@ import { Inject, OnDestroy } from '@angular/core'; +import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { AdminService } from '@ghostfolio/client/services/admin.service'; import { Subject, takeUntil } from 'rxjs'; @@ -24,11 +25,16 @@ export class MarketDataDetailDialog implements OnDestroy { public constructor( private adminService: AdminService, private changeDetectorRef: ChangeDetectorRef, + @Inject(MAT_DIALOG_DATA) public data: MarketDataDetailDialogParams, + private dateAdapter: DateAdapter, public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: MarketDataDetailDialogParams + @Inject(MAT_DATE_LOCALE) private locale: string ) {} - public ngOnInit() {} + public ngOnInit() { + this.locale = this.data.user?.settings?.locale; + this.dateAdapter.setLocale(this.locale); + } public onCancel(): void { this.dialogRef.close({ withRefresh: false }); diff --git a/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts b/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts index b4794a043..52fc2f367 100644 --- a/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts +++ b/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts @@ -8,6 +8,7 @@ import { } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; +import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto'; import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto'; @@ -54,13 +55,18 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy { public constructor( private changeDetectorRef: ChangeDetectorRef, + @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTransactionDialogParams, private dataService: DataService, + private dateAdapter: DateAdapter, public dialogRef: MatDialogRef, private formBuilder: FormBuilder, - @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTransactionDialogParams + @Inject(MAT_DATE_LOCALE) private locale: string ) {} public ngOnInit() { + this.locale = this.data.user?.settings?.locale; + this.dateAdapter.setLocale(this.locale); + const { currencies, platforms } = this.dataService.fetchInfo(); this.currencies = currencies;