react_ui: 休暇休業定義の編集メニュー メニュー内容はどれもまだ利用できないが、将来的な操作イメージを 持てるので。必要な操作の洗い出しにもなる。

Changes

1 changed files (+132/-99)

• packages/react_ui/src/pages/:workspace/leave-definitions/ListItem.tsx
  • @@ -1,8 +1,17 @@
    // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only - import { CardStackPlusIcon } from "@radix-ui/react-icons"; - import { Badge, Box, Code, DataList, Flex, Select } from "@radix-ui/themes"; + import { CardStackPlusIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"; + import { + Badge, + Box, + Code, + DataList, + DropdownMenu, + Flex, + IconButton, + Select, + } from "@radix-ui/themes"; import { type Leave } from "@yamori/proto/yamori/work_record/v1/leave_pb.js"; import { type LeaveRevision } from "@yamori/proto/yamori/work_record/v1/leave_revision_pb.js"; import { type Date } from "@yamori/proto/yamori/type/v1/date_pb.js";
  • @@ -36,108 +45,132 @@ () => leaveDefinition.currentRevision ?? leaveDefinition.revisions[0] ?? null,
    ); return ( - <Box role="listitem"> - <DataList.Root orientation="vertical"> - <DataList.Item> - <DataList.Label>種別名</DataList.Label> - <DataList.Value>{leaveDefinition.displayName}</DataList.Value> - </DataList.Item> - {leaveDefinition.revisions.length > 0 && ( + <Flex role="listitem"> + <Box asChild flexGrow="1" flexShrink="1"> + <DataList.Root orientation="vertical"> <DataList.Item> - <DataList.Label>バージョン</DataList.Label> - <DataList.Value> - <Select.Root - defaultValue={revision?.revisionId?.value} - onValueChange={(id) => { - const match = leaveDefinition.revisions.find( - (rev) => rev.revisionId?.value === id, - ); - if (match) { - setRevision(match); - } - }} - > - <Select.Trigger /> - <Select.Content> - {leaveDefinition.revisions.map((rev) => { - if (!rev.revisionId || !rev.startAt) { - return null; + <DataList.Label>種別名</DataList.Label> + <DataList.Value>{leaveDefinition.displayName}</DataList.Value> + </DataList.Item> + {leaveDefinition.revisions.length > 0 && ( + <DataList.Item> + <DataList.Label>バージョン</DataList.Label> + <DataList.Value> + <Select.Root + defaultValue={revision?.revisionId?.value} + onValueChange={(id) => { + const match = leaveDefinition.revisions.find( + (rev) => rev.revisionId?.value === id, + ); + if (match) { + setRevision(match); } + }} + > + <Select.Trigger /> + <Select.Content> + {leaveDefinition.revisions.map((rev) => { + if (!rev.revisionId || !rev.startAt) { + return null; + } - return ( - <Select.Item - key={rev.revisionId.value} - value={rev.revisionId.value} - > - <DateDisplay date={rev.startAt} />~ - </Select.Item> - ); - })} - </Select.Content> - </Select.Root> - </DataList.Value> - </DataList.Item> - )} - {revision && ( - <DataList.Item> - <DataList.Label>年次有給休暇付与の出勤率計算時の扱い</DataList.Label> - <DataList.Value> - <Flex mt="1" align="center" gap="1"> - {revision.snapshot?.isWorkerDeemedToBeWorked ? ( - <HelpDialog.Root> - <Badge color="grass"> - <CardStackPlusIcon /> - 出勤扱い - </Badge> - <HelpDialog.Trigger>出勤扱い休暇休業の説明</HelpDialog.Trigger> - <HelpDialog.Content> - <HelpDialog.Title>出勤扱いの休暇・休業</HelpDialog.Title> - <HelpDialog.Description> - 年次有給休暇を付与する際の出勤率計算時、この休暇・休業を行った日は出勤したものとして扱います。 - </HelpDialog.Description> + return ( + <Select.Item + key={rev.revisionId.value} + value={rev.revisionId.value} + > + <DateDisplay date={rev.startAt} />~ + </Select.Item> + ); + })} + </Select.Content> + </Select.Root> + </DataList.Value> + </DataList.Item> + )} + {revision && ( + <DataList.Item> + <DataList.Label>年次有給休暇付与の出勤率計算時の扱い</DataList.Label> + <DataList.Value> + <Flex mt="1" align="center" gap="1"> + {revision.snapshot?.isWorkerDeemedToBeWorked ? ( + <HelpDialog.Root> + <Badge color="grass"> + <CardStackPlusIcon /> + 出勤扱い + </Badge> + <HelpDialog.Trigger>出勤扱い休暇休業の説明</HelpDialog.Trigger> + <HelpDialog.Content> + <HelpDialog.Title>出勤扱いの休暇・休業</HelpDialog.Title> + <HelpDialog.Description> + 年次有給休暇を付与する際の出勤率計算時、この休暇・休業を行った日は出勤したものとして扱います。 + </HelpDialog.Description> - <HelpDialog.Paragraph> - 79 日出勤した所定労働日 100 日の労働者が - {leaveDefinition.displayName - ? `「${leaveDefinition.displayName}」` - : "この休暇・休業"} - を行った場合、その時点での出勤率は{" "} - <Code>80出勤日 / 100所定労働日 = 80%</Code> となります。 - </HelpDialog.Paragraph> - </HelpDialog.Content> - </HelpDialog.Root> - ) : ( - <HelpDialog.Root> - <Badge color="gray">出勤率計上なし</Badge> - <HelpDialog.Trigger> - 出勤率計上なしの休暇休業の説明 - </HelpDialog.Trigger> - <HelpDialog.Content> - <HelpDialog.Title>出勤率計上なしの休暇・休業</HelpDialog.Title> - <HelpDialog.Description> - 年次有給休暇を付与する際の出勤率計算時、この休暇・休業を行った日は欠勤と同様に扱います。 - </HelpDialog.Description> + <HelpDialog.Paragraph> + 79 日出勤した所定労働日 100 日の労働者が + {leaveDefinition.displayName + ? `「${leaveDefinition.displayName}」` + : "この休暇・休業"} + を行った場合、その時点での出勤率は{" "} + <Code>80出勤日 / 100所定労働日 = 80%</Code> となります。 + </HelpDialog.Paragraph> + </HelpDialog.Content> + </HelpDialog.Root> + ) : ( + <HelpDialog.Root> + <Badge color="gray">出勤率計上なし</Badge> + <HelpDialog.Trigger> + 出勤率計上なしの休暇休業の説明 + </HelpDialog.Trigger> + <HelpDialog.Content> + <HelpDialog.Title>出勤率計上なしの休暇・休業</HelpDialog.Title> + <HelpDialog.Description> + 年次有給休暇を付与する際の出勤率計算時、この休暇・休業を行った日は欠勤と同様に扱います。 + </HelpDialog.Description> - <HelpDialog.Paragraph> - 79 日出勤した所定労働日 100 日の労働者が - {leaveDefinition.displayName - ? `「${leaveDefinition.displayName}」` - : "この休暇・休業"} - を行った場合、その時点での出勤率は{" "} - <Code>79出勤日 / 100所定労働日 = 79%</Code> となります。 - </HelpDialog.Paragraph> + <HelpDialog.Paragraph> + 79 日出勤した所定労働日 100 日の労働者が + {leaveDefinition.displayName + ? `「${leaveDefinition.displayName}」` + : "この休暇・休業"} + を行った場合、その時点での出勤率は{" "} + <Code>79出勤日 / 100所定労働日 = 79%</Code> となります。 + </HelpDialog.Paragraph> - <HelpDialog.Paragraph size="2" color="gray"> - このバッジは{pageTitle}以外では表示されません。 - </HelpDialog.Paragraph> - </HelpDialog.Content> - </HelpDialog.Root> - )} - </Flex> - </DataList.Value> - </DataList.Item> - )} - </DataList.Root> - </Box> + <HelpDialog.Paragraph size="2" color="gray"> + このバッジは{pageTitle}以外では表示されません。 + </HelpDialog.Paragraph> + </HelpDialog.Content> + </HelpDialog.Root> + )} + </Flex> + </DataList.Value> + </DataList.Item> + )} + </DataList.Root> + </Box> + <DropdownMenu.Root> + <DropdownMenu.Trigger> + <IconButton variant="ghost" color="gray" m="1"> + <DotsHorizontalIcon /> + </IconButton> + </DropdownMenu.Trigger> + <DropdownMenu.Content> + <DropdownMenu.Item disabled>表示名の編集</DropdownMenu.Item> + <DropdownMenu.Sub> + <DropdownMenu.SubTrigger>バージョン管理</DropdownMenu.SubTrigger> + <DropdownMenu.SubContent> + <DropdownMenu.Item disabled>このバージョンを編集</DropdownMenu.Item> + <DropdownMenu.Item disabled>このバージョンを削除</DropdownMenu.Item> + <DropdownMenu.Item disabled>新規バージョンを作成</DropdownMenu.Item> + </DropdownMenu.SubContent> + </DropdownMenu.Sub> + <DropdownMenu.Separator /> + <DropdownMenu.Item color="red" disabled> + 削除 + </DropdownMenu.Item> + </DropdownMenu.Content> + </DropdownMenu.Root> + </Flex> ); };