契約関連機能 おおまかに整備

src/api/contract.ts

@@ -0,0 +1,29 @@
+import { APICommonResponse, ApiId, HttpMethod, request } from ".";
+import { getUrl } from "./url";
+
+export type Contract = {
+  id: string;
+  name: string;
+  updated_at: string;
+};
+
+// 契約一覧取得 -----------------------
+export type ContractsRequest = {
+  id?: string;
+  name?: string;
+};
+
+export type ContractsResponse = {
+  data: {
+    records: Contract[];
+  };
+} & APICommonResponse;
+
+export const getContracts = async (data: ContractsRequest) => {
+  const res = await request<ContractsResponse>({
+    url: getUrl(ApiId.CONTRACTS),
+    method: HttpMethod.GET,
+    data: new URLSearchParams(data),
+  });
+  return res;
+};

src/api/index.ts

@@ -27,6 +27,8 @@ export const ApiId = {
   RECEIPT_ISSUING_ORDER_MAIL_POST_COMPLETE: id++,
   DOWNLOAD_RECEIPT_LETTER: id++,
 
+  CONTRACTS: id++,
+
   // FOR CUSTOM
   HT_CUSTOM_CUSTOMERS: id++,
   HT_CUSTOM_PARKINGS: id++,

src/api/url.ts

@@ -18,6 +18,8 @@ const urls = {
 
   [A.RECEIPT_ISSUING_ORDERS]: "receipt-issuing-orders",
 
+  [A.CONTRACTS]: "contracts",
+
   // FOR CUSTOM
   [A.HT_CUSTOM_CUSTOMERS]: "custom/hello-techno/customers",
   [A.HT_CUSTOM_PARKINGS]: "custom/hello-techno/parkings",

src/codes/page.ts

@@ -12,6 +12,7 @@ export const PageID = {
 
   DASHBOARD_CONTRACT_LIST: id++,
   DASHBOARD_CONTRACT_DETAIL: id++,
+  DASHBOARD_CONTRACT_CREATE: id++,
 
   DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE_CUSTOM_HELLO_TECHNO: id++,
   DASHBOARD_RECEIPT_ISSUING_ORDER_LIST_CUSTOM_HELLO_TECHNO: id++,

src/layouts/dashbord/navigator.tsx

@@ -50,8 +50,8 @@ const categories: Group[] = [
             label: "一覧",
           },
           {
-            id: PageID.DASHBOARD_CONTRACT_DETAIL,
-            label: "詳細",
+            id: PageID.DASHBOARD_CONTRACT_CREATE,
+            label: "作成",
           },
         ],
       },

src/pages/dashboard/contract/create.tsx

@@ -0,0 +1,17 @@
+import { Box } from "@mui/material";
+import { PageID, TabID } from "codes/page";
+import useDashboard from "hooks/useDashBoard";
+import { useEffect } from "react";
+
+export default function ContractCreate() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_CONTRACT_CREATE,
+    TabID.NONE
+  );
+
+  useEffect(() => {
+    setHeaderTitle("契約者作成");
+    setTabs(null);
+  }, []);
+  return <Box>契約者作成</Box>;
+}

src/pages/dashboard/contract/detail.tsx

@@ -1,18 +1,17 @@
 import { Box } from "@mui/material";
 import { PageID, TabID } from "codes/page";
 import useDashboard from "hooks/useDashBoard";
-import ContractTabs from "layouts/dashbord/tab/ContractTabs";
 import { useEffect } from "react";
 
 export default function ContractDetail() {
   const { setHeaderTitle, setTabs } = useDashboard(
     PageID.DASHBOARD_CONTRACT_DETAIL,
-    TabID.A
+    TabID.NONE
   );
 
   useEffect(() => {
     setHeaderTitle("契約者詳細");
-    setTabs(<ContractTabs />);
+    setTabs(null);
   }, []);
   return <Box>ContractDetail</Box>;
 }

src/pages/dashboard/contract/list.tsx

@@ -1,22 +1,30 @@
 import {
   Box,
   Grid,
+  Stack,
   Table,
   TableBody,
   TableCell,
   TableContainer,
   TablePagination,
   TableRow,
-  TextField,
+  Typography,
 } from "@mui/material";
+import { Dictionary } from "@types";
+import { Contract, getContracts } from "api/contract";
 import { PageID, TabID } from "codes/page";
+import { FormProvider, RHFTextField } from "components/hook-form";
 import { TableHeadCustom } from "components/table";
 import { SearchConditionContextProvider } from "contexts/SearchConditionContext";
+import useAPICall from "hooks/useAPICall";
+import useBackDrop from "hooks/useBackDrop";
 import useDashboard from "hooks/useDashBoard";
