RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add form create inquiryPrivacyFencing

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-07-13 04:53:39 +03:30
parent c84d253721
commit cdff6458aa
13 changed files with 590 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.local.example
View File

@@ -1,2 +1,3 @@
NEXT_PUBLIC_VERSION="0.2.0"
NEXT_PUBLIC_API_URL="https://rms.witel.ir"
NEXT_PUBLIC_API_URL="https://rms.witel.ir"
NEXT_PUBLIC_MAPTILE_ENDPOINT="https://rmsmap.rmto.ir/141map"

3
package.json
View File

@@ -28,6 +28,7 @@
"next": "^14.2.3",
"react": "^18",
"react-dom": "^18",
"react-leaflet": "^4.2.1",
"react-toastify": "^10.0.5",
"sass": "^1.75.0",
"stylis": "^4.3.1",
@@ -41,4 +42,4 @@
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.3.2"
}
}
}

8
public/global.scss
View File

@@ -1,8 +1,10 @@
@import "fontiran";
@import "leaflet/dist/leaflet.css";
@import "react-toastify/dist/ReactToastify.css";
.filter-toast {
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
background-color: #d0dfe8;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
background-color: #d0dfe8;
}

BIN
public/images/locationMarker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

23
src/components/dashboard/inquiryPrivacyFencing/Create/Form/LocationOnMap/index.jsx Normal file
View File

@@ -0,0 +1,23 @@
import MapLoading from "@/core/components/MapLayer/Loading";
import MarkerLocation from "@/core/components/MapLayer/MarkerLocation";
import { Paper, Stack } from "@mui/material";
import { useFormikContext } from "formik";
import dynamic from "next/dynamic";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const LocationOnMap = () => {
return (
<Stack sx={{ height: "100%", position: "relative" }}>
<Paper sx={{ flexGrow: 1 }} elevation={0}>
<MapLayer style={{ borderRadius: '4px' }}>
<MarkerLocation />
</MapLayer>
</Paper>
</Stack>
)
}
export default LocationOnMap

407
src/components/dashboard/inquiryPrivacyFencing/Create/Form/index.jsx Normal file
View File

