Merge pull request #3245 from alanorth/backport-3236-to-dspace-7_x

[Port dspace-7_x] #3094 - Update date slider to prevent automatic page reloads

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html

@@ -8,7 +8,7 @@
                     {{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
                   </span>
                   <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
-                         class="form-control" (blur)="onSubmit()"
+                         class="form-control"
                          [attr.aria-label]="minLabel"
                          [placeholder]="minLabel"
                   />
@@ -20,7 +20,7 @@
                       {{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
                     </span>
                     <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
-                           class="form-control" (blur)="onSubmit()"
+                           class="form-control"
                            [attr.aria-label]="maxLabel"
                            [placeholder]="maxLabel"
                     />
@@ -33,7 +33,8 @@
 
         <ng-container *ngIf="shouldShowSlider()">
             <nouislider [connect]="true" [config]="config" [min]="min" [max]="max" [step]="1"
-                        [dsDebounce]="250" (onDebounce)="onSubmit()"
+                        [dsDebounce]="250"
+                        (change)="onSliderChange($event)"
                         (keydown)="startKeyboardControl()" (keyup)="stopKeyboardControl()"
                         [(ngModel)]="range" ngDefaultControl>
             </nouislider>
@@ -43,5 +44,8 @@
           <ds-search-facet-range-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
           </div>
         </ng-container>
+        <button (click)="onSubmit()" class="btn btn-primary">
+          {{'search.filters.search.submit' | translate}}
+        </button>
     </div>
 </div>

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts

@@ -81,6 +81,11 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
    */
   range;
 
+  /**
+   * The range currently selected by the slider
+   */
+  sliderRange: [number | undefined, number | undefined];
+
   /**
    * Subscription to unsubscribe from
    */
@@ -138,6 +143,15 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
     };
   }
 
+  /**
+   * Updates the sliderRange property with the current slider range.
+   * This method is called whenever the slider value changes, but it does not immediately apply the changes.
+   * @param range - The current range selected by the slider
+   */
+  onSliderChange(range: [number | undefined, number | undefined]): void {
+    this.sliderRange = range;
+  }
+
   /**
    * Submits new custom range values to the range filter from the widget
    */