355 lines
17 KiB
JavaScript
355 lines
17 KiB
JavaScript
import { useTranslations } from "next-intl";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Chip,
|
|
DialogActions,
|
|
DialogContent,
|
|
Divider,
|
|
FormControl,
|
|
FormHelperText,
|
|
Grid,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
TextField,
|
|
} from "@mui/material";
|
|
import { useEffect, useState } from "react";
|
|
import { useFormik } from "formik";
|
|
import { GET_CITY_LIST, UPDATE_EXPERT_MANAGEMENT } from "@/core/data/apiRoutes";
|
|
import * as Yup from "yup";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
import useProvince from "@/lib/app/hooks/useProvince";
|
|
import useRole from "@/lib/app/hooks/useRole";
|
|
|
|
const UpdateContent = ({ row, mutate, setOpenUpdateDialog }) => {
|
|
const t = useTranslations();
|
|
const requestServer = useRequest();
|
|
const [cityList, setCityList] = useState([]);
|
|
const [citiesExist, setCitiesExist] = useState(false);
|
|
const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
|
|
const { provinceList, isLoadingProvinceList, errorProvinceList } = useProvince();
|
|
const { roleList, isLoadingRoleList, errorRoleList } = useRole();
|
|
|
|
function getCities(province_id) {
|
|
formik.setFieldTouched("city_id", false, false);
|
|
citiesExist && formik.setFieldValue("city_id", "");
|
|
setCityTextField(t("ExpertMangement.text_field_loading_cities_list"));
|
|
requestServer(`${GET_CITY_LIST}?province_id=${province_id}`, "get", { auth: true, notification: false })
|
|
.then(({ data }) => {
|
|
const result = data.data;
|
|
const formattedData = result.map((city, index) => ({
|
|
id: index,
|
|
name: city.name,
|
|
value: city.id,
|
|
}));
|
|
setCitiesExist(true);
|
|
setCityList(formattedData);
|
|
setCityTextField(t("ExpertMangement.text_field_city_id"));
|
|
})
|
|
.catch(() => {
|
|
setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"));
|
|
});
|
|
}
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
name: Yup.string().required(t("ExpertMangement.error_message_name")),
|
|
username: Yup.string().required(t("ExpertMangement.error_message_username")),
|
|
email: Yup.string(),
|
|
phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
|
|
national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
|
|
position: Yup.string().required(t("ExpertMangement.error_message_position")),
|
|
province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
|
|
city_id: Yup.string(),
|
|
role_id: Yup.string().required(t("ExpertMangement.error_message_role_id")),
|
|
});
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
name: row.original.name,
|
|
username: row.original.username,
|
|
email: row.original.email,
|
|
phone_number: row.original.phone_number,
|
|
national_id: row.original.national_id,
|
|
position: row.original.position,
|
|
province_id: row.original.province_id,
|
|
city_id: row.original.city_id,
|
|
role_id: row.original.roles[0].id,
|
|
},
|
|
validationSchema,
|
|
onSubmit: (values, { setSubmitting }) => {
|
|
const formData = new FormData();
|
|
formData.append("name", values.name);
|
|
formData.append("national_id", values.national_id);
|
|
formData.append("phone_number", values.phone_number);
|
|
formData.append("email", values.email);
|
|
formData.append("username", values.username);
|
|
formData.append("province_id", values.province_id);
|
|
formData.append("city_id", values.city_id);
|
|
formData.append("position", values.position);
|
|
formData.append("role_id", values.role_id);
|
|
|
|
requestServer(`${UPDATE_EXPERT_MANAGEMENT}/${row.original.id}`, "post", { auth: true, data: formData })
|
|
.then((response) => {
|
|
setOpenUpdateDialog(false);
|
|
mutate();
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
setSubmitting(false);
|
|
});
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
getCities(formik.values.province_id);
|
|
}, [formik.values.province_id]);
|
|
|
|
return (
|
|
<>
|
|
<DialogContent>
|
|
<Box sx={{ my: 1 }}>
|
|
<Divider>
|
|
<Chip label={t("ExpertMangement.personal_info")} />
|
|
</Divider>
|
|
</Box>
|
|
<Grid container justifyContent="space-around" spacing={2} sx={{ pb: 2 }}>
|
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
|
<TextField
|
|
name="name"
|
|
label={t("ExpertMangement.text_field_name")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
value={formik.values.name}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.name && !!formik.errors.name}
|
|
helperText={formik.touched.name && formik.errors.name ? formik.errors.name : null}
|
|
sx={{ width: "100%" }}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
|
<TextField
|
|
name="national_id"
|
|
label={t("ExpertMangement.text_field_national_id")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
value={formik.values.national_id}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.national_id && !!formik.errors.national_id}
|
|
helperText={
|
|
formik.touched.national_id && formik.errors.national_id
|
|
? formik.errors.national_id
|
|
: null
|
|
}
|
|
sx={{ width: "100%" }}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
|
<TextField
|
|
name="phone_number"
|
|
label={t("ExpertMangement.text_field_phone_number")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
value={formik.values.phone_number}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.phone_number && !!formik.errors.phone_number}
|
|
helperText={
|
|
formik.touched.phone_number && formik.errors.phone_number
|
|
? formik.errors.phone_number
|
|
: null
|
|
}
|
|
sx={{ width: "100%" }}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
|
<TextField
|
|
name="email"
|
|
label={t("ExpertMangement.text_field_email")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
value={formik.values.email}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.email && !!formik.errors.email}
|
|
helperText={formik.touched.email && formik.errors.email ? formik.errors.email : null}
|
|
sx={{ width: "100%" }}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Box sx={{ my: 1 }}>
|
|
<Divider>
|
|
<Chip label={t("ExpertMangement.user_info")} />
|
|
</Divider>
|
|
</Box>
|
|
<Grid container justifyContent="space-around" spacing={2} sx={{ pb: 2 }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
name="username"
|
|
label={t("ExpertMangement.text_field_username")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
value={formik.values.username}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.username && !!formik.errors.username}
|
|
helperText={
|
|
formik.touched.username && formik.errors.username ? formik.errors.username : null
|
|
}
|
|
sx={{ width: "100%" }}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Box sx={{ my: 1 }}>
|
|
<Divider>
|
|
<Chip label={t("ExpertMangement.rest_info")} />
|
|
</Divider>
|
|
</Box>
|
|
<Grid container justifyContent="space-around" spacing={2} sx={{ pb: 2 }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<FormControl
|
|
error={formik.touched.province_id && !!formik.errors.province_id}
|
|
sx={{ width: "100%", mt: 2 }}
|
|
size="small"
|
|
>
|
|
<InputLabel>{t("ExpertMangement.text_field_province_id")}</InputLabel>
|
|
<Select
|
|
name="province_id"
|
|
label={t("ExpertMangement.text_field_province_id")}
|
|
value={provinceList ? formik.values.province_id : ""}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
fullWidth
|
|
variant="outlined"
|
|
>
|
|
{isLoadingProvinceList ? (
|
|
<MenuItem>{t("ExpertMangement.text_field_loading_provinces_list")}</MenuItem>
|
|
) : errorProvinceList ? (
|
|
<MenuItem>{t("ExpertMangement.text_field_error_fetching_provinces")}</MenuItem>
|
|
) : (
|
|
provinceList.map((item) => (
|
|
<MenuItem key={item.id} value={item.id}>
|
|
{item.name}
|
|
</MenuItem>
|
|
))
|
|
)}
|
|
</Select>
|
|
<FormHelperText>
|
|
{formik.touched.province_id && formik.errors.province_id
|
|
? formik.errors.province_id
|
|
: ""}
|
|
</FormHelperText>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<FormControl
|
|
disabled={cityList.length === 0}
|
|
error={formik.touched.city_id && !!formik.errors.city_id}
|
|
sx={{ width: "100%", mt: 2 }}
|
|
size="small"
|
|
>
|
|
<InputLabel>{cityTextField}</InputLabel>
|
|
<Select
|
|
name="city_id"
|
|
label={t("ExpertMangement.text_field_city_id")}
|
|
value={cityList.length ? formik.values.city_id : ""}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
fullWidth
|
|
variant="outlined"
|
|
>
|
|
{cityList.map((item) => (
|
|
<MenuItem key={item.value} value={item.value}>
|
|
{item.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
<FormHelperText>
|
|
{formik.touched.city_id && formik.errors.city_id ? formik.errors.city_id : ""}
|
|
</FormHelperText>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container justifyContent="space-around" spacing={2} sx={{ pb: 2 }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
name="position"
|
|
label={t("ExpertMangement.text_field_position")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
value={formik.values.position}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.position && !!formik.errors.position}
|
|
helperText={
|
|
formik.touched.position && formik.errors.position ? formik.errors.position : null
|
|
}
|
|
sx={{ width: "100%" }}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<FormControl
|
|
error={formik.touched.role_id && !!formik.errors.role_id}
|
|
sx={{ width: "100%", mt: 2 }}
|
|
size="small"
|
|
>
|
|
<InputLabel>{t("ExpertMangement.text_field_role_id")}</InputLabel>
|
|
<Select
|
|
name="role_id"
|
|
label={t("ExpertMangement.text_field_role_id")}
|
|
value={roleList ? formik.values.role_id : ""}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
fullWidth
|
|
variant="outlined"
|
|
>
|
|
{isLoadingRoleList ? (
|
|
<MenuItem>{t("ExpertMangement.text_field_loading_roles_list")}</MenuItem>
|
|
) : errorRoleList ? (
|
|
<MenuItem>{t("ExpertMangement.text_field_error_fetching_roles")}</MenuItem>
|
|
) : (
|
|
roleList.map((item) => (
|
|
<MenuItem key={item.id} value={item.id}>
|
|
{item.name_fa}
|
|
</MenuItem>
|
|
))
|
|
)}
|
|
</Select>
|
|
<FormHelperText>
|
|
{formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""}
|
|
</FormHelperText>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
onClick={() => setOpenUpdateDialog(false)}
|
|
variant="outlined"
|
|
color="secondary"
|
|
disabled={formik.isSubmitting}
|
|
autoFocus
|
|
>
|
|
{t("ExpertMangement.button-cancel")}
|
|
</Button>
|
|
<Button
|
|
onClick={formik.handleSubmit}
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}
|
|
>
|
|
{t("ExpertMangement.button-confirm")}
|
|
</Button>
|
|
</DialogActions>
|
|
</>
|
|
);
|
|
};
|
|
export default UpdateContent;
|