TF-4 AddDialog completed

2023-09-10 10:45:20 +03:30
parent 6d5db8dd3b
commit 525cd1e62b
5 changed files with 191 additions and 188 deletions
--- 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": "انصراف",
--- 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 (
-        <Dialog fullWidth open={openConfirmDialog}
-                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("AddDialog.add")}</DialogTitle>
-            <DialogContent>
-                <Stack spacing={2}>
-                    <Stack>
-                        <TextField
-                            name="phone_number"
-                            rows={8}
-                            label={t("AddDialog.phone_number")}
-                            type="text"
-                            inputProps={{
-                                inputMode: "number",
-                                min: 0,
-                                pattern: "[0-9]*",
-                            }}
-                            value={formik.values.phone_number}
-                            onChange={handlePhoneNumberChange}
-                            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}}
-                        />
-                    </Stack>
-                    <Stack>
-                        <TextField
-                            name="national_id"
-                            rows={8}
-                            label={t("AddDialog.national_id")}
-                            value={formik.values.national_id}
-                            onChange={handleNationalIDChange}
-                            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}}
-                        />
-                    </Stack>
-                    <Stack>
-                        <TextField
-                            name="type_id"
-                            rows={8}
-                            label={t("AddDialog.type_id")}
-                            value={formik.values.type_id}
-                            onChange={handleTypeIDChange}
-                            fullWidth
-                            variant="outlined"
-                            onBlur={formik.handleBlur("type_id")}
-                            error={
-                                formik.touched.type_id &&
-                                Boolean(formik.errors.type_id)
-                            }
-                            helperText={
-                                formik.touched.type_id && formik.errors.type_id
-                            }
-                            sx={{mt: 1}}
-                        />
-                    </Stack>
-                    <Stack>
-                        <TextField
-                            name="navgan_id"
-                            rows={8}
-                            label={t("AddDialog.navgan_id")}
-                            value={formik.values.navgan_id}
-                            onChange={handleNavganIDChange}
-                            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}}
-                        />
-                    </Stack>
-                </Stack>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
-                        disabled={formik.isSubmitting} autoFocus>
-                    {t("AddDialog.button-cancel")}
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("AddDialog.add")} arrow placement="right">
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    sx={{textTransform: "unset", alignSelf: "center"}}
+                    startIcon={<DataSaverOnIcon/>}
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    {t("AddDialog.add")}
                </Button>
-                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
-                    {t("AddDialog.button-add")}
-                </Button>
-            </DialogActions>
-        </Dialog>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    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("AddDialog.add")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="phone_number"
+                                rows={8}
+                                label={t("AddDialog.phone_number")}
+                                type="text"
+                                inputProps={{
+                                    inputMode: "number",
+                                    min: 0,
+                                    pattern: "[0-9]*",
+                                }}
+                                value={formik.values.phone_number}
+                                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}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <TextField
+                                name="national_id"
+                                rows={8}
+                                label={t("AddDialog.national_id")}
+                                value={formik.values.national_id}
+                                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}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <FormControl
+                                error={
+                                    formik.touched.type_id &&
+                                    Boolean(formik.errors.type_id)
+                                }
+                                onBlur={formik.handleBlur("type_id")}
+                            >
+                                <InputLabel>{t("AddDialog.type_id")}</InputLabel>
+                                <Select
+                                    name="type_id"
+                                    label={t("AddDialog.type_id")}
+                                    value={formik.values.type_id}
+                                    onChange={formik.handleChange}
+                                    fullWidth
+                                    variant="outlined"
+
+                                    sx={{mt: 1}}
+                                >
+                                    <MenuItem value={1}>
+                                        {t("AddDialog.refahi")}
+                                    </MenuItem>
+                                    <MenuItem value={2}>
+                                        {t("AddDialog.navgan")}
+                                    </MenuItem>
+                                </Select>
+                                <FormHelperText>
+                                    {formik.touched.type_id && formik.errors.type_id}
+                                </FormHelperText>
+                            </FormControl>
+                        </Stack>
+                        <Stack>
+                            <TextField
+                                name="navgan_id"
+                                rows={8}
+                                label={t("AddDialog.navgan_id")}
+                                value={formik.values.navgan_id}
+                                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}}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("AddDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("AddDialog.button-add")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </Stack>
    );
 };
 export default AddForm;
