212 lines
9.3 KiB
JavaScript
212 lines
9.3 KiB
JavaScript
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,
|
|
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 = ({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")),
|
|
});
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
phone_number: "",
|
|
national_id: "",
|
|
type_id: "",
|
|
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);
|
|
formData.append("type_id", values.type_id);
|
|
formData.append("navgan_id", values.navgan_id);
|
|
|
|
requestServer(ADD_USER_MANAGEMENT, 'post', {
|
|
data: formData,
|
|
}).then((response) => {
|
|
setOpenConfirmDialog(false)
|
|
mutate(fetchUrl)
|
|
update_notification()
|
|
}).catch(() => {
|
|
}).finally(() => {
|
|
setSubmitting(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>
|
|
<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; |