implement => add buyer form
This commit is contained in:
@@ -0,0 +1,365 @@
|
||||
import { Autocomplete, IconButton, TextField, Typography } from "@mui/material";
|
||||
import { Grid } from "../../../../components/grid/Grid";
|
||||
import { useFormik } from "formik";
|
||||
import { Yup } from "../../../../lib/yup/yup";
|
||||
import { SPACING } from "../../../../data/spacing";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { LOADING_END } from "../../../../lib/redux/slices/appSlice";
|
||||
import {
|
||||
stewardSellOutGetBuyers,
|
||||
stewatdSubmitBuyerDataService,
|
||||
} from "../../../guild/services/steward-sell-out-get-buyers";
|
||||
import { useContext, useEffect } from "react";
|
||||
import { AppContext } from "../../../../contexts/AppContext";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import { slaughterEditBuyerDataService } from "../../../slaughter-house/services/slaughter-house-submit-buyer";
|
||||
|
||||
export const validationSchemaForStewardAddBuyer = Yup.object({
|
||||
mobile: Yup.string()
|
||||
.required("این فیلد اجباری است!")
|
||||
.min(11, "شماره موبایل باید 11 رقم باشد")
|
||||
.max(11, "شماره موبایل باید 11 رقم باشد")
|
||||
.matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
|
||||
firstName: Yup.string()
|
||||
.required("این فیلد اجباری است!")
|
||||
.typeError("لطفا فیلد را به درستی وارد کنید!"),
|
||||
lastName: Yup.string()
|
||||
.required("این فیلد اجباری است!")
|
||||
.typeError("لطفا فیلد را به درستی وارد کنید!"),
|
||||
unit_name: Yup.string()
|
||||
.required("این فیلد اجباری است!")
|
||||
.typeError("لطفا فیلد را به درستی وارد کنید!"),
|
||||
province: Yup.string()
|
||||
.required("این فیلد اجباری است!")
|
||||
.typeError("لطفا فیلد را به درستی وارد کنید!"),
|
||||
city: Yup.string()
|
||||
.required("این فیلد اجباری است!")
|
||||
.typeError("لطفا فیلد را به درستی وارد کنید!"),
|
||||
});
|
||||
|
||||
export const handleSubmitForStewardAddBuyer = (
|
||||
formik,
|
||||
dispatch,
|
||||
isEdit,
|
||||
tableData,
|
||||
updateTable,
|
||||
openNotif,
|
||||
DRAWER,
|
||||
role
|
||||
) => {
|
||||
if (isEdit) {
|
||||
dispatch(
|
||||
slaughterEditBuyerDataService({
|
||||
buyer_key: tableData?.key,
|
||||
mobile: formik.values.mobile,
|
||||
first_name: formik.values.firstName,
|
||||
last_name: formik.values.lastName,
|
||||
unit_name: formik.values.unit_name,
|
||||
city: formik.values.city,
|
||||
province: formik.values.province,
|
||||
})
|
||||
).then((r) => {
|
||||
updateTable();
|
||||
if (r.payload.error) {
|
||||
openNotif({
|
||||
vertical: "top",
|
||||
horizontal: "center",
|
||||
msg: r.payload.error,
|
||||
severity: "error",
|
||||
});
|
||||
} else {
|
||||
dispatch(DRAWER({ right: false, bottom: false, content: null }));
|
||||
|
||||
openNotif({
|
||||
vertical: "top",
|
||||
horizontal: "center",
|
||||
msg: "عملیات با موفقیت انجام شد.",
|
||||
severity: "success",
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dispatch(
|
||||
stewatdSubmitBuyerDataService({
|
||||
role: role,
|
||||
mobile: formik.values.mobile,
|
||||
first_name: formik.values.firstName,
|
||||
last_name: formik.values.lastName,
|
||||
unit_name: formik.values.unit_name,
|
||||
city: formik.values.city,
|
||||
province: formik.values.province,
|
||||
})
|
||||
).then((r) => {
|
||||
updateTable();
|
||||
if (r.payload.error) {
|
||||
openNotif({
|
||||
vertical: "top",
|
||||
horizontal: "center",
|
||||
msg: r.payload.error,
|
||||
severity: "error",
|
||||
});
|
||||
} else {
|
||||
dispatch(DRAWER({ right: false, bottom: false, content: null }));
|
||||
|
||||
openNotif({
|
||||
vertical: "top",
|
||||
horizontal: "center",
|
||||
msg: "عملیات با موفقیت انجام شد.",
|
||||
severity: "success",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const handleSetFormDataFromTableDataForStewardAddBuyer = (
|
||||
tableData,
|
||||
formik
|
||||
) => {
|
||||
formik.setValues({
|
||||
mobile: tableData.mobile || "",
|
||||
firstName: tableData.firstName || "",
|
||||
lastName: tableData.lastName || "",
|
||||
unit_name: tableData.unitName || "",
|
||||
province: tableData.province || "",
|
||||
city: tableData.city || "",
|
||||
});
|
||||
setTimeout(() => {
|
||||
formik.validateForm();
|
||||
}, 1);
|
||||
};
|
||||
|
||||
export const handleSetFormDataFromUserDataForStewardAddBuyer = (
|
||||
userData,
|
||||
formik
|
||||
) => {
|
||||
const user = userData?.[0];
|
||||
if (user) {
|
||||
console.log(user);
|
||||
formik.setValues({
|
||||
mobile: user.mobile || "",
|
||||
firstName: user.firstName || "",
|
||||
lastName: user.lastName || "",
|
||||
unit_name: user.unitName || "",
|
||||
province: user.province || "",
|
||||
city: user.city || "",
|
||||
});
|
||||
setTimeout(() => {
|
||||
formik.validateForm();
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
|
||||
export const InquiryForStewardAddBuyer = ({
|
||||
notFound,
|
||||
setNotFound,
|
||||
setUserData,
|
||||
formik,
|
||||
}) => {
|
||||
const [openNotif] = useContext(AppContext);
|
||||
const selectedSubUser = useSelector(
|
||||
(state) => state.userSlice.selectedSubUser
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const formik2 = useFormik({
|
||||
initialValues: {
|
||||
mobile: "",
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
mobile: Yup.string()
|
||||
.required("این فیلد اجباری است!")
|
||||
.min(11, "شماره موبایل باید 11 رقم باشد")
|
||||
.max(11, "شماره موبایل باید 11 رقم باشد")
|
||||
.matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
|
||||
}),
|
||||
validateOnMount: true,
|
||||
});
|
||||
|
||||
const handleInquiry = () => {
|
||||
dispatch(
|
||||
stewardSellOutGetBuyers({
|
||||
mobile: formik2.values.mobile,
|
||||
role_key: selectedSubUser?.key || "",
|
||||
})
|
||||
).then((r) => {
|
||||
dispatch(LOADING_END());
|
||||
if (r.error) {
|
||||
setNotFound(true);
|
||||
openNotif({
|
||||
vertical: "top",
|
||||
horizontal: "center",
|
||||
msg: "خریدار یافت نشد، یک خریدار جدید ثبت کنید!",
|
||||
severity: "error",
|
||||
});
|
||||
} else {
|
||||
const responseData = r.payload?.data;
|
||||
// Check if response is an empty array
|
||||
if (Array.isArray(responseData) && responseData.length === 0) {
|
||||
setNotFound(true);
|
||||
setUserData(null);
|
||||
} else {
|
||||
setNotFound(false);
|
||||
handleSetFormDataFromUserDataForStewardAddBuyer(responseData, formik);
|
||||
setUserData(responseData);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (notFound) {
|
||||
formik.setFieldValue("mobile", formik2.values.mobile);
|
||||
}
|
||||
}, [notFound]);
|
||||
|
||||
return (
|
||||
<Grid container xs={12}>
|
||||
<Typography>جستجو کاربر</Typography>
|
||||
<Grid mt={SPACING.SMALL} display="flex" width={1}>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="mobile"
|
||||
label="شماره موبایل"
|
||||
variant="outlined"
|
||||
value={formik2.values.mobile}
|
||||
error={formik2.touched.mobile && Boolean(formik2.errors.mobile)}
|
||||
onChange={(e) => {
|
||||
formik2.handleChange(e);
|
||||
// Reset notFound when user starts typing
|
||||
if (notFound) {
|
||||
setNotFound(false);
|
||||
}
|
||||
}}
|
||||
onBlur={formik2.handleBlur}
|
||||
helperText={formik2.touched.mobile && formik2.errors.mobile}
|
||||
/>
|
||||
<IconButton
|
||||
disabled={!formik2.isValid}
|
||||
aria-label="search"
|
||||
color="primary"
|
||||
onClick={handleInquiry}
|
||||
>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
{notFound && (
|
||||
<Grid container xs={12} mt={SPACING.SMALL}>
|
||||
<Typography variant="body2" color="error" sx={{ width: "100%" }}>
|
||||
خریداری یافت نشد
|
||||
</Typography>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export const StewardAddBuyerForm = ({
|
||||
formik,
|
||||
provinceData,
|
||||
cityData,
|
||||
notFound,
|
||||
}) => {
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
justifyContent="space-between"
|
||||
alignItems="start"
|
||||
xs={12}
|
||||
direction="column"
|
||||
gap={2}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="mobile"
|
||||
label="شماره موبایل"
|
||||
variant="outlined"
|
||||
value={formik.values.mobile}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
helperText={formik.touched.mobile && formik.errors.mobile}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="firstName"
|
||||
label="نام"
|
||||
variant="outlined"
|
||||
value={formik.values.firstName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
helperText={formik.touched.firstName && formik.errors.firstName}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="lastName"
|
||||
label="نام خانوادگی"
|
||||
variant="outlined"
|
||||
value={formik.values.lastName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
helperText={formik.touched.lastName && formik.errors.lastName}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="unit_name"
|
||||
label="نام واحد"
|
||||
variant="outlined"
|
||||
value={formik.values.unit_name}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
helperText={formik.touched.unit_name && formik.errors.unit_name}
|
||||
/>
|
||||
{provinceData.length > 0 && (
|
||||
<Autocomplete
|
||||
style={{ width: "100%" }}
|
||||
disablePortal
|
||||
id="province"
|
||||
options={
|
||||
provinceData
|
||||
? provinceData.map((i) => ({ id: i.name, label: i.name }))
|
||||
: []
|
||||
}
|
||||
onChange={(e, value) => {
|
||||
formik.setFieldValue("province", value ? value.id : "");
|
||||
formik.setFieldValue("city", "");
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="استان را انتخاب کنید" />
|
||||
)}
|
||||
value={
|
||||
provinceData.find((i) => i.name === formik.values.province)?.name
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{!notFound && (
|
||||
<Typography variant="caption" color="error">
|
||||
استان: {formik.values.province}
|
||||
</Typography>
|
||||
)}
|
||||
{cityData.length > 0 && (
|
||||
<Autocomplete
|
||||
key={formik.values.city}
|
||||
style={{ width: "100%" }}
|
||||
disabled={!formik.values.province}
|
||||
disablePortal
|
||||
id="city"
|
||||
options={
|
||||
cityData ? cityData.map((i) => ({ id: i.name, label: i.name })) : []
|
||||
}
|
||||
onChange={(e, value) => {
|
||||
formik.setFieldValue("city", value ? value.id : "");
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="شهر را انتخاب کنید" />
|
||||
)}
|
||||
value={cityData.find((i) => i.name === formik.values.city)?.name}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!notFound && (
|
||||
<Typography variant="caption" color="error">
|
||||
شهر: {formik.values.city}
|
||||
</Typography>
|
||||
)}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user