From ae8e2a3378cfeb3d3f70cf365045eda557fc881f Mon Sep 17 00:00:00 2001
From: Amin Ghasempoor <aminghasempoor79@gmail.com>
Date: Sun, 10 Sep 2023 15:08:41 +0330
Subject: [PATCH] TF-4 user management edit form

---
 public/locales/fa/app.json                    |   8 +-
 .../user-management/Form/AddForm.jsx          |   6 +-
 .../user-management/Form/DeleteForm.jsx       |  15 +-
 .../user-management/Form/UpdateForm.jsx       | 260 ++++++++----------
 .../user-management/TableRowActions.jsx       |   2 +-
 .../dashboard/user-management/index.jsx       |  12 +-
 6 files changed, 143 insertions(+), 160 deletions(-)

diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 7f2f162..e2e5105 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -278,6 +278,7 @@
     "created_at": "تاریخ درخواست",
     "updated_at": "تاریخ بروزرسانی",
     "navgan_id": "کد ناوگان",
+    "type_name": "نوع کاربر",
     "vehicle_type": "نوع ماشین",
     "state_name": "وضعیت درخواست"
   },
@@ -318,8 +319,8 @@
     "description_error": "وارد کردن توضیحات الزامی است!"
   },
   "UpdateDialog": {
-    "update": "تغییر وضعیت درخواست",
-    "update-tooltip": "بروزرسانی",
+    "update": "ویرایش",
+    "update-tooltip": "ویرایش",
     "button-cancel": "بستن",
     "refahi": "رفاهی",
     "navgan": "ناوگان",
@@ -327,7 +328,7 @@
     "national_id": "کد ملی",
     "type_id": "نوع کاربر",
     "navgan_id": "کد ناوگان",
-    "button-update": "بروزرسانی"
+    "button-update": "ویرایش"
   },
   "UploadSystem": {
     "upload_file": "فایل خود را بارگذاری کنید",
@@ -344,6 +345,7 @@
   "DeleteDialog": {
     "delete": "حذف",
     "button-cancel": "انصراف",
+    "typography": "آیا از حدف این مورد اطمینان دارید ؟",
     "button-delete": "حذف کردن"
   },
   "AddDialog": {
diff --git a/src/components/dashboard/user-management/Form/AddForm.jsx b/src/components/dashboard/user-management/Form/AddForm.jsx
index d807d68..c0021e8 100644
--- a/src/components/dashboard/user-management/Form/AddForm.jsx
+++ b/src/components/dashboard/user-management/Form/AddForm.jsx
@@ -147,11 +147,11 @@ const AddForm = ({mutate, fetchUrl}) => {
                                     formik.touched.type_id &&
                                     Boolean(formik.errors.type_id)
                                 }
-                                onBlur={formik.handleBlur("type_id")}
                             >
                                 <InputLabel>{t("AddDialog.type_id")}</InputLabel>
                                 <Select
                                     name="type_id"
+                                    onBlur={formik.handleBlur("type_id")}
                                     label={t("AddDialog.type_id")}
                                     value={formik.values.type_id}
                                     onChange={formik.handleChange}
@@ -161,10 +161,10 @@ const AddForm = ({mutate, fetchUrl}) => {
                                     sx={{mt: 1}}
                                 >
                                     <MenuItem value={1}>
-                                        {t("AddDialog.refahi")}
+                                        {t("AddDialog.navgan")}
                                     </MenuItem>
                                     <MenuItem value={2}>
-                                        {t("AddDialog.navgan")}
+                                        {t("AddDialog.refahi")}
                                     </MenuItem>
                                 </Select>
                                 <FormHelperText>
diff --git a/src/components/dashboard/user-management/Form/DeleteForm.jsx b/src/components/dashboard/user-management/Form/DeleteForm.jsx
index f336036..b653428 100644
--- a/src/components/dashboard/user-management/Form/DeleteForm.jsx
+++ b/src/components/dashboard/user-management/Form/DeleteForm.jsx
@@ -1,6 +1,15 @@
 import {useTranslations} from "next-intl";
 import {useState} from "react";
-import {Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip} from "@mui/material";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Tooltip,
+    Typography
+} from "@mui/material";
 import DeleteIcon from '@mui/icons-material/Delete';
 import {DELETE_USER_MANAGEMENT} from "@/core/data/apiRoutes";
 import useRequest from "@/lib/app/hooks/useRequest";
@@ -12,7 +21,6 @@ const DeleteForm = ({rowId, fetchUrl, mutate}) => {
     const [isSubmitting, setIsSubmitting] = useState(false)
     const requestServer = useRequest({auth: true})
     const {update_notification} = useNotification()
-
     const handleSubmit = () => {
         setIsSubmitting(true)
         requestServer(`${DELETE_USER_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
@@ -39,6 +47,9 @@ const DeleteForm = ({rowId, fetchUrl, mutate}) => {
             <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("DeleteDialog.delete")}</DialogTitle>
+                <DialogContent>
+                    <Typography>{t("DeleteDialog.typography")}</Typography>
+                </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
                             disabled={isSubmitting} autoFocus>
diff --git a/src/components/dashboard/user-management/Form/UpdateForm.jsx b/src/components/dashboard/user-management/Form/UpdateForm.jsx
index 257fce8..eccbf36 100644
--- a/src/components/dashboard/user-management/Form/UpdateForm.jsx
+++ b/src/components/dashboard/user-management/Form/UpdateForm.jsx
@@ -17,31 +17,23 @@ import {
     Tooltip
 } from "@mui/material";
 import {useFormik} from "formik";
-import UpdateIcon from '@mui/icons-material/Update';
+import BorderColorIcon from '@mui/icons-material/BorderColor';
 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 UpdateForm = ({row, fetchUrl, mutate}) => {
     const t = useTranslations();
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
     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)
+        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)
+        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")),
@@ -50,18 +42,17 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {
 
     const formik = useFormik({
         initialValues: {
-            phone_number: "",
-            national_id: "",
-            type_id: "",
-            navgan_id: "",
-        }, validationSchema,
-        onSubmit: (values, {setSubmitting}) => {
+            phone_number: row.getValue("phone_number"),
+            national_id: row.getValue("national_id"),
+            type_id: row.original.type_id,
+            navgan_id: row.getValue("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', {
+            requestServer(`${UPDATE_USER_MANAGEMENT}/${row.getValue("id")}`, 'post', {
                 data: formData,
             }).then((response) => {
                 mutate(fetchUrl)
@@ -73,132 +64,111 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {
         },
     });
 
-    return (
-        <>
-            <Tooltip title={t("UpdateDialog.update-tooltip")}>
-                <IconButton
-                    color="primary"
-                    onClick={() => {
-                        setOpenConfirmDialog(true)
-                    }}
-                >
-                    <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("UpdateDialog.update")}</DialogTitle>
-                <DialogContent>
-                    <Stack spacing={2}>
-                        <Stack>
-                            <TextField
-                                name="phone_number"
-                                rows={8}
-                                label={t("UpdateDialog.phone_number")}
-                                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("UpdateDialog.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("UpdateDialog.type_id")}</InputLabel>
-                                <Select
-                                    name="type_id"
-                                    label={t("UpdateDialog.type_id")}
-                                    value={formik.values.type_id}
-                                    onChange={formik.handleChange}
-                                    fullWidth
-                                    variant="outlined"
-
-                                    sx={{mt: 1}}
-                                >
-                                    <MenuItem value={1}>
-                                        {t("UpdateDialog.refahi")}
-                                    </MenuItem>
-                                    <MenuItem value={2}>
-                                        {t("UpdateDialog.navgan")}
-                                    </MenuItem>
-                                </Select>
-                                <FormHelperText>
-                                    {formik.touched.type_id && formik.errors.type_id}
-                                </FormHelperText>
-                            </FormControl>
-                        </Stack>
-                        <Stack>
-                            <TextField
-                                name="navgan_id"
-                                rows={8}
-                                label={t("UpdateDialog.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>
+    return (<>
+        <Tooltip title={t("UpdateDialog.update-tooltip")}>
+            <IconButton
+                color="primary"
+                onClick={() => {
+                    setOpenConfirmDialog(true)
+                }}
+            >
+                <BorderColorIcon/>
+            </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("UpdateDialog.update")}</DialogTitle>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            name="phone_number"
+                            rows={8}
+                            label={t("UpdateDialog.phone_number")}
+                            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>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
-                            disabled={formik.isSubmitting} autoFocus>
-                        {t("UpdateDialog.button-cancel")}
-                    </Button>
-                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                            disabled={formik.isSubmitting}>
-                        {t("UpdateDialog.button-update")}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
-    );
+                    <Stack>
+                        <TextField
+                            name="national_id"
+                            rows={8}
+                            label={t("UpdateDialog.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)}
+                        >
+                            <InputLabel>{t("UpdateDialog.type_id")}</InputLabel>
+                            <Select
+                                name="type_id"
+                                label={t("UpdateDialog.type_id")}
+                                value={formik.values.type_id}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            >
+                                <MenuItem value={1}>
+                                    {t("UpdateDialog.navgan")}
+                                </MenuItem>
+                                <MenuItem value={2}>
+                                    {t("UpdateDialog.refahi")}
+                                </MenuItem>
+                            </Select>
+                            <FormHelperText>
+                                {formik.touched.type_id && formik.errors.type_id}
+                            </FormHelperText>
+                        </FormControl>
+                    </Stack>
+                    <Stack>
+                        <TextField
+                            name="navgan_id"
+                            rows={8}
+                            label={t("UpdateDialog.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("UpdateDialog.button-cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting}>
+                    {t("UpdateDialog.button-update")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    </>);
 };
 export default UpdateForm;
\ No newline at end of file
diff --git a/src/components/dashboard/user-management/TableRowActions.jsx b/src/components/dashboard/user-management/TableRowActions.jsx
index c67acb3..5b0f031 100644
--- a/src/components/dashboard/user-management/TableRowActions.jsx
+++ b/src/components/dashboard/user-management/TableRowActions.jsx
@@ -7,7 +7,7 @@ const TableRowActions = ({row, mutate, fetchUrl}) => {
     return (
         <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
             <UpdateForm
-                rowId={row.getValue("id")}
+                row={row}
                 mutate={mutate}
                 fetchUrl={fetchUrl}
             />
diff --git a/src/components/dashboard/user-management/index.jsx b/src/components/dashboard/user-management/index.jsx
index 596c7e6..fc235e5 100644
--- a/src/components/dashboard/user-management/index.jsx
+++ b/src/components/dashboard/user-management/index.jsx
@@ -34,9 +34,9 @@ function DashboardUserManagementComponent() {
                 ),
             },
             {
-                accessorFn: (row) => row.name,
-                id: "name",
-                header: t("UserManagement.name"),
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("UserManagement.navgan_id"),
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "contains",
@@ -114,9 +114,9 @@ function DashboardUserManagementComponent() {
                 ),
             },
             {
-                accessorFn: (row) => row.state_name,
-                id: "state_id",
-                header: t("UserManagement.state_name"),
+                accessorFn: (row) => row.type_name,
+                id: "type_name",
+                header: t("UserManagement.type_name"),
                 enableColumnFilter: false,
                 datatype: "numeric",
                 Cell: ({renderedCellValue}) => (