|
|
|
@@ -1,6 +1,7 @@ |
|
|
|
import { yupResolver } from "@hookform/resolvers/yup"; |
|
|
|
import { Box, Button, Stack, TextField, Typography } from "@mui/material"; |
|
|
|
import { HasChildren } from "@types"; |
|
|
|
import { HTAdjustData, getHTAdjustData } from "api/custom/hello-techno"; |
|
|
|
import { |
|
|
|
FormProvider, |
|
|
|
RHFAutoComplete, |
|
|
|
@@ -12,8 +13,9 @@ import { |
|
|
|
getValue, |
|
|
|
} from "components/hook-form/RHFAutoComplete"; |
|
|
|
import RHFDatePicker from "components/hook-form/RHFDatePicker"; |
|
|
|
import { useState } from "react"; |
|
|
|
import { useEffect, useMemo, useState } from "react"; |
|
|
|
import { useForm } from "react-hook-form"; |
|
|
|
import { dateTimeParse } from "utils/datetime"; |
|
|
|
import * as Yup from "yup"; |
|
|
|
|
|
|
|
type AreaBoxProps = { |
|
|
|
@@ -39,7 +41,7 @@ type Props = { |
|
|
|
onPrev?: VoidFunction; |
|
|
|
}; |
|
|
|
export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
|
const [adjustSeqNo, setAdjustSeqNo] = useState(""); |
|
|
|
const [adjustData, _setAdjustData] = useState<HTAdjustData | null>(null); |
|
|
|
|
|
|
|
const form = useForm<FormProps>({ |
|
|
|
defaultValues: { |
|
|
|
@@ -71,19 +73,30 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const setAdjustData = (data: HTAdjustData | null) => { |
|
|
|
_setAdjustData(data); |
|
|
|
}; |
|
|
|
|
|
|
|
const readOnly = useMemo(() => { |
|
|
|
return adjustData !== null; |
|
|
|
}, [adjustData]); |
|
|
|
|
|
|
|
const element = ( |
|
|
|
<FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}> |
|
|
|
<Stack spacing={2} sx={{ p: 1, m: 1 }}> |
|
|
|
<AreaBox title="利用日"> |
|
|
|
<RHFDatePicker name="date" size="small" /> |
|
|
|
<RHFDatePicker name="date" size="small" readOnly={readOnly} /> |
|
|
|
</AreaBox> |
|
|
|
<AreaBox title="金額"> |
|
|
|
<RHFTextField |
|
|
|
type="number" |
|
|
|
name="amount" |
|
|
|
size="small" |
|
|
|
InputProps={{ endAdornment: <div>円</div> }} |
|
|
|
InputProps={{ |
|
|
|
endAdornment: <div style={{ color: "black !important" }}>円</div>, |
|
|
|
}} |
|
|
|
sx={{ maxWidth: 150 }} |
|
|
|
readOnly={readOnly} |
|
|
|
/> |
|
|
|
</AreaBox> |
|
|
|
<AreaBox title="メモ"> |
|
|
|
@@ -100,6 +113,20 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
|
</Stack> |
|
|
|
</FormProvider> |
|
|
|
); |
|
|
|
useEffect(() => { |
|
|
|
if (adjustData) { |
|
|
|
form.setValue("amount", String(adjustData.amount)); |
|
|
|
form.setValue("date", dateTimeParse(adjustData.adjust_datetime)); |
|
|
|
} else { |
|
|
|
form.setValue("amount", ""); |
|
|
|
form.setValue("date", null); |
|
|
|
} |
|
|
|
}, [adjustData]); |
|
|
|
|
|
|
|
return { element, values: form.getValues, setValue: form.setValue }; |
|
|
|
return { |
|
|
|
element, |
|
|
|
values: form.getValues, |
|
|
|
setValue: form.setValue, |
|
|
|
setAdjustData, |
|
|
|
}; |
|
|
|
} |