各種削除機能追加

src/api/index.ts

@@ -23,6 +23,8 @@ export const ApiId = {
   店舗ログインユーザ新規登録: id++,
   店舗ログインユーザ一覧取得: id++,
   顧客ログインユーザ一覧取得: id++,
+  顧客ログインユーザ削除: id++,
+  店舗ログインユーザ削除: id++,
 
   // 顧客関連 ----------------------------------
   顧客マスタ一覧取得: id++,
@@ -34,6 +36,7 @@ export const ApiId = {
   // 店舗関連関連 ----------------------------------
   店舗一覧取得: id++,
   店舗新規登録: id++,
+  店舗削除: id++,
   デポジット情報取得: id++,
   デポジット異動履歴一覧取得: id++,
   デポジットチャージ: id++,

src/api/login-user.ts

@@ -104,3 +104,35 @@ export const 店舗ログインユーザ一覧取得 = async (
   });
   return res;
 };
+
+// -------顧客ログインユーザ削除---------------
+export type 顧客ログインユーザ削除Request = {
+  user_id: string;
+};
+export type 顧客ログインユーザ削除Response = {} & APICommonResponse;
+export const 顧客ログインユーザ削除 = async (
+  param: 顧客ログインユーザ削除Request
+) => {
+  const res = await request<顧客ログインユーザ削除Response>({
+    url: getUrl(ApiId.顧客ログインユーザ削除),
+    method: HttpMethod.POST,
+    data: makeParam(param),
+  });
+  return res;
+};
+
+// -------店舗ログインユーザ削除---------------
+export type 店舗ログインユーザ削除Request = {
+  user_id: string;
+};
+export type 店舗ログインユーザ削除Response = {} & APICommonResponse;
+export const 店舗ログインユーザ削除 = async (
+  param: 店舗ログインユーザ削除Request
+) => {
+  const res = await request<店舗ログインユーザ削除Response>({
+    url: getUrl(ApiId.店舗ログインユーザ削除),
+    method: HttpMethod.POST,
+    data: makeParam(param),
+  });
+  return res;
+};

src/api/shop.ts

@@ -76,6 +76,20 @@ export const 店舗新規登録 = async (param: 店舗新規登録Request) => {
   return res;
 };
 
