印字設定用画面の追加

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++,
 

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;

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",
 

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<void>;
@@ -30,6 +32,7 @@ type Context = {
 export const 店舗詳細Context = createContext<Context>({
   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,

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取得設定,

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 (
+    <Box>
+      <Stack spacing={2}>
+        <AddParking />
+        <ParkingList />
+      </Stack>
+    </Box>
+  );
+}

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 (
+    <Card sx={{ p: 2 }} elevation={1}>
+      <Stack spacing={2}>
+        <Typography variant="h6">設定一覧</Typography>
+        {0 < printingSetting.length && (
+          <TableContainer>
+            <Table size="small">
+              <TableBody>
+                {printingSetting.map((setting) => {
+                  return (
+                    <RowData
+                      key={setting.parking_management_code}
+                      setting={setting}
+                      onDelete={deleteParkingSetting}
+                    />
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+        {printingSetting.length === 0 && <Typography>データなし</Typography>}
+      </Stack>
+      {dialog}
+    </Card>
+  );
+}
+
+type RowDataProps = {
+  setting: QRサービス券印字設定;
+  onDelete: (parkingManagementCode: string) => void;
+};
+function RowData({ setting, onDelete }: RowDataProps) {
+  return (
+    <TableRow>
+      <TableCell>{setting.parking_name}</TableCell>
+      <TableCell>店舗番号:{setting.shop_no}</TableCell>
+      <TableCell align="right">
+        <IconButton
+          sx={{ marginLeft: "auto" }}
+          onClick={(event) => {
+            event.stopPropagation();
+            onDelete(setting.parking_management_code);
+          }}
+        >
+          <DeleteForeverIcon />
+        </IconButton>
+      </TableCell>
+    </TableRow>
+  );
+}

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<FormProps>({
+    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 (
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <Card sx={{ p: 2 }} elevation={1}>
+        <Box>
+          <Stack spacing={2}>
+            <Typography variant="h6">駐車場追加</Typography>
+            <StackRow>
+              <Grid container columnSpacing={2}>
+                <Grid item xs={12} md={6}>
+                  <Typography>駐車場</Typography>
+                  <StackRow>
+                    <RHFAutoComplete
+                      name="parking_management_code"
+                      options={options}
+                      size="small"
+                    />
+                  </StackRow>
+                </Grid>
+              </Grid>
+            </StackRow>
+            <StackRow>
+              <Grid container columnSpacing={2}>
+                <Grid item xs={12} md={6}>
+                  <Typography>店舗番号</Typography>
+                  <StackRow>
+                    <RHFTextField type="number" name="shop_no" />
+                  </StackRow>
+                </Grid>
+              </Grid>
+            </StackRow>
+            <StackRow>
+              <Button type="submit" variant="contained">
+                追加
+              </Button>
+            </StackRow>
+          </Stack>
+        </Box>
+      </Card>
+    </FormProvider>
+  );
+}

src/pages/index.ts

@@ -48,6 +48,7 @@ export const TabID = {
   店舗詳細_メイン: id++,
   店舗詳細_基本設定: id++,
   店舗詳細_QR認証設定: id++,
+  店舗詳細_QR印字設定: id++,
   店舗詳細_QR取得設定: id++,
 
   QRサービス券駐車場グループ管理_一覧: id++,

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",
 

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取得設定]),