diff --git a/src/api/index.ts b/src/api/index.ts index 1b0aa15..94e6fb8 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -27,6 +27,8 @@ export const ApiId = { RECEIPT_ISSUING_ORDER: id++, RECEIPT_ISSUING_ORDER_CREATE: id++, RECEIPT_ISSUING_ORDER_MAIL_POST_COMPLETE: id++, + RECEIPT_ISSUING_ORDER_HANDELRS: id++, + RECEIPT_ISSUING_ORDER_CHANGE_HANDELR: id++, DOWNLOAD_RECEIPT_LETTER: id++, CONTRACTS: id++, diff --git a/src/api/receipt-issuing-order.ts b/src/api/receipt-issuing-order.ts index 47e0003..b7194d1 100644 --- a/src/api/receipt-issuing-order.ts +++ b/src/api/receipt-issuing-order.ts @@ -1,5 +1,14 @@ -import { APICommonResponse, ApiId, HttpMethod, makeParam, request } from "."; +import { Dictionary } from "@types"; +import { + APICommonResponse, + ApiId, + HttpMethod, + TimestampRequest, + makeParam, + request, +} from "."; import { getUrl } from "./url"; +import { string } from "yup"; export type ReceiptIssuingOrder = { id: string; @@ -43,6 +52,11 @@ export type ReceiptIssuingOrder = { updated_at: string; }; +export type Handler = { + id: string; + name: string; +}; + // 領収証発行一覧取得 ----------------------- export type ReceiptIssuingOrdersRequest = { address?: string; @@ -80,3 +94,35 @@ export const completeMailPost = async (data: MailPostCompleteRequest) => { }); return res; }; + +// 担当者一覧取得 ----------------------- +export type HandlersRequest = {}; +export type HandlersResponse = { + data: { + records: Handler[]; + }; +} & APICommonResponse; + +export const getHandlers = async (data: HandlersRequest) => { + const res = await request({ + url: getUrl(ApiId.RECEIPT_ISSUING_ORDER_HANDELRS), + method: HttpMethod.GET, + data: makeParam(data), + }); + return res; +}; + +// 担当者変更 ----------------------- +export type ChangeHandlerRequest = { + id: string; + handler_id: string; +} & TimestampRequest; + +export const changeHandler = async (data: ChangeHandlerRequest) => { + const res = await request({ + url: getUrl(ApiId.RECEIPT_ISSUING_ORDER_CHANGE_HANDELR), + method: HttpMethod.POST, + data: makeParam(data), + }); + return res; +}; diff --git a/src/api/url.ts b/src/api/url.ts index e4dbe04..ad5d89d 100644 --- a/src/api/url.ts +++ b/src/api/url.ts @@ -15,6 +15,9 @@ const urls = { [A.RECEIPT_ISSUING_ORDER_MAIL_ORDER]: "receipt-issuing-order/mail-order", [A.RECEIPT_ISSUING_ORDER_MAIL_POST_COMPLETE]: "receipt-issuing-order/mail-complete", + [A.RECEIPT_ISSUING_ORDER_HANDELRS]: "receipt-issuing-order/handlers", + [A.RECEIPT_ISSUING_ORDER_CHANGE_HANDELR]: + "receipt-issuing-order/change-handler", [A.DOWNLOAD_RECEIPT_LETTER]: "receipt-letter/download", [A.RECEIPT_ISSUING_ORDERS]: "receipt-issuing-orders", diff --git a/src/pages/dashboard/receipt-issuing-order/custom/hello-techno/detail.tsx b/src/pages/dashboard/receipt-issuing-order/custom/hello-techno/detail.tsx index 7cb39f2..75cb215 100644 --- a/src/pages/dashboard/receipt-issuing-order/custom/hello-techno/detail.tsx +++ b/src/pages/dashboard/receipt-issuing-order/custom/hello-techno/detail.tsx @@ -27,6 +27,7 @@ import { formatDateStr, formatDateTimeStr } from "utils/datetime"; import useMailPostCompleteDialog from "./hooks/useMailPostCompleteDialog"; import { getFullUrl } from "api/url"; import { ApiId } from "api"; +import useChangeHandlerDialog from "../../hooks/useChangeHandlerDialog"; export default function ReceiptIssuingOrderDetail() { const { setHeaderTitle, setTabs } = useDashboard( @@ -47,6 +48,10 @@ export default function ReceiptIssuingOrderDetail() { fetch(); }); + const changeHandlerDialog = useChangeHandlerDialog(order, () => { + fetch(); + }); + const { callAPI, sending } = useAPICall({ apiMethod: getReceiptIssuingOrders, onSuccess: (res) => { @@ -79,7 +84,16 @@ export default function ReceiptIssuingOrderDetail() { { title: "担当者", value: order.handler_name, - // end: , + end: ( + + ), }, { title: "SMS送信先", value: order.sms_phone_number }, { title: "依頼日", value: formatDateStr(order.order_datetime) }, @@ -182,94 +196,97 @@ export default function ReceiptIssuingOrderDetail() { }, [sending]); return ( - - - - - - - - - - - - 依頼内容 - - - - - 領収証情報 - - + <> + + + + + - - - - - - - 郵送管理 - - - {hasMailOrder && ( - <> - - - 郵送先 - - - - - + 郵送先 + + + + + - - - {postCompleteDialog.element} - - )} - - - - - - - - 各種アクション日時 - - - - + + + {postCompleteDialog.element} + + )} + + + + + + + + 各種アクション日時 + + + + + - - + + {changeHandlerDialog.element} + ); } diff --git a/src/pages/dashboard/receipt-issuing-order/hooks/useChangeHandlerDialog.tsx b/src/pages/dashboard/receipt-issuing-order/hooks/useChangeHandlerDialog.tsx new file mode 100644 index 0000000..fee6aa6 --- /dev/null +++ b/src/pages/dashboard/receipt-issuing-order/hooks/useChangeHandlerDialog.tsx @@ -0,0 +1,144 @@ +import { yupResolver } from "@hookform/resolvers/yup"; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, +} from "@mui/material"; +import { Dictionary } from "@types"; +import { + Handler, + ReceiptIssuingOrder, + changeHandler, + getHandlers, +} from "api/receipt-issuing-order"; +import { FormProvider } from "components/hook-form"; +import RHFSelect, { + SelectOptionProps, + makeOptions, +} from "components/hook-form/RHFSelect"; +import useAPICall from "hooks/useAPICall"; +import useSnackbarCustom from "hooks/useSnackbarCustom"; +import { useEffect, useMemo, useState } from "react"; +import { useForm } from "react-hook-form"; +import * as Yup from "yup"; + +type FormProps = { + handler_id: string; +}; + +export default function useChangeHandlerDialog( + order: ReceiptIssuingOrder | null, + onComplete?: VoidFunction +) { + const [show, setShow] = useState(false); + const { success, error } = useSnackbarCustom(); + + const [handlers, setHandlers] = useState(null); + + const options: SelectOptionProps[] = useMemo(() => { + if (handlers === null) return []; + return handlers.map((ele) => ({ + value: ele.id, + label: ele.name, + })); + }, [handlers]); + + const form = useForm({ + defaultValues: { + handler_id: "", + }, + resolver: yupResolver( + Yup.object().shape({ + handler_id: Yup.string().required("必須項目です"), + }) + ), + }); + + const { callAPI: callGetHandlers } = useAPICall({ + apiMethod: getHandlers, + backDrop: true, + onSuccess: ({ data }) => { + setHandlers(data.records); + }, + }); + + const { callAPI: callChangeHandler } = useAPICall({ + apiMethod: changeHandler, + backDrop: true, + onSuccess: () => { + success("変更しました"); + setShow(false); + if (onComplete) { + onComplete(); + } + }, + onFailed: () => { + error("失敗しました"); + }, + }); + + const open = () => { + setShow(true); + }; + + const close = () => { + setShow(false); + }; + + const handleSubmit = (data: FormProps) => { + if (!order) return; + callChangeHandler({ + id: order.id, + handler_id: data.handler_id, + timestamp: order.updated_at, + }); + }; + + const element = ( + + 担当者変更 + + + + + + + + + + + + + ); + + useEffect(() => { + setHandlers(null); + form.setValue("handler_id", ""); + if (show) { + callGetHandlers({}); + } + }, [show]); + + return { + // param + show, + + // Element + element, + // function + + open, + close, + setShow, + }; +}