Feature/user info request
This commit is contained in:
AmirHossein Mahmoodi
@@ -1,4 +1,4 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -12,31 +12,31 @@ import {
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
TextField
|
||||
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 { 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 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();
|
||||
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}) => {
|
||||
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,
|
||||
@@ -45,10 +45,11 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
}));
|
||||
setCitiesExist(true);
|
||||
setCityList(formattedData);
|
||||
setCityTextField(t("ExpertMangement.text_field_city_id"))
|
||||
}).catch(() => {
|
||||
setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"))
|
||||
});
|
||||
setCityTextField(t("ExpertMangement.text_field_city_id"));
|
||||
})
|
||||
.catch(() => {
|
||||
setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"));
|
||||
});
|
||||
}
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
@@ -60,7 +61,7 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
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"))
|
||||
role_id: Yup.string().required(t("ExpertMangement.error_message_role_id")),
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
@@ -72,10 +73,10 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
position: row.original.position,
|
||||
province_id: row.original.province_id,
|
||||
city_id: row.original.city_id,
|
||||
role_id: row.original.roles[0].id
|
||||
role_id: row.original.roles[0].id,
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
const formData = new FormData();
|
||||
formData.append("name", values.name);
|
||||
formData.append("national_id", values.national_id);
|
||||
@@ -87,14 +88,15 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
formData.append("position", values.position);
|
||||
formData.append("role_id", values.role_id);
|
||||
|
||||
requestServer(`${UPDATE_EXPERT_MANAGEMENT}/${row.original.id}`, 'post', {auth: true, data: formData})
|
||||
requestServer(`${UPDATE_EXPERT_MANAGEMENT}/${row.original.id}`, "post", { auth: true, data: formData })
|
||||
.then((response) => {
|
||||
setOpenUpdateDialog(false);
|
||||
mutate()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
mutate();
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -105,14 +107,12 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Box sx={{my: 1}}>
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.personal_info")}
|
||||
/>
|
||||
<Chip label={t("ExpertMangement.personal_info")} />
|
||||
</Divider>
|
||||
</Box>
|
||||
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
|
||||
<Grid container justifyContent="space-around" spacing={2} sx={{ pb: 2 }}>
|
||||
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||
<TextField
|
||||
name="name"
|
||||
@@ -125,7 +125,7 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.name && !!formik.errors.name}
|
||||
helperText={formik.touched.name && formik.errors.name ? formik.errors.name : null}
|
||||
sx={{width: "100%"}}
|
||||
sx={{ width: "100%" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||
@@ -139,8 +139,12 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
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%"}}
|
||||
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}>
|
||||
@@ -154,8 +158,12 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
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%"}}
|
||||
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}>
|
||||
@@ -170,18 +178,16 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.email && !!formik.errors.email}
|
||||
helperText={formik.touched.email && formik.errors.email ? formik.errors.email : null}
|
||||
sx={{width: "100%"}}
|
||||
sx={{ width: "100%" }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box sx={{my: 1}}>
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.user_info")}
|
||||
/>
|
||||
<Chip label={t("ExpertMangement.user_info")} />
|
||||
</Divider>
|
||||
</Box>
|
||||
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
|
||||
<Grid container justifyContent="space-around" spacing={2} sx={{ pb: 2 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
name="username"
|
||||
@@ -193,23 +199,23 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
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%"}}
|
||||
helperText={
|
||||
formik.touched.username && formik.errors.username ? formik.errors.username : null
|
||||
}
|
||||
sx={{ width: "100%" }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box sx={{my: 1}}>
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.rest_info")}
|
||||
/>
|
||||
<Chip label={t("ExpertMangement.rest_info")} />
|
||||
</Divider>
|
||||
</Box>
|
||||
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
|
||||
<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}}
|
||||
sx={{ width: "100%", mt: 2 }}
|
||||
size="small"
|
||||
>
|
||||
<InputLabel>{t("ExpertMangement.text_field_province_id")}</InputLabel>
|
||||
@@ -223,13 +229,9 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
variant="outlined"
|
||||
>
|
||||
{isLoadingProvinceList ? (
|
||||
<MenuItem>
|
||||
{t("ExpertMangement.text_field_loading_provinces_list")}
|
||||
</MenuItem>
|
||||
<MenuItem>{t("ExpertMangement.text_field_loading_provinces_list")}</MenuItem>
|
||||
) : errorProvinceList ? (
|
||||
<MenuItem>
|
||||
{t("ExpertMangement.text_field_error_fetching_provinces")}
|
||||
</MenuItem>
|
||||
<MenuItem>{t("ExpertMangement.text_field_error_fetching_provinces")}</MenuItem>
|
||||
) : (
|
||||
provinceList.map((item) => (
|
||||
<MenuItem key={item.id} value={item.id}>
|
||||
@@ -239,7 +241,9 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
)}
|
||||
</Select>
|
||||
<FormHelperText>
|
||||
{formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""}
|
||||
{formik.touched.province_id && formik.errors.province_id
|
||||
? formik.errors.province_id
|
||||
: ""}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
@@ -247,7 +251,7 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
<FormControl
|
||||
disabled={cityList.length === 0}
|
||||
error={formik.touched.city_id && !!formik.errors.city_id}
|
||||
sx={{width: "100%", mt: 2}}
|
||||
sx={{ width: "100%", mt: 2 }}
|
||||
size="small"
|
||||
>
|
||||
<InputLabel>{cityTextField}</InputLabel>
|
||||
@@ -272,7 +276,7 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
|
||||
<Grid container justifyContent="space-around" spacing={2} sx={{ pb: 2 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
name="position"
|
||||
@@ -284,14 +288,16 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
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%"}}
|
||||
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}}
|
||||
sx={{ width: "100%", mt: 2 }}
|
||||
size="small"
|
||||
>
|
||||
<InputLabel>{t("ExpertMangement.text_field_role_id")}</InputLabel>
|
||||
@@ -305,13 +311,9 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
variant="outlined"
|
||||
>
|
||||
{isLoadingRoleList ? (
|
||||
<MenuItem>
|
||||
{t("ExpertMangement.text_field_loading_roles_list")}
|
||||
</MenuItem>
|
||||
<MenuItem>{t("ExpertMangement.text_field_loading_roles_list")}</MenuItem>
|
||||
) : errorRoleList ? (
|
||||
<MenuItem>
|
||||
{t("ExpertMangement.text_field_error_fetching_roles")}
|
||||
</MenuItem>
|
||||
<MenuItem>{t("ExpertMangement.text_field_error_fetching_roles")}</MenuItem>
|
||||
) : (
|
||||
roleList.map((item) => (
|
||||
<MenuItem key={item.id} value={item.id}>
|
||||
@@ -328,16 +330,25 @@ const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenUpdateDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
<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}>
|
||||
<Button
|
||||
onClick={formik.handleSubmit}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}
|
||||
>
|
||||
{t("ExpertMangement.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default UpdateContent;
|
||||
export default UpdateContent;
|
||||
|
||||
Reference in New Issue
Block a user