From f3e8a41e8a37076a769d236a45ed5b9eaafbb8dc Mon Sep 17 00:00:00 2001 From: "sosuke.iwabuchi" Date: Fri, 9 Jun 2023 10:14:04 +0900 Subject: [PATCH] =?UTF-8?q?=E5=A5=91=E7=B4=84=E9=96=A2=E9=80=A3=E6=A9=9F?= =?UTF-8?q?=E8=83=BD=E3=80=80=E3=81=8A=E3=81=8A=E3=81=BE=E3=81=8B=E3=81=AB?= =?UTF-8?q?=E6=95=B4=E5=82=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/contract.ts | 29 ++++ src/api/index.ts | 2 + src/api/url.ts | 2 + src/codes/page.ts | 1 + src/layouts/dashbord/navigator.tsx | 4 +- src/pages/dashboard/contract/create.tsx | 17 +++ src/pages/dashboard/contract/detail.tsx | 5 +- src/pages/dashboard/contract/list.tsx | 181 +++++++++++++++--------- src/routes/auth.ts | 5 +- src/routes/index.tsx | 13 +- src/routes/path.ts | 4 +- 11 files changed, 183 insertions(+), 80 deletions(-) create mode 100644 src/api/contract.ts create mode 100644 src/pages/dashboard/contract/create.tsx diff --git a/src/api/contract.ts b/src/api/contract.ts new file mode 100644 index 0000000..1e363ef --- /dev/null +++ b/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({ + url: getUrl(ApiId.CONTRACTS), + method: HttpMethod.GET, + data: new URLSearchParams(data), + }); + return res; +}; diff --git a/src/api/index.ts b/src/api/index.ts index 3886998..c68f4b2 100644 --- a/src/api/index.ts +++ b/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++, diff --git a/src/api/url.ts b/src/api/url.ts index 2d5273c..d3f1f57 100644 --- a/src/api/url.ts +++ b/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", diff --git a/src/codes/page.ts b/src/codes/page.ts index 6d30eb4..e07de21 100644 --- a/src/codes/page.ts +++ b/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++, diff --git a/src/layouts/dashbord/navigator.tsx b/src/layouts/dashbord/navigator.tsx index ddbbf9c..0ecd36f 100644 --- a/src/layouts/dashbord/navigator.tsx +++ b/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: "作成", }, ], }, diff --git a/src/pages/dashboard/contract/create.tsx b/src/pages/dashboard/contract/create.tsx new file mode 100644 index 0000000..caea8a2 --- /dev/null +++ b/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 契約者作成; +} diff --git a/src/pages/dashboard/contract/detail.tsx b/src/pages/dashboard/contract/detail.tsx index a165367..9bf25c2 100644 --- a/src/pages/dashboard/contract/detail.tsx +++ b/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(); + setTabs(null); }, []); return ContractDetail; } diff --git a/src/pages/dashboard/contract/list.tsx b/src/pages/dashboard/contract/list.tsx index 90b0755..15149d0 100644 --- a/src/pages/dashboard/contract/list.tsx +++ b/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(); - useEffect(() => { setHeaderTitle("契約者一覧"); - setTabs(); + setTabs(null); }, []); return ( - + ); } -type CommonProps = { - table: UseTableReturn; -}; -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(); return ( @@ -68,36 +54,100 @@ function Page({ table }: CommonProps) { ); } +type FormProps = { + id: string; + name: string; +}; + +type CommonProps = { + table: UseTableReturn; +}; function SearchBox({ table }: CommonProps) { + const { + condition, + initialized, + get, + addCondition: add, + } = useSearchConditionContext(); + + const { setShowBackDrop } = useBackDrop(); + const form = useForm({ + 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 ( - - - - + + + + + + ID + + + + + + 名前 + + + - - - - - - - - - - - - - - - - - - - - - - - + + ); } @@ -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 ( <> { + navigateWhenChanged(getPath(PageID.DASHBOARD_CONTRACT_DETAIL), { + id: data.id, + }); + }; + return ( - + {data.id} {data.name} - {data.created_at} ); } diff --git a/src/routes/auth.ts b/src/routes/auth.ts index ec6b839..b8436d7 100644 --- a/src/routes/auth.ts +++ b/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", diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 5d7549e..9d37ef4 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -56,32 +56,30 @@ const DashboardRoutes = (): RouteObject => { { pageId: PageID.DASHBOARD_OVERVIEW, element: , - target: UserRole.NORMAL_ADMIN, }, { pageId: PageID.DASHBOARD_CONTRACT_LIST, element: , - target: UserRole.SUPER_ADMIN, }, { pageId: PageID.DASHBOARD_CONTRACT_DETAIL, element: , - target: UserRole.SUPER_ADMIN, + }, + { + pageId: PageID.DASHBOARD_CONTRACT_CREATE, + element: , }, { pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE_CUSTOM_HELLO_TECHNO, element: , - target: UserRole.NORMAL_ADMIN, }, { pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_LIST_CUSTOM_HELLO_TECHNO, element: , - target: UserRole.NORMAL_ADMIN, }, { pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_DETAIL_CUSTOM_HELLO_TECHNO, element: , - 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( diff --git a/src/routes/path.ts b/src/routes/path.ts index b63624f..eb61bd4 100644 --- a/src/routes/path.ts +++ b/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(