+import useNavigateCustom from "hooks/useNavigateCustom";
+import useSearchConditionContext from "hooks/useSearchConditionContext";
 import useTable, { UseTableReturn } from "hooks/useTable";
-import ContractTabs from "layouts/dashbord/tab/ContractTabs";
 import { useEffect } from "react";
-import { Contract } from "types/contract";
+import { useForm } from "react-hook-form";
+import { getPath } from "routes/path";
 
 export default function ContractList() {
   const { setHeaderTitle, setTabs } = useDashboard(
@@ -24,42 +32,20 @@ export default function ContractList() {
     TabID.NONE
   );
 
-  const table = useTable<Contract>();
-
   useEffect(() => {
     setHeaderTitle("契約者一覧");
-    setTabs(<ContractTabs />);
+    setTabs(null);
   }, []);
 
   return (
     <SearchConditionContextProvider>
-      <Page table={table} />
+      <Page />
     </SearchConditionContextProvider>
   );
 }
 
-type CommonProps = {
-  table: UseTableReturn<Contract>;
-};
-function Page({ table }: CommonProps) {
-  const {
-    order,
-    page,
-    sort,
-    rowsPerPage,
-    fetched,
-    fillteredRow,
-    isNotFound,
-    dataLength,
-    //
-    onSort,
-    onChangePage,
-    onChangeRowsPerPage,
-    //
-    setRowData,
-    //
-    ROWS_PER_PAGES,
-  } = table;
+function Page() {
+  const table = useTable<Contract>();
   return (
     <Box>
       <SearchBox table={table} />
@@ -68,36 +54,100 @@ function Page({ table }: CommonProps) {
   );
 }
 
+type FormProps = {
+  id: string;
+  name: string;
+};
+
+type CommonProps = {
+  table: UseTableReturn<Contract>;
+};
 function SearchBox({ table }: CommonProps) {
+  const {
+    condition,
+    initialized,
+    get,
+    addCondition: add,
+  } = useSearchConditionContext();
+
+  const { setShowBackDrop } = useBackDrop();
+  const form = useForm<FormProps>({
+    defaultValues: {
+      id: "",
+      name: "",
+    },
+  });
+
+  const {
+    callAPI: callGetContracts,
+    makeSendData,
+    sending,
+  } = useAPICall({
+    apiMethod: getContracts,
+    onSuccess: ({ data }) => {
+      table.setRowData(data.records);
+    },
+  });
+
+  const handleSubmit = async (data: FormProps) => {
+    addCondition(data);
+  };
+
+  const addCondition = (data: FormProps) => {
+    add({
+      ...data,
+    });
+  };
+  const handleBlur = () => {
+    addCondition(form.getValues());
+  };
+
+  const fetch = async (data: Dictionary) => {
+    const sendData = makeSendData({
+      ...data,
+    });
+    callGetContracts(sendData);
+  };
+
+  // 初期値設定
+  useEffect(() => {
+    if (initialized) {
+      form.setValue("id", get("id"));
+      form.setValue("name", get("name"));
+    }
+  }, [initialized, condition]);
+
+  // Fetchアクション
+  useEffect(() => {
+    if (initialized) {
+      fetch(condition);
+    }
+  }, [condition, initialized]);
+
+  // バックドロップ
+  useEffect(() => {
+    setShowBackDrop(sending);
+  }, [sending]);
+
   return (
-    <Box sx={{ p: 1, m: 1 }}>
-      <Grid container spacing={1}>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <Box sx={{ p: 1, m: 1 }}>
+        <Grid container spacing={2}>
+          <Grid item xs={3} lg={2}>
+            <Stack>
+              <Typography>ID</Typography>
+              <RHFTextField name="id" onBlur={handleBlur} />
+            </Stack>
+          </Grid>
+          <Grid item xs={3} lg={2}>
+            <Stack>
+              <Typography>名前</Typography>
+              <RHFTextField name="name" onBlur={handleBlur} />
+            </Stack>
+          </Grid>
         </Grid>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
-        </Grid>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
-        </Grid>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
-        </Grid>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
-        </Grid>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
-        </Grid>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
-        </Grid>
-        <Grid item xs={3}>
-          <TextField label="a" fullWidth size="small" />
-        </Grid>
-      </Grid>
-    </Box>
+      </Box>
+    </FormProvider>
   );
 }
 
@@ -105,7 +155,6 @@ function TableBox({ table }: CommonProps) {
   const TABLE_HEAD = [
     { id: "id", label: "ID", align: "left" },
     { id: "name", label: "名前", align: "left" },
-    { id: "emply", label: "---", align: "left" },
   ];
   const {
     order,
@@ -126,13 +175,6 @@ function TableBox({ table }: CommonProps) {
     ROWS_PER_PAGES,
   } = table;
 
-  useEffect(() => {
-    setRowData([
-      { id: "iwabuchi", name: "hei" },
-      { id: "iwabuchi", name: "hei1" },
-    ]);
-  }, []);
-
   return (
     <>
       <TableContainer
@@ -178,11 +220,18 @@ type RowProps = {
   data: Contract;
 };
 function Row({ data }: RowProps) {
+  const { navigateWhenChanged } = useNavigateCustom();
+
+  const handleClick = () => {
+    navigateWhenChanged(getPath(PageID.DASHBOARD_CONTRACT_DETAIL), {
+      id: data.id,
+    });
+  };
+
   return (
-    <TableRow hover sx={{ cursor: "pointer" }}>
+    <TableRow hover sx={{ cursor: "pointer" }} onClick={handleClick}>
       <TableCell>{data.id}</TableCell>
       <TableCell>{data.name}</TableCell>
-      <TableCell>{data.created_at}</TableCell>
     </TableRow>
   );
 }

src/routes/auth.ts

@@ -13,8 +13,9 @@ export const AUTH = {
 
   [P.DASHBOARD_OVERVIEW]: setAuth("ge", R.NORMAL_ADMIN),
 
-  [P.DASHBOARD_CONTRACT_LIST]: setAuth("ge", R.SUPER_ADMIN),
-  [P.DASHBOARD_CONTRACT_DETAIL]: setAuth("ge", R.SUPER_ADMIN),
+  [P.DASHBOARD_CONTRACT_LIST]: setAuth("eq", R.SUPER_ADMIN),
+  [P.DASHBOARD_CONTRACT_DETAIL]: setAuth("eq", R.SUPER_ADMIN),
+  [P.DASHBOARD_CONTRACT_CREATE]: setAuth("eq", R.SUPER_ADMIN),
 
   [P.DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE_CUSTOM_HELLO_TECHNO]: setAuth(
     "ge",

src/routes/index.tsx

@@ -56,32 +56,30 @@ const DashboardRoutes = (): RouteObject => {
     {
       pageId: PageID.DASHBOARD_OVERVIEW,
       element: <Dashboard />,
-      target: UserRole.NORMAL_ADMIN,
     },
     {
       pageId: PageID.DASHBOARD_CONTRACT_LIST,
       element: <ContractList />,
-      target: UserRole.SUPER_ADMIN,
     },
     {
       pageId: PageID.DASHBOARD_CONTRACT_DETAIL,
       element: <ContractDetail />,
-      target: UserRole.SUPER_ADMIN,
+    },
+    {
+      pageId: PageID.DASHBOARD_CONTRACT_CREATE,
+      element: <ContractCreate />,
     },
     {
       pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE_CUSTOM_HELLO_TECHNO,
       element: <ReceiptIssuingOrderCreateHelloTechno />,
-      target: UserRole.NORMAL_ADMIN,
     },
     {
       pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_LIST_CUSTOM_HELLO_TECHNO,
       element: <ReceiptIssuingOrderListHelloTechno />,
-      target: UserRole.NORMAL_ADMIN,
     },
     {
       pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_DETAIL_CUSTOM_HELLO_TECHNO,
       element: <ReceiptIssuingOrderDetailHelloTechno />,
-      target: UserRole.NORMAL_ADMIN,
     },
   ];
 
@@ -136,6 +134,9 @@ const ContractList = Loadable(
 const ContractDetail = Loadable(
   lazy(() => import("pages/dashboard/contract/detail"))
 );
+const ContractCreate = Loadable(
+  lazy(() => import("pages/dashboard/contract/create"))
+);
 // 領収証発行依頼
 const ReceiptIssuingOrderCreateHelloTechno = Loadable(
   lazy(

src/routes/path.ts

@@ -46,7 +46,9 @@ const PATHS = {
   // 契約関連
   [makePathKey(PageID.DASHBOARD_CONTRACT_LIST)]:
     "/dashboard/contract/list/:page",
-  [makePathKey(PageID.DASHBOARD_CONTRACT_DETAIL)]: "/dashboard/contract/detail",
+  [makePathKey(PageID.DASHBOARD_CONTRACT_DETAIL)]:
+    "/dashboard/contract/detail/:id",
+  [makePathKey(PageID.DASHBOARD_CONTRACT_CREATE)]: "/dashboard/contract/create",
 
   // 領収証発行依頼関連
   [makePathKey(