feat(date-range): synchronize date-range-dropdown with selected date …

…range even without the date input, this is used in the calendar display
geonetwork · Nov 13, 2024 · 2693db5 · 2693db5
1 parent 2355bb8
commit 2693db5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.html b/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.html
@@ -1,6 +1,8 @@
 <gn-ui-date-range-dropdown
   *ngIf="fieldType === 'dateRange'; else multiselect"
   [title]="title"
+  [startDate]="(selectedDateRange$ | async)?.start"
+  [endDate]="(selectedDateRange$ | async)?.end"
   (startDateChange)="onStartDateChange($event)"
   (endDateChange)="onEndDateChange($event)"
 ></gn-ui-date-range-dropdown>

diff --git a/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts b/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts
@@ -40,6 +40,10 @@ export class FilterDropdownComponent implements OnInit {
     catchError(() => of([]))
   ) as Observable<FieldValue[]>
 
+  selectedDateRange$ = this.selected$.pipe(
+    map((selectedDateRange) => selectedDateRange as DateRange)
+  ) as Observable<DateRange>
+
   onSelectedValues(values: unknown[]) {
     this.fieldsService
       .buildFiltersFromFieldValues({ [this.fieldName]: values as FieldValue[] })

diff --git a/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.html b/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.html
@@ -15,7 +15,15 @@
 </gn-ui-button>
 <!--date range input is just present for output events and hidden from the DOM-->
 <mat-date-range-input [rangePicker]="picker">
-  <input matStartDate (dateInput)="startDateChange.emit($event.value)" />
-  <input matEndDate (dateInput)="endDateChange.emit($event.value)" />
+  <input
+    matStartDate
+    [value]="startDate"
+    (dateInput)="startDateChange.emit($event.value)"
+  />
+  <input
+    matEndDate
+    [value]="endDate"
+    (dateInput)="endDateChange.emit($event.value)"
+  />
 </mat-date-range-input>
 <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.ts b/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.ts
@@ -32,6 +32,8 @@ import { OverlayContainer } from '@angular/cdk/overlay'
 })
 export class DateRangeDropdownComponent implements AfterViewChecked {
   @Input() title: string
+  @Input() startDate: Date
+  @Input() endDate: Date
   @Output() startDateChange = new EventEmitter<Date>()
   @Output() endDateChange = new EventEmitter<Date>()