diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 7960a14..099b226 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -161,7 +161,10 @@ "updated_at": "تاریخ بروزرسانی", "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", - "state_name": "وضعیت درخواست" + "state_name": "وضعیت درخواست", + "confirm": "ارجاع به کارشناس ماشین آلات", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "CommercialChief": { "name": "نام", @@ -183,7 +186,10 @@ "updated_at": "تاریخ بروزرسانی", "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", - "state_name": "وضعیت درخواست" + "state_name": "وضعیت درخواست", + "confirm": "تایید نهایی و ارجاع به بانک", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "PassengerBoss": { "name": "نام", @@ -194,7 +200,12 @@ "updated_at": "تاریخ بروزرسانی", "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", - "state_name": "وضعیت درخواست" + "state_name": "وضعیت درخواست", + "confirm": "ارجاع به معاون حمل و نقل", + "upload_file": "صورت جلسه کارگروه استانی را بارگذاری کنید", + "upload_file_required": "وارد کردن صورت جلسه کارگروه استانی الزامیست", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "RefahiProvinceManager": { "name": "نام", @@ -262,7 +273,10 @@ "updated_at": "تاریخ بروزرسانی", "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", - "state_name": "وضعیت درخواست" + "state_name": "وضعیت درخواست", + "confirm": "ارجاع به مدیر کل استانی", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "InspectorExpert": { "name": "نام", @@ -284,7 +298,12 @@ "updated_at": "تاریخ بروزرسانی", "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", - "state_name": "وضعیت درخواست" + "state_name": "وضعیت درخواست", + "confirm": "ارجاع به کارگروه استانی", + "upload_file": "گزارش کارشناسی را بارگذاری کنید", + "upload_file_required": "وارد کردن گزارش کارشناسی الزامیست", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "UserManagement": { "name": "نام", @@ -322,7 +341,8 @@ "toman": "تومان", "proposed_amount_error": "وارد کردن مقدار پیشنهادی الزامیست", "proposed_amount": "مقدار پیشنهادی", - "proposed_amount_positive": "مقدار پیشنهادی باید مثبت باشد" + "proposed_amount_positive": "مقدار پیشنهادی باید مثبت باشد", + "proposed_amount_number": "مقدار پیشنهادی باید عدد باشد" }, "ReviseDialog": { "revise": " نیاز به ویرایش", diff --git a/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx index da0acda..75dd563 100644 --- a/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx @@ -1,11 +1,10 @@ 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, Stack, TextField, Typography} from "@mui/material" import {useFormik} from "formik"; import {useTranslations} from "next-intl"; import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes"; -import UploadFileNotification from "@/core/components/notifications/UploadFileNotification"; import {useState} from "react"; import PriceField from "@/core/components/PriceField"; import * as Yup from "yup"; @@ -25,7 +24,18 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { `${t("ConfirmDialog.proposed_amount_number")}`, (value) => !isNaN(value) ).test("positive", `${t("ConfirmDialog.proposed_amount_positive")}`, (value) => value >= 0) - .required(t("ConfirmDialog.proposed_amount_error")) + .required(t("ConfirmDialog.proposed_amount_error")), + confirm_img: Yup.mixed() + .required(t("MachinaryOffice.upload_file_required")) + .test('fileSize', `${t("MachinaryOffice.upload_file_unit")}`, (value) => { + // if (!value) return true; // Skip if no file is provided + return value.size <= 2 * 1024 * 1024; // 100KB limit (adjust as needed) + }) + .test('fileType', `${t("MachinaryOffice.upload_file_format")}`, (value) => { + // if (!value) return true; // Skip if no file is provided + const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types + return allowedTypes.includes(value.type); + }) }); const formik = useFormik({ @@ -60,19 +70,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const handleUploadChange = (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("confirm_img", uploadedFile); + formik.setFieldValue("confirm_img", uploadedFile).then(() => { + formik.setFieldTouched("confirm_img", true); + }) setShowAddIcon(false); } }; @@ -129,7 +134,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { /> - {t("UploadSystem.upload_file")}{t("UploadSystem.optional")} + {t("MachinaryOffice.upload_file")} { fileName={fileName} imageAlt={t("app_name")} imageSize={[250, 150]} + onBlur={formik.handleBlur("confirm_img")} + error={ + formik.touched.confirm_img && + Boolean(formik.errors.confirm_img) + } setShowAddIcon={setShowAddIcon} showAddIcon={showAddIcon} /> + + {formik.touched.confirm_img && formik.errors.confirm_img} + diff --git a/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx b/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx index 95a6367..5ed809f 100644 --- a/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx +++ b/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx @@ -1,9 +1,8 @@ import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; import {useTranslations} from "next-intl"; -import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import {useState} from "react"; import ConfirmContent from "./ConfirmContent"; - +import CallMadeIcon from '@mui/icons-material/CallMade'; const Confirm = ({rowId, mutate}) => { const t = useTranslations(); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); @@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => { setOpenConfirmDialog(true) }} > - + - {t("ConfirmDialog.confirm")} + {t("MachinaryOffice.confirm")} diff --git a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx index af9e93a..8ca532e 100644 --- a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx @@ -1,12 +1,12 @@ 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, Stack, TextField, Typography} from "@mui/material" import {useFormik} from "formik"; import {useTranslations} from "next-intl"; import {CONFIRM_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes"; -import UploadFileNotification from "@/core/components/notifications/UploadFileNotification"; import {useState} from "react"; +import * as Yup from "yup"; const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const t = useTranslations(); @@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const requestServer = useRequest({auth: true}) const {update_notification} = useNotification() + const validationSchema = Yup.object().shape({ + confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error")) + .test('fileSize', `${t("NavganProvinceManager.upload_file_unit")}`, (value) => { + if (!value) return true + return value.size <= 2 * 1024 * 1024; + }) + .test('fileType', `${t("NavganProvinceManager.upload_file_format")}`, (value) => { + if (!value) return true + const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types + return allowedTypes.includes(value.type); + }) + }) + const formik = useFormik({ initialValues: { description: "", confirm_img: null - }, + }, validationSchema, onSubmit: (values, {setSubmitting}) => { const formData = new FormData(); if (values.description != "") formData.append("expert_description", values.description); @@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const handleUploadChange = (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("confirm_img", uploadedFile); + formik.setFieldValue("confirm_img", uploadedFile).then(() => { + formik.setFieldTouched("confirm_img", true); + }) setShowAddIcon(false); } }; @@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { imageSize={[250, 150]} setShowAddIcon={setShowAddIcon} showAddIcon={showAddIcon} + onBlur={() => formik.handleBlur("confirm_img")} + error={ + formik.touched.confirm_img && + Boolean(formik.errors.confirm_img) + } /> + + {formik.touched.confirm_img && formik.errors.confirm_img} + @@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { {t("ConfirmDialog.button-cancel")} diff --git a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx index 95a6367..2d983db 100644 --- a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx +++ b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx @@ -1,9 +1,8 @@ import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; import {useTranslations} from "next-intl"; -import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import {useState} from "react"; import ConfirmContent from "./ConfirmContent"; - +import CallMadeIcon from '@mui/icons-material/CallMade'; const Confirm = ({rowId, mutate}) => { const t = useTranslations(); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); @@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => { setOpenConfirmDialog(true) }} > - + - {t("ConfirmDialog.confirm")} + {t("NavganProvinceManager.confirm")} diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx index d189a6b..e51d01c 100644 --- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx @@ -1,11 +1,10 @@ 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, Stack, TextField, Typography} from "@mui/material" import {useFormik} from "formik"; import {useTranslations} from "next-intl"; import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes"; -import UploadFileNotification from "@/core/components/notifications/UploadFileNotification"; import {useState} from "react"; import PriceField from "@/core/components/PriceField"; import * as Yup from "yup"; @@ -25,7 +24,16 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { `${t("ConfirmDialog.approved_amount_number")}`, (value) => !isNaN(value) ).test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0) - .required(t("ConfirmDialog.approved_amount_error")) + .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/png', 'application/pdf']; // Define your allowed file types + return allowedTypes.includes(value.type); + }) }); const formik = useFormik({ @@ -38,7 +46,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const formData = new FormData(); formData.append("approved_amount", values.approved_amount); if (values.description != "") formData.append("expert_description", values.description); - if (values.confirm_img != null) formData.append("attachment", values.confirm_img); + formData.append("attachment", values.confirm_img); requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', { data: formData, @@ -60,19 +68,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const handleUploadChange = (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("confirm_img", uploadedFile); + formik.setFieldValue("confirm_img", uploadedFile).then(() => { + formik.setFieldTouched("confirm_img", true); + }) setShowAddIcon(false); } }; @@ -83,7 +86,6 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { formik.setFieldValue("approved_amount", formik.values.approved_amount) } }; - return ( <> @@ -129,7 +131,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { /> - {t("UploadSystem.upload_file")}{t("UploadSystem.optional")} + {t("PassengerBoss.upload_file")} { imageSize={[250, 150]} setShowAddIcon={setShowAddIcon} showAddIcon={showAddIcon} + onBlur={() => formik.handleBlur("confirm_img")} + error={ + formik.touched.confirm_img && + Boolean(formik.errors.confirm_img) + } /> + + {formik.touched.confirm_img && formik.errors.confirm_img} + diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx index 95a6367..30f15dd 100644 --- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx +++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx @@ -1,9 +1,8 @@ import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; import {useTranslations} from "next-intl"; -import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import {useState} from "react"; import ConfirmContent from "./ConfirmContent"; - +import CallMadeIcon from '@mui/icons-material/CallMade'; const Confirm = ({rowId, mutate}) => { const t = useTranslations(); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); @@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => { setOpenConfirmDialog(true) }} > - + - {t("ConfirmDialog.confirm")} + {t("PassengerBoss.confirm")} diff --git a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx index 46a735f..458f8b5 100644 --- a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx @@ -1,12 +1,12 @@ 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, Stack, TextField, Typography} from "@mui/material" import {useFormik} from "formik"; import {useTranslations} from "next-intl"; import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes"; -import UploadFileNotification from "@/core/components/notifications/UploadFileNotification"; import {useState} from "react"; +import * as Yup from "yup"; const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const t = useTranslations(); @@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const requestServer = useRequest({auth: true}) const {update_notification} = useNotification() + const validationSchema = Yup.object().shape({ + confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error")) + .test('fileSize', `${t("PassengerOffice.upload_file_unit")}`, (value) => { + if (!value) return true + return value.size <= 2 * 1024 * 1024; + }) + .test('fileType', `${t("PassengerOffice.upload_file_format")}`, (value) => { + if (!value) return true + const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types + return allowedTypes.includes(value.type); + }) + }) + const formik = useFormik({ initialValues: { description: "", confirm_img: null - }, + }, validationSchema, onSubmit: (values, {setSubmitting}) => { const formData = new FormData(); if (values.description != "") formData.append("description", values.description); @@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const handleUploadChange = (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("confirm_img", uploadedFile); + formik.setFieldValue("confirm_img", uploadedFile).then(() => { + formik.setFieldTouched("confirm_img", true); + }) setShowAddIcon(false); } }; @@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { imageSize={[250, 150]} setShowAddIcon={setShowAddIcon} showAddIcon={showAddIcon} + onBlur={() => formik.handleBlur("confirm_img")} + error={ + formik.touched.confirm_img && + Boolean(formik.errors.confirm_img) + } /> + + {formik.touched.confirm_img && formik.errors.confirm_img} + @@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { {t("ConfirmDialog.button-cancel")} diff --git a/src/components/dashboard/passenger-office/Form/ConfirmForm/index.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm/index.jsx index 95a6367..fa47fcf 100644 --- a/src/components/dashboard/passenger-office/Form/ConfirmForm/index.jsx +++ b/src/components/dashboard/passenger-office/Form/ConfirmForm/index.jsx @@ -1,9 +1,8 @@ import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; import {useTranslations} from "next-intl"; -import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import {useState} from "react"; import ConfirmContent from "./ConfirmContent"; - +import CallMadeIcon from '@mui/icons-material/CallMade'; const Confirm = ({rowId, mutate}) => { const t = useTranslations(); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); @@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => { setOpenConfirmDialog(true) }} > - + - {t("ConfirmDialog.confirm")} + {t("PassengerOffice.confirm")} diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx index 52137c2..949dd04 100644 --- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx @@ -1,12 +1,12 @@ 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, Stack, TextField, Typography} from "@mui/material" import {useFormik} from "formik"; import {useTranslations} from "next-intl"; import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes"; -import UploadFileNotification from "@/core/components/notifications/UploadFileNotification"; import {useState} from "react"; +import * as Yup from "yup"; const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const t = useTranslations(); @@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const requestServer = useRequest({auth: true}) const {update_notification} = useNotification() + const validationSchema = Yup.object().shape({ + confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error")) + .test('fileSize', `${t("TransportationAssistance.upload_file_unit")}`, (value) => { + if (!value) return true + return value.size <= 2 * 1024 * 1024; + }) + .test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => { + if (!value) return true + const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types + return allowedTypes.includes(value.type); + }) + }) + const formik = useFormik({ initialValues: { description: "", confirm_img: null - }, + }, validationSchema, onSubmit: (values, {setSubmitting}) => { const formData = new FormData(); if (values.description != "") formData.append("expert_description", values.description); @@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const handleUploadChange = (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("confirm_img", uploadedFile); + formik.setFieldValue("confirm_img", uploadedFile).then(() => { + formik.setFieldTouched("confirm_img", true); + }) setShowAddIcon(false); } }; @@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { imageSize={[250, 150]} setShowAddIcon={setShowAddIcon} showAddIcon={showAddIcon} + onBlur={() => formik.handleBlur("confirm_img")} + error={ + formik.touched.confirm_img && + Boolean(formik.errors.confirm_img) + } /> + + {formik.touched.confirm_img && formik.errors.confirm_img} + @@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { {t("ConfirmDialog.button-cancel")} diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx index 95a6367..2ef7d25 100644 --- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx @@ -1,9 +1,8 @@ import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; import {useTranslations} from "next-intl"; -import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import {useState} from "react"; import ConfirmContent from "./ConfirmContent"; - +import CallMadeIcon from '@mui/icons-material/CallMade'; const Confirm = ({rowId, mutate}) => { const t = useTranslations(); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); @@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => { setOpenConfirmDialog(true) }} > - + - {t("ConfirmDialog.confirm")} + {t("TransportationAssistance.confirm")} diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx index b40fb46..ea573d7 100644 --- a/src/core/components/UploadSystem.jsx +++ b/src/core/components/UploadSystem.jsx @@ -10,7 +10,6 @@ const UploadSystem = ({ handleUploadChange, fieldname, setFieldValue, - imageAlt, imageSize, fileType, fileName, @@ -19,7 +18,6 @@ const UploadSystem = ({ }) => { const t = useTranslations(); const fileInputRef = useRef(null); - const handleClick = () => { fileInputRef.current.click(); }; @@ -69,13 +67,14 @@ const UploadSystem = ({ variant="subtitle2" sx={{ fontWeight: 600, - fontSize: "1rem", + fontSize: "0.8rem", color: "#a19d9d", mt: 1, }} textAlign="center" > - {t("UploadSystem.upload_file")} + {t("UploadSystem.upload_file_format")}
+ {t("UploadSystem.upload_file_unit")}