loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update reject and confirm form

Browse Source
This commit is contained in:
Yasiu1376
2023-12-26 14:13:44 +03:30
parent 7a08df3150
commit 898ea094ef
5 changed files with 203 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/fa/app.json
View File

@@ -217,7 +217,7 @@
"state_name": "وضعیت درخواست",
"confirm": "ارجاع به معاون حمل و نقل",
"upload_file": "صورت جلسه کارگروه را بارگذاری کنید",
"upload_file_required": "وارد کردن صورت جلسه کارگروه الزامیست",
"upload_file_first_required": "وارد کردن فرم الف الزامیست",
"upload_file_second_required": "وارد کردن فرم ب الزامیست",
"upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
"upload_file_format": "فرمت قابل قبول : png,jpg,pdf",

119
src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
View File

@@ -28,10 +28,14 @@ const vehicle_amount = {
}
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, handleSizeChangeClick}) => {
const t = useTranslations();
const [selectedImage, setSelectedImage] = useState([null, null]);
const [fileTypes, setFileTypes] = useState([null, null]); // Array to hold file types for multiple instances
const [fileNames, setFileNames] = useState([null, null]);
const [showAddIcon, setShowAddIcon] = useState([true , true]);
const [selectedImageAForm, setSelectedImageAForm] = useState("");
const [selectedImageBForm, setSelectedImageBForm] = useState("");
const [fileTypesA, setFileTypesA] = useState(null);
const [fileNamesA, setFileNamesA] = useState(null);
const [fileTypesB, setFileTypesB] = useState(null);
const [fileNamesB, setFileNamesB] = useState(null);
const [showAddIconA, setShowAddIconA] = useState(true);
const [showAddIconB, setShowAddIconB] = useState(true);
const requestServer = useRequest({auth: true, notification: false})
const {update_notification} = useNotification();
const [accordionStates, setAccordionStates] = useState([]);
@@ -80,8 +84,8 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
(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"))
first_img: Yup.mixed()
.required(t("PassengerBoss.upload_file_first_required"))
.test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => {
return value.size <= 2 * 1024 * 1024;
})
@@ -104,19 +108,28 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
initialValues: {
description: "",
approved_amount: "",
confirm_img: null,
first_img: null,
second_img: null
}, validationSchema,
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
console.log(values)
formData.append("approved_amount", values.approved_amount);
if (values.description != "") formData.append("expert_description", values.description);
formData.append("attachment", values.confirm_img);
formData.append("second_attachment", values.second_img);
const attachments = [
{ title: 'فرم الف', file: values.first_img },
{ title: 'فرم ب', file: values.second_img }
];
requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', {
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post',{
notification: true,
data: formData,
}).then((response) => {
setOpenConfirmDialog(false)
@@ -133,32 +146,32 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
formik.setFieldValue("description", event.target.value)
};
const handleUploadChange = (event , fieldName , index) => {
const handleUploadChangeAForm = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
const updatedImages = [...selectedImage];
updatedImages[index] = URL.createObjectURL(uploadedFile);
setSelectedImage(updatedImages);
const updatedFileTypes = [...fileTypes];
updatedFileTypes[index] = fileType;
const updatedFileNames = [...fileNames];
updatedFileNames[index] = fileName;
const showAddIconField = [...showAddIcon];
showAddIconField[index] = false;
setFileTypes(updatedFileTypes);
setFileNames(updatedFileNames);
formik.setFieldValue(fieldName, uploadedFile).then(() => {
formik.setFieldTouched(fieldName, true);
setSelectedImageAForm(URL.createObjectURL(uploadedFile));
setFileTypesA(fileType);
setFileNamesA(fileName);
formik.setFieldValue("first_img", uploadedFile).then(() => {
formik.setFieldTouched("first_img", true);
})
setShowAddIcon(showAddIconField);
setShowAddIconA(false);
}
};
const handleUploadChangeBForm = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImageBForm(URL.createObjectURL(uploadedFile));
setFileTypesB(fileType);
setFileNamesB(fileName);
formik.setFieldValue("second_img", uploadedFile).then(() => {
formik.setFieldTouched("second_img", true);
})
setShowAddIconB(false);
}
};
const handleAmountChange = (event) => {
@@ -259,45 +272,43 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
<Grid item xs={12} sm={6}>
<Typography>{t("PassengerBoss.first_form")}</Typography>
<UploadSystem
index={0}
selectedImage={selectedImage}
handleUploadChange={(event) => handleUploadChange(event, "confirm_img" , 0)} // Pass the updated function directly
setselectedImage={setSelectedImage}
selectedImage={selectedImageAForm}
handleUploadChange={handleUploadChangeAForm} // Pass the updated function directly
setselectedImage={setSelectedImageAForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileTypes[0]}
fileName={fileNames[0]}
fieldname="first_img"
fileType={fileTypesA}
fileName={fileNamesA}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
onBlur={() => formik.handleBlur("confirm_img")}
setShowAddIcon={setShowAddIconA}
showAddIcon={showAddIconA}
onBlur={() => formik.handleBlur("first_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
formik.touched.first_img &&
Boolean(formik.errors.first_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
error={Boolean(formik.errors.first_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
{formik.touched.first_img && formik.errors.first_img}
</FormHelperText>
</Grid>
<Grid item xs={12} sm={6}>
<Typography>{t("PassengerBoss.second_form")}</Typography>
<UploadSystem
index={1}
selectedImage={selectedImage}
handleUploadChange={(event) => handleUploadChange(event, "second_img" , 1)} // Pass the updated function directly
setselectedImage={setSelectedImage}
selectedImage={selectedImageBForm}
handleUploadChange={handleUploadChangeBForm} // Pass the updated function directly
setselectedImage={setSelectedImageBForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="second_img"
fileType={fileTypes[1]} // Use fileTypes array at index 0 for the first instance
fileName={fileNames[1]}
fileType={fileTypesB} // Use fileTypes array at index 0 for the first instance
fileName={fileNamesB}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
setShowAddIcon={setShowAddIconB}
showAddIcon={showAddIconB}
onBlur={() => formik.handleBlur("second_img")}
error={
formik.touched.second_img &&

150
src/components/dashboard/passenger-boss/Form/RejectForm/RejectContent.jsx
View File

@@ -1,7 +1,7 @@
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 {Button, DialogActions, DialogContent, FormHelperText, Grid, Stack, TextField, Typography} from "@mui/material"
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
@@ -9,28 +9,62 @@ import * as Yup from "yup";
import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes";
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const [selectedImageAForm, setSelectedImageAForm] = useState("");
const [selectedImageBForm, setSelectedImageBForm] = useState("");
const [fileTypesA, setFileTypesA] = useState(null);
const [fileNamesA, setFileNamesA] = useState(null);
const [fileTypesB, setFileTypesB] = useState(null);
const [fileNamesB, setFileNamesB] = useState(null);
const [showAddIconA, setShowAddIconA] = useState(true);
const [showAddIconB, setShowAddIconB] = useState(true);
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
first_reject_img: Yup.mixed()
.required(t("PassengerBoss.upload_file_first_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);
}),
second_reject_img: Yup.mixed()
.required(t("PassengerBoss.upload_file_second_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: "",
reject_img: null
first_reject_img: null,
second_reject_img:null
},
validationSchema,
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("expert_description", values.description);
if (values.reject_img != null) formData.append("attachment", values.reject_img);
const attachments = [
{ title: 'فرم الف', file: values.first_reject_img },
{ title: 'فرم ب', file: values.second_reject_img }
];
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
requestServer(`${REJECT_PASSENGER_BOSS}/${rowId}`, 'post', {
data: formData,
@@ -49,22 +83,32 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
formik.setFieldValue("description", event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const handleUploadChangeAForm = (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("reject_img", uploadedFile);
setShowAddIcon(false);
setSelectedImageAForm(URL.createObjectURL(uploadedFile));
setFileTypesA(fileType);
setFileNamesA(fileName);
formik.setFieldValue("first_reject_img", uploadedFile).then(() => {
formik.setFieldTouched("first_reject_img", true);
})
setShowAddIconA(false);
}
};
const handleUploadChangeBForm = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImageBForm(URL.createObjectURL(uploadedFile));
setFileTypesB(fileType);
setFileNamesB(fileName);
formik.setFieldValue("second_reject_img", uploadedFile).then(() => {
formik.setFieldTouched("second_reject_img", true);
})
setShowAddIconB(false);
}
};
return (
@@ -90,20 +134,60 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
/>
</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="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Typography>{t("PassengerBoss.first_form")}</Typography>
<UploadSystem
selectedImage={selectedImageAForm}
handleUploadChange={handleUploadChangeAForm} // Pass the updated function directly
setselectedImage={setSelectedImageAForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="first_reject_img"
fileType={fileTypesA}
fileName={fileNamesA}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIconA}
showAddIcon={showAddIconA}
onBlur={() => formik.handleBlur("first_reject_img")}
error={
formik.touched.first_reject_img &&
Boolean(formik.errors.first_reject_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.first_reject_img)}
>
{formik.touched.first_reject_img && formik.errors.first_reject_img}
</FormHelperText>
</Grid>
<Grid item xs={12} sm={6}>
<Typography>{t("PassengerBoss.second_form")}</Typography>
<UploadSystem
selectedImage={selectedImageBForm}
handleUploadChange={handleUploadChangeBForm} // Pass the updated function directly
setselectedImage={setSelectedImageBForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="second_reject_img"
fileType={fileTypesB} // Use fileTypes array at index 0 for the first instance
fileName={fileNamesB}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIconB}
showAddIcon={showAddIconB}
onBlur={() => formik.handleBlur("second_reject_img")}
error={
formik.touched.second_reject_img &&
Boolean(formik.errors.second_reject_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.second_reject_img)}
>
{formik.touched.second_reject_img && formik.errors.second_reject_img}
</FormHelperText>
</Grid>
</Grid>
</Stack>
</Stack>
</DialogContent>

12
src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx
View File

@@ -38,7 +38,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
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);
// if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
const attachments = [
{ title: 'فرم الف', file: values.confirm_img },
];
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
requestServer(`${CONFIRM_PASSENGER_OFFICE}/${rowId}`, 'post', {
data: formData,

25
src/core/components/UploadSystem.jsx
View File

@@ -4,7 +4,7 @@ import AddIcon from "@mui/icons-material/Add";
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
import {useRef} from "react";
const UploadSystem = ({ index,
const UploadSystem = ({
selectedImage,
setselectedImage,
handleUploadChange,
@@ -22,17 +22,10 @@ const UploadSystem = ({ index,
fileInputRef.current.click();
};
const handleDeleteImage = (index) => {
const updatedSelectedImages = [...selectedImage];
updatedSelectedImages[index] = null;
setselectedImage(updatedSelectedImages);
const handleDeleteImage = () => {
setselectedImage(null);
setFieldValue(fieldname, null);
const showAddIconSelected = [...showAddIcon];
showAddIconSelected[index] = true;
setShowAddIcon(showAddIconSelected);
setShowAddIcon(true);
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
@@ -51,7 +44,8 @@ const UploadSystem = ({ index,
return (
<Box sx={{width: "100%", my: 1}}>
{showAddIcon[index] ? (
{showAddIcon ? (
// Show the add icon and "Upload File" text when no image is selected
<>
<Box
sx={{
@@ -118,7 +112,7 @@ const UploadSystem = ({ index,
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundImage: `url(${selectedImage[index]})`,
backgroundImage: `url(${selectedImage})`,
}}
></Paper>
</Box>
@@ -160,9 +154,8 @@ const UploadSystem = ({ index,
color="error"
endIcon={<DeleteForeverIcon/>}
variant="contained"
onClick={() => handleDeleteImage(index)} // Wrap the function call in an arrow function
onClick={handleDeleteImage}
>
{t("UploadSystem.delete")}
</Button>
</>
@@ -171,7 +164,7 @@ const UploadSystem = ({ index,
type="file"
accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
style={{display: "none"}}
onChange={(event) => handleUploadChange(event, fieldname, index)}
onChange={handleUploadChange}
ref={fileInputRef}
/>
</Box>