diff --git a/src/api/index.ts b/src/api/index.ts index 46ffda7..ddf5496 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -44,6 +44,8 @@ export const ApiId = { 店舗QR設定認証設定追加: id++, 店舗QR設定認証設定削除: id++, 店舗QR設定認証設定全削除: id++, + 店舗QR設定印字設定変更: id++, + 店舗QR設定印字設定無効化: id++, 店舗QR設定取得設定変更: id++, 店舗QR設定取得設定無効化: id++, diff --git a/src/api/shop.ts b/src/api/shop.ts index c7f1da1..b3df43a 100644 --- a/src/api/shop.ts +++ b/src/api/shop.ts @@ -17,6 +17,11 @@ export type QRサービス券認証設定 = { parking_name: string; discount_ticket_code: number | null; }; +export type QRサービス券印字設定 = { + shop_no: number; + parking_management_code: string; + parking_name: string; +}; export type QRサービス券取得設定 = { qr_service_parking_group_id: string; qr_service_parking_group_name: string; @@ -153,6 +158,7 @@ export type 店舗QR設定取得Response = { data: { shop_id: string; certification: QRサービス券認証設定[]; + printing: QRサービス券印字設定[]; acquisition: QRサービス券取得設定 | null; }; } & APICommonResponse; @@ -254,6 +260,41 @@ export const 店舗QR設定認証設定全削除 = async ( return res; }; +// -------店舗QR設定印字設定変更--------------- +export type 店舗QR設定印字設定変更Request = { + shop_id: string; + parking_management_code: string; + shop_no: string; +}; +export type 店舗QR設定印字設定変更Response = {} & APICommonResponse; +export const 店舗QR設定印字設定変更 = async ( + param: 店舗QR設定印字設定変更Request +) => { + const res = await request<店舗QR設定印字設定変更Response>({ + url: getUrl(ApiId.店舗QR設定印字設定変更), + method: HttpMethod.POST, + data: makeParam(param), + }); + return res; +}; + +// -------店舗QR設定印字設定無効化--------------- +export type 店舗QR設定印字設定無効化Request = { + shop_id: string; + parking_management_code: string; +}; +export type 店舗QR設定印字設定無効化Response = {} & APICommonResponse; +export const 店舗QR設定印字設定無効化 = async ( + param: 店舗QR設定印字設定無効化Request +) => { + const res = await request<店舗QR設定印字設定無効化Response>({ + url: getUrl(ApiId.店舗QR設定印字設定無効化), + method: HttpMethod.POST, + data: makeParam(param), + }); + return res; +}; + // -------店舗QR設定取得設定変更--------------- export type 店舗QR設定取得設定変更Request = { shop_id: string; diff --git a/src/api/url.ts b/src/api/url.ts index 384236f..0dcb074 100644 --- a/src/api/url.ts +++ b/src/api/url.ts @@ -40,6 +40,8 @@ const urls = { [A.店舗QR設定認証設定追加]: "shop/config/certification/add", [A.店舗QR設定認証設定削除]: "shop/config/certification/remove", [A.店舗QR設定認証設定全削除]: "shop/config/certification/delete", + [A.店舗QR設定印字設定変更]: "shop/config/printing/enable", + [A.店舗QR設定印字設定無効化]: "shop/config/printing/disable", [A.店舗QR設定取得設定変更]: "shop/config/acquisition/enable", [A.店舗QR設定取得設定無効化]: "shop/config/acquisition/disable", diff --git a/src/contexts/page/dashboard/shop/店舗詳細Context.tsx b/src/contexts/page/dashboard/shop/店舗詳細Context.tsx index ccfd0bb..4b8b59c 100644 --- a/src/contexts/page/dashboard/shop/店舗詳細Context.tsx +++ b/src/contexts/page/dashboard/shop/店舗詳細Context.tsx @@ -1,6 +1,7 @@ import { HasChildren } from "@types"; import { 駐車場マスタ } from "api/parking"; import { + QRサービス券印字設定, QRサービス券取得設定, QRサービス券認証設定, 店舗, @@ -21,6 +22,7 @@ import 駐車場マスタストア from "storage/cache/駐車場マスタ"; type Context = { shop: 店舗 | null; certificationSetting: QRサービス券認証設定[] | undefined; + printingSetting: QRサービス券印字設定[] | undefined; acquisitionSetting: QRサービス券取得設定 | null | undefined; parkings: 駐車場マスタ[]; fetch: () => Promise; @@ -30,6 +32,7 @@ type Context = { export const 店舗詳細Context = createContext({ shop: null, certificationSetting: [], + printingSetting: [], acquisitionSetting: null, parkings: [], fetch: async () => {}, @@ -45,6 +48,9 @@ function 店舗詳細ContextProvider({ children }: Props) { const [certificationSetting, setCertificationSetting] = useState< QRサービス券認証設定[] | undefined >(undefined); + const [printingSetting, setPrintingSetting] = useState< + QRサービス券印字設定[] | undefined + >(undefined); const [acquisitionSetting, setAcquisitionSetting] = useState< QRサービス券取得設定 | null | undefined >(undefined); @@ -73,6 +79,7 @@ function 店舗詳細ContextProvider({ children }: Props) { backDrop: true, onSuccess: ({ data }) => { setAcquisitionSetting(data.acquisition); + setPrintingSetting(data.printing); setCertificationSetting(data.certification); }, onFailed: () => { @@ -122,6 +129,7 @@ function 店舗詳細ContextProvider({ children }: Props) { value={{ shop, certificationSetting, + printingSetting, acquisitionSetting, parkings, fetch, diff --git a/src/layouts/dashbord/tab/店舗管理Tabs.tsx b/src/layouts/dashbord/tab/店舗管理Tabs.tsx index c321a0f..4a0bb8e 100644 --- a/src/layouts/dashbord/tab/店舗管理Tabs.tsx +++ b/src/layouts/dashbord/tab/店舗管理Tabs.tsx @@ -37,6 +37,15 @@ export default function useA店舗管理Tabs() { }, }), }, + { + label: "印字設定", + tabId: TabID.店舗詳細_QR印字設定, + path: getPath([PageID.店舗詳細, TabID.店舗詳細_QR印字設定], { + query: { + shopId: shop?.shop_id ?? "aaaaa", + }, + }), + }, { label: "取得設定", tabId: TabID.店舗詳細_QR取得設定, diff --git a/src/pages/dashboard/shop/店舗詳細/QR印字設定/index.tsx b/src/pages/dashboard/shop/店舗詳細/QR印字設定/index.tsx new file mode 100644 index 0000000..3d89588 --- /dev/null +++ b/src/pages/dashboard/shop/店舗詳細/QR印字設定/index.tsx @@ -0,0 +1,25 @@ +import { Box, Stack } from "@mui/material"; +import { 店舗詳細Context } from "contexts/page/dashboard/shop/店舗詳細Context"; +import useDashboard from "hooks/useDashBoard"; +import { PageID, TabID } from "pages"; +import { useContext } from "react"; +import AddParking from "./駐車場追加"; +import ParkingList from "./駐車場一覧"; + +export default function Page() { + const {} = useDashboard(PageID.店舗詳細, TabID.店舗詳細_QR印字設定); + + const { shop } = useContext(店舗詳細Context); + + if (!shop) { + return null; + } + return ( + + + + + + + ); +} diff --git a/src/pages/dashboard/shop/店舗詳細/QR印字設定/駐車場一覧/index.tsx b/src/pages/dashboard/shop/店舗詳細/QR印字設定/駐車場一覧/index.tsx new file mode 100644 index 0000000..11deeee --- /dev/null +++ b/src/pages/dashboard/shop/店舗詳細/QR印字設定/駐車場一覧/index.tsx @@ -0,0 +1,121 @@ +import DeleteForeverIcon from "@mui/icons-material/DeleteForever"; +import { + Card, + IconButton, + Stack, + Table, + TableBody, + TableCell, + TableContainer, + TableRow, + Typography, +} from "@mui/material"; +import { QRサービス券印字設定, 店舗QR設定印字設定無効化 } from "api/shop"; +import { 店舗詳細Context } from "contexts/page/dashboard/shop/店舗詳細Context"; +import useAPICall from "hooks/useAPICall"; +import { useDialog } from "hooks/useDialog"; +import useSnackbarCustom from "hooks/useSnackbarCustom"; +import { useContext, useEffect, useState } from "react"; + +export default function Main() { + const { shop, fetch, printingSetting } = useContext(店舗詳細Context); + const { success, error } = useSnackbarCustom(); + + const { callAPI: call店舗QR設定印字設定無効化 } = useAPICall({ + apiMethod: 店舗QR設定印字設定無効化, + backDrop: true, + onSuccess: () => { + fetch(); + success("削除しました"); + }, + onFailed: () => { + error("失敗しました"); + }, + }); + + const [ + tmpDeleteTargetParkingMangementCode, + setTmpDeleteTargetParkingMangementCode, + ] = useState(""); + + const deleteParkingSetting = (parkingManagementCode: string) => { + setTmpDeleteTargetParkingMangementCode(parkingManagementCode); + OpenDeleteConfirmDialog(); + }; + + const { + isAgree, + element: dialog, + open: OpenDeleteConfirmDialog, + } = useDialog({ + message: "削除しますか", + }); + + useEffect(() => { + if ( + isAgree === true && + tmpDeleteTargetParkingMangementCode && + shop !== null + ) { + call店舗QR設定印字設定無効化({ + shop_id: shop.shop_id, + parking_management_code: tmpDeleteTargetParkingMangementCode, + }); + } + }, [isAgree, tmpDeleteTargetParkingMangementCode, shop]); + + if (printingSetting === undefined) { + return null; + } + + return ( + + + 設定一覧 + {0 < printingSetting.length && ( + + + + {printingSetting.map((setting) => { + return ( + + ); + })} + +
+ + )} + {printingSetting.length === 0 && データなし} + + {dialog} + + ); +} + +type RowDataProps = { + setting: QRサービス券印字設定; + onDelete: (parkingManagementCode: string) => void; +}; +function RowData({ setting, onDelete }: RowDataProps) { + return ( + + {setting.parking_name} + 店舗番号:{setting.shop_no} + + { + event.stopPropagation(); + onDelete(setting.parking_management_code); + }} + > + + + + + ); +} diff --git a/src/pages/dashboard/shop/店舗詳細/QR印字設定/駐車場追加.tsx b/src/pages/dashboard/shop/店舗詳細/QR印字設定/駐車場追加.tsx new file mode 100644 index 0000000..77895fb --- /dev/null +++ b/src/pages/dashboard/shop/店舗詳細/QR印字設定/駐車場追加.tsx @@ -0,0 +1,124 @@ +import { yupResolver } from "@hookform/resolvers/yup"; +import { Box, Button, Card, Grid, Stack, Typography } from "@mui/material"; +import { 店舗QR設定印字設定変更 } from "api/shop"; +import { + FormProvider, + RHFAutoComplete, + RHFTextField, +} from "components/hook-form"; +import { + AutoCompleteOption, + AutoCompleteOptionType, + getValue, +} from "components/hook-form/RHFAutoComplete"; +import StackRow from "components/stack/StackRow"; +import { 店舗詳細Context } from "contexts/page/dashboard/shop/店舗詳細Context"; +import useAPICall from "hooks/useAPICall"; +import useSnackbarCustom from "hooks/useSnackbarCustom"; +import { useContext, useMemo } from "react"; +import { useForm } from "react-hook-form"; +import { number, object } from "yup"; + +type FormProps = { + parking_management_code: AutoCompleteOptionType; + shop_no: string; +}; + +export default function 駐車場追加() { + const { shop, fetch, moveToMain, printingSetting, parkings } = + useContext(店舗詳細Context); + const { success, error } = useSnackbarCustom(); + + const form = useForm({ + defaultValues: { + parking_management_code: null, + shop_no: "", + }, + resolver: yupResolver( + object().shape({ + parking_management_code: object().required("必須項目です"), + shop_no: number().typeError("数値を入力してください"), + }) + ), + }); + + const { callAPI: call店舗QR設定印字設定変更 } = useAPICall({ + apiMethod: 店舗QR設定印字設定変更, + backDrop: true, + form, + onSuccess: () => { + success("登録しました"); + fetch(); + form.setValue("parking_management_code", null); + form.setValue("shop_no", ""); + }, + onFailed: () => { + error("失敗しました"); + }, + }); + + const options: AutoCompleteOption[] = useMemo(() => { + if (printingSetting === undefined) return []; + return parkings + .filter( + (p) => + !printingSetting.find( + (ele) => ele.parking_management_code === p.parking_management_code + ) + ) + .map((p) => ({ + label: p.parking_name, + value: p.parking_management_code, + })); + }, [parkings, printingSetting]); + + const handleSubmit = (data: FormProps) => { + if (shop === null) return; + call店舗QR設定印字設定変更({ + ...data, + parking_management_code: getValue(data.parking_management_code), + shop_id: shop?.shop_id, + }); + }; + + return ( + + + + + 駐車場追加 + + + + 駐車場 + + + + + + + + + + 店舗番号 + + + + + + + + + + + + + + ); +} diff --git a/src/pages/index.ts b/src/pages/index.ts index d4937fd..62a9c0f 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -48,6 +48,7 @@ export const TabID = { 店舗詳細_メイン: id++, 店舗詳細_基本設定: id++, 店舗詳細_QR認証設定: id++, + 店舗詳細_QR印字設定: id++, 店舗詳細_QR取得設定: id++, QRサービス券駐車場グループ管理_一覧: id++, diff --git a/src/routes/path.ts b/src/routes/path.ts index 1c252f1..5b5a2bc 100644 --- a/src/routes/path.ts +++ b/src/routes/path.ts @@ -61,6 +61,8 @@ const PATHS_DASHBOARD = { "/dashboard/shop/detail/setting/:shopId", [makePathKey([PageID.店舗詳細, TabID.店舗詳細_QR認証設定])]: "/dashboard/shop/detail/setting/qr/certification/:shopId", + [makePathKey([PageID.店舗詳細, TabID.店舗詳細_QR印字設定])]: + "/dashboard/shop/detail/setting/qr/printing/:shopId", [makePathKey([PageID.店舗詳細, TabID.店舗詳細_QR取得設定])]: "/dashboard/shop/detail/setting/qr/acquisition/:shopId", diff --git a/src/routes/sub/dashboard.tsx b/src/routes/sub/dashboard.tsx index 036c14e..9ac8f05 100644 --- a/src/routes/sub/dashboard.tsx +++ b/src/routes/sub/dashboard.tsx @@ -68,12 +68,15 @@ export default function DashboardRoutes(): RouteObject[] { const 店舗詳細基本設定 = Loadable( lazy(() => import("pages/dashboard/shop/店舗詳細/基本設定")) ); - const 店舗詳細QR取得設定 = Loadable( - lazy(() => import("pages/dashboard/shop/店舗詳細/QR取得設定")) - ); const 店舗詳細QR認証設定 = Loadable( lazy(() => import("pages/dashboard/shop/店舗詳細/QR認証設定")) ); + const 店舗詳細QR印字設定 = Loadable( + lazy(() => import("pages/dashboard/shop/店舗詳細/QR印字設定")) + ); + const 店舗詳細QR取得設定 = Loadable( + lazy(() => import("pages/dashboard/shop/店舗詳細/QR取得設定")) + ); const allChildren: { pageId: PageID; @@ -163,6 +166,10 @@ export default function DashboardRoutes(): RouteObject[] { element: <店舗詳細QR認証設定 />, path: getPath([PageID.店舗詳細, TabID.店舗詳細_QR認証設定]), }, + { + element: <店舗詳細QR印字設定 />, + path: getPath([PageID.店舗詳細, TabID.店舗詳細_QR印字設定]), + }, { element: <店舗詳細QR取得設定 />, path: getPath([PageID.店舗詳細, TabID.店舗詳細_QR取得設定]),