+// -------店舗削除---------------
+export type 店舗削除Request = {
+  shop_id: string;
+};
+export type 店舗削除Response = {} & APICommonResponse;
+export const 店舗削除 = async (param: 店舗削除Request) => {
+  const res = await request<店舗削除Response>({
+    url: getUrl(ApiId.店舗削除),
+    method: HttpMethod.POST,
+    data: makeParam(param),
+  });
+  return res;
+};
+
 // -------デポジット情報取得---------------
 export type デポジット情報取得Request = {};
 export type デポジット情報取得Response = {

src/api/url.ts

@@ -18,6 +18,8 @@ const urls = {
   [A.店舗ログインユーザ新規登録]: "login-user/shop/register",
   [A.顧客ログインユーザ一覧取得]: "login-user/customer/list",
   [A.店舗ログインユーザ一覧取得]: "login-user/shop/list",
+  [A.顧客ログインユーザ削除]: "login-user/customer/delete",
+  [A.店舗ログインユーザ削除]: "login-user/shop/delete",
 
   // 顧客関連 ----------------------------------
   [A.顧客マスタ一覧取得]: "customer/list",
@@ -29,6 +31,7 @@ const urls = {
   // 店舗関連関連 ----------------------------------
   [A.店舗一覧取得]: "shop/list",
   [A.店舗新規登録]: "shop/register",
+  [A.店舗削除]: "shop/delete",
   [A.デポジット情報取得]: "shop/deposit",
   [A.デポジット異動履歴一覧取得]: "shop/deposit/transfer/list",
   [A.デポジットチャージ]: "shop/deposit/charge",

src/pages/dashboard/login-user/店舗/一覧/TableBox.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   Table,
   TableBody,
   TableCell,
@@ -7,22 +8,27 @@ import {
   TablePagination,
   TableRow,
 } from "@mui/material";
-import { 店舗ログインユーザ } from "api/login-user";
+import { 店舗ログインユーザ, 店舗ログインユーザ削除 } from "api/login-user";
 import TableHeadCustom, {
   HeadLabelProps,
 } from "components/table/TableHeadCustom";
+import useAPICall from "hooks/useAPICall";
 import useAuth from "hooks/useAuth";
+import { useDialog } from "hooks/useDialog";
 import useSnackbarCustom from "hooks/useSnackbarCustom";
 import { UseTableReturn } from "hooks/useTable";
+import { useEffect, useState } from "react";
 
 type CommonProps = {
   table: UseTableReturn<店舗ログインユーザ>;
 };
 export default function TableBox({ table }: CommonProps) {
+  const { info, error } = useSnackbarCustom();
   const TABLE_HEAD: HeadLabelProps[] = [
     { id: "name", label: "名前", align: "left", needSort: false },
     { id: "email", label: "Email", align: "left", needSort: false },
     { id: "shop_name", label: "店舗名", align: "left", needSort: false },
+    { id: "action", label: "", align: "left", needSort: false },
   ];
   const {
     order,
@@ -33,6 +39,7 @@ export default function TableBox({ table }: CommonProps) {
     fillteredRow,
     isNotFound,
     dataLength,
+    row,
     //
     onSort,
     onChangePage,
@@ -43,6 +50,40 @@ export default function TableBox({ table }: CommonProps) {
     ROWS_PER_PAGES,
   } = table;
 
+  const [tmpDeleteTargetUserId, setTmpDeleteTargetUserId] = useState("");
+
+  const { callAPI: call店舗ログインユーザ削除 } = useAPICall({
+    apiMethod: 店舗ログインユーザ削除,
+    onSuccess: (data, sendData) => {
+      info("削除しました");
+      setRowData(row.filter((r) => r.id !== sendData.user_id));
+    },
+    onFailed: () => {
+      error("失敗しました");
+    },
+  });
+
+  const {
+    element: dialogElement,
+    isAgree,
+    open: openDialog,
+  } = useDialog({
+    message: "本当に削除しますか",
+  });
+
+  const handleDelete = (userId: string) => {
+    setTmpDeleteTargetUserId(userId);
+    openDialog();
+  };
+
+  useEffect(() => {
+    if (isAgree) {
+      call店舗ログインユーザ削除({
+        user_id: tmpDeleteTargetUserId,
+      });
+    }
+  }, [isAgree]);
+
   return (
     <>
       <TableContainer>
@@ -57,8 +98,8 @@ export default function TableBox({ table }: CommonProps) {
           />
 
           <TableBody>
-            {fillteredRow.map((row, index) => (
-              <Row data={row} key={index} />
+            {fillteredRow.map((row) => (
+              <Row data={row} onDelete={handleDelete} key={row.id} />
             ))}
           </TableBody>
         </Table>
@@ -75,14 +116,16 @@ export default function TableBox({ table }: CommonProps) {
           onRowsPerPageChange={onChangeRowsPerPage}
         />
       </Box>
+      {dialogElement}
     </>
   );
 }
 
 type RowProps = {
   data: 店舗ログインユーザ;
+  onDelete: (userId: string) => void;
 };
-function Row({ data }: RowProps) {
+function Row({ data, onDelete }: RowProps) {
   const { switchShopRole } = useAuth();
   const { info } = useSnackbarCustom();
   const handleClick = () => {
@@ -90,11 +133,27 @@ function Row({ data }: RowProps) {
     info("成り代わり開始しました");
   };
 
+  const handleDelete = () => {
+    onDelete(data.id);
+  };
+
   return (
     <TableRow hover sx={{ cursor: "pointer" }} onClick={handleClick}>
       <TableCell>{data.name}</TableCell>
       <TableCell>{data.email}</TableCell>
       <TableCell>{data.shop_name}</TableCell>
+      <TableCell>
+        <Button
+          variant="contained"
+          color="error"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleDelete();
+          }}
+        >
+          削除
+        </Button>
+      </TableCell>
     </TableRow>
   );
 }

src/pages/dashboard/login-user/顧客ログインユーザ一覧/SearchBox.tsx

@@ -53,9 +53,12 @@ export default function SearchBox({ table }: CommonProps) {
     }
   };
 
+  // 初期値設定
   useEffect(() => {
     if (initialized) {
       fetch(condition);
+      form.setValue("name", get("name"));
+      form.setValue("email", get("email"));
     }
   }, [condition, initialized]);
 

src/pages/dashboard/login-user/顧客ログインユーザ一覧/TableBox.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   Table,
   TableBody,
   TableCell,
@@ -7,22 +8,28 @@ import {
   TablePagination,
   TableRow,
 } from "@mui/material";
-import { 顧客ログインユーザ } from "api/login-user";
+import { 顧客ログインユーザ, 顧客ログインユーザ削除 } from "api/login-user";
 import TableHeadCustom, {
   HeadLabelProps,
 } from "components/table/TableHeadCustom";
+import useAPICall from "hooks/useAPICall";
 import useAuth from "hooks/useAuth";
+import { useDialog } from "hooks/useDialog";
 import useSnackbarCustom from "hooks/useSnackbarCustom";
 import { UseTableReturn } from "hooks/useTable";
+import { useEffect, useState } from "react";
 
 type CommonProps = {
   table: UseTableReturn<顧客ログインユーザ>;
 };
 export default function TableBox({ table }: CommonProps) {
+  const { info, error } = useSnackbarCustom();
+
   const TABLE_HEAD: HeadLabelProps[] = [
     { id: "name", label: "名前", align: "left", needSort: false },
     { id: "email", label: "Email", align: "left", needSort: false },
     { id: "customer_name", label: "顧客名", align: "left", needSort: false },
+    { id: "action", label: "", align: "left", needSort: false },
   ];
   const {
     order,
@@ -33,6 +40,7 @@ export default function TableBox({ table }: CommonProps) {
     fillteredRow,
     isNotFound,
     dataLength,
+    row,
     //
     onSort,
     onChangePage,
@@ -43,6 +51,40 @@ export default function TableBox({ table }: CommonProps) {
     ROWS_PER_PAGES,
   } = table;
 
+  const [tmpDeleteTargetUserId, setTmpDeleteTargetUserId] = useState("");
+
+  const { callAPI: call顧客ログインユーザ削除 } = useAPICall({
+    apiMethod: 顧客ログインユーザ削除,
+    onSuccess: (data, sendData) => {
+      info("削除しました");
+      setRowData(row.filter((r) => r.id !== sendData.user_id));
+    },
+    onFailed: () => {
+      error("失敗しました");
+    },
+  });
+
+  const {
+    element: dialogElement,
+    isAgree,
+    open: openDialog,
+  } = useDialog({
+    message: "本当に削除しますか",
+  });
+
+  const handleDelete = (userId: string) => {
+    setTmpDeleteTargetUserId(userId);
+    openDialog();
+  };
+
+  useEffect(() => {
+    if (isAgree) {
+      call顧客ログインユーザ削除({
+        user_id: tmpDeleteTargetUserId,
+      });
+    }
+  }, [isAgree]);
+
   return (
     <>
       <TableContainer>
@@ -57,8 +99,8 @@ export default function TableBox({ table }: CommonProps) {
           />
 
           <TableBody>
-            {fillteredRow.map((row, index) => (
-              <Row data={row} key={index} />
+            {fillteredRow.map((row) => (
+              <Row data={row} onDelete={handleDelete} key={row.id} />
             ))}
           </TableBody>
         </Table>
@@ -75,14 +117,16 @@ export default function TableBox({ table }: CommonProps) {
           onRowsPerPageChange={onChangeRowsPerPage}
         />
       </Box>
+      {dialogElement}
     </>
   );
 }
 
 type RowProps = {
   data: 顧客ログインユーザ;
+  onDelete: (userId: string) => void;
 };
-function Row({ data }: RowProps) {
+function Row({ data, onDelete }: RowProps) {
   const { switchCustomerRole } = useAuth();
   const { info } = useSnackbarCustom();
   const handleClick = () => {
@@ -90,6 +134,10 @@ function Row({ data }: RowProps) {
     info("成り代わり開始しました");
   };
 
+  const handleDelete = () => {
+    onDelete(data.id);
+  };
+
   return (
     <TableRow hover sx={{ cursor: "pointer" }} onClick={handleClick}>
       <TableCell>{data.name}</TableCell>
@@ -97,6 +145,18 @@ function Row({ data }: RowProps) {
       <TableCell>
         {data.customer_name}({data.customer_code})
       </TableCell>
+      <TableCell>
+        <Button
+          variant="contained"
+          color="error"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleDelete();
+          }}
+        >
+          削除
+        </Button>
+      </TableCell>
     </TableRow>
   );
 }

src/pages/dashboard/shop/店舗詳細/基本設定/index.tsx

@@ -2,6 +2,7 @@ import { Box, Stack } from "@mui/material";
 import useDashboard from "hooks/useDashBoard";
 import { PageID, TabID } from "pages";
 import 設定 from "./設定";
+import 削除 from "./削除";
 
 export default function 店舗詳細設定() {
   const {} = useDashboard(PageID.店舗詳細, TabID.店舗詳細_基本設定);
@@ -13,6 +14,7 @@ function Page() {
     <Box>
       <Stack spacing={2}>
         <設定 />
+        <削除 />
       </Stack>
     </Box>
   );

src/pages/dashboard/shop/店舗詳細/基本設定/削除.tsx

@@ -0,0 +1,65 @@
+import { Box, Button, Card, Stack, Typography } from "@mui/material";
+import { 店舗削除 } from "api/shop";
+import StackRow from "components/stack/StackRow";
+import { 店舗詳細Context } from "contexts/page/dashboard/shop/店舗詳細Context";
+import useAPICall from "hooks/useAPICall";
+import { useDialog } from "hooks/useDialog";
+import useNavigateCustom from "hooks/useNavigateCustom";
+import useSnackbarCustom from "hooks/useSnackbarCustom";
+import { PageID } from "pages";
+import { useContext, useEffect } from "react";
+import { getPath } from "routes/path";
+
+export default function Main() {
+  const { shop } = useContext(店舗詳細Context);
+  const { success, error } = useSnackbarCustom();
+  const { navigateWhenChanged } = useNavigateCustom();
+
+  const { callAPI: call店舗削除 } = useAPICall({
+    apiMethod: 店舗削除,
+    backDrop: true,
+    onSuccess: () => {
+      success("設定しました");
+      navigateWhenChanged(getPath(PageID.店舗一覧));
+    },
+    onFailed: () => {
+      error("失敗しました");
+    },
+  });
+
+  const {
+    element: dialgElement,
+    isAgree,
+    open: openDialog,
+  } = useDialog({
+    message: "本当に削除しますか",
+  });
+
+  const handleClick = () => {
+    openDialog();
+  };
+
+  useEffect(() => {
+    if (isAgree) {
+      call店舗削除({
+        shop_id: shop?.shop_id ?? "",
+      });
+    }
+  }, [isAgree]);
+
+  return (
+    <Card sx={{ p: 2 }} elevation={1}>
+      <Box>
+        <Stack spacing={2}>
+          <Typography variant="h6">店舗削除</Typography>
+          <StackRow>
+            <Button variant="contained" color="error" onClick={handleClick}>
+              削除
+            </Button>
+          </StackRow>
+        </Stack>
+      </Box>
+      {dialgElement}
+    </Card>
+  );
+}