atinc / ngx-tethys / #96

Committed 12 Aug 2025 06:20AM UTC coverage: 90.341% (+0.02%) from 90.324%

Build # #96

Build Type

push

Committed by

Commit Message

refactor(date-picker): migrate to signal for date-picker #TINFR-1463 (#3513)

* refactor(date-picker): migrate to signal for calendar header

* refactor(date-picker): migrate to signal for calendar footer

* refactor(date-picker): migrate to signal for calendar table

* refactor(date-picker): migrate to signal for date table cell

* refactor(date-picker): migrate to signal for date carousel

* refactor(date-picker): migrate to signal for inner-popup and date-popup

* refactor(date-picker): migrate to signal for pickers

Run Details

5531 of 6813 branches covered (81.18%)

Branch coverage included in aggregate %.

342 of 367 new or added lines in 20 files covered. (93.19%)

66 existing lines in 11 files now uncovered.

13969 of 14772 relevant lines covered (94.56%)

904.1 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.75

/src/date-picker/lib/date/date-table.component.ts

import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, output } from '@angular/core';
import { TinyDate, valueFunctionProp } from 'ngx-tethys/util';
import { DateHelperService } from '../../date-helper.service';
import { ThyDatePickerConfigService } from '../../date-picker.service';
import { CalendarTable } from '../calendar/calendar-table.component';
import { DateTableCell } from './date-table-cell.component';
import { DateBodyRow, DateCell } from './types';

