From 943f4285e11e04c90fd9ca35c2622df632aed046 Mon Sep 17 00:00:00 2001 From: "sosuke.iwabuchi" Date: Mon, 1 Apr 2024 15:49:35 +0900 Subject: [PATCH] =?UTF-8?q?=E5=88=A9=E7=94=A8=E5=B1=A5=E6=AD=B4=E4=B8=80?= =?UTF-8?q?=E8=A6=A7=E3=82=92=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 1 + src/api/shop.ts | 24 +++++ src/api/url.ts | 1 + src/auth/route.ts | 2 +- src/layouts/dashbord/navigator.tsx | 2 +- .../サービス券利用履歴.tsx | 3 - .../利用履歴一覧/SearchBox.tsx | 60 ++++++++++++ .../利用履歴一覧/TableBox.tsx | 98 +++++++++++++++++++ .../qr-service/利用履歴一覧/index.tsx | 34 +++++++ src/pages/index.ts | 2 +- src/routes/path.ts | 2 +- src/routes/sub/dashboard.tsx | 9 +- 12 files changed, 230 insertions(+), 8 deletions(-) delete mode 100644 src/pages/dashboard/qr-service/サービス券利用履歴.tsx create mode 100644 src/pages/dashboard/qr-service/利用履歴一覧/SearchBox.tsx create mode 100644 src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx create mode 100644 src/pages/dashboard/qr-service/利用履歴一覧/index.tsx diff --git a/src/api/index.ts b/src/api/index.ts index b47acd8..46ffda7 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -35,6 +35,7 @@ export const ApiId = { 店舗一覧取得: id++, 店舗新規登録: id++, デポジット情報取得: id++, + デポジット異動履歴一覧取得: id++, デポジットチャージ: id++, 店舗設定: id++, 店舗QR設定取得: id++, diff --git a/src/api/shop.ts b/src/api/shop.ts index ffe9439..c7f1da1 100644 --- a/src/api/shop.ts +++ b/src/api/shop.ts @@ -25,6 +25,13 @@ export type QRサービス券取得設定 = { shop_no: number; discount_ticket_code: number; }; +export type デポジット異動履歴 = { + transfer_datetime: Date; + transfer_reason: string | null; + transfer_amount: number; + before_amount: number; + after_amount: number; +}; // -------店舗一覧取得--------------- export type 店舗一覧取得Request = { @@ -78,6 +85,23 @@ export const デポジット情報取得 = async (param: デポジット情報 }); return res; }; +// -------デポジット異動履歴一覧取得--------------- +export type デポジット異動履歴一覧取得Request = {}; +export type デポジット異動履歴一覧取得Response = { + data: { + list: デポジット異動履歴[]; + }; +} & APICommonResponse; +export const デポジット異動履歴一覧取得 = async ( + param: デポジット異動履歴一覧取得Request +) => { + const res = await request<デポジット異動履歴一覧取得Response>({ + url: getUrl(ApiId.デポジット異動履歴一覧取得), + method: HttpMethod.GET, + data: new URLSearchParams(param), + }); + return res; +}; // -------デポジットチャージ--------------- export type デポジットチャージRequest = { diff --git a/src/api/url.ts b/src/api/url.ts index 5f8e73a..384236f 100644 --- a/src/api/url.ts +++ b/src/api/url.ts @@ -30,6 +30,7 @@ const urls = { [A.店舗一覧取得]: "shop/list", [A.店舗新規登録]: "shop/register", [A.デポジット情報取得]: "shop/deposit", + [A.デポジット異動履歴一覧取得]: "shop/deposit/transfer/list", [A.デポジットチャージ]: "shop/deposit/charge", [A.店舗設定]: "shop/config", [A.店舗設定]: "shop/config", diff --git a/src/auth/route.ts b/src/auth/route.ts index 7101365..dcd1b92 100644 --- a/src/auth/route.ts +++ b/src/auth/route.ts @@ -33,7 +33,7 @@ const 認可別許可ルート: { ...共通ルート, ...認証後共通ルート, P.サービス券発行用QRコード, - P.サービス券利用履歴, + P.利用履歴, P.QRサービス券承認, ], }; diff --git a/src/layouts/dashbord/navigator.tsx b/src/layouts/dashbord/navigator.tsx index bb314ff..8e35961 100644 --- a/src/layouts/dashbord/navigator.tsx +++ b/src/layouts/dashbord/navigator.tsx @@ -147,7 +147,7 @@ export default function Navigator(props: DrawerProps) { { label: "利用履歴", icon: , - id: PageID.サービス券利用履歴, + id: PageID.利用履歴, }, ], }, diff --git a/src/pages/dashboard/qr-service/サービス券利用履歴.tsx b/src/pages/dashboard/qr-service/サービス券利用履歴.tsx deleted file mode 100644 index c7a6265..0000000 --- a/src/pages/dashboard/qr-service/サービス券利用履歴.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function サービス券利用履歴() { - return null; -} diff --git a/src/pages/dashboard/qr-service/利用履歴一覧/SearchBox.tsx b/src/pages/dashboard/qr-service/利用履歴一覧/SearchBox.tsx new file mode 100644 index 0000000..ad66a57 --- /dev/null +++ b/src/pages/dashboard/qr-service/利用履歴一覧/SearchBox.tsx @@ -0,0 +1,60 @@ +import { Dictionary } from "@types"; +import { デポジット異動履歴, デポジット異動履歴一覧取得 } from "api/shop"; +import { FormProvider } from "components/hook-form"; +import useAPICall from "hooks/useAPICall"; +import useSearchConditionContext from "hooks/useSearchConditionContext"; +import { UseTableReturn } from "hooks/useTable"; +import { isEqual } from "lodash"; +import { useEffect, useState } from "react"; +import { useForm } from "react-hook-form"; + +type FormProps = {}; + +type CommonProps = { + table: UseTableReturn<デポジット異動履歴>; +}; +export default function SearchBox({ table }: CommonProps) { + const [lastSendSearchCondition, setLastSendSearchCondition] = + useState({ default: false }); + const { condition, initialized, get, addCondition } = + useSearchConditionContext(); + const form = useForm({ + defaultValues: {}, + }); + + const { callAPI: call顧客一覧取得, makeSendData } = useAPICall({ + apiMethod: デポジット異動履歴一覧取得, + form, + backDrop: true, + onSuccess: ({ data }) => { + table.setRowData(data.list); + }, + }); + + const handleBlur = () => { + addCondition(form.getValues()); + }; + const handleSubmit = async (data: FormProps) => { + addCondition(data); + }; + + const fetch = async (data: Dictionary) => { + const sendData = makeSendData(data); + if (!isEqual(sendData, lastSendSearchCondition)) { + setLastSendSearchCondition(sendData); + call顧客一覧取得(sendData); + } + }; + + useEffect(() => { + if (initialized) { + fetch(condition); + } + }, [condition, initialized]); + + return ( + + <> + + ); +} diff --git a/src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx b/src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx new file mode 100644 index 0000000..406df0f --- /dev/null +++ b/src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx @@ -0,0 +1,98 @@ +import { + Box, + Table, + TableBody, + TableCell, + TableContainer, + TablePagination, + TableRow, +} from "@mui/material"; +import { 顧客ログインユーザ } from "api/login-user"; +import { デポジット異動履歴 } from "api/shop"; +import TableHeadCustom, { + HeadLabelProps, +} from "components/table/TableHeadCustom"; +import useAuth from "hooks/useAuth"; +import useSnackbarCustom from "hooks/useSnackbarCustom"; +import { UseTableReturn } from "hooks/useTable"; +import { formatDateTimeStr } from "utils/datetime"; +import { numberFormat } from "utils/string"; + +type CommonProps = { + table: UseTableReturn<デポジット異動履歴>; +}; +export default function TableBox({ table }: CommonProps) { + const TABLE_HEAD: HeadLabelProps[] = [ + { id: "datetime", label: "日時", align: "left", needSort: false }, + { id: "name", label: "名称", align: "left", needSort: false }, + { id: "amount", label: "金額", align: "left", needSort: false }, + { id: "deposit", label: "残高", align: "left", needSort: false }, + ]; + const { + order, + page, + sort, + rowsPerPage, + fetched, + fillteredRow, + isNotFound, + dataLength, + // + onSort, + onChangePage, + onChangeRowsPerPage, + // + setRowData, + // + ROWS_PER_PAGES, + } = table; + + return ( + <> + + + + + + {fillteredRow.map((row, index) => ( + + ))} + +
+ + + + + + + ); +} + +type RowProps = { + data: デポジット異動履歴; +}; +function Row({ data }: RowProps) { + return ( + + {formatDateTimeStr(data.transfer_datetime)} + {data.transfer_reason ?? "-"} + {numberFormat(data.transfer_amount)}円 + {numberFormat(data.after_amount)}円 + + ); +} diff --git a/src/pages/dashboard/qr-service/利用履歴一覧/index.tsx b/src/pages/dashboard/qr-service/利用履歴一覧/index.tsx new file mode 100644 index 0000000..4e49476 --- /dev/null +++ b/src/pages/dashboard/qr-service/利用履歴一覧/index.tsx @@ -0,0 +1,34 @@ +import { デポジット異動履歴 } from "api/shop"; +import { SearchConditionContextProvider } from "contexts/SearchConditionContext"; +import useDashboard from "hooks/useDashBoard"; +import useTable from "hooks/useTable"; +import { useEffect } from "react"; +import { Box } from "@mui/material"; +import TableBox from "./TableBox"; +import { PageID, TabID } from "pages"; +import SearchBox from "./SearchBox"; + +export default function Main() { + const { setHeaderTitle, setTabs } = useDashboard(PageID.利用履歴, TabID.NONE); + + useEffect(() => { + setHeaderTitle("利用履歴"); + setTabs(null); + }, []); + + return ( + + + + ); +} +function Page() { + const table = useTable<デポジット異動履歴>(); + + return ( + + + + + ); +} diff --git a/src/pages/index.ts b/src/pages/index.ts index 4a57a72..d4937fd 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -29,7 +29,7 @@ export const PageID = { 店舗詳細: id++, サービス券発行用QRコード: id++, - サービス券利用履歴: id++, + 利用履歴: id++, QRサービス券発行申請: id++, QRサービス券承認: id++, diff --git a/src/routes/path.ts b/src/routes/path.ts index b1ca7cb..c3d5fde 100644 --- a/src/routes/path.ts +++ b/src/routes/path.ts @@ -66,7 +66,7 @@ const PATHS_DASHBOARD = { [makePathKey(PageID.サービス券発行用QRコード)]: "/dashboard/qr-service/acquisition/generate", - [makePathKey(PageID.サービス券利用履歴)]: "/dashboard/qrcode/history", + [makePathKey(PageID.利用履歴)]: "/dashboard/qr-service/history", }; const PATHS = { diff --git a/src/routes/sub/dashboard.tsx b/src/routes/sub/dashboard.tsx index c93b30e..3e9b9ae 100644 --- a/src/routes/sub/dashboard.tsx +++ b/src/routes/sub/dashboard.tsx @@ -24,7 +24,7 @@ export default function DashboardRoutes(): RouteObject[] { lazy(() => import("pages/dashboard/qr-service/サービス券発行用QRコード")) ); const サービス券利用履歴 = Loadable( - lazy(() => import("pages/dashboard/qr-service/サービス券利用履歴")) + lazy(() => import("pages/dashboard/qr-service/利用履歴一覧")) ); const QRサービス券駐車場管理一覧 = Loadable( lazy( @@ -210,6 +210,13 @@ export default function DashboardRoutes(): RouteObject[] { path: getPath(PageID.サービス券発行用QRコード), }, }, + { + pageId: PageID.利用履歴, + ele: { + element: <サービス券利用履歴 />, + path: getPath(PageID.利用履歴), + }, + }, ]; return allChildren