From 4efc228d31d8c2111d1714348d313e84eea94973 Mon Sep 17 00:00:00 2001 From: Amirhossein Mahmoodi Date: Sat, 13 Jul 2024 11:10:53 +0330 Subject: [PATCH] add form create inquiryPrivacyFencing --- package.json | 3 +- .../Create/Form/LocationOnMap/index.jsx | 4 +- .../Create/Form/index.jsx | 903 ++++++++++-------- .../MapLayer/MarkerLocation/index.jsx | 14 +- src/core/components/StyledForm.jsx | 3 +- 5 files changed, 539 insertions(+), 388 deletions(-) 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;