/**
 * @private
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'date-table',
    exportAs: 'dateTable',
    templateUrl: 'date-table.component.html',
    imports: [NgClass, DateTableCell]
})
export class DateTable extends CalendarTable {
    private dateHelper = inject(DateHelperService);

    private datePickerConfigService = inject(ThyDatePickerConfigService);

    readonly dayHover = output<TinyDate>(); // Emitted when hover on a day by mouse enter

    constructor() {
        super();
    }

    private chooseDate(value: TinyDate): void {
        // Only change date not change time
        const activeDate = this.activeDate();
        const timeZone = this.timeZone();
        const date = new TinyDate(
            TinyDate.createDateInTimeZone(
                value.getFullYear(),
                value.getMonth(),
                value.getDate(),
                activeDate?.getHours(),
                activeDate?.getMinutes(),
                activeDate?.getSeconds(),
                timeZone
            ),
            timeZone
        );
        this.activeDate.set(date.clone());
        this.valueChange.emit(date);
    }

    makeHeadRow(): DateCell[] {
        const weekDays: DateCell[] = [];
        const start = this.activeDate().calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
        for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
            const day = start.addDays(colIndex);
            weekDays[colIndex] = {
                title: this.dateHelper.format(day.nativeDate, this.dateHelper.relyOnDatePipe ? 'E' : 'ddd'),
                content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()),
                isSelected: false,
                isDisabled: false,
                onClick(): void {},
                onMouseEnter(): void {}
            };
        }
        return weekDays;
    }

    private getVeryShortWeekFormat(): string {
        if (this.dateHelper.relyOnDatePipe) {
            const locale = this.locale();
            const prefixCls = this.prefixCls();
            return prefixCls === 'thy-calendar-full' ? locale.fullWeekFormat : locale.weekFormat;
        }
        return 'dd';
    }

    makeBodyRows(): DateBodyRow[] {
        const dateRows: DateBodyRow[] = [];
        const firstDayOfMonth = this.activeDate().calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
        for (let week = 0; week < this.MAX_ROW; week++) {
            const weekStart = firstDayOfMonth.addDays(week * 7);
            const row: DateBodyRow = {
                isActive: false,
                isCurrent: false,
                dateCells: [],
                year: weekStart.getYear()
            };

            for (let day = 0; day < 7; day++) {
                const date = weekStart.addDays(day);
                const dateFormat = this.dateHelper.relyOnDatePipe ? 'longDate' : 'YYYY-MM-DD';
                const title = this.dateHelper.format(date.nativeDate, dateFormat);
                const label = this.dateHelper.format(date.nativeDate, this.dateHelper.relyOnDatePipe ? 'dd' : 'DD');

                const cell: DateCell = {
                    value: date.nativeDate,
                    label: label,
                    isSelected: false,
                    isDisabled: false,
                    isToday: false,
                    title: title,
                    dateCellRender: valueFunctionProp(this.cellRender(), date),
                    content: `${date.getDate()}`,
                    onClick: () => this.chooseDate(date),
                    onMouseEnter: () => this.dayHover.emit(date)
                };
                this.addCellProperty(cell, date);

                if (this.showWeek() && !row.weekNum) {
                    row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);
                }

                if (date.isToday()) {
                    cell.isToday = true;
                    row.isCurrent = true;
                }

                const selectedValue = this.selectedValue();
                if (selectedValue?.length > 0) {
                    const [startSelected, endSelected] = selectedValue;
                    if (date.isSameDay(startSelected)) {
                        row.isActive = true;
                    }
                    if (date.isSameDay(endSelected)) {
                        row.isActive = true;
                    }
                } else if (date.isSameDay(this.value())) {
                    row.isActive = true;
                }

                row.dateCells.push(cell);
            }

            const prefixCls = this.prefixCls();
            row.classMap = {
                [`${prefixCls}-current-week`]: row.isCurrent,
                [`${prefixCls}-active-week`]: row.isActive
            };

            dateRows.push(row);
        }

        return dateRows;
    }

    addCellProperty(cell: DateCell, date: TinyDate): void {
        const selectedValue = this.selectedValue();
        if (selectedValue?.length > 0) {
            const [startSelected, endSelected] = selectedValue;
            if (startSelected?.isSameDay(date)) {
                cell.isSelected = true;
            }
            if (endSelected?.isSameDay(date)) {
                cell.isSelected = true;
            }
            cell.isStartSingle = startSelected && !endSelected;
            cell.isEndSingle = !startSelected && !!endSelected;
            cell.isInRange = startSelected?.isBeforeDay(date) && date.isBeforeDay(endSelected);
        } else {
            cell.isSelected = date.isSameDay(this.value());
        }

        const activeDate = this.activeDate();
        cell.isLastMonthCell = date.isBeforeMonth(activeDate);
        cell.isNextMonthCell = date.isAfterMonth(activeDate);
        cell.isToday = date.isToday();
        cell.isDisabled = !!this.disabledDate()?.(date.nativeDate);
        cell.classMap = this.getClassMap(cell);
    }

    getClassMap(cell: DateCell): { [key: string]: boolean } {
        const prefixCls = this.prefixCls();
        return {
            [`${prefixCls}-cell`]: true,
            [`${prefixCls}-today`]: cell.isToday,
            [`${prefixCls}-last-month-cell`]: cell.isLastMonthCell,
            [`${prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
            [`${prefixCls}-selected-day`]: cell.isSelected,
            [`${prefixCls}-disabled-cell`]: cell.isDisabled,
            [`${prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
            [`${prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
            [`${prefixCls}-in-range-cell`]: !!cell.isInRange
        };
    }
}

1	import { NgClass } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, inject, output } from '@angular/core';
3	import { TinyDate, valueFunctionProp } from 'ngx-tethys/util';
4	import { DateHelperService } from '../../date-helper.service';
5	import { ThyDatePickerConfigService } from '../../date-picker.service';
6	import { CalendarTable } from '../calendar/calendar-table.component';
7	import { DateTableCell } from './date-table-cell.component';
8	import { DateBodyRow, DateCell } from './types';
9
10	/**
11	* @private
12	*/
13	@Component({
14	changeDetection: ChangeDetectionStrategy.OnPush,	1✔
15	// eslint-disable-next-line @angular-eslint/component-selector
16	selector: 'date-table',	190✔
17	exportAs: 'dateTable',	190✔
18	templateUrl: 'date-table.component.html',	190✔
19	imports: [NgClass, DateTableCell]	190✔
20	})
21	export class DateTable extends CalendarTable {
22	private dateHelper = inject(DateHelperService);
23		30✔
24	private datePickerConfigService = inject(ThyDatePickerConfigService);	30✔
25		30✔
26	readonly dayHover = output<TinyDate>(); // Emitted when hover on a day by mouse enter	30✔
27		30✔
28	constructor() {
29	super();
30	}	527✔
31		527✔
32	private chooseDate(value: TinyDate): void {	527✔
33	// Only change date not change time	3,689✔
34	const activeDate = this.activeDate();	3,689✔
35	const timeZone = this.timeZone();	3,689!
36	const date = new TinyDate(
37	TinyDate.createDateInTimeZone(
38	value.getFullYear(),
39	value.getMonth(),
40	value.getDate(),
41	activeDate?.getHours(),
42	activeDate?.getMinutes(),
43	activeDate?.getSeconds(),	527✔
44	timeZone
45	),
46	timeZone	3,689!
47	);	3,689✔
48	this.activeDate.set(date.clone());	3,689✔
49	this.valueChange.emit(date);	3,689✔
50	}
UNCOV 51		×
52	makeHeadRow(): DateCell[] {
53	const weekDays: DateCell[] = [];
54	const start = this.activeDate().calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });	527✔
55	for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {	527✔
56	const day = start.addDays(colIndex);	527✔
57	weekDays[colIndex] = {	3,162✔
58	title: this.dateHelper.format(day.nativeDate, this.dateHelper.relyOnDatePipe ? 'E' : 'ddd'),	3,162✔
59	content: this.dateHelper.format(day.nativeDate, this.getVeryShortWeekFormat()),
60	isSelected: false,
61	isDisabled: false,
62	onClick(): void {},
63	onMouseEnter(): void {}
64	};	3,162✔
65	}	22,134✔
66	return weekDays;	22,134!
67	}	22,134✔
68		22,134!
69	private getVeryShortWeekFormat(): string {	22,134✔
70	if (this.dateHelper.relyOnDatePipe) {
71	const locale = this.locale();
72	const prefixCls = this.prefixCls();
73	return prefixCls === 'thy-calendar-full' ? locale.fullWeekFormat : locale.weekFormat;
74	}
75	return 'dd';
76	}
77
78	makeBodyRows(): DateBodyRow[] {	30✔
79	const dateRows: DateBodyRow[] = [];	×
80	const firstDayOfMonth = this.activeDate().calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
81	for (let week = 0; week < this.MAX_ROW; week++) {	22,134✔
82	const weekStart = firstDayOfMonth.addDays(week * 7);	22,134✔
83	const row: DateBodyRow = {	96✔
84	isActive: false,
85	isCurrent: false,	22,134✔
86	dateCells: [],	284✔
87	year: weekStart.getYear()	284✔
88	};
89		22,134✔
90	for (let day = 0; day < 7; day++) {	22,134✔
91	const date = weekStart.addDays(day);	4,074✔
92	const dateFormat = this.dateHelper.relyOnDatePipe ? 'longDate' : 'YYYY-MM-DD';	4,074✔
93	const title = this.dateHelper.format(date.nativeDate, dateFormat);	49✔
94	const label = this.dateHelper.format(date.nativeDate, this.dateHelper.relyOnDatePipe ? 'dd' : 'DD');
95		4,074✔
96	const cell: DateCell = {	34✔
97	value: date.nativeDate,
98	label: label,
99	isSelected: false,	18,060✔
100	isDisabled: false,	126✔
101	isToday: false,
102	title: title,	22,134✔
103	dateCellRender: valueFunctionProp(this.cellRender(), date),
104	content: `${date.getDate()}`,	3,162✔
105	onClick: () => this.chooseDate(date),	3,162✔
106	onMouseEnter: () => this.dayHover.emit(date)
107	};
108	this.addCellProperty(cell, date);
109		3,162✔
110	if (this.showWeek() && !row.weekNum) {
111	row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);	527✔
112	}
113
114	if (date.isToday()) {	22,134✔
115	cell.isToday = true;	22,134✔
116	row.isCurrent = true;	4,074✔
117	}	4,074✔
118		49✔
119	const selectedValue = this.selectedValue();
120	if (selectedValue?.length > 0) {	4,074✔
121	const [startSelected, endSelected] = selectedValue;	34✔
122	if (date.isSameDay(startSelected)) {
123	row.isActive = true;	4,074✔
124	}	4,074!
125	if (date.isSameDay(endSelected)) {	4,074✔
126	row.isActive = true;
127	}
128	} else if (date.isSameDay(this.value())) {	18,060✔
129	row.isActive = true;
130	}	22,134✔
131		22,134✔
132	row.dateCells.push(cell);	22,134✔
133	}	22,134✔
134		22,134✔
135	const prefixCls = this.prefixCls();	22,134✔
136	row.classMap = {
137	[`${prefixCls}-current-week`]: row.isCurrent,
138	[`${prefixCls}-active-week`]: row.isActive	22,134✔
139	};	22,134✔
140
141	dateRows.push(row);
142	}
143
144	return dateRows;
145	}
146
147	addCellProperty(cell: DateCell, date: TinyDate): void {
148	const selectedValue = this.selectedValue();
149	if (selectedValue?.length > 0) {
150	const [startSelected, endSelected] = selectedValue;
151	if (startSelected?.isSameDay(date)) {	1✔
152	cell.isSelected = true;	1✔
153	}
154	if (endSelected?.isSameDay(date)) {
155	cell.isSelected = true;
156	}	1✔
157	cell.isStartSingle = startSelected && !endSelected;
158	cell.isEndSingle = !startSelected && !!endSelected;
159	cell.isInRange = startSelected?.isBeforeDay(date) && date.isBeforeDay(endSelected);
160	} else {
161	cell.isSelected = date.isSameDay(this.value());
162	}
163
164	const activeDate = this.activeDate();
165	cell.isLastMonthCell = date.isBeforeMonth(activeDate);
166	cell.isNextMonthCell = date.isAfterMonth(activeDate);
167	cell.isToday = date.isToday();
168	cell.isDisabled = !!this.disabledDate()?.(date.nativeDate);
169	cell.classMap = this.getClassMap(cell);
170	}
171
172	getClassMap(cell: DateCell): { [key: string]: boolean } {
173	const prefixCls = this.prefixCls();
174	return {
175	[`${prefixCls}-cell`]: true,
176	[`${prefixCls}-today`]: cell.isToday,
177	[`${prefixCls}-last-month-cell`]: cell.isLastMonthCell,
178	[`${prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
179	[`${prefixCls}-selected-day`]: cell.isSelected,
180	[`${prefixCls}-disabled-cell`]: cell.isDisabled,
181	[`${prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
182	[`${prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
183	[`${prefixCls}-in-range-cell`]: !!cell.isInRange
184	};
185	}
186	}

atinc / ngx-tethys / #96

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous