fix(kit): CalendarRange should not distinguish ranges with same dat…

…es and different names
taiga-family · Jun 20, 2024 · c81e36d · c81e36d
1 parent 8bdbc1e
commit c81e36d
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 3 deletions.
diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -58,6 +58,7 @@ export class TuiCalendarRangeComponent implements OnChanges {
     protected readonly icons = inject(TUI_COMMON_ICONS);
     protected previousValue: TuiDayRange | null = null;
     protected hoveredItem: TuiDay | null = null;
+    protected storedActivePeriod: TuiDayRangePeriod | null = null;
     protected readonly capsMapper = TUI_DAY_CAPS_MAPPER;
 
     @Input()
@@ -152,10 +153,12 @@ export class TuiCalendarRangeComponent implements OnChanges {
     }
 
     protected onItemSelect(item: TuiDayRangePeriod | string): void {
-        if (typeof item !== 'string') {
+        if (!tuiIsString(item)) {
             this.updateValue(item.range.dayLimit(this.min, this.max));
+            this.storedActivePeriod = item;
         } else if (this.activePeriod !== null) {
             this.updateValue(null);
+            this.storedActivePeriod = null;
         }
     }
 
@@ -165,6 +168,7 @@ export class TuiCalendarRangeComponent implements OnChanges {
 
     protected onDayClick(day: TuiDay): void {
         this.previousValue = this.value;
+        this.storedActivePeriod = null;
 
         if (!this.value?.isSingleDay) {
             this.value = new TuiDayRange(day, day);
@@ -180,15 +184,17 @@ export class TuiCalendarRangeComponent implements OnChanges {
 
     private get activePeriod(): TuiDayRangePeriod | null {
         return (
-            this.items.find(item =>
+            this.storedActivePeriod ??
+            (this.items.find(item =>
                 tuiNullableSame<TuiDayRange>(
                     this.value,
                     item.range,
                     (a, b) =>
                         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/calendar-range.component.spec.ts b/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts
@@ -32,6 +32,7 @@ describe('rangeCalendarComponent', () => {
                 [items]="items"
                 [max]="max"
                 [min]="min"
+                [value]="value"
                 (valueChange)="onRangeChange($event)"
             />
         `,
@@ -60,6 +61,8 @@ describe('rangeCalendarComponent', () => {
 
         public max = TUI_LAST_DAY;
 
+        public value: TuiDayRange | null = null;
+
         public onRangeChange(range: TuiDayRange | null): void {
             this.control.setValue(range);
         }
@@ -108,6 +111,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);
         });
@@ -124,6 +138,7 @@ describe('rangeCalendarComponent', () => {
 
             testComponent.min = min;
             fixture.detectChanges();
+
             component['onItemSelect'](component.items[5]);
             fixture.detectChanges();
 
@@ -168,6 +183,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 {