TF-4 delete and update Dialog

This commit is contained in:
2023-09-10 11:33:33 +03:30
parent 525cd1e62b
commit 77644bbf5f
4 changed files with 106 additions and 48 deletions

View File

@@ -321,6 +321,12 @@
"update": "تغییر وضعیت درخواست",
"update-tooltip": "بروزرسانی",
"button-cancel": "بستن",
"refahi": "رفاهی",
"navgan": "ناوگان",
"phone_number": "شماره تلفن",
"national_id": "کد ملی",
"type_id": "نوع کاربر",
"navgan_id": "کد ناوگان",
"button-update": "بروزرسانی"
},
"UploadSystem": {

View File

@@ -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);

View File

@@ -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>

View File

@@ -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>