Add live preview of date and number format

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -22,6 +22,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   CUSTOM_ELEMENTS_SCHEMA,
   DestroyRef,
   inject,
@@ -50,6 +51,7 @@ import { format, parseISO } from 'date-fns';
 import { addIcons } from 'ionicons';
 import { eyeOffOutline, eyeOutline } from 'ionicons/icons';
 import ms from 'ms';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { EMPTY, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -108,10 +110,17 @@ export class GfUserAccountSettingsComponent implements OnInit {
     'uk',
     'zh'
   ];
+  protected readonly previewDate = new Date().toISOString();
+  protected readonly previewValue = 9999.99;
   protected user: User;
 
+  protected readonly deviceType = computed(
+    () => this.deviceDetectorService.deviceInfo().deviceType
+  );
+
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
   private readonly dataService = inject(DataService);
+  private readonly deviceDetectorService = inject(DeviceDetectorService);
   private readonly destroyRef = inject(DestroyRef);
   private readonly notificationService = inject(NotificationService);
   private readonly settingsStorageService = inject(SettingsStorageService);

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -171,6 +171,32 @@
               </mat-form-field>
             </div>
           </div>
+          <div class="d-flex mb-2">
+            <div class="align-items-center d-flex pr-1 pt-1 w-50">
+              <ng-container i18n>Preview</ng-container>
+            </div>
+            <div class="d-flex pl-1 w-50">
+              <gf-value
+                class="mr-3"
+                i18n
+                [deviceType]="deviceType()"
+                [isDate]="true"
+                [isLoading]="isLoading"
+                [locale]="user.settings.locale"
+                [value]="previewDate"
+                >Date</gf-value
+              >
+              <gf-value
+                i18n
+                [isCurrency]="true"
+                [isLoading]="isLoading"
+                [locale]="user.settings.locale"
+                [unit]="user.settings.baseCurrency"
+                [value]="previewValue"
+                >Value</gf-value
+              >
+            </div>
+          </div>
           <div class="d-flex">
             <div class="align-items-center d-flex pr-1 pt-1 w-50">
               <ng-container i18n>Appearance</ng-container>