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

…es and different names
taiga-family · Jun 18, 2024 · 5b3ec81 · 5b3ec81
1 parent 2d6ab2d
commit 5b3ec81
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 27 deletions.
diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -21,7 +21,6 @@ import {
     TuiDestroyService,
     tuiIsString,
     TuiMonth,
-    tuiNullableSame,
     tuiObjectFromEntries,
     tuiPure,
     TuiTypedMapper,
@@ -80,6 +79,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
 
     previousValue: TuiDayRange | null = null;
 
+    activeItemIndex: number | null = null;
+
     readonly maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER;
 
     get computedMin(): TuiDay {
@@ -150,10 +151,12 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         return this.value ? this.value.to : this.defaultViewedMonth;
     }
 
-    isItemActive(item: TuiDayRangePeriod | string): boolean {
-        const {activePeriod} = this;
+    isItemActive(item: TuiDayRangePeriod | string, index: number): boolean {
+        const {activeItemIndex} = this;
 
-        return (tuiIsString(item) && activePeriod === null) || activePeriod === item;
+        return (
+            (tuiIsString(item) && activeItemIndex === null) || activeItemIndex === index
+        );
     }
 
     // TODO: investigate if it is used anywhere and (if not) delete it in v4.0
@@ -175,15 +178,17 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         this.updateValue(TuiDayRange.sort(value.from, day));
     }
 
-    onItemSelect(item: TuiDayRangePeriod | string): void {
+    onItemSelect(item: TuiDayRangePeriod | string, index: number): void {
         if (typeof item !== 'string') {
             this.updateValue(item.range.dayLimit(this.min, this.max));
+            this.activeItemIndex = index;
 
             return;
         }
 
-        if (this.activePeriod !== null) {
+        if (this.activeItemIndex !== null) {
             this.updateValue(null);
+            this.activeItemIndex = null;
         }
     }
 
@@ -192,20 +197,6 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         this.valueChange.emit(value);
     }
 
-    private get activePeriod(): TuiDayRangePeriod | null {
-        return (
-            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
-        );
-    }
-
     @tuiPure
     private calculateDisabledItemHandler(
         disabledItemHandler: TuiBooleanHandler<TuiDay>,

diff --git a/projects/kit/components/calendar-range/calendar-range.template.html b/projects/kit/components/calendar-range/calendar-range.template.html
@@ -29,19 +29,22 @@
             class="t-menu"
         >
             <button
-                *ngFor="let item of items | tuiMapper: mapper : min : max : minLength : (otherDateText$ | async)"
+                *ngFor="
+                    let item of items | tuiMapper: mapper : min : max : minLength : (otherDateText$ | async);
+                    let i = index
+                "
                 automation-id="tui-calendar-range__menu__item"
                 role="menuitemradio"
                 tuiOption
                 tuiPreventDefault="mousedown"
-                [attr.aria-checked]="isItemActive(item)"
-                (click)="onItemSelect(item)"
-                (keydown.enter.prevent)="onItemSelect(item)"
-                (keydown.space.prevent)="onItemSelect(item)"
+                [attr.aria-checked]="isItemActive(item, i)"
+                (click)="onItemSelect(item, i)"
+                (keydown.enter.prevent)="onItemSelect(item, i)"
+                (keydown.space.prevent)="onItemSelect(item, i)"
             >
                 {{ item }}
                 <tui-svg
-                    *ngIf="isItemActive(item)"
+                    *ngIf="isItemActive(item, i)"
                     automation-id="tui-calendar-range__checkmark"
                     class="t-checkmark"
                     [src]="icons.check"

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
@@ -126,7 +126,10 @@ describe('rangeCalendarComponent', () => {
 
             testComponent.min = min;
             fixture.detectChanges();
-            component.onItemSelect(component.items[5]);
+
+            const selectedItemIndex = 5;
+
+            component.onItemSelect(component.items[selectedItemIndex], selectedItemIndex);
             fixture.detectChanges();
 
             expect(
@@ -170,6 +173,27 @@ describe('rangeCalendarComponent', () => {
             expect(items[0].nativeElement.textContent.trim()).toBe(title);
             expect(items[1].nativeElement.textContent.trim()).toBe('Other date...');
         });
+
+        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();
+
+            const selectedItemIndex = 1;
+
+            component.onItemSelect(component.items[selectedItemIndex], selectedItemIndex);
+            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 {