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

Merge branch 'feature/upload_file' into 'develop'

Browse Source 
Feature/upload file

See merge request witel3/loan-facilities-expert!43
This commit is contained in:
yasaman aliakbari
2023-07-22 13:59:35 +00:00
parent 06d05cb7c0 8866cbc52f
commit ed3a933980
13 changed files with 575 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -173,5 +173,10 @@
"button-cancel": "بستن",
"description": "توضیحات",
"description_error": "وارد کردن توضیحات الزامی است!"
},
"UploadSystem": {
"upload_file": "آپلود فایل",
"delete": "پاک کردن",
"uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
}
}

38
src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
View File

@@ -12,11 +12,19 @@ import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
@@ -47,6 +55,23 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
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("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -86,6 +111,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
sx={{ mt: 1 }}
fullWidth
/>
<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 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>

39
src/components/dashboard/machinary-office/Form/RejectForm.jsx
View File

@@ -12,10 +12,18 @@ 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")),
@@ -39,6 +47,24 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>
@@ -60,6 +86,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>

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

@@ -12,11 +12,19 @@ import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
@@ -48,6 +56,23 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
}
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("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
@@ -88,6 +113,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
sx={{ mt: 1 }}
fullWidth
/>
<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 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>

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

@@ -12,10 +12,18 @@ 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")),
@@ -39,6 +47,24 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>
@@ -60,6 +86,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>

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

@@ -1,4 +1,7 @@
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
Dialog,
DialogTitle,
@@ -7,59 +10,53 @@ import {
DialogActions,
Button,
TextField,
FormHelperText,
} from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useRef, useState } from "react";
const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [fileData, setFileData] = useState(null);
const inputRef = useRef(null);
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
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 handleUploadClick = () => {
// 👇 We redirect the click event onto the hidden input element
inputRef.current?.click();
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleFileChange = (e) => {
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", "");
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("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
@@ -80,39 +77,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<div>
<label htmlFor="fileData">
<Button
variant="outlined"
color="primary"
onClick={handleUploadClick}
component="span"
sx={{ mt: 1, width: "100%" }}
>
{fileData ? (
<>
Name : {fileData.name}
<br />
Size : {fileData.size}
</>
) : (
<>{t("ConfirmDialog.choose_file")}</>
)}
</Button>
</label>
<input
id="fileData"
name="fileData"
type="file"
accept=".pdf, image/*"
ref={inputRef}
onChange={handleFileChange}
style={{ display: "none" }}
/>
</div>
<FormHelperText error={Boolean(formik.errors.fileData)}>
{formik.errors.fileData && formik.errors.fileData}
</FormHelperText>
<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 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>

39
src/components/dashboard/passenger-office/Form/RejectForm.jsx
View File

@@ -12,10 +12,18 @@ 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")),
@@ -38,7 +46,23 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>
@@ -60,6 +84,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>

93
src/components/dashboard/province-manager/Form/ConfirmForm.jsx
View File

@@ -1,4 +1,7 @@
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
Dialog,
DialogTitle,
@@ -7,59 +10,53 @@ import {
DialogActions,
Button,
TextField,
FormHelperText,
} from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useRef, useState } from "react";
const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const { directionApp } = useDirection();
const [description, setDescription] = useState("");
const [fileData, setFileData] = useState(null);
const inputRef = useRef(null);
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
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_PROVINCE_MANAGER, rowId, formData);
},
});
const handleUploadClick = () => {
// 👇 We redirect the click event onto the hidden input element
inputRef.current?.click();
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleFileChange = (e) => {
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", "");
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("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
@@ -80,39 +77,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<div>
<label htmlFor="fileData">
<Button
variant="outlined"
color="primary"
onClick={handleUploadClick}
component="span"
sx={{ mt: 1, width: "100%" }}
>
{fileData ? (
<>
Name : {fileData.name}
<br />
Size : {fileData.size}
</>
) : (
<>{t("ConfirmDialog.choose_file")}</>
)}
</Button>
</label>
<input
id="fileData"
name="fileData"
type="file"
accept=".pdf, image/*"
ref={inputRef}
onChange={handleFileChange}
style={{ display: "none" }}
/>
</div>
<FormHelperText error={Boolean(formik.errors.fileData)}>
{formik.errors.fileData && formik.errors.fileData}
</FormHelperText>
<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 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>

38
src/components/dashboard/province-manager/Form/RejectForm.jsx
View File

@@ -12,10 +12,18 @@ 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")),
@@ -38,6 +46,23 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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}>
@@ -60,6 +85,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>

38
src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
View File

@@ -1,4 +1,6 @@
import UploadSystem from "@/core/components/UploadSystem";
import { CONFIRM_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
Dialog,
DialogTitle,
@@ -11,10 +13,16 @@ import {
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useState } from "react";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
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 formik = useFormik({
initialValues: {
@@ -31,7 +39,24 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
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("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -48,6 +73,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
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="confirm_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>

39
src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
View File

@@ -12,10 +12,18 @@ 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 [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const { directionApp } = useDirection();
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,7 +46,23 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>
@@ -60,6 +84,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
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>

157
src/core/components/UploadSystem.jsx Normal file
View File

@@ -0,0 +1,157 @@
import { Box, Button, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import Image from "next/image";
import AddIcon from "@mui/icons-material/Add";
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
import { useRef } from "react";
const UploadSystem = ({
selectedImage,
setselectedImage,
handleUploadChange,
fieldname,
setFieldValue,
imageAlt,
imageSize,
fileType,
fileName,
setShowAddIcon,
showAddIcon,
}) => {
const t = useTranslations();
const fileInputRef = useRef(null);
const handleClick = () => {
fileInputRef.current.click();
};
const handleDeleteImage = () => {
setselectedImage(null);
setFieldValue(fieldname, null);
setShowAddIcon(true);
};
const isDocumentFormat = (fileType) => {
const documentFormats = [
"application/pdf",
"application/msword",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.ms-excel",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
];
return documentFormats.includes(fileType);
};
return (
<Box sx={{ width: imageSize[0], my: 1 }}>
{showAddIcon ? (
// Show the add icon and "Upload File" text when no image is selected
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
border: "1px solid #b3b3b3",
borderRadius: "10px",
cursor: "pointer",
padding: "5px",
width: imageSize[0],
height: imageSize[1],
}}
onClick={handleClick}
>
<AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
<Typography
variant="subtitle2"
sx={{
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
mt: 1,
}}
textAlign="center"
>
{t("UploadSystem.upload_file")}
</Typography>
</Box>
</>
) : (
// Show the uploaded content along with the delete button when an image or document is selected
<>
{fileType && fileType.startsWith("image/") ? (
<Image
width={imageSize[0]}
height={imageSize[1]}
src={selectedImage}
priority
alt={imageAlt}
onClick={handleClick}
style={{
cursor: "pointer",
objectFit: "contain",
border: "1px solid #b3b3b3",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
borderBottom: "unset",
padding: "5px",
}}
/>
) : (
fileType &&
isDocumentFormat(fileType) && (
<Box
sx={{
width: imageSize[0],
height: imageSize[1],
display: "flex",
border: "1px solid #b3b3b3",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
borderBottom: "unset",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
}}
onClick={handleClick}
>
<Typography
margin={2}
sx={{
fontWeight: 600,
fontSize: "1rem",
color: "#a19d9d",
}}
textAlign="center"
>
{fileName}
</Typography>
</Box>
)
)}
<Button
sx={{
width: "100%",
}}
color="error"
endIcon={<DeleteForeverIcon />}
variant="contained"
onClick={handleDeleteImage}
>
{t("UploadSystem.delete")}
</Button>
</>
)}
<input
type="file"
accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
style={{ display: "none" }}
onChange={handleUploadChange}
ref={fileInputRef}
/>
</Box>
);
};
export default UploadSystem;

37
src/core/components/notifications/UploadFileNotification.jsx Normal file
View File

@@ -0,0 +1,37 @@
import DangerousIcon from "@mui/icons-material/Dangerous";
import { Box, Typography } from "@mui/material";
import { toast } from "react-toastify";
const UploadFileNotification = (directionApp, t) => {
toast(
({ closeToast }) => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<DangerousIcon color="error" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="error" variant="button">
{t("UploadSystem.uploadfile_error")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
};
export default UploadFileNotification;