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

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

Hide file tree

Showing 3 changed files with 47 additions and 9 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 activeItemIndex: number | null = null;
     protected readonly capsMapper = TUI_DAY_CAPS_MAPPER;
 
     @Input()
@@ -145,17 +146,21 @@ export class TuiCalendarRangeComponent implements OnChanges {
         otherDateText || '',
     ];
 
-    protected isItemActive(item: TuiDayRangePeriod | string): boolean {
-        const {activePeriod} = this;
+    protected isItemActive(item: TuiDayRangePeriod | string, index: number): boolean {
+        const {activeItemIndex} = this;
 
-        return (tuiIsString(item) && activePeriod === null) || activePeriod === item;
+        return (
+            (tuiIsString(item) && activeItemIndex === null) || activeItemIndex === index
+        );
     }
 
-    protected onItemSelect(item: TuiDayRangePeriod | string): void {
+    protected onItemSelect(item: TuiDayRangePeriod | string, index: number): void {
         if (typeof item !== 'string') {
             this.updateValue(item.range.dayLimit(this.min, this.max));
+            this.activeItemIndex = index;
         } else if (this.activePeriod !== null) {
             this.updateValue(null);
+            this.activeItemIndex = null;
         }
     }
 

diff --git a/projects/kit/components/calendar-range/calendar-range.template.html b/projects/kit/components/calendar-range/calendar-range.template.html
@@ -36,17 +36,20 @@
         [style.flex]="1"
     >
         <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
-            [attr.aria-checked]="isItemActive(item)"
-            (click)="onItemSelect(item)"
+            [attr.aria-checked]="isItemActive(item, i)"
+            (click)="onItemSelect(item, i)"
             (mousedown.prevent.silent)="(0)"
         >
             {{ item }}
             <tui-icon
-                *ngIf="isItemActive(item)"
+                *ngIf="isItemActive(item, i)"
                 automation-id="tui-calendar-range__checkmark"
                 [icon]="icons.check"
                 [style.font-size.rem]="1"

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
@@ -124,7 +124,13 @@ describe('rangeCalendarComponent', () => {
 
             testComponent.min = min;
             fixture.detectChanges();
-            component['onItemSelect'](component.items[5]);
+
+            const selectedItemIndex = 5;
+
+            component['onItemSelect'](
+                component.items[selectedItemIndex],
+                selectedItemIndex,
+            );
             fixture.detectChanges();
 
             expect(
@@ -168,6 +174,30 @@ 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 {