From 525cd1e62b49e6c9b73a3a73db576141fedfc941 Mon Sep 17 00:00:00 2001 From: Amin Ghasempoor Date: Sun, 10 Sep 2023 10:45:20 +0330 Subject: [PATCH] TF-4 AddDialog completed --- public/locales/fa/app.json | 22 +- .../user-management/Form/AddForm.jsx | 302 ++++++++++-------- .../user-management/Form/DeleteForm.jsx | 4 +- .../user-management/Form/UpdateForm.jsx | 24 +- .../user-management/TableToolbar.jsx | 27 +- 5 files changed, 191 insertions(+), 188 deletions(-) diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 719ba4a..f51eb1a 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -321,11 +321,7 @@ "update": "تغییر وضعیت درخواست", "update-tooltip": "بروزرسانی", "button-cancel": "بستن", - "button-update": "بروزرسانی", - "description": "توضیحات خود را وارد نمائید", - "description_error": "وارد کردن توضیحات الزامی است!", - "next-state-id": "وضعیت بعدی", - "next-state-id-error": "وارد کردن وضعیت بعدی الزامی است!" + "button-update": "بروزرسانی" }, "UploadSystem": { "upload_file": "فایل خود را بارگذاری کنید", @@ -333,6 +329,10 @@ "upload_file_unit": "حداکثر 2Mb", "upload_file_format": "فرمت قابل قبول : png,jpg,pdf", "delete": "پاک کردن", + "phone_number": "شماره تلفن", + "national_id": "کد ملی", + "navgan_id": "کد ناوگان", + "type_id": "نوع کاربر", "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد" }, "DeleteDialog": { @@ -345,11 +345,17 @@ "phone_number": "شماره تلفن", "phone_number_positive": "شماره تلفن باید مثبت باشد", "phone_number_error": "وارد کردن شماره تلفن الزامیست", + "phone_number_number": "شماره تلفن باید شامل اعداد باشد", + "phone_number_max": "شماره تلفن باید شامل 11 رقم باشد", + "national_id_positive": "کد ملی باید مثبت باشد", + "national_id_number": "کد ملی باید شامل اعداد باشد", + "national_id_max": "کد ملی باید شامل 10 رقم باشد", + "national_id": "کد ملی", + "national_id_error": "وارد کردن کد ملی الزامیست", "type_id_error": "وارد کردن نوع کاربر الزامیست", "navgan_id_error": "وارد کردن کد ناوگان الزامیست", - "national_id_error": "وارد کردن کد ملی الزامیست", - "phone_number_number": "شماره تلفن باید شامل اعداد باشد", - "national_id": "کد ملی", + "refahi": "رفاهی", + "navgan": "ناوگان", "type_id": "نوع کاربر", "navgan_id": "کد ناوگان", "button-cancel": "انصراف", diff --git a/src/components/dashboard/user-management/Form/AddForm.jsx b/src/components/dashboard/user-management/Form/AddForm.jsx index a13ec48..1f26ecf 100644 --- a/src/components/dashboard/user-management/Form/AddForm.jsx +++ b/src/components/dashboard/user-management/Form/AddForm.jsx @@ -2,46 +2,48 @@ import {useTranslations} from "next-intl"; import * as Yup from "yup"; import {ADD_USER_MANAGEMENT} from "@/core/data/apiRoutes"; import {useFormik} from "formik"; -import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField} from "@mui/material"; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + FormControl, + FormHelperText, + InputLabel, + MenuItem, + Select, + Stack, + TextField, + Tooltip +} from "@mui/material"; import useRequest from "@/lib/app/hooks/useRequest"; +import DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; +import {useState} from "react"; -const AddForm = ({openConfirmDialog, setOpenConfirmDialog, mutate, fetchUrl}) => { +const AddForm = ({mutate, fetchUrl}) => { const t = useTranslations(); const requestServer = useRequest({auth: true}) + const [openConfirmDialog, setOpenConfirmDialog] = useState(false); const validationSchema = Yup.object().shape({ phone_number: Yup.mixed().test( "is-number", `${t("AddDialog.phone_number_number")}`, (value) => !isNaN(value) ).test("positive", `${t("AddDialog.phone_number_positive")}`, (value) => value >= 0) + .test("max", `${t("AddDialog.phone_number_max")}`, (value) => value.length <= 11) .required(t("AddDialog.phone_number_error")), + national_id: Yup.mixed().test( + "is-number", + `${t("AddDialog.national_id_number")}`, + (value) => !isNaN(value) + ).test("positive", `${t("AddDialog.national_id_positive")}`, (value) => value >= 0) + .test("max", `${t("AddDialog.national_id_max")}`, (value) => value.length <= 10) + .required(t("AddDialog.national_id_error")), type_id: Yup.number().required(t("AddDialog.type_id_error")), navgan_id: Yup.number().required(t("AddDialog.navgan_id_error")), - national_id: Yup.number().required(t("AddDialog.national_id_error")), }); - // const handleSubmit = async (values, {setSubmitting, resetForm}) => { - // const formData = new FormData(); - // formData.append("phone_number", values.phone_number); - // formData.append("national_id", values.national_id); - // formData.append("type_id", values.type_id); - // formData.append("navgan_id", values.navgan_id); - // requestServer(ADD_USER_MANAGEMENT, 'post', { - // data: formData, - // }).then((response) => { - // mutate(fetchUrl) - // update_notification() - // }).catch(() => { - // }).finally(() => { - // setSubmitting(false); - // }); - // }; - // initialValues: { - // phone_number: "", - // national_id: "", - // type_id: "", - // navgan_id: "" - // } const formik = useFormik({ initialValues: { phone_number: "", @@ -60,6 +62,7 @@ const AddForm = ({openConfirmDialog, setOpenConfirmDialog, mutate, fetchUrl}) => requestServer(ADD_USER_MANAGEMENT, 'post', { data: formData, }).then((response) => { + setOpenConfirmDialog(false) mutate(fetchUrl) update_notification() }).catch(() => { @@ -68,123 +71,142 @@ const AddForm = ({openConfirmDialog, setOpenConfirmDialog, mutate, fetchUrl}) => }); }, }); - const handlePhoneNumberChange = (event) => { - formik.setFieldValue("phone_number", event.target.value) - }; - const handleNationalIDChange = (event) => { - formik.setFieldValue("national_id", event.target.value) - }; - const handleTypeIDChange = (event) => { - formik.setFieldValue("type_id", event.target.value) - }; - const handleNavganIDChange = (event) => { - formik.setFieldValue("navgan_id", event.target.value) - }; return ( - - {t("AddDialog.add")} - - - - - - - - - - - - - - - - - - - - - + + + {t("AddDialog.add")} + + + + { + if (event.target.value.length <= 11) return formik.handleChange(event) + }} + fullWidth + variant="outlined" + onBlur={formik.handleBlur("phone_number")} + error={ + formik.touched.phone_number && + Boolean(formik.errors.phone_number) + } + helperText={ + formik.touched.phone_number && formik.errors.phone_number + } + sx={{mt: 1}} + /> + + + { + if (event.target.value.length <= 10) return formik.handleChange(event) + }} + fullWidth + variant="outlined" + onBlur={formik.handleBlur("national_id")} + error={ + formik.touched.national_id && + Boolean(formik.errors.national_id) + } + helperText={ + formik.touched.national_id && formik.errors.national_id + } + sx={{mt: 1}} + /> + + + + {t("AddDialog.type_id")} + + + {formik.touched.type_id && formik.errors.type_id} + + + + + + + + + + + + + + ); }; export default AddForm; \ No newline at end of file diff --git a/src/components/dashboard/user-management/Form/DeleteForm.jsx b/src/components/dashboard/user-management/Form/DeleteForm.jsx index 122354b..2e44a2f 100644 --- a/src/components/dashboard/user-management/Form/DeleteForm.jsx +++ b/src/components/dashboard/user-management/Form/DeleteForm.jsx @@ -1,8 +1,8 @@ import {useTranslations} from "next-intl"; import {useState} from "react"; import {Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip} from "@mui/material"; -import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import {useFormik} from "formik"; +import DeleteIcon from '@mui/icons-material/Delete'; import {DELETE_USER_MANAGEMENT} from "@/core/data/apiRoutes"; import useRequest from "@/lib/app/hooks/useRequest"; import useNotification from "@/lib/app/hooks/useNotification"; @@ -37,7 +37,7 @@ const DeleteForm = ({rowId, fetchUrl, mutate}) => { setOpenConfirmDialog(true) }} > - + { return ( <> - + { setOpenConfirmDialog(true) }} > - + - {t("ConfirmDialog.confirm")} + {t("UpdateDialog.update")} { { { { diff --git a/src/components/dashboard/user-management/TableToolbar.jsx b/src/components/dashboard/user-management/TableToolbar.jsx index 7371fbc..558cdc5 100644 --- a/src/components/dashboard/user-management/TableToolbar.jsx +++ b/src/components/dashboard/user-management/TableToolbar.jsx @@ -1,32 +1,11 @@ -import DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; -import {Button, Stack, Tooltip} from "@mui/material"; import {useTranslations} from "next-intl"; -import {useState} from "react"; import AddForm from "./Form/AddForm"; function TableToolbar({mutate, fetchUrl}) { const t = useTranslations(); - const [openConfirmDialog, setOpenConfirmDialog] = useState(false); - return ( - - - - - - - ); + + return + } export default TableToolbar;