diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index b09c2ffd99b4..bbc635e54fc4 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -80,6 +80,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax previousValue: TuiDayRange | null = null; + selectedActivePeriod: TuiDayRangePeriod | null = null; + readonly maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER; get computedMin(): TuiDay { @@ -165,6 +167,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax const {value} = this; this.previousValue = value; + this.selectedActivePeriod = null; if (value === null || !value.isSingleDay) { this.value = new TuiDayRange(day, day); @@ -176,14 +179,16 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax } onItemSelect(item: TuiDayRangePeriod | string): void { - if (typeof item !== 'string') { + if (!tuiIsString(item)) { this.updateValue(item.range.dayLimit(this.min, this.max)); + this.selectedActivePeriod = item; return; } if (this.activePeriod !== null) { this.updateValue(null); + this.selectedActivePeriod = null; } } @@ -194,7 +199,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax private get activePeriod(): TuiDayRangePeriod | null { return ( - this.items.find(item => + this.selectedActivePeriod ?? + (this.items.find(item => tuiNullableSame( this.value, item.range, @@ -202,7 +208,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax a.from.daySame(b.from.dayLimit(this.min, this.max)) && a.to.daySame(b.to.dayLimit(this.min, this.max)), ), - ) || null + ) || + null) ); } diff --git a/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts b/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts index 7243fff6c2d3..b6d5548dde2c 100644 --- a/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts +++ b/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts @@ -29,6 +29,7 @@ describe('rangeCalendarComponent', () => { [items]="items" [max]="max" [min]="min" + [value]="value" (valueChange)="onRangeChange($event)" > @@ -58,6 +59,8 @@ describe('rangeCalendarComponent', () => { max = TUI_LAST_DAY; + value: TuiDayRange | null = null; + onRangeChange(range: TuiDayRange): void { this.control.setValue(range); } @@ -110,6 +113,17 @@ describe('rangeCalendarComponent', () => { expect(items.length).toBe(7); }); + it('If the value fit any range, check the box next to appropriate range', () => { + const today = TuiDay.currentLocal(); + + testComponent.value = new TuiDayRange(today, today); + fixture.detectChanges(); + + const items = getItems(); + + expect(items[1].nativeElement.contains(getCheckmark())).toBe(true); + }); + it('If the value does not fit any range, check the box next to "Other date..."', () => { expect(getItems()[6].nativeElement.contains(getCheckmark())).toBe(true); }); @@ -126,6 +140,7 @@ describe('rangeCalendarComponent', () => { testComponent.min = min; fixture.detectChanges(); + component.onItemSelect(component.items[5]); fixture.detectChanges(); @@ -170,6 +185,47 @@ describe('rangeCalendarComponent', () => { expect(items[0].nativeElement.textContent.trim()).toBe(title); expect(items[1].nativeElement.textContent.trim()).toBe('Other date...'); }); + + it('When redefining intervals, displays appropriate checkbox', () => { + const today = TuiDay.currentLocal(); + const previousMonth = today.append({month: -1}); + const title = 'New interval'; + + component.onItemSelect(component.items[0]); + fixture.detectChanges(); + + testComponent.items = [ + new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), title), + ...testComponent.items, + ]; + fixture.detectChanges(); + + const items = getItems(); + + expect(items[0].nativeElement.textContent.trim()).toBe(title); + + expect(items[0].nativeElement.contains(getCheckmark())).toBe(false); + expect(items[1].nativeElement.contains(getCheckmark())).toBe(true); + }); + + it('If there are ranges with same range dates, displays appropriate checkbox when switching between them', () => { + const today = TuiDay.currentLocal(); + const previousMonth = today.append({month: -1}); + + testComponent.items = [ + new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), '1'), + new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), '2'), + ]; + fixture.detectChanges(); + + component.onItemSelect(component.items[1]); + fixture.detectChanges(); + + const items = getItems(); + + expect(items[0].nativeElement.contains(getCheckmark())).toBe(false); + expect(items[1].nativeElement.contains(getCheckmark())).toBe(true); + }); }); function getCalendar(): DebugElement | null {