85805202-86e6-43e8-b885-bc8f4f60d123

Committed 13 Feb 2025 10:03AM UTC coverage: 90.223% (-0.05%) from 90.271%

Build # 85805202-86e6-43e8-b885-bc8f4f60d123

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat(uitl): support timezone #TINFR-1362 (#3287)

Run Details

5584 of 6849 branches covered (81.53%)

Branch coverage included in aggregate %.

115 of 117 new or added lines in 17 files covered. (98.29%)

44 existing lines in 8 files now uncovered.

13324 of 14108 relevant lines covered (94.44%)

994.11 hits per line

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

93.2

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

import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, OnChanges, Output, inject } 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',
    standalone: true,
    imports: [NgClass, DateTableCell]
})
export class DateTable extends CalendarTable implements OnChanges {
    private dateHelper = inject(DateHelperService);
    private datePickerConfigService = inject(ThyDatePickerConfigService);

    @Output() readonly dayHover = new EventEmitter<TinyDate>(); // Emitted when hover on a day by mouse enter

    constructor() {
        super();
    }

    private chooseDate(value: TinyDate): void {
        // Only change date not change time
        const date = new TinyDate(
            TinyDate.createDateInTimeZone(
                value.getFullYear(),
                value.getMonth(),
                value.getDate(),
                this.activeDate?.getHours(),
                this.activeDate?.getMinutes(),
                this.activeDate?.getSeconds()
            )
        );
        this.activeDate = 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) {
            return this.prefixCls === 'thy-calendar-full' ? this.locale().fullWeekFormat : this.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;
                }

                if (this.selectedValue?.length > 0) {
                    const [startSelected, endSelected] = this.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);
            }

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

            dateRows.push(row);
        }

        return dateRows;
    }

    addCellProperty(cell: DateCell, date: TinyDate): void {
        if (this.selectedValue?.length > 0) {
            const [startSelected, endSelected] = this.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);
        }
        cell.isLastMonthCell = date.isBeforeMonth(this.activeDate);
        cell.isNextMonthCell = date.isAfterMonth(this.activeDate);
        cell.isToday = date.isToday();
        cell.isDisabled = !!this.disabledDate?.(date.nativeDate);
        cell.classMap = this.getClassMap(cell);
    }

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

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

atinc / ngx-tethys / 85805202-86e6-43e8-b885-bc8f4f60d123

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