From 77644bbf5f233a911ec495d95f52f4f10194c63e Mon Sep 17 00:00:00 2001 From: Amin Ghasempoor Date: Sun, 10 Sep 2023 11:33:33 +0330 Subject: [PATCH] TF-4 delete and update Dialog --- public/locales/fa/app.json | 6 + .../user-management/Form/AddForm.jsx | 1 - .../user-management/Form/DeleteForm.jsx | 32 +++-- .../user-management/Form/UpdateForm.jsx | 115 +++++++++++++----- 4 files changed, 106 insertions(+), 48 deletions(-) diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index f51eb1a..7f2f162 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -321,6 +321,12 @@ "update": "تغییر وضعیت درخواست", "update-tooltip": "بروزرسانی", "button-cancel": "بستن", + "refahi": "رفاهی", + "navgan": "ناوگان", + "phone_number": "شماره تلفن", + "national_id": "کد ملی", + "type_id": "نوع کاربر", + "navgan_id": "کد ناوگان", "button-update": "بروزرسانی" }, "UploadSystem": { diff --git a/src/components/dashboard/user-management/Form/AddForm.jsx b/src/components/dashboard/user-management/Form/AddForm.jsx index 1f26ecf..d807d68 100644 --- a/src/components/dashboard/user-management/Form/AddForm.jsx +++ b/src/components/dashboard/user-management/Form/AddForm.jsx @@ -52,7 +52,6 @@ const AddForm = ({mutate, fetchUrl}) => { navgan_id: "", }, validationSchema, onSubmit: (values, {setSubmitting}) => { - console.log("hello") const formData = new FormData(); formData.append("phone_number", values.phone_number); formData.append("national_id", values.national_id); diff --git a/src/components/dashboard/user-management/Form/DeleteForm.jsx b/src/components/dashboard/user-management/Form/DeleteForm.jsx index 2e44a2f..f336036 100644 --- a/src/components/dashboard/user-management/Form/DeleteForm.jsx +++ b/src/components/dashboard/user-management/Form/DeleteForm.jsx @@ -1,32 +1,28 @@ import {useTranslations} from "next-intl"; import {useState} from "react"; import {Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip} from "@mui/material"; -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"; - const DeleteForm = ({rowId, fetchUrl, mutate}) => { const t = useTranslations(); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false) const requestServer = useRequest({auth: true}) const {update_notification} = useNotification() - const formik = useFormik({ - onSubmit: (values, {setSubmitting}) => { - - - requestServer(`${DELETE_USER_MANAGEMENT}/${rowId}`, 'post').then((response) => { - mutate(fetchUrl) - update_notification() - }).catch(() => { - }).finally(() => { - setSubmitting(false); - }); - }, - }); + const handleSubmit = () => { + setIsSubmitting(true) + requestServer(`${DELETE_USER_MANAGEMENT}/${rowId}`, 'delete').then((response) => { + mutate(fetchUrl) + update_notification() + }).catch(() => { + }).finally(() => { + setIsSubmitting(false) + }); + } return ( <> @@ -45,11 +41,11 @@ const DeleteForm = ({rowId, fetchUrl, mutate}) => { {t("DeleteDialog.delete")} - diff --git a/src/components/dashboard/user-management/Form/UpdateForm.jsx b/src/components/dashboard/user-management/Form/UpdateForm.jsx index 1eef4a8..257fce8 100644 --- a/src/components/dashboard/user-management/Form/UpdateForm.jsx +++ b/src/components/dashboard/user-management/Form/UpdateForm.jsx @@ -6,7 +6,12 @@ import { DialogActions, DialogContent, DialogTitle, + FormControl, + FormHelperText, IconButton, + InputLabel, + MenuItem, + Select, Stack, TextField, Tooltip @@ -16,7 +21,7 @@ import UpdateIcon from '@mui/icons-material/Update'; import {UPDATE_USER_MANAGEMENT} from "@/core/data/apiRoutes"; import useRequest from "@/lib/app/hooks/useRequest"; import useNotification from "@/lib/app/hooks/useNotification"; - +import * as Yup from "yup"; const UpdateForm = ({rowId, fetchUrl, mutate}) => { const t = useTranslations(); @@ -24,20 +29,38 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => { const requestServer = useRequest({auth: true}) const {update_notification} = useNotification() + 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")), + }); + const formik = useFormik({ initialValues: { phone_number: "", national_id: "", type_id: "", navgan_id: "", - }, + }, validationSchema, onSubmit: (values, {setSubmitting}) => { 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(`${UPDATE_USER_MANAGEMENT}/${rowId}`, 'post', { data: formData, }).then((response) => { @@ -50,19 +73,6 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => { }, }); - 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 ( <> @@ -86,9 +96,19 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => { rows={8} label={t("UpdateDialog.phone_number")} value={formik.values.phone_number} - onChange={handlePhoneNumberChange} + onChange={(event) => { + 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}} /> @@ -98,23 +118,52 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => { rows={8} label={t("UpdateDialog.national_id")} value={formik.values.national_id} - onChange={handleNationalIDChange} + onChange={(event) => { + 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("UpdateDialog.type_id")} + + + {formik.touched.type_id && formik.errors.type_id} + + { rows={8} label={t("UpdateDialog.navgan_id")} value={formik.values.navgan_id} - onChange={handleNavganIDChange} + onChange={formik.handleChange} fullWidth variant="outlined" + onBlur={formik.handleBlur("navgan_id")} + error={ + formik.touched.navgan_id && + Boolean(formik.errors.navgan_id) + } + helperText={ + formik.touched.navgan_id && formik.errors.navgan_id + } sx={{mt: 1}} />