diff --git a/package.json b/package.json
index 9ca9364..36ec3d1 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"next": "^14.2.3",
"react": "^18",
"react-dom": "^18",
+ "react-hook-form": "^7.52.1",
"react-leaflet": "^4.2.1",
"react-toastify": "^10.0.5",
"sass": "^1.75.0",
@@ -42,4 +43,4 @@
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.3.2"
}
-}
\ No newline at end of file
+}
diff --git a/src/components/dashboard/inquiryPrivacyFencing/Create/Form/LocationOnMap/index.jsx b/src/components/dashboard/inquiryPrivacyFencing/Create/Form/LocationOnMap/index.jsx
index ce08a88..4114b33 100644
--- a/src/components/dashboard/inquiryPrivacyFencing/Create/Form/LocationOnMap/index.jsx
+++ b/src/components/dashboard/inquiryPrivacyFencing/Create/Form/LocationOnMap/index.jsx
@@ -9,12 +9,12 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
ssr: false,
});
-const LocationOnMap = () => {
+const LocationOnMap = ({ setValue }) => {
return (
-
+
diff --git a/src/components/dashboard/inquiryPrivacyFencing/Create/Form/index.jsx b/src/components/dashboard/inquiryPrivacyFencing/Create/Form/index.jsx
index c726849..b79c756 100644
--- a/src/components/dashboard/inquiryPrivacyFencing/Create/Form/index.jsx
+++ b/src/components/dashboard/inquiryPrivacyFencing/Create/Form/index.jsx
@@ -2,415 +2,568 @@ import LtrTextField from "@/core/components/LtrTextField";
import StyledForm from "@/core/components/StyledForm";
import { SET_INQUIRE_PRIVACY_FENCING } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
-import { Autocomplete, Button, Chip, DialogActions, DialogContent, Fade, Grid, InputAdornment, Stack, TextField, Typography } from "@mui/material";
+import { Autocomplete, Box, Button, Chip, DialogActions, DialogContent, Fade, Grid, InputAdornment, Stack, TextField, Typography } from "@mui/material";
import { DatePicker, LocalizationProvider, faIR } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
-import { Formik } from "formik";
import moment from "jalali-moment";
+import { Controller, useForm } from "react-hook-form";
import LocationOnMap from "./LocationOnMap";
const CreateForm = ({ handleClose }) => {
+ const { control, watch, register, handleSubmit, setValue } = useForm({
+ defaultValues: {
+ dabirkhaneh_number: '',
+ nameh_date: moment(),
+ nameh_date_fa: '',
+ marjae_pasokh: '',
+ motaghazi_is_legal_id: null,
+ motaghazi_is_legal: '',
+ motaghazi_type_id: '',
+ motaghazi_type: null,
+ motaghazi_firstname: '',
+ motaghazi_lastname: '',
+ national_id: '',
+ shenase_melli: '',
+ tel_number: '',
+ mobile_number: '',
+ address: '',
+ edare_kol_id: null,
+ edare_kol: '',
+ edare_shahri_id: null,
+ edare_shahri: '',
+ rah_type_id: null,
+ rah_type: '',
+ name_mehvar_id: '',
+ name_mehvar_fa: null,
+ mizan_harim: null,
+ arze_navar: null,
+ samt_id: null,
+ samt: '',
+ kilometr: '',
+ lat: '',
+ lon: '',
+ zone: null,
+ karbari_type_id: null,
+ karbari_type: '',
+ tarh_title: '',
+ masahat_zirbana: '',
+ ehdasat_type_id: [],
+ ehdasat_type: '',
+ divarkeshi_distance: '',
+ mostahadesat_distance: '',
+ mahale_ejra_id: null,
+ mahale_ejra: '',
+ traffic_id: null,
+ traffic: '',
+ vaziat_eghtesadi_id: null,
+ vaziat_eghtesadi: '',
+ has_access_id: null,
+ has_access: '',
+ shomare_estelam_harim: '',
+ max_month: '',
+ max_day: '',
+ shomare_tahaodname: '',
+ shomare_daftarkhaneh: '',
+ description: '',
+ ronevesht: '',
+ }
+ });
const request = useRequest()
+
+ const onSubmit = async (data) => {
+ const formData = new FormData()
+ formData.append('dabirkhaneh_number', data.dabirkhaneh_number)
+ formData.append('nameh_date', data.nameh_date.format('YYYY-MM-DD'))
+ formData.append('nameh_date_fa', data.nameh_date)
+ formData.append('marjae_pasokh', data.marjae_pasokh)
+ formData.append('motaghazi_is_legal_id', data.motaghazi_is_legal_id)
+ formData.append('motaghazi_is_legal', data.motaghazi_is_legal_id)
+ formData.append('motaghazi_type_id', 1)
+ formData.append('motaghazi_type', data.motaghazi_type)
+ formData.append('motaghazi_firstname', data.motaghazi_firstname)
+ formData.append('motaghazi_lastname', data.motaghazi_lastname)
+ formData.append('national_id', data.national_id)
+ formData.append('shenase_melli', data.national_id)
+ formData.append('tel_number', data.tel_number)
+ formData.append('mobile_number', data.mobile_number)
+ formData.append('address', data.address)
+ formData.append('edare_kol_id', data.edare_kol_id)
+ formData.append('edare_kol', data.edare_kol_id)
+ formData.append('edare_shahri_id', data.edare_shahri_id)
+ formData.append('edare_shahri', data.edare_shahri_id)
+ formData.append('rah_type_id', data.rah_type_id)
+ formData.append('rah_type', data.rah_type_id)
+ formData.append('name_mehvar_id', 1)
+ formData.append('name_mehvar_fa', data.name_mehvar_id)
+ formData.append('mizan_harim', data.mizan_harim)
+ formData.append('arze_navar', data.arze_navar)
+ formData.append('samt_id', data.samt_id)
+ formData.append('samt', data.samt_id)
+ formData.append('kilometr', data.kilometr)
+ formData.append('lat', data.lat)
+ formData.append('lon', data.lon)
+ formData.append('zone', data.zone)
+ formData.append('karbari_type_id', data.karbari_type_id)
+ formData.append('karbari_type', data.karbari_type_id)
+ formData.append('tarh_title', data.tarh_title)
+ formData.append('masahat_zirbana', data.masahat_zirbana)
+ formData.append('ehdasat_type_id', data.ehdasat_type_id.join("|"))
+ formData.append('ehdasat_type', data.ehdasat_type_id.join("|"))
+ formData.append('divarkeshi_distance', data.divarkeshi_distance)
+ formData.append('mostahadesat_distance', data.mostahadesat_distance)
+ formData.append('mahale_ejra_id', data.mahale_ejra_id)
+ formData.append('mahale_ejra', data.mahale_ejra)
+ formData.append('traffic_id', data.traffic_id)
+ formData.append('traffic', data.traffic_id)
+ formData.append('vaziat_eghtesadi_id', data.vaziat_eghtesadi_id)
+ formData.append('vaziat_eghtesadi', data.vaziat_eghtesadi)
+ formData.append('has_access_id', data.has_access_id)
+ formData.append('has_access', data.has_access_id)
+ formData.append('shomare_estelam_harim', data.shomare_estelam_harim)
+ formData.append('max_month', data.max_month)
+ formData.append('max_day', data.max_day)
+ formData.append('shomare_tahaodname', data.shomare_tahaodname)
+ formData.append('shomare_daftarkhaneh', data.shomare_daftarkhaneh)
+ formData.append('description', data.description)
+ formData.append('ronevesht', data.ronevesht)
+
+ try {
+ await request(SET_INQUIRE_PRIVACY_FENCING, 'post', { data: formData })
+ handleClose()
+ } catch (error) {
+
+ }
+ };
+
return (
- {
- try {
- await request(SET_INQUIRE_PRIVACY_FENCING, 'post', { data: { ...values, ehdasat_type_id: values.ehdasat_type_id.join("|") } })
- handleClose()
- } catch (error) {
-
- }
- finally {
- setSubmitting(false);
- }
- }}
- >
- {formik => (
- <>
-
-
-
-
-
-
-
- formik.setFieldValue('nameh_date', moment(newValue))}
- label="تاریخ نامه درخواست"
- slotProps={{
- textField: { fullWidth: true, size: "small" },
- }}
- />
-
-
-
-
-
- {
- formik.setFieldValue('motaghazi_is_legal_id', newValue)
- }}
- options={["حقوقی", "حقیقی"]}
- renderInput={(params) => }
- />
-
-
-
+
+
+
+
+
+
+
+ (
+ onChange(moment(newValue))}
+ label="تاریخ نامه درخواست"
+ slotProps={{
+ textField: { fullWidth: true, size: "small" },
+ }}
+ />
+ )}
+ />
+
+
+
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["حقوقی", "حقیقی"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+
+
+ (
{
- formik.setFieldValue('motaghazi_type_id', newValue)
+ onChange(newValue)
}}
options={["دولتی", "خصوصی"]}
renderInput={(params) => }
/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- formik.setFieldValue('edare_kol_id', newValue)
- }}
- renderInput={(params) => (
-
- )}
- />
-
-
- {
- formik.setFieldValue('edare_shahri_id', newValue)
- }}
- options={["تهران"]}
- renderInput={(params) => }
- />
-
-
- {
- formik.setFieldValue('rah_type_id', newValue)
- }}
- options={["آزاد راه", "بزرگراه", 'راه فرعی درجه 3']}
- renderInput={(params) => }
- />
-
-
- {
- formik.setFieldValue('name_mehvar_id', newValue)
- }}
- options={["سایر"]}
- renderInput={(params) => }
- />
-
-
-
-
-
-
-
- {
- formik.setFieldValue('samt_id', newValue)
- }}
- options={["چپ", "راست"]}
- renderInput={(params) => }
- />
-
-
- {
- formik.setFieldValue('mizan_harim', newValue)
- }}
- options={["12.5", "17.5"]}
- renderInput={(params) => }
- />
-
-
-
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["تهران"]}
+ renderInput={(params) => (
+
+ )}
+ />
+ )}
+ />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["تهران"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["آزاد راه", "بزرگراه", 'راه فرعی درجه 3']}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["سایر"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+
+
+
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["چپ", "راست"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["12.5", "17.5"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+
+
+ (
{
- formik.setFieldValue('arze_navar', newValue)
+ onChange(newValue)
}}
options={["15", "30"]}
renderInput={(params) => }
/>
-
-
-
-
-
-
-
-
-
-
-
-
- {
- formik.setFieldValue('zone', newValue)
- }}
- options={["38", "39"]}
- renderInput={(params) => }
- />
-
-
-
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (
{
- formik.setFieldValue('karbari_type_id', newValue)
+ onChange(newValue)
}}
- renderInput={(params) => }
+ options={["38", "39"]}
+ renderInput={(params) => }
/>
-
-
-
-
-
-
- مترمربع,
- }} />
-
-
- {
- formik.setFieldValue('ehdasat_type_id', newValue)
- }}
- renderTags={(value, getTagProps) =>
- value.map((option, index) => {
- const { key, ...tagProps } = getTagProps({ index });
- return (
-
- );
- })
- }
- options={["تعمیرات", "احداث بنا"]}
- renderInput={(params) => }
- />
-
-
- متر,
- }} />
-
-
- متر,
- }} />
-
-
- {
- formik.setFieldValue('mahale_ejra_id', newValue)
- }}
- options={["داخل حریم"]}
- renderInput={(params) => }
- />
-
-
- {
- formik.setFieldValue('traffic_id', newValue)
- }}
- options={["سبک (ضریب ۱)"]}
- renderInput={(params) => }
- />
-
-
- {
- formik.setFieldValue('vaziat_eghtesadi_id', newValue)
- }}
- options={["تست"]}
- renderInput={(params) => }
- />
-
-
- {
- formik.setFieldValue('has_access_id', newValue)
- }}
- options={["بله", "خیر"]}
- renderInput={(params) => }
- />
-
-
-
-
-
-
- حداکثر مدت زمان شروع عملیات:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
+ )}
+ />
+
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["اتاقک نگهبانی", "دولتی"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+
+
+
+
+ مترمربع,
+ }} />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ renderTags={(value, getTagProps) =>
+ value.map((option, index) => {
+ const { key, ...tagProps } = getTagProps({ index });
+ return (
+
+ );
+ })
+ }
+ options={["تعمیرات", "احداث بنا"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+ متر,
+ }} />
+
+
+ متر,
+ }} />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["داخل حریم"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["سبک (ضریب ۱)"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["تست"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+ (
+ {
+ onChange(newValue)
+ }}
+ options={["بله", "خیر"]}
+ renderInput={(params) => }
+ />
+ )}
+ />
+
+
+
+
+
+
+ حداکثر مدت زمان شروع عملیات:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/core/components/MapLayer/MarkerLocation/index.jsx b/src/core/components/MapLayer/MarkerLocation/index.jsx
index c12a9d0..a75d191 100644
--- a/src/core/components/MapLayer/MarkerLocation/index.jsx
+++ b/src/core/components/MapLayer/MarkerLocation/index.jsx
@@ -1,6 +1,5 @@
-import { useFormikContext } from "formik";
import { useRef } from "react";
-import { Marker, useMapEvents } from "react-leaflet"
+import { Marker, useMapEvents } from "react-leaflet";
const prefix = process.env.NODE_ENV === "production" ? "/v3" : "";
@@ -10,21 +9,20 @@ const locationMarker = L.icon({
iconAnchor: [25, 50],
});
-const MarkerLocation = () => {
- const { setFieldValue } = useFormikContext()
+const MarkerLocation = ({ setValue }) => {
const location = useRef();
const map = useMapEvents({
move: (e) => {
const latlon = e.target.getCenter()
location.current?.setLatLng(latlon);
- setFieldValue('lat', latlon.lat)
- setFieldValue('lon', latlon.lng)
+ setValue('lat', latlon.lat)
+ setValue('lon', latlon.lng)
},
zoom: (e) => {
const latlon = e.target.getCenter()
location.current?.setLatLng(latlon);
- setFieldValue('lat', latlon.lat)
- setFieldValue('lon', latlon.lng)
+ setValue('lat', latlon.lat)
+ setValue('lon', latlon.lng)
},
});
return (
diff --git a/src/core/components/StyledForm.jsx b/src/core/components/StyledForm.jsx
index 1f299bb..4513129 100644
--- a/src/core/components/StyledForm.jsx
+++ b/src/core/components/StyledForm.jsx
@@ -1,6 +1,5 @@
import { styled } from "@mui/material";
-import { Form } from "formik";
-const StyledForm = styled(Form)``;
+const StyledForm = styled('form')``;
export default StyledForm;