fix(date-range-filter): fix range selection, display message when inc…

api-goldens/element-ng/date-range-filter/index.api.md

@@ -100,6 +100,7 @@ export class SiDateRangeFilterComponent implements OnChanges {
     readonly presetSearch: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly previewLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly range: _angular_core.ModelSignal<DateRangeFilter>;
+    readonly rangeEndDateMissingLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly rangeLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly refLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly reverseInputFields: _angular_core.InputSignalWithTransform<boolean, unknown>;

api-goldens/element-ng/translate/index.api.md

@@ -114,6 +114,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_DATE_RANGE_FILTER.SEARCH'?: string;
     // (undocumented)
+    'SI_DATE_RANGE_FILTER.SELECT_RANGE_END'?: string;
+    // (undocumented)
     'SI_DATE_RANGE_FILTER.TO'?: string;
     // (undocumented)
     'SI_DATE_RANGE_FILTER.TODAY'?: string;

projects/element-ng/date-range-filter/si-date-range-filter.component.html

@@ -85,11 +85,22 @@
   <div class="mt-4 mb-6 ms-6">
     {{ previewLabel() | translate }}:
     <span class="preview">
-      @if (calculatedRange().valid) {
-        {{ calculatedRange().start | date: pipeFormat() }} -
-        {{ calculatedRange().end | date: pipeFormat() }}
+      @if (advancedMode()) {
+        @let calculated = calculatedRange();
+        @if (calculated.valid) {
+          {{ calculated.start | date: pipeFormat() }} -
+          {{ calculated.end | date: pipeFormat() }}
+        } @else {
+          ?
+        }
       } @else {
-        ?
+        @let range = dateRange();
+        {{ range.start | date: pipeFormat() }} -
+        @if (range.end) {
+          {{ range.end | date: pipeFormat() }}
+        } @else {
+          {{ rangeEndDateMissingLabel() | translate }}
+        }
       }
     </span>
   </div>

projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts

@@ -3,12 +3,15 @@
  * SPDX-License-Identifier: MIT
  */
 import { MediaMatcher } from '@angular/cdk/layout';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { formatDate } from '@angular/common';
 import { inputBinding, signal, twoWayBinding, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TestScheduler } from 'rxjs/testing';
 
+import { SiCalendarCellHarness } from '../datepicker/testing/si-calendar-cell.harness';
 import { DateRangeFilter, DateRangePreset, SiDateRangeFilterComponent } from './index';
 
 const ONE_MINUTE = 60 * 1000;
@@ -41,12 +44,14 @@ describe('SiDateRangeFilterComponent', () => {
   let presetList: WritableSignal<DateRangePreset[] | undefined>;
   let enableTimeSelection: WritableSignal<boolean>;
   let basicMode: WritableSignal<'input' | 'calendar'>;
+  let loader: HarnessLoader;
 
   const rangeInputValue = (): number | undefined =>
     element.querySelector<HTMLInputElement>('si-relative-date input')?.valueAsNumber;
   const rangeSelectContent = (): string | undefined | null =>
     element.querySelector('si-select div')?.textContent;
-  const preview = (): string | undefined => element.querySelector('.preview')?.textContent?.trim();
+  const preview = (): string | undefined =>
+    element.querySelector('.preview')?.textContent?.trim().replaceAll('  ', ' ');
   const date2string = (date: Date, time = false): string =>
     formatDate(date, time ? 'short' : 'shortDate', 'en');
   const rangeText = (from: Date, to: Date, time = false): string =>
@@ -90,7 +95,7 @@ describe('SiDateRangeFilterComponent', () => {
     })
   );
 
-  beforeEach(() => {
+  beforeEach(async () => {
     range = signal<DateRangeFilter>({ point1: 'now', point2: 2 * ONE_DAY, range: 'before' });
     presetList = signal<DateRangePreset[] | undefined>([...defaultPresetList]);
     enableTimeSelection = signal(false);
@@ -104,6 +109,7 @@ describe('SiDateRangeFilterComponent', () => {
         inputBinding('basicMode', basicMode)
       ]
     });
+    loader = TestbedHarnessEnvironment.loader(fixture);
     element = fixture.nativeElement;
   });
 
@@ -205,6 +211,21 @@ describe('SiDateRangeFilterComponent', () => {
     expect(range().range).toBeUndefined();
   });
 
+  it('shows text when range end is not yet set', async () => {
+    const from = new Date('2023-05-13');
+    const to = new Date('2023-08-14');
+
+    range.set({ point1: from, point2: to });
+
+    await fixture.whenStable();
+    expect(preview()).toEqual(rangeText(from, to));
+
+    const cells = await loader.getAllHarnesses(SiCalendarCellHarness.with({ isDisabled: false }));
+    await cells[13].select();
+
+    expect(preview()).toEqual(date2string(from) + ' - Select end date');
+  });
+
   it('allows selecting presets', async () => {
     await fixture.whenStable();
 

projects/element-ng/date-range-filter/si-date-range-filter.component.ts

@@ -294,6 +294,17 @@ export class SiDateRangeFilterComponent implements OnChanges {
    * ```
    */
   readonly applyLabel = input(t(() => $localize`:@@SI_DATE_RANGE_FILTER.APPLY:Apply`));
+  /**
+   * label for the "select end date" in preview
+   *
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_END:Select end date`)
+   * ```
+   */
+  readonly rangeEndDateMissingLabel = input(
+    t(() => $localize`:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_END:Select end date`)
+  );
 
   /** Event fired when the apply button has been clicked */
   readonly applyClicked = output<void>();
@@ -477,7 +488,11 @@ export class SiDateRangeFilterComponent implements OnChanges {
     this.point2date.set(endDate);
     this.point2Mode.set('date');
     this.point2offset.set(0);
-    this.updateRange();
+
+    // only emit if range start and end are selected
+    if (range.start && range.end) {
+      this.updateRange();
+    }
   }
 
   protected point1Changed(): void {

projects/element-ng/translate/si-translatable-keys.interface.ts

@@ -71,6 +71,7 @@ export interface SiTranslatableKeys {
   'SI_DATE_RANGE_FILTER.RANGE'?: string;
   'SI_DATE_RANGE_FILTER.REF_POINT'?: string;
   'SI_DATE_RANGE_FILTER.SEARCH'?: string;
+  'SI_DATE_RANGE_FILTER.SELECT_RANGE_END'?: string;
   'SI_DATE_RANGE_FILTER.TO'?: string;
   'SI_DATE_RANGE_FILTER.TODAY'?: string;
   'SI_DATE_RANGE_FILTER.UNIT'?: string;