契約新規作成機能 追加

src/api/contract.ts

@@ -1,4 +1,4 @@
-import { APICommonResponse, ApiId, HttpMethod, request } from ".";
+import { APICommonResponse, ApiId, HttpMethod, makeParam, request } from ".";
 import { getUrl } from "./url";
 
 export type Contract = {
@@ -27,3 +27,18 @@ export const getContracts = async (data: ContractsRequest) => {
   });
   return res;
 };
+
+// 契約新規登録 -----------------------
+export type ContractCreateRequest = {
+  name: string;
+  custom?: string;
+};
+
+export const createContract = async (data: ContractCreateRequest) => {
+  const res = await request({
+    url: getUrl(ApiId.CONTRACT_CREATE),
+    method: HttpMethod.POST,
+    data: makeParam(data),
+  });
+  return res;
+};

src/api/index.ts

@@ -32,6 +32,7 @@ export const ApiId = {
   DOWNLOAD_RECEIPT_LETTER: id++,
 
   CONTRACTS: id++,
+  CONTRACT_CREATE: id++,
 
   USE_SUMMARY_YYYYMM: id++,
 

src/api/url.ts

@@ -23,6 +23,7 @@ const urls = {
   [A.RECEIPT_ISSUING_ORDERS]: "receipt-issuing-orders",
 
   [A.CONTRACTS]: "contracts",
+  [A.CONTRACT_CREATE]: "contract/create",
 
   [A.USE_SUMMARY_YYYYMM]: "use-summary/yyyymm",
 

src/pages/dashboard/contract/create.tsx

@@ -1,7 +1,42 @@
-import { Box } from "@mui/material";
+import {
+  Box,
+  Button,
+  Stack,
+  Step,
+  StepLabel,
+  Stepper,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import { HasChildren } from "@types";
+import { createContract } from "api/contract";
 import { PageID, TabID } from "codes/page";
+import { FormProvider, RHFTextField } from "components/hook-form";
+import useAPICall from "hooks/useAPICall";
 import useDashboard from "hooks/useDashBoard";
-import { useEffect } from "react";
+import useSnackbarCustom from "hooks/useSnackbarCustom";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+
+type AreaBoxProps = {
+  title: string;
+} & HasChildren;
+function AreaBox({ title, children }: AreaBoxProps) {
+  return (
+    <Box sx={{ maxWidth: 500 }}>
+      <Typography variant="subtitle1">{title}</Typography>
+      {children}
+    </Box>
+  );
+}
+
+type FormProps = {
+  name: string;
+  custom: string;
+};
 
 export default function ContractCreate() {
   const { setHeaderTitle, setTabs } = useDashboard(
@@ -9,9 +44,116 @@ export default function ContractCreate() {
     TabID.NONE
   );
 
+  const { success, error } = useSnackbarCustom();
+
+  const [mode, setMode] = useState<"input" | "confirm" | "done">("input");
+
+  const step = useMemo(() => {
+    if (mode === "input") return 0;
+    if (mode === "confirm") return 1;
+    if (mode === "done") return 2;
+    return 0;
+  }, [mode]);
+
+  const form = useForm<FormProps>({
+    defaultValues: {
+      name: "",
+      custom: "",
+    },
+  });
+
+  const { callAPI } = useAPICall({
+    apiMethod: createContract,
+    backDrop: true,
+    onSuccess: () => {
+      success("登録しました");
+      setMode("done");
+    },
+    onFailed: () => {
+      error("失敗しました");
+    },
+  });
+
+  const handleSubmit = () => {
+    callAPI({
+      ...form.getValues(),
+    });
+  };
+
   useEffect(() => {
     setHeaderTitle("契約者作成");
     setTabs(null);
   }, []);
-  return <Box>契約者作成</Box>;
+  return (
+    <Box sx={{ p: 1, m: 1 }}>
+      <Stepper activeStep={step}>
+        <Step>
+          <StepLabel>契約者情報入力</StepLabel>
+        </Step>
+        <Step>
+          <StepLabel>確認</StepLabel>
+        </Step>
+        <Step>
+          <StepLabel>完了</StepLabel>
+        </Step>
+      </Stepper>
+      {mode === "input" && (
+        <>
+          <FormProvider
+            methods={form}
+            onSubmit={form.handleSubmit(() => {
+              setMode("confirm");
+            })}
+          >
+            <Stack spacing={2} sx={{ p: 1, m: 1 }}>
+              <AreaBox title="契約者名">
+                <RHFTextField name="name" size="small" />
+              </AreaBox>
+              <AreaBox title="カスタム識別子">
+                <RHFTextField name="custom" size="small" />
+              </AreaBox>
+              <Stack direction="row" spacing={2}>
+                <Button variant="contained" type="submit">
+                  次へ
+                </Button>
+              </Stack>
+            </Stack>
+          </FormProvider>
+        </>
+      )}
+      {mode === "confirm" && (
+        <>
+          <Stack spacing={2} sx={{ p: 1, py: 3, m: 1, maxWidth: 500 }}>
+            <Typography variant="h5">登録内容確認</Typography>
+            <Table>
+              <TableBody>
+                <TableRow>
+                  <TableCell>契約者名</TableCell>
+                  <TableCell>{form.getValues("name")}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>カスタム識別子</TableCell>
+                  <TableCell>{form.getValues("custom")}</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+            <Stack direction="row" spacing={2}>
+              <Button
+                variant="text"
+                onClick={() => {
+                  setMode("input");
+                }}
+              >
+                戻る
+              </Button>
+              <Button variant="contained" onClick={handleSubmit}>
+                確定
+              </Button>
+            </Stack>
+          </Stack>
+        </>
+      )}
+      {mode === "done" && <Box sx={{ p: 1, py: 3, m: 1 }}>登録しました。</Box>}
+    </Box>
+  );
 }