Task/Refactor rule settings dialog using value component

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,31 @@
     data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
   ) {
     <div class="w-100">
-      <h6 class="mb-0">
+      <h6 class="mb-0 d-flex">
         <ng-container i18n>Threshold range</ng-container>:
-        @if (data.rule.configuration.threshold.unit === '%') {
-          {{ data.settings.thresholdMin | percent: '1.2-2' }}
-        } @else {
-          {{ data.settings.thresholdMin }}
-        }
+        <gf-value
+          class="mx-1"
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.settings.thresholdMin"
+        ></gf-value>
         -
-        @if (data.rule.configuration.threshold.unit === '%') {
-          {{ data.settings.thresholdMax | percent: '1.2-2' }}
-        } @else {
-          {{ data.settings.thresholdMax }}
-        }
+        <gf-value
+          class="mx-1"
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.settings.thresholdMax"
+        ></gf-value>
       </h6>
       <div class="align-items-center d-flex w-100">
-        @if (data.rule.configuration.threshold.unit === '%') {
-          <label>{{
-            data.rule.configuration.threshold.min | percent: '1.2-2'
-          }}</label>
-        } @else {
-          <label>{{ data.rule.configuration.threshold.min }}</label>
-        }
+        <gf-value
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.rule.configuration.threshold.min"
+        ></gf-value>
         <mat-slider
           class="flex-grow-1"
           [max]="data.rule.configuration.threshold.max"
@@ -36,13 +39,12 @@
           <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
           <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
         </mat-slider>
-        @if (data.rule.configuration.threshold.unit === '%') {
-          <label>{{
-            data.rule.configuration.threshold.max | percent: '1.2-2'
-          }}</label>
-        } @else {
-          <label>{{ data.rule.configuration.threshold.max }}</label>
-        }
+        <gf-value
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.rule.configuration.threshold.max"
+        ></gf-value>
       </div>
     </div>
   } @else {
@@ -50,22 +52,23 @@
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
     >
-      <h6 class="mb-0">
+      <h6 class="mb-0 d-flex">
         <ng-container i18n>Threshold Min</ng-container>:
-        @if (data.rule.configuration.threshold.unit === '%') {
-          {{ data.settings.thresholdMin | percent: '1.2-2' }}
-        } @else {
-          {{ data.settings.thresholdMin }}
-        }
+        <gf-value
+          class="mx-1"
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.settings.thresholdMin"
+        ></gf-value>
       </h6>
       <div class="align-items-center d-flex w-100">
-        @if (data.rule.configuration.threshold.unit === '%') {
-          <label>{{
-            data.rule.configuration.threshold.min | percent: '1.2-2'
-          }}</label>
-        } @else {
-          <label>{{ data.rule.configuration.threshold.min }}</label>
-        }
+        <gf-value
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.rule.configuration.threshold.min"
+        ></gf-value>
         <mat-slider
           class="flex-grow-1"
           name="thresholdMin"
@@ -75,13 +78,12 @@
         >
           <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
         </mat-slider>
-        @if (data.rule.configuration.threshold.unit === '%') {
-          <label>{{
-            data.rule.configuration.threshold.max | percent: '1.2-2'
-          }}</label>
-        } @else {
-          <label>{{ data.rule.configuration.threshold.max }}</label>
-        }
+        <gf-value
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.rule.configuration.threshold.max"
+        ></gf-value>
       </div>
     </div>
     <div
@@ -90,20 +92,20 @@
     >
       <h6 class="mb-0">
         <ng-container i18n>Threshold Max</ng-container>:
-        @if (data.rule.configuration.threshold.unit === '%') {
-          {{ data.settings.thresholdMax | percent: '1.2-2' }}
-        } @else {
-          {{ data.settings.thresholdMax }}
-        }
+        <gf-value
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.settings.thresholdMax"
+        ></gf-value>
       </h6>
       <div class="align-items-center d-flex w-100">
-        @if (data.rule.configuration.threshold.unit === '%') {
-          <label>{{
-            data.rule.configuration.threshold.min | percent: '1.2-2'
-          }}</label>
-        } @else {
-          <label>{{ data.rule.configuration.threshold.min }}</label>
-        }
+        <gf-value
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.rule.configuration.threshold.min"
+        ></gf-value>
         <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 === '%') {
-          <label>{{
-            data.rule.configuration.threshold.max | percent: '1.2-2'
-          }}</label>
-        } @else {
-          <label>{{ data.rule.configuration.threshold.max }}</label>
-        }
+        <gf-value
+          [isPercent]="data.rule.configuration.threshold.unit === '%'"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="data.rule.configuration.threshold.max"
+        ></gf-value>
       </div>
     </div>
   }