135 lines
6.1 KiB
JavaScript
135 lines
6.1 KiB
JavaScript
import LtrTextField from "@/core/components/LtrTextField";
|
|
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
|
import MuiTimePicker from "@/core/components/MuiTimePicker";
|
|
import { FINISH_MISSION } from "@/core/utils/routes";
|
|
import useRequest from "@/lib/hooks/useRequest";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
|
|
import { format } from "date-fns-jalali";
|
|
import { useState } from "react";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import { mixed, object, string } from "yup";
|
|
|
|
const FinishMissionContent = ({ rowId, mutate, setOpenFinishMissionDialog }) => {
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const requestServer = useRequest({ notificationSuccess: true });
|
|
|
|
const validationSchema = object().shape({
|
|
end_km: string().required("لطفاً کیلومتر را وارد کنید."),
|
|
start_date: mixed().required("تاریخ خروج خودرو را مشخص کنید."),
|
|
start_time: mixed().required("ساعت خروج خودرو را مشخص کنید."),
|
|
});
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { isSubmitting },
|
|
} = useForm({
|
|
defaultValues: {
|
|
end_km: "",
|
|
start_date: null,
|
|
start_time: null,
|
|
},
|
|
resolver: yupResolver(validationSchema),
|
|
mode: "all",
|
|
});
|
|
|
|
const onSubmit = (values) => {
|
|
const formattedDate = values.start_date;
|
|
const formattedTime = format(values.start_time, "HH:mm");
|
|
requestServer(`${FINISH_MISSION}/${rowId}`, "post", {
|
|
data: {
|
|
end_km: values.end_km,
|
|
time: `${formattedDate} ${formattedTime}`,
|
|
},
|
|
hasSidebarUpdate: true,
|
|
})
|
|
.then(() => {
|
|
mutate();
|
|
setOpenFinishMissionDialog(false);
|
|
setSubmitting(false);
|
|
})
|
|
.catch(() => {
|
|
setSubmitting(false);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DialogContent>
|
|
<Stack alignItems="center" spacing={2}>
|
|
<Typography mt={2}>آیا از ورود خودرو و پایان ماموریت اطمینان دارید؟</Typography>
|
|
<Stack sx={{ width: "87%" }}>
|
|
<Controller
|
|
control={control}
|
|
name={"end_km"}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<LtrTextField
|
|
autoComplete="off"
|
|
type="tel"
|
|
value={field.value}
|
|
onChange={(e) => {
|
|
if (isNaN(Number(e.target.value))) return;
|
|
field.onChange(e.target.value);
|
|
}}
|
|
size="small"
|
|
sx={{ width: "100%" }}
|
|
fullWidth
|
|
label="کیلومتر خودرو / ساعت کار"
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
)}
|
|
/>
|
|
</Stack>
|
|
<Stack>
|
|
<Controller
|
|
control={control}
|
|
name={"start_date"}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<MuiDatePicker
|
|
name="start_date"
|
|
error={error}
|
|
value={field.value || null}
|
|
disableFuture={false}
|
|
placeholder={"تاریخ پایان ماموریت را وارد کنید"}
|
|
label={"تاریخ پایان ماموریت"}
|
|
setFieldValue={(name, value) => field.onChange(value || null)}
|
|
helperText={error ? error.message : null}
|
|
/>
|
|
)}
|
|
/>
|
|
</Stack>
|
|
<Stack>
|
|
<Controller
|
|
control={control}
|
|
name={"start_time"}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<MuiTimePicker
|
|
name="start_time"
|
|
error={error}
|
|
value={field.value || null}
|
|
views={["hours", "minutes"]}
|
|
placeholder={"زمان پایان ماموریت را وارد کنید"}
|
|
label={"زمان پایان ماموریت"}
|
|
setFieldValue={(name, value) => field.onChange(value || null)}
|
|
helperText={error ? error.message : null}
|
|
/>
|
|
)}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</DialogContent>
|
|
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
|
|
<Button onClick={() => setOpenFinishMissionDialog(false)} variant="outlined" color="secondary">
|
|
خیر !
|
|
</Button>
|
|
<Button onClick={handleSubmit(onSubmit)} variant="contained" color="primary" disabled={submitting}>
|
|
{submitting ? "درحال ثبت..." : "بله اطمینان دارم"}
|
|
</Button>
|
|
</DialogActions>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FinishMissionContent;
|