@@ -0,0 +1,407 @@
import LtrTextField from "@/core/components/LtrTextField";
import { Autocomplete, Button, Chip, DialogActions, DialogContent, 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 LocationOnMap from "./LocationOnMap";
import { Formik } from "formik";
import StyledForm from "@/core/components/StyledForm";
import moment from "jalali-moment";
import useRequest from "@/lib/hooks/useRequest";
import { SET_INQUIRE_PRIVACY_FENCING } from "@/core/utils/routes";
const CreateForm = ({ handleClose }) => {
const request = useRequest()
return (
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
>
<Formik
initialValues={{
dabirkhaneh_number: '',
nameh_date: moment(),
nameh_date_fa: '',
marjae_pasokh: '',
motaghazi_is_legal_id: null,
motaghazi_is_legal: '',
motaghazi_type_id: null,
motaghazi_type: '',
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: null,
name_mehvar_fa: '',
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: '',
}}
onSubmit={async (values, { setSubmitting }) => {
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 => (
<>
<DialogContent>
<StyledForm onSubmit={formik.handleSubmit} id={'InquiryPrivacyFencingCreateForm'}>
<Grid container columns={{ xs: 1, sm: 2, md: 3 }} spacing={4}>
<Grid item xs={1}>
<LtrTextField name="dabirkhaneh_number" value={formik.values.dabirkhaneh_number} onChange={formik.handleChange} required label="شماره دبیرخانه درخواست" size="small" fullWidth type="tel" />
</Grid>
<Grid item xs={1}>
<DatePicker
value={formik.values.nameh_date.toDate()} onChange={(newValue) => formik.setFieldValue('nameh_date', moment(newValue))}
label="تاریخ نامه درخواست"
slotProps={{
textField: { fullWidth: true, size: "small" },
}}
/>
</Grid>
<Grid item xs={1}>
<TextField name="marjae_pasokh" value={formik.values.marjae_pasokh} onChange={formik.handleChange} label="مرجع درخواست کننده پاسخ به استعلام" size="small" fullWidth />
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.motaghazi_is_legal_id}
onChange={(event, newValue) => {
formik.setFieldValue('motaghazi_is_legal_id', newValue)
}}
options={["حقوقی", "حقیقی"]}
renderInput={(params) => <TextField fullWidth {...params} label="متقاضی" required />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.motaghazi_type_id}
onChange={(event, newValue) => {
formik.setFieldValue('motaghazi_type_id', newValue)
}}
options={["دولتی", "خصوصی"]}
renderInput={(params) => <TextField fullWidth {...params} label="نوع متقاضی" required />}
/>
</Grid>
<Grid item xs={1}></Grid>
<Grid item xs={1}>
<TextField name="motaghazi_firstname" value={formik.values.motaghazi_firstname} onChange={formik.handleChange} label="نام متقاضی" size="small" fullWidth required />
</Grid>
<Grid item xs={1}>
<TextField name="motaghazi_lastname" value={formik.values.motaghazi_lastname} onChange={formik.handleChange} label="نام خانوادگی متقاضی" size="small" fullWidth required />
</Grid>
<Grid item xs={1}>
<LtrTextField name="national_id" value={formik.values.national_id} onChange={formik.handleChange} required label="کد ملی/شناسه ملی" size="small" fullWidth type="tel" />
</Grid>
<Grid item xs={1}>
<LtrTextField name="tel_number" value={formik.values.tel_number} onChange={formik.handleChange} label="تلفن" size="small" fullWidth type="tel" />
</Grid>
<Grid item xs={1}>
<LtrTextField name="mobile_number" value={formik.values.mobile_number} onChange={formik.handleChange} label="تلفن همراه" size="small" fullWidth type="tel" />
</Grid>
<Grid item xs={1}>
<TextField name="address" value={formik.values.address} onChange={formik.handleChange} label="آدرس" size="small" fullWidth required />
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
options={["تهران"]}
value={formik.values.edare_kol_id}
onChange={(event, newValue) => {
formik.setFieldValue('edare_kol_id', newValue)
}}
renderInput={(params) => (
<TextField
fullWidth
{...params}
label="اداره كل راهداری و حمل و نقل جاده ای"
required
/>
)}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.edare_shahri_id}
onChange={(event, newValue) => {
formik.setFieldValue('edare_shahri_id', newValue)
}}
options={["تهران"]}
renderInput={(params) => <TextField fullWidth {...params} label="اداره شهرستان" required />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.rah_type_id}
onChange={(event, newValue) => {
formik.setFieldValue('rah_type_id', newValue)
}}
options={["آزاد راه", "بزرگراه"]}
renderInput={(params) => <TextField fullWidth {...params} label="نوع راه" required />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.name_mehvar_id}
onChange={(event, newValue) => {
formik.setFieldValue('name_mehvar_id', newValue)
}}
options={["تست"]}
renderInput={(params) => <TextField fullWidth {...params} label="نام محور" required />}
/>
</Grid>
<Grid item xs={1}>
{/* <TextField label="سایر محورها" size="small" fullWidth /> */}
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.samt_id}
onChange={(event, newValue) => {
formik.setFieldValue('samt_id', newValue)
}}
options={["چپ", "راست"]}
renderInput={(params) => <TextField fullWidth {...params} label="سمت" required />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.mizan_harim}
onChange={(event, newValue) => {
formik.setFieldValue('mizan_harim', newValue)
}}
options={["12.5", "17.5"]}
renderInput={(params) => <TextField fullWidth {...params} label="میزان حریم" required />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.arze_navar}
onChange={(event, newValue) => {
formik.setFieldValue('arze_navar', newValue)
}}
options={["15", "30"]}
renderInput={(params) => <TextField fullWidth {...params} label="عرض نوار تاسیساتی زیربنایی" required />}
/>
</Grid>
<Grid item xs={1}>
<LtrTextField name="kilometr" value={formik.values.kilometr} onChange={formik.handleChange} label="كيلومتر" size="small" fullWidth type="tel" />
</Grid>
<Grid item xs={1} sm={2} sx={{ height: 300 }}>
<LocationOnMap />
</Grid>
<Grid item xs={1}>
<Stack spacing={3}>
<LtrTextField value={formik.values.lat} label="عرض جغرافیایی" size="small" fullWidth InputProps={{
readOnly: true,
}} />
<LtrTextField value={formik.values.lon} label="طول جغرافیایی" size="small" fullWidth InputProps={{
readOnly: true,
}} />
<Autocomplete
size="small"
disablePortal
value={formik.values.zone}
onChange={(event, newValue) => {
formik.setFieldValue('zone', newValue)
}}
options={["38", "39"]}
renderInput={(params) => <TextField fullWidth {...params} label="Zone" required />}
/>
</Stack>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
options={["اتاقک نگهبانی", "دولتی"]}
value={formik.values.karbari_type_id}
onChange={(event, newValue) => {
formik.setFieldValue('karbari_type_id', newValue)
}}
renderInput={(params) => <TextField fullWidth {...params} label="نوع کاربری" required />}
/>
</Grid>
<Grid item xs={1}>
<TextField name="tarh_title" value={formik.values.tarh_title} onChange={formik.handleChange} label="عنوان طرح" size="small" fullWidth />
</Grid>
<Grid item xs={1}>
<LtrTextField name="masahat_zirbana" value={formik.values.masahat_zirbana} label="مساحت زیربنا" size="small" fullWidth type="tel" InputProps={{
endAdornment: <InputAdornment position="end">
مترمربع</InputAdornment>,
}} />
</Grid>
<Grid item xs={1}>
<Autocomplete
multiple
size="small"
disablePortal
value={formik.values.ehdasat_type_id}
onChange={(event, newValue) => {
formik.setFieldValue('ehdasat_type_id', newValue)
}}
renderTags={(value, getTagProps) =>
value.map((option, index) => {
const { key, ...tagProps } = getTagProps({ index });
return (
<Chip label={option} key={key} {...tagProps} />
);
})
}
options={["تعمیرات", "احداث بنا"]}
renderInput={(params) => <TextField fullWidth {...params} label="نوع احداثات" />}
/>
</Grid>
<Grid item xs={1}>
<LtrTextField name="divarkeshi_distance" value={formik.values.divarkeshi_distance} onChange={formik.handleChange} label="فاصله دیوارکشی از آکس محور" size="small" fullWidth type="tel" InputProps={{
endAdornment: <InputAdornment position="end">متر</InputAdornment>,
}} />
</Grid>
<Grid item xs={1}>
<LtrTextField name="mostahadesat_distance" value={formik.values.mostahadesat_distance} onChange={formik.handleChange} label="فاصله مستحدثات از آکس محور" size="small" fullWidth type="tel" InputProps={{
endAdornment: <InputAdornment position="end">متر</InputAdornment>,
}} />
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.mahale_ejra_id}
onChange={(event, newValue) => {
formik.setFieldValue('mahale_ejra_id', newValue)
}}
options={["داخل حریم"]}
renderInput={(params) => <TextField fullWidth {...params} label="محل اجرا" />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.traffic_id}
onChange={(event, newValue) => {
formik.setFieldValue('traffic_id', newValue)
}}
options={["سبک (ضریب ۱)"]}
renderInput={(params) => <TextField fullWidth {...params} label="میزان ترافیک" required />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.vaziat_eghtesadi_id}
onChange={(event, newValue) => {
formik.setFieldValue('vaziat_eghtesadi_id', newValue)
}}
options={["تست"]}
renderInput={(params) => <TextField fullWidth {...params} label="وضعیت اقتصادی" />}
/>
</Grid>
<Grid item xs={1}>
<Autocomplete
size="small"
disablePortal
value={formik.values.has_access_id}
onChange={(event, newValue) => {
formik.setFieldValue('has_access_id', newValue)
}}
options={["بله", "خیر"]}
renderInput={(params) => <TextField fullWidth {...params} label="آیا راه دسترسی از قبل وجود دارد؟" required />}
/>
</Grid>
<Grid item xs={1}>
<LtrTextField name="shomare_estelam_harim" value={formik.values.shomare_estelam_harim} onChange={formik.handleChange} 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 name="max_month" value={formik.values.max_month} onChange={formik.handleChange} sx={{ width: 60 }} label="ماه" size="small" type="tel" />
<LtrTextField name="max_day" value={formik.values.max_day} onChange={formik.handleChange} sx={{ width: 60 }} label="روز" size="small" type="tel" />
</Stack>
</Grid>
<Grid item xs={1}>
<LtrTextField name="shomare_tahaodname" value={formik.values.shomare_tahaodname} onChange={formik.handleChange} label="شماره تعهدنامه" size="small" fullWidth type="tel" />
</Grid>
<Grid item xs={1}>
<LtrTextField name="shomare_daftarkhaneh" value={formik.values.shomare_daftarkhaneh} onChange={formik.handleChange} label="شماره دفترخانه" size="small" fullWidth type="tel" />
</Grid>
<Grid item xs={1}></Grid>
<Grid item xs={1}>
<TextField name="description" value={formik.values.description} onChange={formik.handleChange} multiline rows={2} label="توضیحات" size="small" fullWidth />
</Grid>
<Grid item xs={1}>
<TextField name="ronevesht" value={formik.values.ronevesht} onChange={formik.handleChange} multiline rows={2} label="رونوشت" size="small" fullWidth />
</Grid>
<Grid item xs={1}></Grid>
</Grid>
</StyledForm>
</DialogContent>
<DialogActions sx={{ p: 2 }}>
<Button variant="contained" size="large" type="submit" form={'InquiryPrivacyFencingCreateForm'}>ثبت</Button>
</DialogActions>
</>
)}
</Formik>
</LocalizationProvider >
);
};
export default CreateForm;

