fix(kit): correct resolve date range in mobile calendar (#5974)

taiga-family · Nov 29, 2023 · 016242e · 016242e
1 parent ed02bda
commit 016242e
Show file tree

Hide file tree

Showing 25 changed files with 153 additions and 45 deletions.
diff --git a/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.component.ts b/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.component.ts
@@ -27,7 +27,11 @@ export class TuiMobileCalendarDialogComponent {
     ) {}
 
     get single(): boolean {
-        return this.context.data?.single !== false;
+        return this.context.data?.single === true;
+    }
+
+    get multi(): boolean {
+        return this.context.data?.multi === true;
     }
 
     get min(): TuiDay {

diff --git a/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.template.html b/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.template.html
@@ -2,6 +2,7 @@
     [disabledItemHandler]="disabledItemHandler"
     [max]="max"
     [min]="min"
+    [multi]="multi"
     [single]="single"
     (cancel)="context.$implicit.complete()"
     (confirm)="context.completeWith($event)"

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts
@@ -87,6 +87,9 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
     @Input()
     single = true;
 
+    @Input()
+    multi = false;
+
     @Input()
     min = TUI_FIRST_DAY;
 
@@ -130,7 +133,7 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
         @Inject(TUI_SHORT_WEEK_DAYS)
         readonly unorderedWeekDays$: TuiInjectionTokenType<typeof TUI_SHORT_WEEK_DAYS>,
         @Inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS)
-        readonly chooseDayOrRangeTexts$: Observable<[string, string]>,
+        readonly chooseDayOrRangeTexts$: Observable<[string, string, string]>,
         @Inject(TUI_ANIMATIONS_DURATION) private readonly duration: number,
         @Inject(NgZone) private readonly ngZone: NgZone,
     ) {
@@ -166,23 +169,15 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
     onDayClick(day: TuiDay): void {
         if (this.single) {
             this.value = day;
-
-            return;
-        }
-
-        if (!(this.value instanceof TuiDayRange) && !(this.value instanceof TuiDay)) {
-            this.value = tuiImmutableUpdateInputDateMulti(this.value ?? [], day);
-
-            return;
-        }
-
-        if (this.value instanceof TuiDay || !this.value?.isSingleDay) {
+        } else if (this.isMultiValue(this.value)) {
+            this.value = tuiImmutableUpdateInputDateMulti(this.value, day);
+        } else if (this.isSingleValue(this.value)) {
+            this.value = new TuiDayRange(day, day);
+        } else if (this.value instanceof TuiDayRange) {
+            this.value = TuiDayRange.sort(this.value.from, day);
+        } else if (!this.value) {
             this.value = new TuiDayRange(day, day);
-
-            return;
         }
-
-        this.value = TuiDayRange.sort(this.value.from, day);
     }
 
     getState(index: number): 'active' | 'adjacent' | null {
@@ -238,6 +233,14 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
         (max !== null && item.dayAfter(max)) ||
         disabledItemHandler(item);
 
+    private isMultiValue(day: any): day is readonly TuiDay[] | undefined {
+        return !(day instanceof TuiDay) && !(day instanceof TuiDayRange) && this.multi;
+    }
+
+    private isSingleValue(day: any): day is TuiDay {
+        return day instanceof TuiDay || (day instanceof TuiDayRange && !day.isSingleDay);
+    }
+
     private get initialYear(): number {
         if (!this.value) {
             return this.today.year;

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.template.html
@@ -25,7 +25,7 @@
         automation-id="tui-mobile-calendar__label"
         class="t-label"
     >
-        {{ single ? texts[0] : texts[1] }}
+        {{ single ? texts?.[0] : multi ? texts?.[2] : texts?.[1] }}
     </h2>
     <button
         automation-id="tui-mobile-calendar__confirm"

diff --git a/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.spec.ts b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.spec.ts
@@ -0,0 +1,93 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+import {TUI_PLAYWRIGHT_MOBILE_USER_AGENT} from '../../../playwright.options';
+
+test.describe(`InputDate and mobile user agent`, () => {
+    const date = new Date(2023, 10, 1);
+    const november = `.t-month-wrapper:nth-child(2) .t-cell`;
+
+    test.use({
+        viewport: {width: 430, height: 932},
+        userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
+    });
+
+    test(`InputDateRange`, async ({page}) => {
+        await tuiGoto(page, `components/input-date-range/API`, {date});
+
+        await new TuiDocumentationPagePO(page).apiPageExample
+            .locator(`tui-input-date-range .t-icons`)
+            .click();
+
+        await page.waitForSelector(`tui-dialog`, {state: `visible`});
+        await expect(page).toHaveScreenshot(`01-input-date-range-mobile-1.png`);
+
+        await page.locator(november).nth(0).click();
+        await expect(page).toHaveScreenshot(`01-input-date-range-mobile-2.png`);
+
+        await page.locator(november).nth(11).click();
+        await expect(page).toHaveScreenshot(`01-input-date-range-mobile-3.png`);
+
+        await page.locator(november).nth(19).click();
+        await expect(page).toHaveScreenshot(`01-input-date-range-mobile-4.png`);
+
+        await page.locator(november).nth(25).click();
+        await expect(page).toHaveScreenshot(`01-input-date-range-mobile-5.png`);
+    });
+
+    test(`InputDateMulti`, async ({page}) => {
+        await tuiGoto(page, `components/input-date-multi/API`, {date});
+
+        await new TuiDocumentationPagePO(page).apiPageExample
+            .locator(`tui-input-date[multiple] .t-icons`)
+            .click();
+
+        await page.waitForSelector(`tui-dialog`, {state: `visible`});
+        await expect(page).toHaveScreenshot(`02-input-date-range-mobile-1.png`);
+
+        await page.locator(november).nth(0).click();
+        await expect(page).toHaveScreenshot(`02-input-date-range-mobile-2.png`);
+
+        await page.locator(november).nth(11).click();
+        await expect(page).toHaveScreenshot(`02-input-date-range-mobile-3.png`);
+
+        await page.locator(november).nth(19).click();
+        await expect(page).toHaveScreenshot(`02-input-date-range-mobile-4.png`);
+
+        await page.locator(november).nth(25).click();
+        await expect(page).toHaveScreenshot(`02-input-date-range-mobile-5.png`);
+
+        await page.locator(november).nth(25).click();
+        await page.locator(november).nth(19).click();
+        await page.locator(november).nth(11).click();
+        await page.locator(november).nth(0).click();
+
+        await expect(page).toHaveScreenshot(`02-input-date-range-mobile-6.png`);
+    });
+
+    test(`InputDate`, async ({page}) => {
+        await tuiGoto(page, `components/input-date/API`, {date});
+
+        await new TuiDocumentationPagePO(page).apiPageExample
+            .locator(`tui-input-date .t-icons`)
+            .click();
+
+        await page.waitForSelector(`tui-dialog`, {state: `visible`});
+        await expect(page).toHaveScreenshot(`03-input-date-range-mobile-1.png`);
+
+        await page.locator(november).nth(0).click();
+        await expect(page).toHaveScreenshot(`03-input-date-range-mobile-2.png`);
+
+        await page.locator(november).nth(11).click();
+        await expect(page).toHaveScreenshot(`03-input-date-range-mobile-3.png`);
+
+        await page.locator(november).nth(19).click();
+        await expect(page).toHaveScreenshot(`03-input-date-range-mobile-4.png`);
+
+        await page.locator(november).nth(25).click();
+        await expect(page).toHaveScreenshot(`03-input-date-range-mobile-5.png`);
+
+        await page.locator(november).nth(25).click();
+        await expect(page).toHaveScreenshot(`03-input-date-range-mobile-6.png`);
+    });
+});
diff --git a/projects/i18n/interfaces/language.ts b/projects/i18n/interfaces/language.ts
@@ -60,9 +60,9 @@ export interface TuiLanguageKit {
         maxSizeRejectionReason: string;
     };
     /**
-     * [@string 'choose day', @param 'choose range']
+     * [@string 'choose day', @param 'choose range', @param 'choose days']
      */
-    mobileCalendarTexts: [string, string];
+    mobileCalendarTexts: [string, string, string];
     more: string;
     multiSelectTexts: {
         all: string;

diff --git a/projects/i18n/languages/chinese/kit.ts b/projects/i18n/languages/chinese/kit.ts
@@ -7,7 +7,7 @@ export const TUI_CHINESE_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `其他日期...`,
     showAll: `显示所有`,
     hide: `隐藏`,
-    mobileCalendarTexts: [`选择日期`, `选择范围`],
+    mobileCalendarTexts: [`选择日期`, `选择范围`, `選擇日期`],
     range: [`从`, `至`],
     countTexts: [`加`, `减`],
     time: {

diff --git a/projects/i18n/languages/dutch/kit.ts b/projects/i18n/languages/dutch/kit.ts
@@ -7,7 +7,7 @@ export const TUI_DUTCH_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Andere datum ...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Kies een dag`, `Kies bereik`],
+    mobileCalendarTexts: [`Kies een dag`, `Kies bereik`, `Kies dagen`],
     range: [`van`, `tot`],
     countTexts: [`Plus`, `Min`],
     time: {

diff --git a/projects/i18n/languages/english/kit.ts b/projects/i18n/languages/english/kit.ts
@@ -7,7 +7,7 @@ export const TUI_ENGLISH_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Other date...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Choose day`, `Choose range`],
+    mobileCalendarTexts: [`Choose day`, `Choose range`, `Choose days`],
     range: [`from`, `to`],
     countTexts: [`Plus`, `Minus`],
     time: {

diff --git a/projects/i18n/languages/french/kit.ts b/projects/i18n/languages/french/kit.ts
@@ -7,7 +7,11 @@ export const TUI_FRENCH_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Autre date...`,
     showAll: `Tout afficher`,
     hide: `Cacher`,
-    mobileCalendarTexts: [`Choisir un jour`, `Choisir un intervalle`],
+    mobileCalendarTexts: [
+        `Choisir un jour`,
+        `Choisir un intervalle`,
+        `Choisissez des jours`,
+    ],
     range: [`De`, `À`],
     countTexts: [`Plus`, `Moins`],
     time: {

diff --git a/projects/i18n/languages/german/kit.ts b/projects/i18n/languages/german/kit.ts
@@ -7,7 +7,7 @@ export const TUI_GERMAN_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Anderes Datum...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Tag auswählen`, `Zeitraum auswählen`],
+    mobileCalendarTexts: [`Tag auswählen`, `Zeitraum auswählen`, `Wählen Sie Tage`],
     range: [`von`, `bis`],
     countTexts: [`Plus`, `Minus`],
     time: {

diff --git a/projects/i18n/languages/italian/kit.ts b/projects/i18n/languages/italian/kit.ts
@@ -7,7 +7,7 @@ export const TUI_ITALIAN_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Altra data...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Scegli giorno`, `Scegli intervallo`],
+    mobileCalendarTexts: [`Scegli giorno`, `Scegli intervallo`, `Scegli i giorni`],
     range: [`da`, `a`],
     countTexts: [`Più`, `Meno`],
     time: {

diff --git a/projects/i18n/languages/kazakh/kit.ts b/projects/i18n/languages/kazakh/kit.ts
@@ -7,7 +7,7 @@ export const TUI_KAZAKH_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Басқа күн...`,
     showAll: `Барлығын көрсету`,
     hide: `Жасыру`,
-    mobileCalendarTexts: [`Күнді таңдаңыз`, `Аралықты таңдаңыз`],
+    mobileCalendarTexts: [`Күнді таңдаңыз`, `Аралықты таңдаңыз`, `Күндерді таңдаңыз`],
     range: [`бастап`, `дейін`],
     countTexts: [`Плюс`, `Минус`],
     time: {

diff --git a/projects/i18n/languages/polish/kit.ts b/projects/i18n/languages/polish/kit.ts
@@ -7,7 +7,7 @@ export const TUI_POLISH_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Inna data...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Wybierz dzień`, `Wybierz zakres`],
+    mobileCalendarTexts: [`Wybierz dzień`, `Wybierz zakres`, `Wybierz dni`],
     range: [`od`, `do`],
     countTexts: [`Plus`, `Minus`],
     time: {

diff --git a/projects/i18n/languages/portuguese/kit.ts b/projects/i18n/languages/portuguese/kit.ts
@@ -7,7 +7,7 @@ export const TUI_PORTUGUESE_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Outra data...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Escolha o dia`, `Escolha o intervalo`],
+    mobileCalendarTexts: [`Escolha o dia`, `Escolha o intervalo`, `Escolha os dias`],
     range: [`de`, `para`],
     countTexts: [`Mais`, `Menos`],
     time: {

diff --git a/projects/i18n/languages/russian/kit.ts b/projects/i18n/languages/russian/kit.ts
@@ -7,7 +7,7 @@ export const TUI_RUSSIAN_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Другая дата...`,
     showAll: `Показать все`,
     hide: `Скрыть`,
-    mobileCalendarTexts: [`Выберите день`, `Выберите период`],
+    mobileCalendarTexts: [`Выберите день`, `Выберите период`, `Выбрать дни`],
     range: [`от`, `до`],
     countTexts: [`Плюс`, `Минус`],
     time: {

diff --git a/projects/i18n/languages/spanish/kit.ts b/projects/i18n/languages/spanish/kit.ts
@@ -7,7 +7,7 @@ export const TUI_SPANISH_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Otra fecha...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Seleccione el día`, `Seleccione un rango`],
+    mobileCalendarTexts: [`Seleccione el día`, `Seleccione un rango`, `Elige días`],
     range: [`desde`, `hasta`],
     countTexts: [`Más`, `Menos`],
     time: {

diff --git a/projects/i18n/languages/turkish/kit.ts b/projects/i18n/languages/turkish/kit.ts
@@ -7,7 +7,7 @@ export const TUI_TURKISH_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Farklı bir tarih...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Gün seç`, `Aralık seç`],
+    mobileCalendarTexts: [`Gün seç`, `Aralık seç`, `Günleri seçin`],
     range: [`dan`, `a`],
     countTexts: [`Artı`, `Eksi`],
     time: {

diff --git a/projects/i18n/languages/ukrainian/kit.ts b/projects/i18n/languages/ukrainian/kit.ts
@@ -7,7 +7,7 @@ export const TUI_UKRAINIAN_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Інша дата ...`,
     showAll: `Show all`,
     hide: `Hide`,
-    mobileCalendarTexts: [`Виберіть день`, `Виберіть період`],
+    mobileCalendarTexts: [`Виберіть день`, `Виберіть період`, `Виберіть дні`],
     range: [`від`, `до`],
     countTexts: [`Плюс`, `Мінус`],
     time: {

diff --git a/projects/i18n/languages/vietnamese/kit.ts b/projects/i18n/languages/vietnamese/kit.ts
@@ -7,7 +7,7 @@ export const TUI_VIETNAMESE_LANGUAGE_KIT: TuiLanguageKit = {
     otherDate: `Ngày khác...`,
     showAll: `Hiển thị tất cả`,
     hide: `Ẩn`,
-    mobileCalendarTexts: [`Chọn ngày`, `Chọn phạm vi`],
+    mobileCalendarTexts: [`Chọn ngày`, `Chọn phạm vi`, `Chọn ngày`],
     range: [`từ`, `đến`],
     countTexts: [`Cộng`, `Trừ`],
     time: {

diff --git a/projects/kit/components/input-date-multi/input-date-multi.component.ts b/projects/kit/components/input-date-multi/input-date-multi.component.ts
@@ -141,7 +141,8 @@ export class TuiInputDateMultiComponent
         @Inject(ChangeDetectorRef) cdr: ChangeDetectorRef,
         @Inject(Injector) private readonly injector: Injector,
         @Inject(TUI_IS_MOBILE) readonly isMobile: boolean,
-        @Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
+        @Inject(TuiDialogService)
+        private readonly dialogs: TuiDialogService,
         @Optional()
         @Inject(TUI_MOBILE_CALENDAR)
         private readonly mobileCalendar: Type<Record<string, any>> | null,
@@ -247,7 +248,7 @@ export class TuiInputDateMultiComponent
                     size: 'fullscreen',
                     closeable: false,
                     data: {
-                        single: false,
+                        multi: true,
                         min: this.min,
                         max: this.max,
                         disabledItemHandler: this.disabledItemHandler,

diff --git a/projects/kit/components/input-date-range/input-date-range.component.ts b/projects/kit/components/input-date-range/input-date-range.component.ts
@@ -133,7 +133,8 @@ export class TuiInputDateRangeComponent
         @Inject(ChangeDetectorRef) cdr: ChangeDetectorRef,
         @Inject(Injector) private readonly injector: Injector,
         @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean,
-        @Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
+        @Inject(TuiDialogService)
+        private readonly dialogs: TuiDialogService,
         @Optional()
         @Inject(TUI_MOBILE_CALENDAR)
         private readonly mobileCalendar: Type<Record<string, any>> | null,
@@ -290,7 +291,6 @@ export class TuiInputDateRangeComponent
                     size: 'fullscreen',
                     closeable: false,
                     data: {
-                        single: false,
                         min: this.maxLengthMapper(
                             this.computedMin,
                             this.value,

diff --git a/projects/kit/components/input-date/input-date.component.ts b/projects/kit/components/input-date/input-date.component.ts
@@ -118,7 +118,8 @@ export class TuiInputDateComponent
         @Inject(ChangeDetectorRef) cdr: ChangeDetectorRef,
         @Inject(Injector) private readonly injector: Injector,
         @Inject(TUI_IS_MOBILE) readonly isMobile: boolean,
-        @Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
+        @Inject(TuiDialogService)
+        private readonly dialogs: TuiDialogService,
         @Optional()
         @Inject(TUI_MOBILE_CALENDAR)
         private readonly mobileCalendar: Type<Record<string, any>> | null,

diff --git a/projects/kit/interfaces/mobile-calendar-data.ts b/projects/kit/interfaces/mobile-calendar-data.ts
@@ -2,7 +2,8 @@ import {TuiBooleanHandler, TuiDay} from '@taiga-ui/cdk';
 
 export interface TuiMobileCalendarData {
     disabledItemHandler?: TuiBooleanHandler<TuiDay>;
-    max?: TuiDay;
-    min?: TuiDay;
+    max?: TuiDay | null;
+    min?: TuiDay | null;
+    multi?: boolean;
     single?: boolean;
 }