From 57c9c44903d72980920fe1295f198659f27812d2 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Wed, 6 Sep 2023 14:43:43 +0330 Subject: [PATCH 1/8] make ready structure and directories for expert management implemention --- public/locales/fa/app.json | 6 +- .../expert-management/Form/DeleteForm.jsx | 85 +++++++++++++++++++ .../expert-management/Form/UpdateForm.jsx | 24 ++++++ .../expert-management/TableRowActions.jsx | 17 ++++ .../dashboard/expert-management/index.jsx | 60 +++++++++++++ src/core/data/apiRoutes.js | 13 +++ src/core/data/sidebarMenu.jsx | 10 +++ .../dashboard/expert-management/index.jsx | 26 ++++++ 8 files changed, 240 insertions(+), 1 deletion(-) create mode 100644 src/components/dashboard/expert-management/Form/DeleteForm.jsx create mode 100644 src/components/dashboard/expert-management/Form/UpdateForm.jsx create mode 100644 src/components/dashboard/expert-management/TableRowActions.jsx create mode 100644 src/components/dashboard/expert-management/index.jsx create mode 100644 src/pages/dashboard/expert-management/index.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 065e317..bf4d7d2 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -42,7 +42,8 @@ "province-head-expert": "کارشناس ستادی", "change-password": "تغییر رمز عبور", "development-assistant": "معاون توسعه", - "edit-profile": "ویرایش پروفایل" + "edit-profile": "ویرایش پروفایل", + "expert-management": "مدیریت کارشناسان" }, "secondary": { "passenger-office": "توزیع درخواست", @@ -321,5 +322,8 @@ "upload_file_format": "فرمت قابل قبول : png,jpg,pdf", "delete": "پاک کردن", "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد" + }, + "ExpertMangement": { + "id": "کد یکتا" } } diff --git a/src/components/dashboard/expert-management/Form/DeleteForm.jsx b/src/components/dashboard/expert-management/Form/DeleteForm.jsx new file mode 100644 index 0000000..eb5b4c0 --- /dev/null +++ b/src/components/dashboard/expert-management/Form/DeleteForm.jsx @@ -0,0 +1,85 @@ +import {useTranslations} from "next-intl"; +import {useState} from "react"; +import { + Button, + Dialog, + DialogActions, + DialogContent, + 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 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"; + + +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 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) => { + mutate(fetchUrl) + update_notification() + }).catch(() => { + }).finally(() => { + setSubmitting(false); + }); + }, + }); + + const handleDescriptionChange = (event) => { + formik.setFieldValue("description", event.target.value) + }; + const handleNextStateIDChange = (event) => { + formik.setFieldValue("next_state_id", event.target.value) + }; + + return ( + <> + + { + setOpenConfirmDialog(true) + }} + > + + + + + ); +}; +export default Delete; \ No newline at end of file diff --git a/src/components/dashboard/expert-management/Form/UpdateForm.jsx b/src/components/dashboard/expert-management/Form/UpdateForm.jsx new file mode 100644 index 0000000..a456677 --- /dev/null +++ b/src/components/dashboard/expert-management/Form/UpdateForm.jsx @@ -0,0 +1,24 @@ +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 ( + <> + + { + setOpenConfirmDialog(true) + }} + > + + + + + ); +}; +export default Update; \ No newline at end of file diff --git a/src/components/dashboard/expert-management/TableRowActions.jsx b/src/components/dashboard/expert-management/TableRowActions.jsx new file mode 100644 index 0000000..fd599f9 --- /dev/null +++ b/src/components/dashboard/expert-management/TableRowActions.jsx @@ -0,0 +1,17 @@ +import {Box} from "@mui/material"; +import Update from "./Form/UpdateForm" + +const TableRowActions = ({row, mutate, fetchUrl}) => { + + return ( + + + + ); +}; + +export default TableRowActions; diff --git a/src/components/dashboard/expert-management/index.jsx b/src/components/dashboard/expert-management/index.jsx new file mode 100644 index 0000000..a792cb6 --- /dev/null +++ b/src/components/dashboard/expert-management/index.jsx @@ -0,0 +1,60 @@ +import DashboardLayouts from "@/layouts/dashboardLayouts"; +import {Box, Typography} from "@mui/material"; +import {useMemo} from "react"; +import {GET_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes"; +import {useTranslations} from "next-intl"; +import TableRowActions from "./TableRowActions"; +import DataTable from "@/core/components/DataTable"; + +function DashboardExpertManagementComponent() { + const t = useTranslations(); + const columns = useMemo( + () => [ + { + accessorFn: (row) => row.id, + id: "id", + header: t("ExpertMangement.id"), + enableColumnFilter: true, + datatype: "numeric", + filterFn: "equals", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains", + "lessThan", + "greaterThan", + "between", + ], + Cell: ({renderedCellValue}) => ( + {renderedCellValue} + ), + }, + ], + [] + ); + return ( + + + + + + ); +} + +export default DashboardExpertManagementComponent; diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index aba46f1..d7d728a 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -150,3 +150,16 @@ export const UPDATE_LOAN_MANAGEMENT_NAVGAN = export const GET_LOAN_STATE_NAVGAN = BASE_URL + "/dashboard/loan_states/navgan" //loan management navgan + +//expert management +export const GET_EXPERT_MANAGEMENT = + BASE_URL + "/dashboard/experts/show" +export const CREATE_EXPERT_MANAGEMENT = + BASE_URL + "/dashboard/experts/store" +export const UPDATE_EXPERT_MANAGEMENT = + BASE_URL + "/dashboard/experts/update" +export const DELETE_EXPERT_MANAGEMENT = + BASE_URL + "/dashboard/experts/delete" +export const CHANGE_PASSWORD_EXPERT_MANAGEMENT = + BASE_URL + "/dashboard/experts/change_password" +//expert management diff --git a/src/core/data/sidebarMenu.jsx b/src/core/data/sidebarMenu.jsx index 21a0952..dfc3daa 100644 --- a/src/core/data/sidebarMenu.jsx +++ b/src/core/data/sidebarMenu.jsx @@ -10,6 +10,7 @@ import GradingIcon from '@mui/icons-material/Grading'; import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle'; import Diversity3Icon from '@mui/icons-material/Diversity3'; import PaidIcon from '@mui/icons-material/Paid'; +import ManageAccountsIcon from '@mui/icons-material/ManageAccounts'; const sidebarMenu = [ [ @@ -136,6 +137,15 @@ const sidebarMenu = [ selected: false, permission: "manage_navgan_loan", }, + { + key: "sidebar.expert-management", + name: "expert_management", + type: "page", + route: "/dashboard/expert-management", + icon: , + selected: false, + permission: "manage_navgan_loan", + }, ], ]; diff --git a/src/pages/dashboard/expert-management/index.jsx b/src/pages/dashboard/expert-management/index.jsx new file mode 100644 index 0000000..84518f7 --- /dev/null +++ b/src/pages/dashboard/expert-management/index.jsx @@ -0,0 +1,26 @@ +import RolePermissionMiddleware from "@/middlewares/RolePermission"; +import WithAuthMiddleware from "@/middlewares/WithAuth"; +import {parse} from "next-useragent"; +import DashboardExpertManagementComponent from "@/components/dashboard/expert-management"; + +const requiredPermissions = ["manage_transportation_navgan"]; +export default function ExpertMangement() { + return ( + + + + + + ); +} + +export async function getServerSideProps({req, locale}) { + const {isBot} = parse(req.headers["user-agent"]); + return { + props: { + messages: (await import(`&/locales/${locale}/app.json`)).default, + title: "Dashboard.expert_management", + isBot, + }, + }; +} From 45b919f0fc80a72ae9c35140604b496d5c7d3720 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Mon, 11 Sep 2023 16:52:24 +0330 Subject: [PATCH 2/8] complete create and delete part and some update form design and structure --- public/locales/fa/app.json | 54 ++- .../Form/CreateForm/CreateContent.jsx | 367 ++++++++++++++++++ .../Form/CreateForm/index.jsx | 39 ++ .../expert-management/Form/DeleteForm.jsx | 96 ++--- .../expert-management/Form/UpdateForm.jsx | 24 -- .../Form/UpdateForm/UpdateContent.jsx | 348 +++++++++++++++++ .../Form/UpdateForm/index.jsx | 55 +++ .../expert-management/TableRowActions.jsx | 7 +- .../expert-management/TableToolbar.jsx | 13 + .../dashboard/expert-management/index.jsx | 131 +++++++ .../dashboard/passenger-boss/index.jsx | 1 + src/core/components/DataTable.jsx | 2 +- src/core/data/apiRoutes.js | 9 + .../dashboard/expert-management/index.jsx | 2 +- 14 files changed, 1065 insertions(+), 83 deletions(-) create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/index.jsx delete mode 100644 src/components/dashboard/expert-management/Form/UpdateForm.jsx create mode 100644 src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx create mode 100644 src/components/dashboard/expert-management/Form/UpdateForm/index.jsx create mode 100644 src/components/dashboard/expert-management/TableToolbar.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index bf4d7d2..fde5626 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -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": "آیا از انجام این عملیات اطمینان دارید؟" } } diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx new file mode 100644 index 0000000..82d8a58 --- /dev/null +++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx @@ -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 ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {t("ExpertMangement.text_field_province_id")} + + + {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""} + + + + + + {cityTextField} + + + {formik.touched.city_id && formik.errors.city_id ? formik.errors.city_id : ""} + + + + + + + + + + + {t("ExpertMangement.text_field_role_id")} + + + {formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""} + + + + + + + + + + + ); +}; + +export default CreateContent; diff --git a/src/components/dashboard/expert-management/Form/CreateForm/index.jsx b/src/components/dashboard/expert-management/Form/CreateForm/index.jsx new file mode 100644 index 0000000..8556b11 --- /dev/null +++ b/src/components/dashboard/expert-management/Form/CreateForm/index.jsx @@ -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 ( + <> + + + + + + + {t("ExpertMangement.create")} + + + + ); +}; + +export default Create; diff --git a/src/components/dashboard/expert-management/Form/DeleteForm.jsx b/src/components/dashboard/expert-management/Form/DeleteForm.jsx index eb5b4c0..87a097c 100644 --- a/src/components/dashboard/expert-management/Form/DeleteForm.jsx +++ b/src/components/dashboard/expert-management/Form/DeleteForm.jsx @@ -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 ( <> - + { - setOpenConfirmDialog(true) + setOpenDeleteDialog(true); }} > - + + + {t("ExpertMangement.delete_expert")} + + {t("ExpertMangement.are_you_sure_text")} + + + + + + ); }; diff --git a/src/components/dashboard/expert-management/Form/UpdateForm.jsx b/src/components/dashboard/expert-management/Form/UpdateForm.jsx deleted file mode 100644 index a456677..0000000 --- a/src/components/dashboard/expert-management/Form/UpdateForm.jsx +++ /dev/null @@ -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 ( - <> - - { - setOpenConfirmDialog(true) - }} - > - - - - - ); -}; -export default Update; \ No newline at end of file diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx new file mode 100644 index 0000000..39a8a6b --- /dev/null +++ b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx @@ -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 ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {t("ExpertMangement.text_field_province_id")} + + + {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""} + + + + + + {cityTextField} + + + {formik.touched.city_id && formik.errors.city_id ? formik.errors.city_id : ""} + + + + + + + + + + + {t("ExpertMangement.text_field_role_id")} + + + {formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""} + + + + + + + + + + + ); +}; +export default UpdateContent; \ No newline at end of file diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/index.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/index.jsx new file mode 100644 index 0000000..56760f1 --- /dev/null +++ b/src/components/dashboard/expert-management/Form/UpdateForm/index.jsx @@ -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 ( + <> + + { + setOpenUpdateDialog(true) + // getCities(row.original.province_id) + }} + > + + + + + {t("ExpertMangement.update")} + + + + ); +}; +export default Update; \ No newline at end of file diff --git a/src/components/dashboard/expert-management/TableRowActions.jsx b/src/components/dashboard/expert-management/TableRowActions.jsx index fd599f9..4458fad 100644 --- a/src/components/dashboard/expert-management/TableRowActions.jsx +++ b/src/components/dashboard/expert-management/TableRowActions.jsx @@ -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 ( + + + + ); +} + +export default TableToolbar; diff --git a/src/components/dashboard/expert-management/index.jsx b/src/components/dashboard/expert-management/index.jsx index a792cb6..3497091 100644 --- a/src/components/dashboard/expert-management/index.jsx +++ b/src/components/dashboard/expert-management/index.jsx @@ -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() { {renderedCellValue} ), }, + { + accessorFn: (row) => row.name, + id: "name", + header: t("ExpertMangement.name"), + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["contains", "equals", "notEquals"], + Cell: ({renderedCellValue}) => ( + {renderedCellValue} + ), + }, + { + accessorFn: (row) => row.username, + id: "username", + header: t("ExpertMangement.username"), + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["contains", "equals", "notEquals"], + Cell: ({renderedCellValue}) => ( + {renderedCellValue} + ), + }, + { + accessorFn: (row) => row.email, + id: "email", + header: t("ExpertMangement.email"), + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["contains", "equals", "notEquals"], + Cell: ({renderedCellValue}) => ( + {renderedCellValue} + ), + }, + { + 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}) => ( + {renderedCellValue} + ), + }, + { + 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}) => ( + {renderedCellValue} + ), + }, + { + accessorFn: (row) => row.position, + id: "position", + header: t("ExpertMangement.position"), + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["contains", "equals", "notEquals"], + Cell: ({renderedCellValue}) => ( + {renderedCellValue} + ), + }, + { + 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}) => ( + {renderedCellValue} + ), + }, + { + 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}) => ( + {renderedCellValue} + ), + }, + { + 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}) => ( + {renderedCellValue} + ), + }, + { + 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 {renderedCellValue}; + }, + Header: ({column}) => <>{column.columnDef.header}, + Filter: ({column}) => { + return ( + + ); + }, + }, ], [] ); @@ -39,6 +169,7 @@ function DashboardExpertManagementComponent() { tableUrl={GET_EXPERT_MANAGEMENT} columns={columns} selectableRow={false} + CustomToolbar={TableToolbar} enableCustomToolbar={true} enableLastUpdate={true} enablePinning={true} diff --git a/src/components/dashboard/passenger-boss/index.jsx b/src/components/dashboard/passenger-boss/index.jsx index ad6848f..c90b28a 100644 --- a/src/components/dashboard/passenger-boss/index.jsx +++ b/src/components/dashboard/passenger-boss/index.jsx @@ -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} /> diff --git a/src/core/components/DataTable.jsx b/src/core/components/DataTable.jsx index b3b0f26..8d06a02 100644 --- a/src/core/components/DataTable.jsx +++ b/src/core/components/DataTable.jsx @@ -134,7 +134,7 @@ function DataTable(props) { renderTopToolbarCustomActions={({table}) => ( <> {props.enableCustomToolbar /* send condition */ - ? props.CustomToolbar /* send component */ + ? /* send component */ : ""} )} diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index d7d728a..0cdaaff 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -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 diff --git a/src/pages/dashboard/expert-management/index.jsx b/src/pages/dashboard/expert-management/index.jsx index 84518f7..ce91ee6 100644 --- a/src/pages/dashboard/expert-management/index.jsx +++ b/src/pages/dashboard/expert-management/index.jsx @@ -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 ( From 2b5a440ef66e27732054db93cad82a58eedd9069 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Tue, 12 Sep 2023 17:10:27 +0330 Subject: [PATCH 3/8] make a hook for getting provinces --- public/locales/fa/app.json | 2 + .../Form/CreateForm/CreateContent.jsx | 37 +++++++++---------- .../Form/UpdateForm/UpdateContent.jsx | 35 +++++++++--------- src/lib/app/hooks/useProvince.jsx | 29 +++++++++++++++ 4 files changed, 66 insertions(+), 37 deletions(-) create mode 100644 src/lib/app/hooks/useProvince.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index fde5626..ec9cd67 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -355,6 +355,8 @@ "text_field_province_id": "استان", "text_field_city_id": "شهر", "text_field_role_id": "نقش", + "text_field_loading_provinces_list": "درحال دریافت شهر ها", + "text_field_error_fetching_provinces": "خطا در دریافت شهر ها", "text_field_please_select_province": "ابتدا استان خود را انتخاب کنید", "text_field_loading_cities_list": "درحال دریافت شهر ها", "text_field_error_fetching_cities": "خطا در دریافت شهر ها", diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx index 82d8a58..80795ae 100644 --- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx @@ -17,29 +17,17 @@ 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 {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST, GET_ROLE_LIST} from "@/core/data/apiRoutes"; import useRequest from "@/lib/app/hooks/useRequest"; +import useProvince from "@/lib/app/hooks/useProvince"; 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(() => { - }); - }, []); + const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); useEffect(() => { requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false}) @@ -255,6 +243,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { {t("ExpertMangement.text_field_province_id")} {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""} diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx index 39a8a6b..3fa43a9 100644 --- a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx +++ b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx @@ -19,28 +19,17 @@ 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"; +import useProvince from "@/lib/app/hooks/useProvince"; const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { const t = useTranslations(); const requestServer = useRequest(); - const [provinceList, setProvinceList] = useState([]); + // 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(() => { - }); - }, []); + const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); useEffect(() => { requestServer(GET_ROLE_LIST, "get", {auth: true, notification: false}) @@ -247,11 +236,21 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { fullWidth variant="outlined" > - {provinceList.map((item) => ( - - {item.name} + {isLoadingProvinceList ? ( + + {t("ExpertMangement.text_field_loading_provinces_list")} - ))} + ) : errorProvinceList ? ( + + {t("ExpertMangement.text_field_error_fetching_provinces")} + + ) : ( + provinceList.map((item) => ( + + {item.name} + + )) + )} {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""} diff --git a/src/lib/app/hooks/useProvince.jsx b/src/lib/app/hooks/useProvince.jsx new file mode 100644 index 0000000..d0fbda0 --- /dev/null +++ b/src/lib/app/hooks/useProvince.jsx @@ -0,0 +1,29 @@ +import {GET_PROVINCE_LIST} from "@/core/data/apiRoutes"; +import useRequest from "@/lib/app/hooks/useRequest"; +import useSWR from "swr"; + +const useProvince = () => { + const requestServer = useRequest({auth: true, notification: false}) + + //swr config + const fetcher = (...args) => { + return requestServer(args, 'get').then(({data}) => { + return data; + }).catch(() => { + }) + }; + + const {data, isLoading} = useSWR(GET_PROVINCE_LIST, fetcher, { + revalidateIfStale: false, + revalidateOnFocus: false, + revalidateOnReconnect: false + }); + + return { + provinceList: data, + isLoadingProvinceList: isLoading, + errorProvinceList: !data + } +}; + +export default useProvince; \ No newline at end of file From 123eb18a81ff54fbfdf5b27f0f56e8a3ad9caa49 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Wed, 13 Sep 2023 15:48:11 +0330 Subject: [PATCH 4/8] debug getting cities make a role hook and debug getting data from row in update --- public/locales/fa/app.json | 2 + .../Form/CreateForm/CreateContent.jsx | 36 ++++++------ .../Form/UpdateForm/UpdateContent.jsx | 56 +++++++++---------- src/lib/app/hooks/useRole.jsx | 29 ++++++++++ 4 files changed, 74 insertions(+), 49 deletions(-) create mode 100644 src/lib/app/hooks/useRole.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index ec9cd67..60482e2 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -357,6 +357,8 @@ "text_field_role_id": "نقش", "text_field_loading_provinces_list": "درحال دریافت شهر ها", "text_field_error_fetching_provinces": "خطا در دریافت شهر ها", + "text_field_loading_roles_list": "درحال دریافت نقش ها", + "text_field_error_fetching_roles": "خطا در دریافت نقش ها", "text_field_please_select_province": "ابتدا استان خود را انتخاب کنید", "text_field_loading_cities_list": "درحال دریافت شهر ها", "text_field_error_fetching_cities": "خطا در دریافت شهر ها", diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx index 80795ae..f2e43cb 100644 --- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx @@ -20,29 +20,15 @@ import {useEffect, useState} from "react"; import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST, GET_ROLE_LIST} from "@/core/data/apiRoutes"; import useRequest from "@/lib/app/hooks/useRequest"; import useProvince from "@/lib/app/hooks/useProvince"; +import useRole from "@/lib/app/hooks/useRole"; const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { const t = useTranslations(); const requestServer = useRequest() const [cityList, setCityList] = useState([]); - const [roleList, setRoleList] = useState([]); const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province")); const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); - - 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(() => { - }); - }, []); + const {roleList, isLoadingRoleList, errorRoleList} = useRole(); function getCities(province_id) { formik.setFieldTouched("city_id", false, false); @@ -336,11 +322,21 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { fullWidth variant="outlined" > - {roleList.map((item) => ( - - {item.name_fa} + {isLoadingRoleList ? ( + + {t("ExpertMangement.text_field_loading_roles_list")} - ))} + ) : errorRoleList ? ( + + {t("ExpertMangement.text_field_error_fetching_roles")} + + ) : ( + roleList.map((item) => ( + + {item.name_fa} + + )) + )} {formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""} diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx index 3fa43a9..45edcde 100644 --- a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx +++ b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx @@ -20,6 +20,7 @@ import {GET_CITY_LIST, GET_PROVINCE_LIST, GET_ROLE_LIST, UPDATE_EXPERT_MANAGEMEN 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, fetchUrl, mutate, setOpenUpdateDialog}) => { @@ -27,28 +28,14 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { const requestServer = useRequest(); // const [provinceList, setProvinceList] = useState([]); const [cityList, setCityList] = useState([]); - const [roleList, setRoleList] = useState([]); + const [citiesExist, setCitiesExist] = useState(false); const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province")); const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); - - 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(() => { - }); - }, []); + const {roleList, isLoadingRoleList, errorRoleList} = useRole(); function getCities(province_id) { formik.setFieldTouched("city_id", false, false); - // formik.setFieldValue("city_id", "") + 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}) => { @@ -58,6 +45,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { name: city.name, value: city.id, })); + setCitiesExist(true); setCityList(formattedData); setCityTextField(t("ExpertMangement.text_field_city_id")) }).catch(() => { @@ -65,7 +53,6 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { }); } - const validationSchema = Yup.object().shape({ name: Yup.string().required(t("ExpertMangement.error_message_name")), username: Yup.string().required(t("ExpertMangement.error_message_username")), @@ -113,6 +100,10 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { }, }); + useEffect(() => { + getCities(formik.values.province_id); + }, [formik.values.province_id]); + return ( <> @@ -227,11 +218,8 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { { {formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""} diff --git a/src/lib/app/hooks/useRole.jsx b/src/lib/app/hooks/useRole.jsx new file mode 100644 index 0000000..fc3dd18 --- /dev/null +++ b/src/lib/app/hooks/useRole.jsx @@ -0,0 +1,29 @@ +import {GET_ROLE_LIST} from "@/core/data/apiRoutes"; +import useRequest from "@/lib/app/hooks/useRequest"; +import useSWR from "swr"; + +const useRole = () => { + const requestServer = useRequest({auth: true, notification: false}) + + //swr config + const fetcher = (...args) => { + return requestServer(args, 'get').then(({data}) => { + return data.data; + }).catch(() => { + }) + }; + + const {data, isLoading} = useSWR(GET_ROLE_LIST, fetcher, { + revalidateIfStale: false, + revalidateOnFocus: false, + revalidateOnReconnect: false + }); + + return { + roleList: data, + isLoadingRoleList: isLoading, + errorRoleList: !data + } +}; + +export default useRole; \ No newline at end of file From 0c0fc5515eb46175d9f3d356d4f012e17ca3e392 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sun, 17 Sep 2023 15:18:46 +0330 Subject: [PATCH 5/8] add RegEx for password field and add chnage password option for expert management and a bit debug on update of expert --- public/locales/fa/app.json | 6 ++ .../ChangePassword/ChangePasswordContent.jsx | 91 +++++++++++++++++++ .../Form/ChangePassword/index.jsx | 33 +++++++ .../Form/CreateForm/CreateContent.jsx | 29 +++++- .../Form/UpdateForm/UpdateContent.jsx | 3 +- .../Form/UpdateForm/index.jsx | 23 ----- .../expert-management/TableRowActions.jsx | 7 ++ 7 files changed, 164 insertions(+), 28 deletions(-) create mode 100644 src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx create mode 100644 src/components/dashboard/expert-management/Form/ChangePassword/index.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 60482e2..8aa65ff 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -345,6 +345,7 @@ "button-confirm": "ثبت", "create": "افزودن کارشناس", "update": "ویرایش کارشناس", + "change_password": "تغییر رمز عبور", "text_field_name": "نام", "text_field_username": "نام کاربری", "text_field_email": "پست الکترونیک", @@ -362,21 +363,26 @@ "text_field_please_select_province": "ابتدا استان خود را انتخاب کنید", "text_field_loading_cities_list": "درحال دریافت شهر ها", "text_field_error_fetching_cities": "خطا در دریافت شهر ها", + "text_field_new_password": "رمز عبور جدید", "error_message_name": "نام خود را وارد کنید", "error_message_username": "نام کاربری خود را وارد کنید", "error_message_email": "پست الکترونیک خود را وارد کنید", "error_message_phone_number": "شماره همراه خود را وارد کنید", "error_message_national_id": "کد ملی خود را وارد کنید", "error_message_password": "رمز عبور خود را وارد کنید", + "error_message_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد", "error_message_position": "سمت خود را وارد کنید", "error_message_province_id": "استان خود را وارد کنید", "error_message_city_id": "شهر خود را وارد کنید", "error_message_role_id": "نقش خود را وارد کنید", + "error_message_new_password": "رمز عبور جدید را وارد کنید", + "error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد", "personal_info": "مشخصات کارشناس", "user_info": "اطلاعات کاربری", "rest_info": "اطلاعات تکمیلی", "delete_tooltip": "حذف", "update_tooltip": "ویرایش کارشناس", + "change_password_tooltip": "تغییر رمز عبور", "delete_expert": "حذف کارشناس", "are_you_sure_text": "آیا از انجام این عملیات اطمینان دارید؟" } diff --git a/src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx b/src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx new file mode 100644 index 0000000..da9abab --- /dev/null +++ b/src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx @@ -0,0 +1,91 @@ +import {useTranslations} from "next-intl"; +import {Button, DialogActions, DialogContent, IconButton, InputAdornment, TextField} from "@mui/material"; +import {CHANGE_PASSWORD_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes"; +import {useFormik} from "formik"; +import * as Yup from "yup"; +import {Visibility, VisibilityOff} from "@mui/icons-material"; +import {useState} from "react"; +import useRequest from "@/lib/app/hooks/useRequest"; + + +const ChnagePasswordContent = ({rowId, fetchUrl, mutate, setOpenChangePasswordDialog}) => { + const t = useTranslations(); + const requestServer = useRequest(); + const [showPassword, setShowPassword] = useState(false); + + const handleClickShowPassword = () => { + setShowPassword(!showPassword); + }; + + const validationSchema = Yup.object().shape({ + new_password: Yup.string() + .required(t("ExpertMangement.error_message_new_password")) + .matches( + /^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/, + t("ExpertMangement.error_message_new_password_regex") + ), + }); + + const formik = useFormik({ + initialValues: { + new_password: "", + }, + validationSchema, + onSubmit: (values, {setSubmitting}) => { + const formData = new FormData(); + formData.append("new_password", values.new_password); + + requestServer(`${CHANGE_PASSWORD_EXPERT_MANAGEMENT}/${rowId}`, 'post', { + auth: true, + data: formData + }) + .then((response) => { + mutate(fetchUrl) + }).catch(() => { + }).finally(() => { + setSubmitting(false); + }); + }, + }); + + return ( + <> + + + + {showPassword ? : } + + + ), + }} + sx={{width: "100%"}} + /> + + + + + + + ); +}; +export default ChnagePasswordContent; \ No newline at end of file diff --git a/src/components/dashboard/expert-management/Form/ChangePassword/index.jsx b/src/components/dashboard/expert-management/Form/ChangePassword/index.jsx new file mode 100644 index 0000000..958d1c8 --- /dev/null +++ b/src/components/dashboard/expert-management/Form/ChangePassword/index.jsx @@ -0,0 +1,33 @@ +import {useTranslations} from "next-intl"; +import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; +import KeyIcon from '@mui/icons-material/Key'; +import {useState} from "react"; +import ChangePasswordContent from "./ChangePasswordContent"; + + +const ChangePassword = ({rowId, fetchUrl, mutate}) => { + const t = useTranslations(); + const [openChnagePasswordDialog, setOpenChangePasswordDialog] = useState(false); + + return ( + <> + + { + setOpenChangePasswordDialog(true) + }} + > + + + + + {t("ExpertMangement.change_password")} + + + + ); +}; +export default ChangePassword; \ No newline at end of file diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx index f2e43cb..c22783a 100644 --- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx @@ -8,6 +8,8 @@ import { FormControl, FormHelperText, Grid, + IconButton, + InputAdornment, InputLabel, MenuItem, Select, @@ -16,11 +18,12 @@ import { 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_ROLE_LIST} from "@/core/data/apiRoutes"; +import {useState} from "react"; +import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST} from "@/core/data/apiRoutes"; import useRequest from "@/lib/app/hooks/useRequest"; import useProvince from "@/lib/app/hooks/useProvince"; import useRole from "@/lib/app/hooks/useRole"; +import {Visibility, VisibilityOff} from "@mui/icons-material"; const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { const t = useTranslations(); @@ -29,6 +32,11 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province")); const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); const {roleList, isLoadingRoleList, errorRoleList} = useRole(); + const [showPassword, setShowPassword] = useState(false); + + const handleClickShowPassword = () => { + setShowPassword(!showPassword); + }; function getCities(province_id) { formik.setFieldTouched("city_id", false, false); @@ -56,7 +64,12 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { 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")), + password: Yup.string() + .required(t("ExpertMangement.error_message_password")) + .matches( + /^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/, + t("ExpertMangement.error_message_password_regex") + ), 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")), @@ -208,6 +221,16 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { onBlur={formik.handleBlur} error={formik.touched.password && !!formik.errors.password} helperText={formik.touched.password && formik.errors.password ? formik.errors.password : null} + type={showPassword ? "text" : "password"} + InputProps={{ + endAdornment: ( + + + {showPassword ? : } + + + ), + }} sx={{width: "100%"}} /> diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx index 45edcde..0b8ae58 100644 --- a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx +++ b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx @@ -59,7 +59,6 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { 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")), @@ -300,7 +299,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { row.province_name, - id: "province_id", + id: "province_name", header: t("ExpertMangement.province_name"), - enableColumnFilter: true, + enableColumnFilter: false, datatype: "text", filterFn: "contains", columnFilterModeOptions: ["contains", "equals", "notEquals"], @@ -118,9 +118,9 @@ function DashboardExpertManagementComponent() { }, { accessorFn: (row) => row.city_name, - id: "city_id", + id: "city_name", header: t("ExpertMangement.city_name"), - enableColumnFilter: true, + enableColumnFilter: false, datatype: "text", filterFn: "contains", columnFilterModeOptions: ["contains", "equals", "notEquals"], @@ -129,10 +129,10 @@ function DashboardExpertManagementComponent() { ), }, { - accessorFn: (row) => row.role_name, - id: "role_id", + accessorFn: (row) => row.roles[0].name_fa, + id: "roles[0].name_fa", header: t("ExpertMangement.role_name"), - enableColumnFilter: true, + enableColumnFilter: false, datatype: "text", filterFn: "contains", columnFilterModeOptions: ["contains", "equals", "notEquals"], From 4f5cb353842082942413bd12b0ef44c241adbfda Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sun, 17 Sep 2023 17:16:46 +0330 Subject: [PATCH 7/8] TF-100 bugfix of password regex --- .../Form/ChangePassword/ChangePasswordContent.jsx | 2 +- .../expert-management/Form/CreateForm/CreateContent.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx b/src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx index da9abab..b1c708c 100644 --- a/src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx +++ b/src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx @@ -21,7 +21,7 @@ const ChnagePasswordContent = ({rowId, fetchUrl, mutate, setOpenChangePasswordDi new_password: Yup.string() .required(t("ExpertMangement.error_message_new_password")) .matches( - /^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/, + /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/, t("ExpertMangement.error_message_new_password_regex") ), }); diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx index c22783a..14e0032 100644 --- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx @@ -67,7 +67,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => { password: Yup.string() .required(t("ExpertMangement.error_message_password")) .matches( - /^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/, + /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/, t("ExpertMangement.error_message_password_regex") ), position: Yup.string().required(t("ExpertMangement.error_message_position")), From ef2244584d9f70216b00ce048a323d3f7db5e751 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Mon, 18 Sep 2023 10:21:09 +0330 Subject: [PATCH 8/8] bug fix for change password page --- src/components/dashboard/change-password/index.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/dashboard/change-password/index.jsx b/src/components/dashboard/change-password/index.jsx index 0adc477..cd2b9fd 100644 --- a/src/components/dashboard/change-password/index.jsx +++ b/src/components/dashboard/change-password/index.jsx @@ -38,8 +38,11 @@ const DashboardChangePasswordComponent = () => { t("ChangePassword.error_message_current_password") ), new_password: Yup.string() - .min(8, t("ChangePassword.error_message_password_length")) - .required(t("ChangePassword.error_message_new_password")), + .required(t("ExpertMangement.error_message_new_password")) + .matches( + /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/, + t("ExpertMangement.error_message_new_password_regex") + ), new_password_confirmation: Yup.string() .required(t("ChangePassword.error_message_confirm_password")) .test(