--- 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)
                    }}
                >
-                    <ThumbUpAltIcon/>
+                    <DeleteIcon/>
                </IconButton>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
--- a/src/components/dashboard/user-management/Form/UpdateForm.jsx
+++ b/src/components/dashboard/user-management/Form/UpdateForm.jsx
@@ -11,8 +11,8 @@ import {
    TextField,
    Tooltip
 } from "@mui/material";
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import {useFormik} from "formik";
+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";
@@ -65,27 +65,26 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {

    return (
        <>
-            <Tooltip title={t("ConfirmDialog.confirm")}>
+            <Tooltip title={t("UpdateDialog.update-tooltip")}>
                <IconButton
                    color="primary"
                    onClick={() => {
                        setOpenConfirmDialog(true)
                    }}
                >
-                    <ThumbUpAltIcon/>
+                    <UpdateIcon/>
                </IconButton>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
                    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("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
                <DialogContent>
                    <Stack spacing={2}>
                        <Stack>
                            <TextField
                                name="phone_number"
-                                multiline
                                rows={8}
-                                label={t("ConfirmDialog.phone_number")}
+                                label={t("UpdateDialog.phone_number")}
                                value={formik.values.phone_number}
                                onChange={handlePhoneNumberChange}
                                fullWidth
@@ -96,9 +95,8 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {
                        <Stack>
                            <TextField
                                name="national_id"
-                                multiline
                                rows={8}
-                                label={t("ConfirmDialog.national_id")}
+                                label={t("UpdateDialog.national_id")}
                                value={formik.values.national_id}
                                onChange={handleNationalIDChange}
                                fullWidth
@@ -109,9 +107,8 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {
                        <Stack>
                            <TextField
                                name="type_id"
-                                multiline
                                rows={8}
-                                label={t("ConfirmDialog.type_id")}
+                                label={t("UpdateDialog.type_id")}
                                value={formik.values.type_id}
                                onChange={handleTypeIDChange}
                                fullWidth
@@ -122,9 +119,8 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {
                        <Stack>
                            <TextField
                                name="navgan_id"
-                                multiline
                                rows={8}
-                                label={t("ConfirmDialog.navgan_id")}
+                                label={t("UpdateDialog.navgan_id")}
                                value={formik.values.navgan_id}
                                onChange={handleNavganIDChange}
                                fullWidth
@@ -137,11 +133,11 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {
                <DialogActions>
                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
                            disabled={formik.isSubmitting} autoFocus>
-                        {t("ConfirmDialog.button-cancel")}
+                        {t("UpdateDialog.button-cancel")}
                    </Button>
                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
                            disabled={formik.isSubmitting}>
-                        {t("ConfirmDialog.button-confirm")}
+                        {t("UpdateDialog.button-update")}
                    </Button>
                </DialogActions>
            </Dialog>
--- 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 (
-        <Stack direction={"row"} spacing={2}>
-            <Tooltip title={t("AddDialog.add")} arrow placement="right">
-                <Button
-                    color="primary"
-                    variant="contained"
-                    size="small"
-                    sx={{textTransform: "unset", alignSelf: "center"}}
-                    startIcon={<DataSaverOnIcon/>}
-                    onClick={() => {
-                        setOpenConfirmDialog(true)
-                    }}
-                >
-                    {t("AddDialog.add")}
-                </Button>
-            </Tooltip>
-            <AddForm mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}
-                     openConfirmDialog={openConfirmDialog}/>
-        </Stack>
-    );
+
+    return <AddForm mutate={mutate} fetchUrl={fetchUrl}/>
+
 }

 export default TableToolbar;