134 lines
3.9 KiB
JavaScript
134 lines
3.9 KiB
JavaScript
import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogActions,
|
|
Button,
|
|
TextField,
|
|
FormHelperText,
|
|
Input,
|
|
} from "@mui/material";
|
|
import { useFormik } from "formik";
|
|
import { useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
|
|
|
|
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
|
const t = useTranslations();
|
|
const [description, setDescription] = useState("");
|
|
const [fileData, setFileData] = useState(null);
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
description: "",
|
|
fileData: null,
|
|
},
|
|
onSubmit: () => {
|
|
const formData = new FormData();
|
|
if (description !== "")
|
|
formData.append("expert_description", description);
|
|
if (fileData !== null) formData.append("file", fileData);
|
|
handleClose();
|
|
confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
|
|
},
|
|
});
|
|
|
|
const handleDescriptionChange = (event) => {
|
|
setDescription(event.target.value);
|
|
formik.handleChange(event);
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
handleClose();
|
|
confirmData(CONFIRM_PASSENGER_OFFICE, rowId);
|
|
};
|
|
|
|
const handleFileChange = (e) => {
|
|
console.log("hiiii");
|
|
const selectedFile = e.target.files[0];
|
|
if (selectedFile) {
|
|
const fileSizeInBytes = selectedFile.size;
|
|
if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
|
|
formik.setFieldError(
|
|
"fileData",
|
|
`File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
|
|
);
|
|
e.target.value = null;
|
|
} else {
|
|
setFileData(selectedFile);
|
|
formik.setFieldValue("fileData", selectedFile);
|
|
formik.setFieldError("fileData", "");
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose}>
|
|
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
|
<TextField
|
|
name="description"
|
|
multiline
|
|
rows={8}
|
|
placeholder={t("ConfirmDialog.description")}
|
|
value={description}
|
|
onChange={handleDescriptionChange}
|
|
onBlur={formik.handleBlur("description")}
|
|
fullWidth
|
|
variant="outlined"
|
|
sx={{ mt: 1 }}
|
|
/>
|
|
<div>
|
|
<input
|
|
id="fileData"
|
|
name="fileData"
|
|
type="file"
|
|
accept=".pdf, image/*"
|
|
onChange={handleFileChange}
|
|
style={{ display: "none" }}
|
|
/>
|
|
<label htmlFor="fileData">
|
|
<Button
|
|
id="fileData"
|
|
name="fileData"
|
|
variant="outlined"
|
|
color="primary"
|
|
component="span"
|
|
sx={{ mt: 1, width: "100%" }}
|
|
>
|
|
{t("ConfirmDialog.choose_file")}
|
|
</Button>
|
|
</label>
|
|
{/* <label htmlFor="fileData">
|
|
<Button
|
|
component="span"
|
|
variant="outlined"
|
|
color="primary"
|
|
sx={{ mt: 1, width: "100%", border: "dashed", color: "black " }}
|
|
>
|
|
{t("ConfirmDialog.choose_file")}
|
|
</Button>
|
|
</label> */}
|
|
</div>
|
|
<FormHelperText error={Boolean(formik.errors.fileData)}>
|
|
{formik.errors.fileData && formik.errors.fileData}
|
|
{formik.values.fileData &&
|
|
`Selected file: ${formik.values.fileData.name}`}
|
|
</FormHelperText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleConfirm} color="primary">
|
|
{t("ConfirmDialog.button-confirm")}
|
|
</Button>
|
|
<Button onClick={handleClose} color="secondary" autoFocus>
|
|
{t("ConfirmDialog.button-cancel")}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
export default ConfirmForm;
|