loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete create and delete part and some update form design and structure

Browse Source
This commit is contained in:
Mohammad Jalali
2023-09-11 16:52:24 +03:30
parent 57c9c44903
commit 45b919f0fc
14 changed files with 1065 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public/locales/fa/app.json
View File

@@ -96,7 +96,8 @@
"development_assistant_page": "معاون توسعه",
"inspector_expert_page": "بازدید کارشناس",
"commercial_chief_page": "رئیس اداره بازرگانی",
"edit_profile": "ویرایش پروفایل"
"edit_profile": "ویرایش پروفایل",
"expert_management": "مدیریت کارشناسان"
},
"MuiDatePicker": {
"date_picker_birthday": "تاریخ"
@@ -324,6 +325,55 @@
"uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
},
"ExpertMangement": {
"id": "کد یکتا"
"id": "کد یکتا",
"name": "نام",
"username": "نام کاربری",
"email": "پست الکترونیک",
"phone_number": "شماره همراه",
"national_id": "کد ملی",
"position": "سمت",
"province_name": "استان",
"city_name": "شهر",
"role_name": "نقش",
"updated_at": "آخرین بروزرسانی",
"button_while_submiting": "درحال افزودن کارشناس",
"button_submit": "افزودن کارشناس",
"button_close": "بستن",
"button_delete": "حذف",
"add": "افزودن کارشناس",
"button-cancel": "بستن",
"button-confirm": "ثبت",
"create": "افزودن کارشناس",
"update": "ویرایش کارشناس",
"text_field_name": "نام",
"text_field_username": "نام کاربری",
"text_field_email": "پست الکترونیک",
"text_field_phone_number": "شماره همراه",
"text_field_national_id": "کد ملی",
"text_field_password": "رمز عبور",
"text_field_position": "سمت",
"text_field_province_id": "استان",
"text_field_city_id": "شهر",
"text_field_role_id": "نقش",
"text_field_please_select_province": "ابتدا استان خود را انتخاب کنید",
"text_field_loading_cities_list": "درحال دریافت شهر ها",
"text_field_error_fetching_cities": "خطا در دریافت شهر ها",
"error_message_name": "نام خود را وارد کنید",
"error_message_username": "نام کاربری خود را وارد کنید",
"error_message_email": "پست الکترونیک خود را وارد کنید",
"error_message_phone_number": "شماره همراه خود را وارد کنید",
"error_message_national_id": "کد ملی خود را وارد کنید",
"error_message_password": "رمز عبور خود را وارد کنید",
"error_message_position": "سمت خود را وارد کنید",
"error_message_province_id": "استان خود را وارد کنید",
"error_message_city_id": "شهر خود را وارد کنید",
"error_message_role_id": "نقش خود را وارد کنید",
"personal_info": "مشخصات کارشناس",
"user_info": "اطلاعات کاربری",
"rest_info": "اطلاعات تکمیلی",
"delete_tooltip": "حذف",
"update_tooltip": "ویرایش کارشناس",
"delete_expert": "حذف کارشناس",
"are_you_sure_text": "آیا از انجام این عملیات اطمینان دارید؟"
}
}

367
src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx Normal file
View File

