Files
frontend/src/components/dashboard/inquiryPrivacyFencing/Forms/CreateOrUpdate.jsx
Amirhossein Mahmoodi f2e199ee8a formatting
2024-08-18 11:11:58 +03:30

870 lines
45 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import LtrTextField from "@/core/components/LtrTextField";
import StyledForm from "@/core/components/StyledForm";
import useRequest from "@/lib/hooks/useRequest";
import {
Autocomplete,
Box,
Button,
Chip,
Container,
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 moment from "jalali-moment";
import { Controller, useForm } from "react-hook-form";
import LocationOnMap from "./LocationOnMap";
const initValues = {
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 CreateOrUpdateForm = ({ handleClose, mutate, defaultValues, url }) => {
const request = useRequest();
const {
control,
watch,
register,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm({ defaultValues: defaultValues || initValues });
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_fa);
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(url, "post", { data: formData });
handleClose();
mutate();
} catch (error) {}
};
return (
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
>
<DialogContent>
<Container maxWidth="lg">
<StyledForm onSubmit={handleSubmit(onSubmit)} id={"InquiryPrivacyFencingCreateForm"}>
<Grid container columns={{ xs: 1, sm: 2, md: 3 }} spacing={4}>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("dabirkhaneh_number")}
label="شماره دبیرخانه درخواست *"
size="small"
fullWidth
type="tel"
/>
</Grid>
<Grid item xs={1}>
<Controller
name="nameh_date"
control={control}
render={({ field: { onChange, value } }) => (
<DatePicker
value={value.toDate()}
onChange={(newValue) => onChange(moment(newValue))}
label="تاریخ نامه درخواست *"
slotProps={{
textField: { fullWidth: true, size: "small", autoComplete: "off" },
}}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<TextField
autoComplete="off"
{...register("marjae_pasokh")}
label="مرجع درخواست کننده پاسخ به استعلام"
size="small"
fullWidth
/>
</Grid>
<Grid item xs={1}>
<Controller
name="motaghazi_is_legal_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["حقوقی", "حقیقی"]}
renderInput={(params) => (
<TextField autoComplete="off" fullWidth {...params} label="متقاضی *" />
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Fade
in={watch("motaghazi_is_legal_id") === "حقوقی"}
mountOnEnter={true}
unmountOnExit={true}
>
<Box>
<Controller
name="motaghazi_type"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["دولتی", "خصوصی"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="نوع متقاضی *"
/>
)}
/>
)}
/>
</Box>
</Fade>
</Grid>
<Grid item xs={1}></Grid>
<Grid item xs={1}>
<TextField
autoComplete="off"
{...register("motaghazi_firstname")}
label="نام متقاضی *"
size="small"
fullWidth
/>
</Grid>
<Grid item xs={1}>
<Fade
in={watch("motaghazi_is_legal_id") === "حقیقی"}
mountOnEnter={true}
unmountOnExit={true}
>
<TextField
autoComplete="off"
{...register("motaghazi_lastname")}
label="نام خانوادگی متقاضی *"
size="small"
fullWidth
/>
</Fade>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("national_id")}
label="کد ملی/شناسه ملی *"
size="small"
fullWidth
type="tel"
/>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("tel_number")}
label="تلفن"
size="small"
fullWidth
type="tel"
/>
</Grid>
<Grid item xs={1}>
<Fade
in={
watch("motaghazi_type") !== "دولتی" ||
watch("formik.values.motaghazi_is_legal_id") === "حقیقی"
}
mountOnEnter={true}
unmountOnExit={true}
>
<LtrTextField
autoComplete="off"
{...register("mobile_number")}
label="تلفن همراه *"
size="small"
fullWidth
type="tel"
/>
</Fade>
</Grid>
<Grid item xs={1}>
<TextField
autoComplete="off"
{...register("address")}
label="آدرس *"
size="small"
fullWidth
/>
</Grid>
<Grid item xs={1}>
<Controller
name="edare_kol_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["تهران"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="اداره كل راهداری و حمل و نقل جاده ای *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="edare_shahri_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["تهران"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="اداره شهرستان *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="rah_type_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["آزاد راه", "بزرگراه", "راه فرعی درجه 3"]}
renderInput={(params) => (
<TextField autoComplete="off" fullWidth {...params} label="نوع راه *" />
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="name_mehvar_fa"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["سایر"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="نام محور *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Fade in={watch("name_mehvar_fa") === "سایر"} mountOnEnter={true} unmountOnExit={true}>
<TextField autoComplete="off" label="سایر محورها" size="small" fullWidth />
</Fade>
</Grid>
<Grid item xs={1}>
<Controller
name="samt_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["چپ", "راست"]}
renderInput={(params) => (
<TextField autoComplete="off" fullWidth {...params} label="سمت *" />
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="mizan_harim"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["12.5", "17.5"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="میزان حریم *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Fade
in={watch("rah_type_id") !== "راه فرعی درجه 3"}
mountOnEnter={true}
unmountOnExit={true}
>
<Box>
<Controller
name="arze_navar"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["15", "30"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="عرض نوار تاسیساتی زیربنایی *"
/>
)}
/>
)}
/>
</Box>
</Fade>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("kilometr")}
label="كيلومتر *"
size="small"
fullWidth
type="tel"
/>
</Grid>
<Grid item xs={1} sm={2} sx={{ height: 300 }}>
<LocationOnMap
setValue={setValue}
defaultLatLon={defaultValues ? [defaultValues.lat, defaultValues.lon] : null}
defaultValues
/>
</Grid>
<Grid item xs={1}>
<Stack spacing={3}>
<LtrTextField
autoComplete="off"
{...register("lat")}
label="عرض جغرافیایی"
size="small"
fullWidth
disabled={true}
/>
<LtrTextField
autoComplete="off"
{...register("lon")}
label="طول جغرافیایی"
size="small"
fullWidth
disabled={true}
/>
<Controller
name="zone"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["38", "39"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="Zone *"
/>
)}
/>
)}
/>
</Stack>
</Grid>
<Grid item xs={1}>
<Controller
name="karbari_type_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["اتاقک نگهبانی", "دولتی"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="نوع کاربری *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<TextField
autoComplete="off"
{...register("tarh_title")}
label="عنوان طرح *"
size="small"
fullWidth
/>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("masahat_zirbana")}
label="مساحت زیربنا"
size="small"
fullWidth
type="tel"
InputProps={{
endAdornment: <InputAdornment position="end">مترمربع</InputAdornment>,
}}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="ehdasat_type_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
multiple
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
renderTags={(value, getTagProps) =>
value.map((option, index) => {
const { key, ...tagProps } = getTagProps({ index });
return (
<Chip
label={option}
key={key}
size="small"
sx={{ "&.MuiAutocomplete-tag": { my: 0 } }}
{...tagProps}
/>
);
})
}
options={["تعمیرات", "احداث بنا"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="نوع احداثات *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("divarkeshi_distance")}
label="فاصله دیوارکشی از آکس محور"
size="small"
fullWidth
type="tel"
InputProps={{
endAdornment: <InputAdornment position="end">متر</InputAdornment>,
}}
/>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("mostahadesat_distance")}
label="فاصله مستحدثات از آکس محور"
size="small"
fullWidth
type="tel"
InputProps={{
endAdornment: <InputAdornment position="end">متر</InputAdornment>,
}}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="mahale_ejra_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["داخل حریم"]}
renderInput={(params) => (
<TextField autoComplete="off" fullWidth {...params} label="محل اجرا" />
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="traffic_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["سبک (ضریب ۱)"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="میزان ترافیک *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="vaziat_eghtesadi_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["تست"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="وضعیت اقتصادی"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Controller
name="has_access_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
size="small"
disablePortal
value={value}
onChange={(event, newValue) => {
onChange(newValue);
}}
options={["بله", "خیر"]}
renderInput={(params) => (
<TextField
autoComplete="off"
fullWidth
{...params}
label="آیا راه دسترسی از قبل وجود دارد؟ *"
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("shomare_estelam_harim")}
label="شماره استعلام دفتر ایمنی و حریم"
size="small"
fullWidth
type="tel"
/>
</Grid>
<Grid item xs={1}>
<Stack direction={"row"} spacing={1} alignItems={"center"}>
<Typography sx={{ flex: 2 }} variant="body2">
حداکثر مدت زمان شروع عملیات: *
</Typography>
<LtrTextField
autoComplete="off"
{...register("max_month")}
sx={{ width: 60 }}
label="ماه"
size="small"
type="tel"
/>
<LtrTextField
autoComplete="off"
{...register("max_day")}
sx={{ width: 60 }}
label="روز"
size="small"
type="tel"
/>
</Stack>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("shomare_tahaodname")}
label="شماره تعهدنامه"
size="small"
fullWidth
type="tel"
/>
</Grid>
<Grid item xs={1}>
<LtrTextField
autoComplete="off"
{...register("shomare_daftarkhaneh")}
label="شماره دفترخانه"
size="small"
fullWidth
type="tel"
/>
</Grid>
<Grid item xs={1}></Grid>
<Grid item xs={1}>
<TextField
autoComplete="off"
{...register("description")}
multiline
rows={2}
label="توضیحات"
size="small"
fullWidth
/>
</Grid>
<Grid item xs={1}>
<TextField
autoComplete="off"
{...register("ronevesht")}
multiline
rows={2}
label="رونوشت"
size="small"
fullWidth
/>
</Grid>
<Grid item xs={1}></Grid>
</Grid>
</StyledForm>
</Container>
</DialogContent>
<DialogActions sx={{ p: 2, borderTop: 1, borderColor: "divider" }}>
<Button
variant="contained"
size="large"
sx={{ width: 150 }}
type="submit"
form={"InquiryPrivacyFencingCreateForm"}
disabled={isSubmitting}
>
ثبت
</Button>
</DialogActions>
</LocalizationProvider>
);
};
export default CreateOrUpdateForm;