41
src/components/dashboard/inquiryPrivacyFencing/Create/index.jsx Normal file
View File

@@ -0,0 +1,41 @@
"use client";
import { Close } from "@mui/icons-material";
import { Dialog, DialogTitle, IconButton, Slide } from "@mui/material";
import { useState } from "react";
import CreateForm from "./Form";
import DialogTransition from "@/core/components/DialogTransition";
const InquiryPrivacyFencingCreate = () => {
const [open, setOpen] = useState(true);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = (value) => {
setOpen(false);
};
return (
<>
<Dialog open={open} fullScreen TransitionComponent={DialogTransition}>
<DialogTitle sx={{ m: 0, p: 2 }} id="create-dialog">
ایجاد پاسخ به استعلام
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: "absolute",
right: 8,
top: 8,
color: (theme) => theme.palette.grey[500],
}}
>
<Close />
</IconButton>
<CreateForm handleClose={handleClose} />
</Dialog>
</>
);
};
export default InquiryPrivacyFencingCreate;

8
src/core/components/DialogTransition.jsx Normal file
View File

@@ -0,0 +1,8 @@
import { Slide } from "@mui/material";
import React from "react";
const DialogTransition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
export default DialogTransition

17
src/core/components/MapLayer/Loading/index.jsx Normal file
View File