@@ -0,0 +1,367 @@
import {
Box,
Button,
Chip,
DialogActions,
DialogContent,
Divider,
FormControl,
FormHelperText,
Grid,
InputLabel,
MenuItem,
Select,
TextField,
} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import {useEffect, useState} from "react";
import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST, GET_PROVINCE_LIST, GET_ROLE_LIST} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
const t = useTranslations();
const requestServer = useRequest()
const [provinceList, setProvinceList] = useState([]);
const [cityList, setCityList] = useState([]);
const [roleList, setRoleList] = useState([]);
const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
useEffect(() => {
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
}).catch(() => {
});
}, []);
useEffect(() => {
requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false})
.then(({data}) => {
const result = data.data;
const formattedData = result.map((role, index) => ({
id: index,
name: role.name,
name_fa: role.name_fa,
value: role.id,
}));
setRoleList(formattedData);
}).catch(() => {
});
}, []);
function getCities(province_id) {
formik.setFieldTouched("city_id", false, false);
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,
}));
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().required(t("ExpertMangement.error_message_email")),
phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
password: Yup.string().required(t("ExpertMangement.error_message_password")),
position: Yup.string().required(t("ExpertMangement.error_message_position")),
province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
city_id: Yup.string().required(t("ExpertMangement.error_message_city_id")),
role_id: Yup.string().required(t("ExpertMangement.error_message_role_id"))
});
const formik = useFormik({
initialValues: {
name: "",
username: "",
email: "",
phone_number: "",
national_id: "",
password: "",
position: "",
province_id: "",
city_id: "",
role_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("password", values.password);
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(`${CREATE_EXPERT_MANAGEMENT}`, 'post', {auth: true, data: formData})
.then((response) => {
mutate(fetchUrl)
setOpenCreateDialog(false)
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
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 item xs={12} sm={6}>
<TextField
name="password"
label={t("ExpertMangement.text_field_password")}
variant="outlined"
margin="normal"
size="small"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.password && !!formik.errors.password}
helperText={formik.touched.password && formik.errors.password ? formik.errors.password : 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={formik.values.province_id}
onChange={(e) => {
formik.setFieldValue("province_id", e.target.value);
getCities(e.target.value)
}}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{provinceList.map((item) => (
<MenuItem key={item.value} value={item.value}>
{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 ? true : false}
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={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={formik.values.role_id}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{roleList.map((item) => (
<MenuItem key={item.value} value={item.value}>
{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={() => setOpenCreateDialog(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}>
{t("ExpertMangement.button-confirm")}
</Button>
</DialogActions>
</>
);
};
export default CreateContent;

39
src/components/dashboard/expert-management/Form/CreateForm/index.jsx Normal file
View File

@@ -0,0 +1,39 @@
import {Button, Dialog, DialogTitle, Stack, Tooltip,} from "@mui/material";
import {useTranslations} from "next-intl";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {useState} from "react";
import CreateContent from "./CreateContent";
const Create = ({mutate, fetchUrl}) => {
const t = useTranslations();
const [openCreateDialog, setOpenCreateDialog] = useState(false);
return (
<>
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("ExpertMangement.add")} arrow placement="right">
<Button
color="primary"
variant="contained"
size="small"
sx={{textTransform: "unset", alignSelf: "center"}}
startIcon={<DataSaverOnIcon/>}
onClick={() => {
setOpenCreateDialog(true)
}}
>
{t("ExpertMangement.add")}
</Button>
</Tooltip>
</Stack>
<Dialog fullWidth maxWidth={'lg'} open={openCreateDialog}
TransitionProps={{unmountOnExit: true}}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DialogTitle>{t("ExpertMangement.create")}</DialogTitle>
<CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate} fetchUrl={fetchUrl}/>
</Dialog>
</>
);
};
export default Create;

96
src/components/dashboard/expert-management/Form/DeleteForm.jsx
View File

@@ -1,84 +1,72 @@
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControl,
FormHelperText,
IconButton,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Tooltip
} from "@mui/material";
import {useFormik} from "formik";
import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
import {UPDATE_LOAN_MANAGEMENT_REFAHI} from "@/core/data/apiRoutes";
import DeleteIcon from '@mui/icons-material/Delete';
import {useState} from "react";
import {DELETE_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
import useNotification from "@/lib/app/hooks/useNotification";
import * as Yup from "yup";
import useLoanStateRefahi from "@/lib/prefetchDataTable/hooks/useLoanStateRefahi";
import {useTranslations} from "next-intl";
const Delete = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const {loan_state_refahi} = useLoanStateRefahi()
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const requestServer = useRequest({auth: true});
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("UpdateDialog.description_error")),
next_state_id: Yup.number().required(t("UpdateDialog.next-state-id-error"))
});
const formik = useFormik({
initialValues: {
description: "",
next_state_id: ""
},
validationSchema,
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("description", values.description);
formData.append("next_state_id", values.next_state_id);
requestServer(`${UPDATE_LOAN_MANAGEMENT_REFAHI}/${rowId}`, 'post', {
data: formData,
}).then((response) => {
const handleDelete = () => {
setIsSubmitting(true)
requestServer(`${DELETE_EXPERT_MANAGEMENT}/${rowId}`, 'post')
.then((response) => {
mutate(fetchUrl)
update_notification()
}).catch(() => {
}).finally(() => {
setSubmitting(false);
})
.catch(() => {
})
.finally(() => {
setIsSubmitting(false)
setOpenDeleteDialog(false);
});
},
});
const handleDescriptionChange = (event) => {
formik.setFieldValue("description", event.target.value)
};
const handleNextStateIDChange = (event) => {
formik.setFieldValue("next_state_id", event.target.value)
};
return (
<>
<Tooltip title={t("UpdateDialog.update-tooltip")}>
<Tooltip title={t("ExpertMangement.delete_tooltip")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
setOpenDeleteDialog(true);
}}
>
<ChangeCircleIcon/>
<DeleteIcon/>
</IconButton>
</Tooltip>
<Dialog
open={openDeleteDialog}
PaperProps={{
sx: {
boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
}
}}
>
<DialogTitle>{t("ExpertMangement.delete_expert")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ExpertMangement.are_you_sure_text")}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenDeleteDialog(false)} color="secondary" autoFocus>
{t("ExpertMangement.button_close")}
</Button>
<Button onClick={handleDelete} variant="contained" color="primary" disabled={isSubmitting}>
{t("ExpertMangement.button_delete")}
</Button>
</DialogActions>
</Dialog>
</>
);
};

24
src/components/dashboard/expert-management/Form/UpdateForm.jsx
View File

@@ -1,24 +0,0 @@
import {useTranslations} from "next-intl";
import {IconButton, Tooltip} from "@mui/material";
import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
const Update = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
return (
<>
<Tooltip title={t("UpdateDialog.update-tooltip")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ChangeCircleIcon/>
</IconButton>
</Tooltip>
</>
);
};
export default Update;

348
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx Normal file
View File

@@ -0,0 +1,348 @@
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, GET_PROVINCE_LIST, GET_ROLE_LIST, UPDATE_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
import * as Yup from "yup";
import useRequest from "@/lib/app/hooks/useRequest";
const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
const t = useTranslations();
const requestServer = useRequest();
const [provinceList, setProvinceList] = useState([]);
const [cityList, setCityList] = useState([]);
const [roleList, setRoleList] = useState([]);
const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
useEffect(() => {
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
.then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
}).catch(() => {
});
}, []);
useEffect(() => {
requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false})
.then(({data}) => {
const result = data.data;
const formattedData = result.map((role, index) => ({
id: index,
name: role.name,
name_fa: role.name_fa,
value: role.id,
}));
setRoleList(formattedData);
}).catch(() => {
});
}, []);
function getCities(province_id) {
formik.setFieldTouched("city_id", false, false);
// 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,
}));
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().required(t("ExpertMangement.error_message_email")),
phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
password: Yup.string().required(t("ExpertMangement.error_message_password")),
position: Yup.string().required(t("ExpertMangement.error_message_position")),
province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
city_id: Yup.string().required(t("ExpertMangement.error_message_city_id")),
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.role_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) => {
mutate(fetchUrl)
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
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={formik.values.province_id}
onChange={(e) => {
formik.setFieldValue("province_id", e.target.value);
getCities(e.target.value)
}}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{provinceList.map((item) => (
<MenuItem key={item.value} value={item.value}>
{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={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={formik.values.role_id}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{roleList.map((item) => (
<MenuItem key={item.value} value={item.value}>
{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}>
{t("ExpertMangement.button-confirm")}
</Button>
</DialogActions>
</>
);
};
export default UpdateContent;

55
src/components/dashboard/expert-management/Form/UpdateForm/index.jsx Normal file
View File

@@ -0,0 +1,55 @@
import {useTranslations} from "next-intl";
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
import EditIcon from '@mui/icons-material/Edit';
import {useState} from "react";
import useRequest from "@/lib/app/hooks/useRequest";
import UpdateContent from "./UpdateContent";
import {GET_CITY_LIST} from "@/core/data/apiRoutes";
const Update = ({row, fetchUrl, mutate}) => {
const t = useTranslations();
const requestServer = useRequest();
const [openUpdateDialog, setOpenUpdateDialog] = useState(false);
// function getCities(province_id) {
// formik.setFieldTouched("city_id", false, false);
// // 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,
// }));
// setCityList(formattedData);
// setCityTextField(t("ExpertMangement.text_field_city_id"))
// }).catch(() => {
// setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"))
// });
// }
return (
<>
<Tooltip title={t("ExpertMangement.update_tooltip")}>
<IconButton
color="primary"
onClick={() => {
setOpenUpdateDialog(true)
// getCities(row.original.province_id)
}}
>
<EditIcon/>
</IconButton>
</Tooltip>
<Dialog fullWidth maxWidth={'lg'} open={openUpdateDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DialogTitle>{t("ExpertMangement.update")}</DialogTitle>
<UpdateContent row={row} mutate={mutate} fetchUrl={fetchUrl} setOpenUpdateDialog={setOpenUpdateDialog}/>
</Dialog>
</>
);
};
export default Update;

7
src/components/dashboard/expert-management/TableRowActions.jsx
View File

@@ -1,11 +1,16 @@
import {Box} from "@mui/material";
import Update from "./Form/UpdateForm"
import Delete from "./Form/DeleteForm";
const TableRowActions = ({row, mutate, fetchUrl}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Update
row={row}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<Delete
rowId={row.getValue("id")}
mutate={mutate}
fetchUrl={fetchUrl}

13
src/components/dashboard/expert-management/TableToolbar.jsx Normal file
View File

@@ -0,0 +1,13 @@
import {useTranslations} from "next-intl";
import Create from "./Form/CreateForm";
function TableToolbar({mutate, fetchUrl}) {
const t = useTranslations();
return (
<>
<Create mutate={mutate} fetchUrl={fetchUrl}/>
</>
);
}
export default TableToolbar;

131
src/components/dashboard/expert-management/index.jsx
View File

@@ -5,6 +5,9 @@ import {GET_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import TableRowActions from "./TableRowActions";
import DataTable from "@/core/components/DataTable";
import TableToolbar from "@/components/dashboard/expert-management/TableToolbar";
import moment from "jalali-moment";
import MuiDatePicker from "@/core/components/MuiDatePicker";
function DashboardExpertManagementComponent() {
const t = useTranslations();
@@ -29,6 +32,133 @@ function DashboardExpertManagementComponent() {
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("ExpertMangement.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.username,
id: "username",
header: t("ExpertMangement.username"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.email,
id: "email",
header: t("ExpertMangement.email"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.phone_number,
id: "phone_number",
header: t("ExpertMangement.phone_number"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.national_id,
id: "national_id",
header: t("ExpertMangement.national_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.position,
id: "position",
header: t("ExpertMangement.position"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.province_name,
id: "province_id",
header: t("ExpertMangement.province_name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.city_name,
id: "city_id",
header: t("ExpertMangement.city_name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.role_name,
id: "role_id",
header: t("ExpertMangement.role_name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) =>
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("ExpertMangement.updated_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => {
return <Typography variant="body2">{renderedCellValue}</Typography>;
},
Header: ({column}) => <>{column.columnDef.header}</>,
Filter: ({column}) => {
return (
<MuiDatePicker column={column}/>
);
},
},
],
[]
);
@@ -39,6 +169,7 @@ function DashboardExpertManagementComponent() {
tableUrl={GET_EXPERT_MANAGEMENT}
columns={columns}
selectableRow={false}
CustomToolbar={TableToolbar}
enableCustomToolbar={true}
enableLastUpdate={true}
enablePinning={true}

1
src/components/dashboard/passenger-boss/index.jsx
View File

@@ -175,6 +175,7 @@ function DashboardPassengerOfficeComponent() {
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
renderMainAction={TableToolbar}
TableRowAction={TableRowActions}
/>
</Box>

2
src/core/components/DataTable.jsx
View File

@@ -134,7 +134,7 @@ function DataTable(props) {
renderTopToolbarCustomActions={({table}) => (
<>
{props.enableCustomToolbar /* send condition */
? props.CustomToolbar /* send component */
? <props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate}/> /* send component */
: ""}
</>
)}

9
src/core/data/apiRoutes.js
View File

@@ -163,3 +163,12 @@ export const DELETE_EXPERT_MANAGEMENT =
export const CHANGE_PASSWORD_EXPERT_MANAGEMENT =
BASE_URL + "/dashboard/experts/change_password"
//expert management
// province/city list
export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
export const GET_CITY_LIST = BASE_URL + "/api/cities";
// province/city list
// role list
export const GET_ROLE_LIST = BASE_URL + "/dashboard/roles/list";
// role list

2
src/pages/dashboard/expert-management/index.jsx
View File

@@ -4,7 +4,7 @@ import {parse} from "next-useragent";
import DashboardExpertManagementComponent from "@/components/dashboard/expert-management";
const requiredPermissions = ["manage_transportation_navgan"];
export default function ExpertMangement() {
export default function ExpertManagement() {
return (
<WithAuthMiddleware>
<RolePermissionMiddleware requiredPermissions={requiredPermissions}>