Refactor to date pipe

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html

@@ -25,7 +25,7 @@
         }"
         [title]="
           (itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
-            | date: dateFormat) ?? ''
+            | date: defaultDateFormat) ?? ''
         "
         (click)="
           onOpenMarketDataDetail({

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts

@@ -8,7 +8,11 @@ import {
   Output
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { DATE_FORMAT, getDateFormatString } from '@ghostfolio/common/helper';
+import {
+  DATE_FORMAT,
+  getDateFormatString,
+  getLocale
+} from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { DataSource, MarketData } from '@prisma/client';
 import {
@@ -34,13 +38,14 @@ import { MarketDataDetailDialog } from './market-data-detail-dialog/market-data-
 export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
   @Input() dataSource: DataSource;
   @Input() dateOfFirstActivity: string;
+  @Input() locale = getLocale();
   @Input() marketData: MarketData[];
   @Input() symbol: string;
 
   @Output() marketDataChanged = new EventEmitter<boolean>();
 
-  public dateFormat = getDateFormatString();
   public days = Array(31);
+  public defaultDateFormat: string;
   public deviceType: string;
   public historicalDataItems: LineChartItem[];
   public marketDataByMonth: {
@@ -61,6 +66,8 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
   public ngOnInit() {}
 
   public ngOnChanges() {
+    this.defaultDateFormat = getDateFormatString(this.locale);
+
     this.historicalDataItems = this.marketData.map((marketDataItem) => {
       return {
         date: format(marketDataItem.date, DATE_FORMAT),

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -8,6 +8,7 @@ import {
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { getDateFormatString } from '@ghostfolio/common/helper';
 import { UniqueAsset, User } from '@ghostfolio/common/interfaces';
 import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
 import { DataSource, MarketData } from '@prisma/client';
@@ -23,6 +24,7 @@ import { takeUntil } from 'rxjs/operators';
 export class AdminMarketDataComponent implements OnDestroy, OnInit {
   public currentDataSource: DataSource;
   public currentSymbol: string;
+  public defaultDateFormat: string;
   public marketData: AdminMarketDataItem[] = [];
   public marketDataDetails: MarketData[] = [];
   public user: User;
@@ -43,6 +45,10 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
+
+          this.defaultDateFormat = getDateFormatString(
+            this.user.settings.locale
+          );
         }
       });
   }

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -21,10 +21,7 @@
               <td class="mat-cell px-1 py-2">{{ item.symbol }}</td>
               <td class="mat-cell px-1 py-2">{{ item.dataSource }}</td>
               <td class="mat-cell px-1 py-2">
-                <gf-value
+                {{ (item.date | date: defaultDateFormat) ?? '' }}
-                  [locale]="user?.settings?.locale"
-                  [value]="item.date ?? ''"
-                ></gf-value>
               </td>
               <td class="mat-cell px-1 py-2">{{ item.activityCount }}</td>
               <td class="mat-cell px-1 py-2">{{ item.marketDataItemCount }}</td>
@@ -68,6 +65,7 @@
                 <gf-admin-market-data-detail
                   [dataSource]="item.dataSource"
                   [dateOfFirstActivity]="item.date"
+                  [locale]="user?.settings?.locale"
                   [marketData]="marketDataDetails"
                   [symbol]="item.symbol"
                   (marketDataChanged)="onMarketDataChanged($event)"

apps/client/src/app/components/admin-market-data/admin-market-data.module.ts

@@ -3,7 +3,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
-import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AdminMarketDataComponent } from './admin-market-data.component';
 
@@ -12,7 +11,6 @@ import { AdminMarketDataComponent } from './admin-market-data.component';
   imports: [
     CommonModule,
     GfAdminMarketDataDetailModule,
-    GfValueModule,
     MatButtonModule,
     MatMenuModule
   ],

apps/client/src/app/pages/account/account-page.component.ts

@@ -21,6 +21,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
 import { baseCurrency } from '@ghostfolio/common/config';
+import { getDateFormatString } from '@ghostfolio/common/helper';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { uniq } from 'lodash';
@@ -46,6 +47,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   public coupon: number;
   public couponId: string;
   public currencies: string[] = [];
+  public defaultDateFormat: string;
   public deviceType: string;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToCreateAccess: boolean;
@@ -102,6 +104,10 @@ export class AccountPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.defaultDateFormat = getDateFormatString(
+            this.user.settings.locale
+          );
+
           this.hasPermissionToCreateAccess = hasPermission(
             this.user.permissions,
             permissions.createAccess

apps/client/src/app/pages/account/account-page.html

@@ -24,12 +24,8 @@
                 ></ion-icon>
               </div>
               <div *ngIf="user?.subscription?.type === 'Premium'">
-                Valid until
+                Valid until {{ user?.subscription?.expiresAt | date:
-                <gf-value
+                defaultDateFormat }}
-                  class="d-inline-block"
-                  [locale]="user?.settings?.locale"
-                  [value]="user?.subscription?.expiresAt"
-                ></gf-value>
               </div>
               <div *ngIf="user?.subscription?.type === 'Basic'">
                 <ng-container *ngIf="hasPermissionForSubscription">

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -71,7 +71,7 @@
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex">
-          <gf-value [locale]="locale" [value]="element.date"></gf-value>
+          {{ element.date | date: defaultDateFormat }}
         </div>
       </td>
       <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -20,6 +20,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
+import { getDateFormatString } from '@ghostfolio/common/helper';
 import { UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import Big from 'big.js';
@@ -62,6 +63,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
+  public defaultDateFormat: string;
   public displayedColumns = [];
   public endOfToday = endOfToday();
   public filters$: Subject<string[]> = new BehaviorSubject([]);
@@ -151,6 +153,8 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
     this.isLoading = true;
 
+    this.defaultDateFormat = getDateFormatString(this.locale);
+
     if (this.activities) {
       this.dataSource = new MatTableDataSource(this.activities);
       this.dataSource.filterPredicate = (data, filter) => {