Files
expert-front/src/components/dashboard/refahi-province-manager/Form/ConfirmForm/ConfirmContent.jsx

135 lines
5.3 KiB
JavaScript

import UploadSystem from "@/core/components/UploadSystem";
import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest";
import { Button, DialogActions, DialogContent, Stack, TextField, Typography } from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { CONFIRM_REFAHI_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import { useState } from "react";
const ConfirmContent = ({ rowId, mutate, setOpenConfirmDialog }) => {
const t = useTranslations();
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const requestServer = useRequest({ auth: true });
const { update_notification } = useNotification();
const formik = useFormik({
initialValues: {
description: "",
confirm_img: null,
},
onSubmit: (values, { setSubmitting }) => {
const formData = new FormData();
if (values.description != "") formData.append("description", values.description);
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
requestServer(`${CONFIRM_REFAHI_PROVINCE_MANAGER}/${rowId}`, "post", {
data: formData,
})
.then((response) => {
setOpenConfirmDialog(false);
mutate();
update_notification();
})
.catch(() => {})
.finally(() => {
setSubmitting(false);
});
},
});
const handleDescriptionChange = (event) => {
formik.setFieldValue("description", event.target.value);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(t);
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={
<>
<span>{t("ConfirmDialog.description")}</span>
<small>{t("ConfirmDialog.optional")}</small>
</>
}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
</Stack>
<Stack>
<Typography>
{t("UploadSystem.upload_file")}
{t("UploadSystem.optional")}
</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button
onClick={() => setOpenConfirmDialog(false)}
variant="outlined"
color="secondary"
disabled={formik.isSubmitting}
autoFocus
>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button
onClick={formik.handleSubmit}
variant="contained"
color="primary"
disabled={formik.isSubmitting}
>
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</>
);
};
export default ConfirmContent;