From a1934ee82bc25f6afd3f57ee7ec05fb1ac89b0c0 Mon Sep 17 00:00:00 2001
From: Amandee Ellawala <47607256+amandee27@users.noreply.github.com>
Date: Sat, 16 Nov 2024 11:17:58 +0000
Subject: [PATCH] Feature/implement range slider in rule settings dialog
 (#4043)

* Implement range slider in rule settings dialog

* Update changelog
---
 CHANGELOG.md                                  |   1 +
 .../rule-settings-dialog.html                 | 188 +++++++++++-------
 .../rule-settings-dialog.scss                 |   3 +
 3 files changed, 124 insertions(+), 68 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db6ab3629..89857f9b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Moved the chart of the holdings tab on the home page from experimental to general availability
 - Extended the assistant by a holding selector
 - Separated the _FIRE_ / _X-ray_ page
+- Improved the usability to customize the rule thresholds in the _X-ray_ page by introducing range sliders (experimental)
 - Improved the language localization for Italian (`it`)
 - Upgraded `ngx-skeleton-loader` from version `7.0.0` to `9.0.0`
 - Upgraded `uuid` from version `9.0.1` to `11.0.2`
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
index 8806dae6a..97854ad7d 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
@@ -1,76 +1,128 @@
 <div mat-dialog-title>{{ data.rule.name }}</div>
 
 <div class="py-3" mat-dialog-content>
-  <div
-    class="w-100"
-    [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
-  >
-    <h6 class="mb-0">
-      <ng-container i18n>Threshold Min</ng-container>:
-      @if (data.rule.configuration.threshold.unit === '%') {
-        {{ data.settings.thresholdMin | percent: '1.2-2' }}
-      } @else {
-        {{ data.settings.thresholdMin }}
-      }
-    </h6>
-    @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>
-    }
-    <mat-slider
-      name="thresholdMin"
-      [max]="data.rule.configuration.threshold.max"
-      [min]="data.rule.configuration.threshold.min"
-      [step]="data.rule.configuration.threshold.step"
+  @if (
+    data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
+  ) {
+    <div class="w-100">
+      <h6 class="mb-0">
+        <ng-container i18n>Threshold range</ng-container>:
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMin | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMin }}
+        }
+        -
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMax | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMax }}
+        }
+      </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>
+        }
+        <mat-slider
+          class="flex-grow-1"
+          [max]="data.rule.configuration.threshold.max"
+          [min]="data.rule.configuration.threshold.min"
+          [step]="data.rule.configuration.threshold.step"
+        >
+          <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>
+        }
+      </div>
+    </div>
+  } @else {
+    <div
+      class="w-100"
+      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
     >
-      <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>
-    }
-  </div>
-  <div
-    class="w-100"
-    [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
-  >
-    <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 }}
-      }
-    </h6>
-    @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>
-    }
-    <mat-slider
-      name="thresholdMax"
-      [max]="data.rule.configuration.threshold.max"
-      [min]="data.rule.configuration.threshold.min"
-      [step]="data.rule.configuration.threshold.step"
+      <h6 class="mb-0">
+        <ng-container i18n>Threshold Min</ng-container>:
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMin | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMin }}
+        }
+      </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>
+        }
+        <mat-slider
+          class="flex-grow-1"
+          name="thresholdMin"
+          [max]="data.rule.configuration.threshold.max"
+          [min]="data.rule.configuration.threshold.min"
+          [step]="data.rule.configuration.threshold.step"
+        >
+          <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>
+        }
+      </div>
+    </div>
+    <div
+      class="w-100"
+      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
     >
-      <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>
-    }
-  </div>
+      <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 }}
+        }
+      </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>
+        }
+        <mat-slider
+          class="flex-grow-1"
+          name="thresholdMax"
+          [max]="data.rule.configuration.threshold.max"
+          [min]="data.rule.configuration.threshold.min"
+          [step]="data.rule.configuration.threshold.step"
+        >
+          <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>
+        }
+      </div>
+    </div>
+  }
 </div>
 
 <div align="end" mat-dialog-actions>
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss
index dc9093b45..0f6fce3d2 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss
@@ -1,2 +1,5 @@
 :host {
+  label {
+    margin-bottom: 0;
+  }
 }