react_ui: 勤怠記録編集のキーボードショートカット

Changes

2 changed files (+86/-3)

• packages/react_ui/src/pages/:workspace/calendar/Menu.tsx
  • @@ -69,24 +69,28 @@ <DropdownMenu.Content>
    <DropdownMenu.Label>記録書き込み</DropdownMenu.Label> <DropdownMenu.Item disabled={disabled} + shortcut="1" onSelect={() => void actions.markAsWorked()} > 出勤 </DropdownMenu.Item> <DropdownMenu.Item disabled={disabled} + shortcut="2" onSelect={() => void actions.markAsDayOff()} > 休日 </DropdownMenu.Item> <DropdownMenu.Item disabled={disabled} + shortcut="3" onSelect={() => void actions.markAsAbsent()} > 欠勤 </DropdownMenu.Item> <DropdownMenu.Item disabled={disabled} + shortcut="4" onSelect={() => void actions.markAsPaidLeave()} > 年次有給休暇
• packages/react_ui/src/pages/:workspace/calendar/page.tsx
  • @@ -237,6 +237,81 @@ query.refetch();
    }, }); + const actionsRef = useRef(actions); + actionsRef.current = actions; + + const rows = query.data?.length ?? 0; + const columns = dates.length; + + useEffect(() => { + const listener = async (event: KeyboardEvent) => { + if (event.isComposing || event.ctrlKey || event.shiftKey || event.metaKey) { + return; + } + + let action: () => Promise<void>; + + switch (event.key) { + case "1": + action = actionsRef.current.markAsWorked; + break; + case "2": + action = actionsRef.current.markAsDayOff; + break; + case "3": + action = actionsRef.current.markAsAbsent; + break; + case "4": + action = actionsRef.current.markAsPaidLeave; + break; + default: + return; + } + + event.preventDefault(); + event.stopPropagation(); + + await action(); + + // TODO: スプレッドシート側で次に送る動作を定義する + setSelection((prev) => { + if (!prev.cursor) { + return prev; + } + + const next: Spreadsheet.GridCell = + prev.cursor.column === columns - 1 + ? { + row: prev.cursor.row === rows - 1 ? 0 : prev.cursor.row + 1, + column: 0, + } + : { + row: prev.cursor.row, + column: prev.cursor.column + 1, + }; + + // TODO: 外に出す + const nextEl = document.querySelector( + `[data-gridrow="${next.row}"][data-gridcol="${next.column}"]`, + ); + if (nextEl instanceof HTMLElement) { + nextEl.focus(); + } + + return { + cells: [next], + cursor: next, + expandingTo: null, + committed: [], + }; + }); + }; + + document.addEventListener("keyup", listener); + + return () => void document.removeEventListener("keyup", listener); + }, [rows, columns]); + return ( <> <Container px="2" py="4" size="2">
  • @@ -265,7 +340,11 @@ <CaretRightIcon />
    <VisuallyHidden>次の月へ</VisuallyHidden> </IconButton> <Box flexGrow="1" flexShrink="1" /> - <Menu actions={actions} workspaceID={workspace.id} /> + <Menu + disabled={selection.cells.length === 0} + actions={actions} + workspaceID={workspace.id} + /> </Flex> </Container> <Box mt="2" pl={{ md: "2" }}>
  • @@ -274,8 +353,8 @@ <Spreadsheet.Root
    asChild selection={selection} onSelectionChange={setSelection} - rows={query.data?.length ?? 0} - columns={dates.length} + rows={rows} + columns={columns} > <Grid columns={`max-content repeat(${dates.length}, 3rem)`} pb="4"> <Spreadsheet.Row className={css.row} row={-1}>