Feature/add live preview of date and number format to user settings (#7558)

* Add live preview of date and number format

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a live preview of the date and number format to the user settings
 - Added the country flag to the currency selector
 - Added a _Storybook_ story for the currency selector component
 

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

@@ -146,7 +146,7 @@
               </mat-form-field>
             </div>
           </div>
-          <div class="align-items-center d-flex mb-2">
+          <div class="align-items-center d-flex mb-4">
             <div class="pr-1 w-50">
               <div i18n>Locale</div>
               <div class="hint-text text-muted">
@@ -154,7 +154,10 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-form-field appearance="outline" class="w-100 without-hint">
+              <mat-form-field
+                appearance="outline"
+                class="w-100 with-value-hint"
+              >
                 <mat-select
                   name="locale"
                   [disabled]="!hasPermissionToUpdateUserSettings"
@@ -168,6 +171,23 @@
                     <mat-option [value]="locale">{{ locale }}</mat-option>
                   }
                 </mat-select>
+                <mat-hint class="d-flex mt-2 text-muted">
+                  <gf-value
+                    [deviceType]="deviceType()"
+                    [isDate]="true"
+                    [isLoading]="isLoading"
+                    [locale]="user.settings.locale"
+                    [value]="previewDate"
+                  />
+                  <span class="mx-1">·</span>
+                  <gf-value
+                    [isCurrency]="true"
+                    [isLoading]="isLoading"
+                    [locale]="user.settings.locale"
+                    [unit]="user.settings.baseCurrency"
+                    [value]="previewValue"
+                  />
+                </mat-hint>
               </mat-form-field>
             </div>
           </div>