Skip to content

Commit

Permalink
Merge branch 'dev.admin/date'
Browse files Browse the repository at this point in the history
  • Loading branch information
@caixw
caixw committed Oct 24, 2024
2 parents 358cbbd + a1398e0 commit 0498c43
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 126 deletions.
90 changes: 47 additions & 43 deletions admin/src/components/form/date/panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,14 @@
//
// SPDX-License-Identifier: MIT

import { For, mergeProps, Show } from 'solid-js';
import { createMemo, For, mergeProps, Show } from 'solid-js';

import { useApp } from '@/app/context';
import { Button } from '@/components/button';
import { FieldBaseProps } from '@/components/form';
import { Accessor, FieldAccessor } from '@/components/form/access';
import { Choice } from '@/components/form/choice';
import {
hoursOptions, minutesOptions, Month,
monthsLocales,
Week, weekDay,
weekDays,
weeks, weeksLocales
} from './utils';
import { hoursOptions, minutesOptions, Week, weekDay, weekDays, weeks } from './utils';

export interface Props extends FieldBaseProps {
/**
Expand Down Expand Up @@ -50,6 +44,8 @@ export const presetProps: Partial<Props> = {
weekBase: 0,
};

const weekBase = new Date('2024-10-20'); // 这是星期天，作为计算星期的基准日期。

/**
* 日期选择的面板
*/
Expand All @@ -65,48 +61,56 @@ export default function (props: Props) {
ac.setValue(dt.getTime());
};

const titleFormat = createMemo(() => {
return ctx.locale().dateTimeFormat({ year: 'numeric', month: '2-digit' });
});

const weekFormat = createMemo(() => {
return ctx.locale().dateTimeFormat({ weekday: 'narrow' });
});

const Panel = (p: { dt: Date, ha: Accessor<number>, ma: Accessor<number> }) => {
return <>

<div class="title">
<div>
<Button icon rounded kind='flat' title={ctx.locale().t('_i.date.prevYear')} aria-label={ctx.locale().t('_i.date.prevYear')} onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setFullYear(p.dt.getFullYear()-1);
setValue(dt);
}}>keyboard_double_arrow_left</Button>
<Button icon rounded kind='flat' title={ctx.locale().t('_i.date.prevMonth')} aria-label={ctx.locale().t('_i.date.prevMonth')} onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setMonth(p.dt.getMonth()-1);
setValue(dt);
}}>chevron_left</Button>
<Button icon rounded kind='flat' title={ctx.locale().t('_i.date.prevYear')} aria-label={ctx.locale().t('_i.date.prevYear')}
onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setFullYear(p.dt.getFullYear()-1);
setValue(dt);
}}>keyboard_double_arrow_left</Button>
<Button icon rounded kind='flat' title={ctx.locale().t('_i.date.prevMonth')} aria-label={ctx.locale().t('_i.date.prevMonth')}
onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setMonth(p.dt.getMonth()-1);
setValue(dt);
}}>chevron_left</Button>
</div>

<div>
<span>{p.dt.getFullYear()}</span>
/
<span>{ctx.locale().t(monthsLocales.get(p.dt.getMonth() as Month) as any)}</span>
</div>
<div>{titleFormat().format(p.dt)}</div>

<div>
<Button icon rounded kind="flat" title={ctx.locale().t('_i.date.nextMonth')} aria-label={ctx.locale().t('_i.date.nextMonth')} onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setMonth(p.dt.getMonth()+1);
setValue(dt);
}}>chevron_right</Button>
<Button icon rounded kind="flat" title={ctx.locale().t('_i.date.nextYear')} aria-label={ctx.locale().t('_i.date.nextYear')} onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setFullYear(p.dt.getFullYear()+1);
setValue(dt);
}}>keyboard_double_arrow_right</Button>
<Button icon rounded kind="flat" title={ctx.locale().t('_i.date.nextMonth')} aria-label={ctx.locale().t('_i.date.nextMonth')}
onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setMonth(p.dt.getMonth()+1);
setValue(dt);
}}>chevron_right</Button>
<Button icon rounded kind="flat" title={ctx.locale().t('_i.date.nextYear')} aria-label={ctx.locale().t('_i.date.nextYear')}
onClick={()=>{
if (props.readonly || props.disabled) { return; }

const dt = new Date(ac.getValue());
dt.setFullYear(p.dt.getFullYear()+1);
setValue(dt);
}}>keyboard_double_arrow_right</Button>
</div>
</div>

