283 lines
12 KiB
JavaScript
283 lines
12 KiB
JavaScript
import UploadSystem from "@/core/components/UploadSystem";
|
|
import useNotification from "@/lib/app/hooks/useNotification";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
import {
|
|
Box,
|
|
Button,
|
|
DialogActions,
|
|
DialogContent,
|
|
FormHelperText,
|
|
Grid,
|
|
LinearProgress,
|
|
Stack,
|
|
TextField,
|
|
Typography
|
|
} from "@mui/material"
|
|
import {useFormik} from "formik";
|
|
import {useTranslations} from "next-intl";
|
|
import {
|
|
CONFIRM_PASSENGER_BOSS,
|
|
EXPORT_PASSENGER_BOSS_DETAILS,
|
|
} from "@/core/data/apiRoutes";
|
|
import {useEffect, useState} from "react";
|
|
import PriceField from "@/core/components/PriceField";
|
|
import * as Yup from "yup";
|
|
import CustomAccordion from "@/core/components/CustomAccordion";
|
|
import ImageContent from "@/core/components/ImageContent";
|
|
|
|
const vehicle_amount = {
|
|
"اتوبوس": 7000,
|
|
"مینی بوس": 2000,
|
|
}
|
|
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type , handleSizeChangeClick}) => {
|
|
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 ,notification: false})
|
|
const {update_notification} = useNotification();
|
|
const [accordionStates, setAccordionStates] = useState([]);
|
|
const [hasImageShown, setHasImageShown] = useState(false);
|
|
const [imageLink, setImageLink] = useState(null);
|
|
const [detailsList, setDetailsData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isSkeleton, setIsSkeleton] = useState(false);
|
|
|
|
useEffect(() => {
|
|
requestServer(`${EXPORT_PASSENGER_BOSS_DETAILS}/${rowId}`, 'get')
|
|
.then((response) => {
|
|
const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
|
|
setAccordionStates(booleanData);
|
|
setDetailsData(response.data)
|
|
})
|
|
.catch(() => {
|
|
}).finally(() => {
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
const handleAccordionChange = (index) => {
|
|
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
|
|
setAccordionStates(newAccordionStates);
|
|
|
|
if (!newAccordionStates[index])
|
|
{
|
|
handleSizeChangeClick('sm');
|
|
setHasImageShown(false);
|
|
setIsSkeleton(false)
|
|
}
|
|
else {
|
|
handleSizeChangeClick('xl');
|
|
setHasImageShown(true);
|
|
setImageLink(detailsList.data.attachment_files[index])
|
|
setIsSkeleton(true)
|
|
}
|
|
};
|
|
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
approved_amount: Yup.mixed().test(
|
|
"is-number",
|
|
`${t("ConfirmDialog.approved_amount_number")}`,
|
|
(value) => !isNaN(value)
|
|
).test("max-amount", `${t("PassengerBoss.max_amount", {value: parseInt(vehicle_amount[vehicle_type]).toLocaleString('en')})}`,
|
|
(value) => value <= vehicle_amount[vehicle_type])
|
|
.test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0)
|
|
.required(t("ConfirmDialog.approved_amount_error")),
|
|
confirm_img: Yup.mixed()
|
|
.required(t("PassengerBoss.upload_file_required"))
|
|
.test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => {
|
|
return value.size <= 2 * 1024 * 1024;
|
|
})
|
|
.test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => {
|
|
const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types
|
|
return allowedTypes.includes(value.type);
|
|
})
|
|
});
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
description: "",
|
|
approved_amount: "",
|
|
confirm_img: null
|
|
}, validationSchema,
|
|
onSubmit: (values, {setSubmitting}) => {
|
|
const formData = new FormData();
|
|
formData.append("approved_amount", values.approved_amount);
|
|
if (values.description != "") formData.append("expert_description", values.description);
|
|
formData.append("attachment", values.confirm_img);
|
|
|
|
requestServer(`${CONFIRM_PASSENGER_BOSS}/${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 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).then(() => {
|
|
formik.setFieldTouched("confirm_img", true);
|
|
})
|
|
setShowAddIcon(false);
|
|
}
|
|
};
|
|
const handleAmountChange = (event) => {
|
|
if (!isNaN(event.target.value)) {
|
|
formik.setFieldValue("approved_amount", event.target.value)
|
|
} else {
|
|
formik.setFieldValue("approved_amount", formik.values.approved_amount)
|
|
}
|
|
};
|
|
|
|
const renderCustomAccordions = () => {
|
|
if (detailsList && detailsList.data && detailsList.data.attachment_files) {
|
|
return detailsList.data.attachment_files.map((file, index) => (
|
|
<CustomAccordion
|
|
key={index}
|
|
title={`${file.title}`}
|
|
hasOpened={accordionStates[index]}
|
|
hasAccordionOpened={null}
|
|
handleAccordionChange={() => handleAccordionChange(index)}
|
|
accordionIndex={index}
|
|
downloadFile={file.attachment}
|
|
/>
|
|
));
|
|
}
|
|
return null;
|
|
};
|
|
const numberShowBox = () => {
|
|
return (
|
|
<>
|
|
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
|
|
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
|
|
<Typography pt={1}>
|
|
{isNaN((detailsList?.data?.proposed_amount) / 10)
|
|
? ""
|
|
: ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
|
|
{t("ConfirmDialog.unit")}
|
|
</Typography>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DialogContent>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={hasImageShown ? 6 : 12}>
|
|
{loading ? <LinearProgress /> :
|
|
<>
|
|
{numberShowBox()}
|
|
{renderCustomAccordions()}
|
|
</>
|
|
}
|
|
<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>
|
|
<PriceField
|
|
name="approved_amount"
|
|
label={<>
|
|
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
|
|
type="text"
|
|
inputProps={{
|
|
inputMode: "number",
|
|
min: 0,
|
|
pattern: "[0-9]*",
|
|
}}
|
|
variant="outlined"
|
|
value={formik.values.approved_amount}
|
|
onChange={handleAmountChange}
|
|
onBlur={formik.handleBlur("approved_amount")}
|
|
error={
|
|
formik.touched.approved_amount &&
|
|
Boolean(formik.errors.approved_amount)
|
|
}
|
|
helperText={
|
|
formik.touched.approved_amount && formik.errors.approved_amount
|
|
}
|
|
sx={{mt: 1}}
|
|
fullWidth
|
|
/>
|
|
</Stack>
|
|
<Stack>
|
|
<Typography>{t("PassengerBoss.upload_file")}</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}
|
|
onBlur={() => formik.handleBlur("confirm_img")}
|
|
error={
|
|
formik.touched.confirm_img &&
|
|
Boolean(formik.errors.confirm_img)
|
|
}
|
|
/>
|
|
<FormHelperText
|
|
error={Boolean(formik.errors.confirm_img)}
|
|
>
|
|
{formik.touched.confirm_img && formik.errors.confirm_img}
|
|
</FormHelperText>
|
|
</Stack>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
|
|
<ImageContent imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</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 || !formik.dirty || !formik.isValid}>
|
|
{t("ConfirmDialog.button-confirm")}
|
|
</Button>
|
|
</DialogActions>
|
|
</>
|
|
)
|
|
|
|
}
|
|
export default ConfirmContent |