Files
expert-front/src/components/dashboard/machinary-office/Form/RejectForm.jsx
2023-07-22 17:26:19 +03:30

116 lines
3.7 KiB
JavaScript

import { REJECT_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
const formik = useFormik({
initialValues: {
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_MACHINARY_OFFICE, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const maxFileSize = 2 * 1024 * 1024;
if (uploadedFile.size > maxFileSize) {
UploadFileNotification(directionApp, t);
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("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
);
};
export default RejectForm;