Expand All @@ -125,14 +129,14 @@ export default function (props: Props) {
<tr>
<For each={weeks}>
{(w) => (
<th>{ctx.locale().t(weeksLocales.get(weekDay(w, props.weekBase)) as any)}</th>
<th>{weekFormat().format((new Date(weekBase)).setDate(weekBase.getDate()+weekDay(w, props.weekBase)))}</th>
)}
</For>
</tr>
</thead>

<tbody>
<For each={weekDays(p.dt, props.weekBase as Week)}>
<For each={weekDays(p.dt, props.weekBase!)}>
{(week) => (
<tr>
<For each={week}>
Expand Down
13 changes: 7 additions & 6 deletions admin/src/components/form/date/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.c--date-activator {
.activator-container {
@apply rounded-md border border-[var(--fg-low)] flex items-center px-2 py-1 cursor-pointer outline-none min-w-[300px];
@apply rounded-md border border-[var(--fg-low)] flex items-center px-2 py-1 cursor-pointer outline-none min-w-[270px];
@apply has-[:focus:enabled]:border-[var(--fg-high)] has-[:hover:enabled]:border-[var(--fg-high)];

.input {
Expand All @@ -29,10 +29,10 @@
}

.c--date-panel {
@apply border border-palette-fg-low rounded-md text-center bg-[var(--bg)] text-[var(--fg)] p-2 box-border;
@apply border border-palette-fg-low rounded-md text-center bg-[var(--bg)] text-[var(--fg)] p-2 box-border flex flex-col gap-1;

.title {
@apply flex justify-between;
@apply flex justify-between items-center;
}

table {
Expand All @@ -47,7 +47,7 @@
@apply p-1;

button {
@apply border border-transparent rounded-full text-sm p-1 min-w-8 items-center justify-center;
@apply border border-transparent outline-none rounded-full text-sm p-1 min-w-7 items-center justify-center;
}

button.selected {
Expand All @@ -61,7 +61,7 @@
}

.actions {
@apply flex justify-between items-center mt-2 gap-x-1;
@apply flex justify-between items-center gap-x-1;

.time {
@apply w-48 flex items-center;
Expand All @@ -77,7 +77,8 @@
th,
td {
button:enabled {
@apply hover:bg-palette-bg-high;
@apply hover:bg-palette-bg-high hover:border-palette-bg-low;
@apply focus:bg-palette-bg-high focus:border-palette-bg-low;
}
}

Expand Down
2 changes: 1 addition & 1 deletion admin/src/components/form/date/utils.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import { expect, test } from 'vitest';

import { monthDays, weekDay, getWeekDays } from './utils';
import { getWeekDays, monthDays, weekDay } from './utils';

test('add weekDay', () => {
expect(weekDay(0, 0)).toEqual(0);
Expand Down
50 changes: 12 additions & 38 deletions admin/src/components/form/date/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
//
// SPDX-License-Identifier: MIT

import { Options } from '../types';
import { MessagesKey } from '@/messages';
import { Options } from '@/components/form/types';

export const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as const;

Expand Down Expand Up @@ -34,24 +33,24 @@ export function weekDay(base: Week, delta?: number): Week {
/**
* 计算指定月份的天数范围
*
* @param week 每周的起始；
* @param weekStart 每周的起始；
* @param date 需要计算的月份；
* @returns 返回的元组列表，每个元组包含以下四个字段：
* - 0 boolean 表示是否为当前月份;
* - 1 Month 月份；
* - 2 该月在当前面板上的起始日期；
* - 3 该月在当前面板上的结束日期；
*/
export function monthDays(date: Date, week: Week): Array<[boolean, Month, number, number]> {
export function monthDays(date: Date, weekStart: Week): Array<[boolean, Month, number, number]> {
// 当前月的第一天和最后一天
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
const lastDay = new Date(date.getFullYear(), date.getMonth()+1, 0);

// 处理前一个月份的数据
let prev: [boolean, Month, number, number] = [false, 0, 0, 0];
const firstWeekDay = firstDay.getDay() as Week;
if (week !== firstWeekDay) {
let days = firstWeekDay - week-1; // 需要拿到前一个月需要添加的天数
if (weekStart !== firstWeekDay) {
let days = firstWeekDay - weekStart-1; // 需要拿到前一个月需要添加的天数
if (days < 0) {
days = weeks.length + days;
}
Expand All @@ -63,8 +62,8 @@ export function monthDays(date: Date, week: Week): Array<[boolean, Month, number
// 处理后一个月份的数据
let next: [boolean, Month, number, number] = [false, 0, 0, 0];
const lastWeekDay = lastDay.getDay() as Week;
if (weekDay(week,-1) !== lastWeekDay) {
let days = week - 1 - lastWeekDay;
if (weekDay(weekStart,-1) !== lastWeekDay) {
let days = weekStart - 1 - lastWeekDay;
if (days <= 0) {
days = weeks.length + days;
}
Expand Down Expand Up @@ -96,43 +95,18 @@ export function getWeekDays(m: Array<[boolean, Month, number, number]>): Array<A

/**
* 将 date 所在的月份以及前后一星期以 7 天为一组进行分组
*
*
* @param date 需要计算的月份；
* @param week 每周的起始；
* @param weekStart 每周的起始；
* @returns 以 7 为一组的数据，每个元素包含以下三个字段：
* - 0 是否为当前月份；
* - 0 是否为禁用；
* - 1 月份；
* - 2 在当前月份中的日期；
*/
export function weekDays(date: Date, week: Week): Array<Array<[boolean, Month, number]>> {
return getWeekDays(monthDays(date, week));
export function weekDays(date: Date, weekStart: Week): Array<Array<[boolean, Month, number]>> {
return getWeekDays(monthDays(date, weekStart));
}

export const monthsLocales = new Map<Month, MessagesKey>([
[0, '_i.date.january'],
[1, '_i.date.february'],
[2, '_i.date.march'],
[3, '_i.date.april'],
[4, '_i.date.may'],
[5, '_i.date.june'],
[6, '_i.date.july'],
[7, '_i.date.august'],
[8, '_i.date.september'],
[9, '_i.date.october'],
[10, '_i.date.november'],
[11, '_i.date.december'],
]);

export const weeksLocales = new Map<Week, MessagesKey>([
[1, '_i.date.monday'],
[2, '_i.date.tuesday'],
[3, '_i.date.wednesday'],
[4, '_i.date.thursday'],
[5, '_i.date.friday'],
[6, '_i.date.saturday'],
[0, '_i.date.sunday']
]);

export const hoursOptions: Options<number> = [
[0, '00'],
[1, '01'],
Expand Down
19 changes: 0 additions & 19 deletions admin/src/messages/cmn-Hans.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,25 +143,6 @@ const messages: Messages = {
items: '{ start }-{ end } / { count }'
},
date: {
monday: '一',
tuesday: '二',
wednesday: '三',
thursday: '四',
friday: '五',
saturday: '六',
sunday: '日',
january: '一月',
february: '二月',
march: '三月',
april: '四月',
may: '五月',
june: '六月',
july: '七月',
august: '八月',
september: '九月',
october: '十月',
november: '十一月',
december: '十二月',
today: '今日',
now: '现在',
prevMonth: '上个月',
Expand Down
19 changes: 0 additions & 19 deletions admin/src/messages/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,25 +141,6 @@ const messages = {
items: '{ start }-{ end } of { count }'
},
date: {
monday: 'Mon',
tuesday: 'Tue',
wednesday: 'Wed',
thursday: 'Thu',
friday: 'Fri',
saturday: 'Sat',
sunday: 'Sun',
january: 'Jan',
february: 'Feb',
march: 'Mar',
april: 'Apr',
may: 'May',
june: 'Jun',
july: 'Jul',
august: 'Aug',
september: 'Sep',
october: 'Oct',
november: 'Nov',
december: 'Dec',
today: 'today',
now: 'now',
prevMonth: 'prev month',
Expand Down

0 comments on commit 0498c43

Please sign in to comment.