react_ui: 省略表記

Changes

6 changed files (+86/-8)

• packages/react_ui/src/components/WorkRecordBadges.tsx
  • @@ -4,6 +4,7 @@
    import * as proto from "@bufbuild/protobuf"; import { Badge, type BadgeProps, Text } from "@radix-ui/themes"; import { WorkRecordSchema } from "@yamori/proto/yamori/work_record/v1/work_record_pb.js"; + import { type AbbreviationsSchema } from "@yamori/proto/yamori/workspace/v1/abbreviations_pb.js"; import { type FC } from "react"; const ResponsiveBadge: FC<BadgeProps> = ({ children, ...rest }) => {
  • @@ -19,10 +20,16 @@ extends Pick<
    BadgeProps, "size" | "m" | `m${"t" | "b" | "r" | "l" | "x" | "y"}` | "style" | "className" > { + abbreviations?: proto.MessageShape<typeof AbbreviationsSchema>; + workRecord: proto.MessageShape<typeof WorkRecordSchema>; } - export const WorkRecordBadges: FC<WorkRecordBadgesProps> = ({ workRecord, ...rest }) => { + export const WorkRecordBadges: FC<WorkRecordBadgesProps> = ({ + abbreviations, + workRecord, + ...rest + }) => { switch (workRecord.record.case) { case "workingDay": { const { hasWorkerWorked, timeOffs } = workRecord.record.value;
  • @@ -31,11 +38,11 @@ return (
    <> {hasWorkerWorked ? ( <ResponsiveBadge {...rest} color="blue"> - 出勤 + {abbreviations?.worked || "出勤"} </ResponsiveBadge> ) : ( <ResponsiveBadge {...rest} color="amber"> - 欠勤 + {abbreviations?.skipWork || "欠勤"} </ResponsiveBadge> )} {timeOffs.map((timeOff, i) => {
  • @@ -66,13 +73,13 @@ }
    case "dayOff": return ( <ResponsiveBadge {...rest} color="red"> - 休日 + {abbreviations?.dayoff || "休日"} </ResponsiveBadge> ); case "paidLeave": return ( <ResponsiveBadge {...rest} color="green"> - 有給休暇 + {abbreviations?.paidLeave || "有給休暇"} </ResponsiveBadge> ); case "workspaceDefinedLeave":
  • @@ -85,7 +92,9 @@ ? "green"
    : "amber" } > - {workRecord.record.value.displayName || "休暇"} + {workRecord.record.value.abbreviationName || + workRecord.record.value.displayName || + "休暇"} </ResponsiveBadge> ); default:
• packages/react_ui/src/mocks/yamori/workspace/v1/workspace_service.ts
  • @@ -28,10 +28,17 @@ export function Get({
    workspace = { id: { value: "ws-foo" }, displayName: "株式会社あああ", + abbreviations: { + worked: "出勤", + dayoff: "休日", + skipWork: "欠勤", + paidLeave: "年休", + }, leaveDefinitions: [ { id: { value: "lv-foo" }, displayName: "産前産後休業", + abbreviationName: "産休", currentRevision: { revisionId: { value: "lr-foo-foo" }, startAt: { year: 1947, month: 9, day: 1 },
  • @@ -48,6 +55,7 @@ },
    { id: { value: "lv-bar" }, displayName: "忌引", + abbreviationName: "忌引", deletionKey: { key: new Uint8Array([]) }, currentRevision: { revisionId: { value: "lr-bar-foo" },
  • @@ -70,6 +78,7 @@ },
    { id: { value: "lv-baz" }, displayName: "リフレッシュ休暇", + abbreviationName: "リ休", deletionKey: { key: new Uint8Array([]) }, revisions: [ {
• packages/react_ui/src/pages/:workspace/calendar/page.tsx
  • @@ -19,7 +19,9 @@ Text,
    VisuallyHidden, } from "@radix-ui/themes"; import { DateSchema } from "@yamori/proto/yamori/type/v1/date_pb.js"; - import type { WorkspaceSchema } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js"; + import { WorkspaceSchema } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js"; + import { GetRequestSchema } from "@yamori/proto/yamori/workspace/v1/get_request_pb.js"; + import { GetResponseSchema } from "@yamori/proto/yamori/workspace/v1/get_response_pb.js"; import { ListRequestSchema } from "@yamori/proto/yamori/worker/v1/list_request_pb.js"; import { ListResponseSchema } from "@yamori/proto/yamori/worker/v1/list_response_pb.js"; import { WorkerSchema } from "@yamori/proto/yamori/worker/v1/worker_pb.js";
  • @@ -107,6 +109,33 @@ end: toProtoDate(endOfMonth(d, { in: tz(TZ) })),
    } as const; }, [month]); + const abbrs = useMethodQuery({ + service: "yamori.workspace.v1.WorkspaceService", + method: "Get", + request: { + schema: GetRequestSchema, + data: { + workspaceId: workspace.id, + readMask: { + fields: [WorkspaceSchema.field.abbreviations.number], + }, + }, + }, + response: { + schema: GetResponseSchema, + }, + mapResponse(resp) { + switch (resp.result.case) { + case "ok": + return resp.result.value.abbreviations; + case undefined: + throw new IllegalMessageError(resp); + default: + throw resp.result.value; + } + }, + }); + const query = useMethodQuery({ service: "yamori.worker.v1.WorkerService", method: "List",
  • @@ -145,6 +174,7 @@ fields: [
    LeaveSchema.field.id.number, LeaveSchema.field.displayName.number, LeaveSchema.field.currentRevision.number, + LeaveSchema.field.abbreviationName.number, ], }, },
  • @@ -343,7 +373,12 @@ const record = worker.workRecords.find(
    (record) => record.date && isSameDate(record.date, d), ); - const contents = record && <WorkRecordBadges workRecord={record} />; + const contents = record && ( + <WorkRecordBadges + abbreviations={abbrs.data} + workRecord={record} + /> + ); return ( <Spreadsheet.Cell key={+date} asChild column={dateIndex}>
• packages/react_ui/src/pages/:workspace/leave-definitions/ListItem.tsx
  • @@ -64,6 +64,10 @@ <DataList.Item>
    <DataList.Label>種別名</DataList.Label> <DataList.Value>{leaveDefinition.displayName}</DataList.Value> </DataList.Item> + <DataList.Item> + <DataList.Label>省略表記</DataList.Label> + <DataList.Value>{leaveDefinition.abbreviationName}</DataList.Value> + </DataList.Item> {leaveDefinition.revisions.length > 0 && ( <DataList.Item> <DataList.Label>バージョン</DataList.Label>
• packages/react_ui/src/pages/:workspace/leave-definitions/new/page.tsx
  • @@ -44,11 +44,13 @@ }, []);
    const form = useForm<{ displayName: string; + abbrName: string; isWorkerDeemedToBeWorked: boolean; startAt: string; }>({ defaultValues: { displayName: "", + abbrName: "", isWorkerDeemedToBeWorked: true, startAt: startAtDefaultValue, },
  • @@ -115,6 +117,7 @@ creation.mutate({
    workspaceId: workspace.id, leaveDefinition: { displayName: values.displayName, + abbreviationName: values.abbrName, revisions: [ { startAt: {
  • @@ -168,6 +171,23 @@ })}
    /> <FormField.Description error={form.formState.errors.displayName?.message}> 登録する休暇・休業の名前です。前後の空白は自動的に取り除かれます。 + </FormField.Description> + </FormField.Root> + <FormField.Root> + <FormField.Label htmlFor="abbr_name_id">省略表記</FormField.Label> + <TextField.Root + id="abbr_name_id" + disabled={creation.isPending} + placeholder="リ休" + autoComplete="off" + {...form.register("abbrName", { + setValueAs(value: string) { + return value.trim(); + }, + })} + /> + <FormField.Description> + カレンダーなどで表示する際の省略名です。前後の空白は自動的に取り除かれます。 </FormField.Description> </FormField.Root> <FormField.Root>
• packages/react_ui/src/pages/:workspace/leave-definitions/page.tsx
  • @@ -46,6 +46,7 @@ leaveDefinitionsMask: {
    fields: [ LeaveSchema.field.id.number, LeaveSchema.field.displayName.number, + LeaveSchema.field.abbreviationName.number, LeaveSchema.field.currentRevision.number, LeaveSchema.field.revisions.number, LeaveSchema.field.deletionKey.number,