From 8cf981104c1af8e8fbb77399929ab1dfdc91347b Mon Sep 17 00:00:00 2001 From: "sosuke.iwabuchi" Date: Tue, 9 Apr 2024 18:27:04 +0900 Subject: [PATCH] =?UTF-8?q?=E5=90=84=E7=A8=AE=E5=89=8A=E9=99=A4=E6=A9=9F?= =?UTF-8?q?=E8=83=BD=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 3 + src/api/login-user.ts | 32 +++++++++ src/api/shop.ts | 14 ++++ src/api/url.ts | 3 + .../login-user/店舗/一覧/TableBox.tsx | 67 ++++++++++++++++-- .../SearchBox.tsx | 3 + .../TableBox.tsx | 68 +++++++++++++++++-- .../shop/店舗詳細/基本設定/index.tsx | 2 + .../shop/店舗詳細/基本設定/削除.tsx | 65 ++++++++++++++++++ 9 files changed, 249 insertions(+), 8 deletions(-) create mode 100644 src/pages/dashboard/shop/店舗詳細/基本設定/削除.tsx diff --git a/src/api/index.ts b/src/api/index.ts index ddf5496..86e0da0 100644 --- a/src/api/index.ts +++ b/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++, diff --git a/src/api/login-user.ts b/src/api/login-user.ts index e4bfebe..9a65e71 100644 --- a/src/api/login-user.ts +++ b/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; +}; diff --git a/src/api/shop.ts b/src/api/shop.ts index b3df43a..978a1ee 100644 --- a/src/api/shop.ts +++ b/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 = { diff --git a/src/api/url.ts b/src/api/url.ts index 0dcb074..70b8b71 100644 --- a/src/api/url.ts +++ b/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", diff --git a/src/pages/dashboard/login-user/店舗/一覧/TableBox.tsx b/src/pages/dashboard/login-user/店舗/一覧/TableBox.tsx index 0d72c71..8430510 100644 --- a/src/pages/dashboard/login-user/店舗/一覧/TableBox.tsx +++ b/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 ( <> @@ -57,8 +98,8 @@ export default function TableBox({ table }: CommonProps) { /> - {fillteredRow.map((row, index) => ( - + {fillteredRow.map((row) => ( + ))} @@ -75,14 +116,16 @@ export default function TableBox({ table }: CommonProps) { onRowsPerPageChange={onChangeRowsPerPage} /> + {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 ( {data.name} {data.email} {data.shop_name} + + + ); } diff --git a/src/pages/dashboard/login-user/顧客ログインユーザ一覧/SearchBox.tsx b/src/pages/dashboard/login-user/顧客ログインユーザ一覧/SearchBox.tsx index 69fedba..98ff6e0 100644 --- a/src/pages/dashboard/login-user/顧客ログインユーザ一覧/SearchBox.tsx +++ b/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]); diff --git a/src/pages/dashboard/login-user/顧客ログインユーザ一覧/TableBox.tsx b/src/pages/dashboard/login-user/顧客ログインユーザ一覧/TableBox.tsx index 22750e6..4f0ac2f1 100644 --- a/src/pages/dashboard/login-user/顧客ログインユーザ一覧/TableBox.tsx +++ b/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 ( <> @@ -57,8 +99,8 @@ export default function TableBox({ table }: CommonProps) { /> - {fillteredRow.map((row, index) => ( - + {fillteredRow.map((row) => ( + ))} @@ -75,14 +117,16 @@ export default function TableBox({ table }: CommonProps) { onRowsPerPageChange={onChangeRowsPerPage} /> + {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 ( {data.name} @@ -97,6 +145,18 @@ function Row({ data }: RowProps) { {data.customer_name}({data.customer_code}) + + + ); } diff --git a/src/pages/dashboard/shop/店舗詳細/基本設定/index.tsx b/src/pages/dashboard/shop/店舗詳細/基本設定/index.tsx index c1bb604..fabe691 100644 --- a/src/pages/dashboard/shop/店舗詳細/基本設定/index.tsx +++ b/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() { <設定 /> + <削除 /> ); diff --git a/src/pages/dashboard/shop/店舗詳細/基本設定/削除.tsx b/src/pages/dashboard/shop/店舗詳細/基本設定/削除.tsx new file mode 100644 index 0000000..c161488 --- /dev/null +++ b/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 ( + + + + 店舗削除 + + + + + + {dialgElement} + + ); +}