diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 0500aa2..9381558 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -161,7 +161,9 @@ "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", "state_name": "وضعیت درخواست", - "confirm": "ارجاع به کارشناس ماشین آلات" + "confirm": "ارجاع به کارشناس ماشین آلات", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "CommercialChief": { "name": "نام", @@ -184,7 +186,9 @@ "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", "state_name": "وضعیت درخواست", - "confirm": "تایید نهایی و ارجاع به بانک" + "confirm": "تایید نهایی و ارجاع به بانک", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "PassengerBoss": { "name": "نام", @@ -269,7 +273,9 @@ "navgan_id": "کد ناوگان", "vehicle_type": "نوع ماشین", "state_name": "وضعیت درخواست", - "confirm": "ارجاع به مدیر کل استانی" + "confirm": "ارجاع به مدیر کل استانی", + "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", + "upload_file_format": "فرمت قابل قبول : png,jpg,pdf" }, "InspectorExpert": { "name": "نام", 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/passenger-office/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx index 2a6084b..458f8b5 100644 --- a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx @@ -19,11 +19,11 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { const validationSchema = Yup.object().shape({ confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error")) - .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => { + .test('fileSize', `${t("PassengerOffice.upload_file_unit")}`, (value) => { if (!value) return true return value.size <= 2 * 1024 * 1024; }) - .test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => { + .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); 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")}