TF-4 delete and update Dialog
This commit is contained in:
@@ -321,6 +321,12 @@
|
||||
"update": "تغییر وضعیت درخواست",
|
||||
"update-tooltip": "بروزرسانی",
|
||||
"button-cancel": "بستن",
|
||||
"refahi": "رفاهی",
|
||||
"navgan": "ناوگان",
|
||||
"phone_number": "شماره تلفن",
|
||||
"national_id": "کد ملی",
|
||||
"type_id": "نوع کاربر",
|
||||
"navgan_id": "کد ناوگان",
|
||||
"button-update": "بروزرسانی"
|
||||
},
|
||||
"UploadSystem": {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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) => {
|
||||
const handleSubmit = () => {
|
||||
setIsSubmitting(true)
|
||||
requestServer(`${DELETE_USER_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
setIsSubmitting(false)
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -45,11 +41,11 @@ const DeleteForm = ({rowId, fetchUrl, mutate}) => {
|
||||
<DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
disabled={isSubmitting} autoFocus>
|
||||
{t("DeleteDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
<Button onClick={handleSubmit} variant="contained" color="primary"
|
||||
disabled={isSubmitting}>
|
||||
{t("DeleteDialog.button-delete")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<Tooltip title={t("UpdateDialog.update-tooltip")}>
|
||||
@@ -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}}
|
||||
/>
|
||||
</Stack>
|
||||
@@ -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}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<TextField
|
||||
<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"
|
||||
rows={8}
|
||||
label={t("UpdateDialog.type_id")}
|
||||
value={formik.values.type_id}
|
||||
onChange={handleTypeIDChange}
|
||||
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
|
||||
@@ -122,9 +171,17 @@ const UpdateForm = ({rowId, fetchUrl, mutate}) => {
|
||||
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}}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user