Task/add value components to rule settings dialog (#5653)

* Add value components to rule settings dialog

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Localized the number formatting in the settings dialog to customize the rule thresholds of the _X-ray_ page
 - Improved the usability of the _Cancel_ / _Close_ buttons in the create watchlist item dialog
 - Refactored the `fireWealth` from `number` type to a structured object in the summary of the portfolio details endpoint
 - Refactored the _Open Startup_ (`/open`) page to standalone

apps/client/src/app/components/rule/rule-settings-dialog/interfaces/interfaces.ts

@@ -5,6 +5,7 @@ import {
 
 export interface IRuleSettingsDialogParams {
   categoryName: string;
+  locale: string;
   rule: PortfolioReportRule;
   settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
 }

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts

@@ -1,4 +1,5 @@
 import { XRayRulesSettings } from '@ghostfolio/common/interfaces';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
@@ -17,6 +18,7 @@ import { IRuleSettingsDialogParams } from './interfaces/interfaces';
   imports: [
     CommonModule,
     FormsModule,
+    GfValueComponent,
     MatButtonModule,
     MatDialogModule,
     MatSliderModule

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -5,28 +5,30 @@
     data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
   ) {
     <div class="w-100">
-      <h6 class="mb-0">
+      <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold range</ng-container>:
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          {{ data.settings.thresholdMin | percent: '1.2-2' }}
+          class="ml-1"
-        } @else {
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          {{ data.settings.thresholdMin }}
+          [locale]="data.locale"
-        }
+          [precision]="2"
-        -
+          [value]="data.settings.thresholdMin"
-        @if (data.rule.configuration.threshold.unit === '%') {
+        />
-          {{ data.settings.thresholdMax | percent: '1.2-2' }}
+        <span class="mx-1">-</span>
-        } @else {
+        <gf-value
-          {{ data.settings.thresholdMax }}
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-        }
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.settings.thresholdMax"
+        />
       </h6>
       <div class="align-items-center d-flex w-100">
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          <label>{{
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            data.rule.configuration.threshold.min | percent: '1.2-2'
+          [locale]="data.locale"
-          }}</label>
+          [precision]="2"
-        } @else {
+          [value]="data.rule.configuration.threshold.min"
-          <label>{{ data.rule.configuration.threshold.min }}</label>
+        />
-        }
         <mat-slider
           class="flex-grow-1"
           [max]="data.rule.configuration.threshold.max"
@@ -36,13 +38,12 @@
           <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
           <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
         </mat-slider>
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          <label>{{
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            data.rule.configuration.threshold.max | percent: '1.2-2'
+          [locale]="data.locale"
-          }}</label>
+          [precision]="2"
-        } @else {
+          [value]="data.rule.configuration.threshold.max"
-          <label>{{ data.rule.configuration.threshold.max }}</label>
+        />
-        }
       </div>
     </div>
   } @else {
@@ -50,22 +51,23 @@
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
     >
-      <h6 class="mb-0">
+      <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold Min</ng-container>:
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          {{ data.settings.thresholdMin | percent: '1.2-2' }}
+          class="ml-1"
-        } @else {
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          {{ data.settings.thresholdMin }}
+          [locale]="data.locale"
-        }
+          [precision]="2"
+          [value]="data.settings.thresholdMin"
+        />
       </h6>
       <div class="align-items-center d-flex w-100">
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          <label>{{
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            data.rule.configuration.threshold.min | percent: '1.2-2'
+          [locale]="data.locale"
-          }}</label>
+          [precision]="2"
-        } @else {
+          [value]="data.rule.configuration.threshold.min"
-          <label>{{ data.rule.configuration.threshold.min }}</label>
+        />
-        }
         <mat-slider
           class="flex-grow-1"
           name="thresholdMin"
@@ -75,35 +77,35 @@
         >
           <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
         </mat-slider>
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          <label>{{
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            data.rule.configuration.threshold.max | percent: '1.2-2'
+          [locale]="data.locale"
-          }}</label>
+          [precision]="2"
-        } @else {
+          [value]="data.rule.configuration.threshold.max"
-          <label>{{ data.rule.configuration.threshold.max }}</label>
+        />
-        }
       </div>
     </div>
     <div
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
     >
-      <h6 class="mb-0">
+      <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold Max</ng-container>:
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          {{ data.settings.thresholdMax | percent: '1.2-2' }}
+          class="ml-1"
-        } @else {
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-          {{ data.settings.thresholdMax }}
+          [locale]="data.locale"
-        }
+          [precision]="2"
+          [value]="data.settings.thresholdMax"
+        />
       </h6>
       <div class="align-items-center d-flex w-100">
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          <label>{{
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            data.rule.configuration.threshold.min | percent: '1.2-2'
+          [locale]="data.locale"
-          }}</label>
+          [precision]="2"
-        } @else {
+          [value]="data.rule.configuration.threshold.min"
-          <label>{{ data.rule.configuration.threshold.min }}</label>
+        />
-        }
         <mat-slider
           class="flex-grow-1"
           name="thresholdMax"
@@ -113,13 +115,12 @@
         >
           <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
         </mat-slider>
-        @if (data.rule.configuration.threshold.unit === '%') {
+        <gf-value
-          <label>{{
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            data.rule.configuration.threshold.max | percent: '1.2-2'
+          [locale]="data.locale"
-          }}</label>
+          [precision]="2"
-        } @else {
+          [value]="data.rule.configuration.threshold.max"
-          <label>{{ data.rule.configuration.threshold.max }}</label>
+        />
-        }
       </div>
     </div>
   }