Task/improve date formatting in market data table of admin control panel (#7278)

* Reuse value component for first activity column

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the user account deletion flow in the user settings of the user account page
+- Improved the date formatting of the first activity in the historical market data table of the admin control panel
 - Set the change detection strategy to `OnPush` in the allocations page
 - Set the change detection strategy to `OnPush` in the portfolio holdings page
 - Set the change detection strategy to `OnPush` in the _FIRE_ page

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

@@ -4,10 +4,7 @@ import {
   DEFAULT_LOCALE,
   DEFAULT_PAGE_SIZE
 } from '@ghostfolio/common/config';
-import {
-  canDeleteAssetProfile,
-  getDateFormatString
-} from '@ghostfolio/common/helper';
+import { canDeleteAssetProfile } from '@ghostfolio/common/helper';
 import {
   AssetProfileIdentifier,
   AssetProfileItem,
@@ -153,7 +150,6 @@ export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
   ];
   protected readonly canDeleteAssetProfile = canDeleteAssetProfile;
   protected dataSource = new MatTableDataSource<AssetProfileItem>();
-  protected defaultDateFormat: string;
   protected readonly displayedColumns: string[] = [];
   protected readonly filters$ = new Subject<Filter[]>();
   protected isLoading = true;
@@ -236,10 +232,6 @@ export class GfAdminMarketDataComponent implements AfterViewInit, 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

@@ -147,7 +147,13 @@
               <ng-container i18n>First Activity</ng-container>
             </th>
             <td *matCellDef="let element" class="px-1" mat-cell>
-              {{ (element.date | date: defaultDateFormat) ?? '' }}
+              @if (element.date) {
+                <gf-value
+                  [isDate]="true"
+                  [locale]="user?.settings?.locale"
+                  [value]="element.date"
+                />
+              }
             </td>
           </ng-container>