@@ -0,0 +1,17 @@
import { Box, LinearProgress, Stack } from "@mui/material";
function MapLoading() {
return (
<Stack
sx={{ height: "100%" }}
alignItems={"center"}
justifyContent={"center"}
>
<Box sx={{ width: 200 }}>
<LinearProgress />
</Box>
</Stack>
);
}
export default MapLoading;

34
src/core/components/MapLayer/MarkerLocation/index.jsx Normal file
View File

@@ -0,0 +1,34 @@
import { useFormikContext } from "formik";
import { useRef } from "react";
import { Marker, useMapEvents } from "react-leaflet"
const prefix = process.env.NODE_ENV === "production" ? "/v3" : "";
const locationMarker = L.icon({
iconUrl: prefix + "/images/locationMarker.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
});
const MarkerLocation = () => {
const { setFieldValue } = useFormikContext()
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)
},
zoom: (e) => {
const latlon = e.target.getCenter()
location.current?.setLatLng(latlon);
setFieldValue('lat', latlon.lat)
setFieldValue('lon', latlon.lng)
},
});
return (
<Marker ref={location} icon={locationMarker} position={map.getCenter()} key="location" />
)
}
export default MarkerLocation

43
src/core/components/MapLayer/index.jsx Normal file
View File

@@ -0,0 +1,43 @@
"use client";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
export const IRAN_CENTER = L.latLng(32.4279, 53.6880);
const MapOptions = ({ options }) => {
const map = useMap();
if (!options) return;
if (options.mapDrag) {
map.dragging.enable();
map.scrollWheelZoom.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
} else {
map.dragging.disable();
map.scrollWheelZoom.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
}
};
function MapLayer({ children, style, otherLayers, options }) {
return (
<>
<MapContainer
style={{ width: "100%", height: "100%", ...style }}
center={IRAN_CENTER}
zoom={6}
zoomControl={false}
attributionControl={false}
{...options}
>
<MapOptions options={options} />
<TileLayer url={`${process.env.NEXT_PUBLIC_MAPTILE_ENDPOINT}/{z}/{x}/{y}.png`} />
{children}
</MapContainer>
{otherLayers}
</>
);
}
export default MapLayer;

6
src/core/components/StyledForm.jsx Normal file
View File

@@ -0,0 +1,6 @@
import { styled } from "@mui/material";
import { Form } from "formik";
const StyledForm = styled(Form)``;
export default StyledForm;

2
src/core/utils/routes.js
View File

@@ -4,3 +4,5 @@ export const GET_USER_ROUTE = api + "/webapi/user/get-permission";
export const GET_LOGIN_ROUTE = api + "/login_dev";
export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";
export const SET_INQUIRE_PRIVACY_FENCING = api + "/api/v3/harim/divarkeshi/store";