react_ui: 休暇休業作成時の運用開始日フィールド

Changes

3 changed files (+43/-15)

• packages/react_ui/src/lib.ts
  • @@ -2,6 +2,7 @@ // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
    // SPDX-License-Identifier: AGPL-3.0-only import "@radix-ui/themes/styles.css"; + import "./radix_workaround.css"; export * from "./components/ThemeProvider.tsx"; export { ThirdPartyNoticeProvider } from "./components/CopyrightNotice.ts";
• packages/react_ui/src/pages/:workspace/leave-definitions/new/page.tsx
  • @@ -8,7 +8,7 @@ import { Button, Checkbox, Flex, Text, TextField } from "@radix-ui/themes";
    import { CreateLeaveDefinitionRequestSchema } from "@yamori/proto/yamori/workspace/v1/create_leave_definition_request_pb.js"; import { CreateLeaveDefinitionResponseSchema } from "@yamori/proto/yamori/workspace/v1/create_leave_definition_response_pb.js"; import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js"; - import { type FC, use } from "react"; + import { type FC, use, useMemo } from "react"; import { Controller, useForm } from "react-hook-form"; import * as Empty from "../../../../components/Empty.ts";
  • @@ -32,25 +32,25 @@ const navigation = use(NavigationContext);
    const toast = useToast(); - const now = new Date(); + const startAtDefaultValue = useMemo<string>(() => { + const now = new Date(); + + const yyyy = now.getFullYear().toString(10).padStart(4, "0"); + const mm = (now.getMonth() + 1).toString(10).padStart(2, "0"); + const dd = now.getDate().toString(10).padStart(2, "0"); + + return `${yyyy}-${mm}-${dd}`; + }, []); const form = useForm<{ displayName: string; isWorkerDeemedToBeWorked: boolean; - startAt: { - year: number; - month: number; - day: number; - }; + startAt: string; }>({ defaultValues: { displayName: "", isWorkerDeemedToBeWorked: true, - startAt: { - year: now.getFullYear(), - month: now.getMonth() + 1, - day: now.getDate(), - }, + startAt: startAtDefaultValue, }, mode: "onBlur", });
  • @@ -109,13 +109,19 @@ return (
    <Flex asChild direction="column" gap="5" mt="2"> <form onSubmit={form.handleSubmit((values) => { + const startAt = new Date(values.startAt); + creation.mutate({ workspaceId: workspace.id, leaveDefinition: { displayName: values.displayName, revisions: [ { - startAt: values.startAt, + startAt: { + year: startAt.getFullYear(), + month: startAt.getMonth() + 1, + day: startAt.getDate(), + }, snapshot: { isWorkerDeemedToBeWorked: values.isWorkerDeemedToBeWorked, },
  • @@ -193,8 +199,18 @@ 出勤したものとみなします。
    </FormField.Description> </FormField.Root> <FormField.Root> - <FormField.Label htmlFor="startAt">運用開始日</FormField.Label> - {/* TODO: Date picker */} + <FormField.Label htmlFor="start_at_id">運用開始日</FormField.Label> + <TextField.Root + id="start_at_id" + type="date" + disabled={creation.isPending} + color={form.formState.errors.startAt ? "red" : undefined} + aria-invalid={!!form.formState.errors.startAt} + {...form.register("startAt", { + required: "運用開始日は必須です", + })} + style={{ alignSelf: "flex-start" }} + /> <FormField.Description error={form.formState.errors.startAt?.message}> この休暇・休業をいつの勤怠記録上から選択できるようにするか指定します。 </FormField.Description>
• packages/react_ui/src/radix_workaround.css (new)
  • @@ -0,0 +1,11 @@
    + /* + * Radix UI でバグが修正されるまでの暫定対処。 + * + * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: AGPL-3.0-only + */ + + /* <https://github.com/radix-ui/themes/issues/527> */ + input[type="date"].rt-reset { + white-space: unset; + }