diff --git a/src/assets/scss/leaflet-measure.scss b/src/assets/scss/leaflet-measure.scss index 97e3bc1..6cc4efa 100644 --- a/src/assets/scss/leaflet-measure.scss +++ b/src/assets/scss/leaflet-measure.scss @@ -13,158 +13,158 @@ $button-icon-size: 12px; $button-icon-spacing: 4px; @mixin hoverbutton { - color: $color-button; - text-decoration: none; - &:hover { - opacity: 0.5; + color: $color-button; text-decoration: none; - } + &:hover { + opacity: 0.5; + text-decoration: none; + } } -@mixin button ($icon) { - display: inline; - width: auto; - height: auto; - padding-left: 20px; - margin-right: $button-icon-spacing; - line-height: 1em; - border: 0; - text-align: left; - color: $color-button; - &, - &:hover { - background-color: transparent; - } - background: { - image: url('assets/#{ $icon }.png'); - repeat: no-repeat; - position: 0% 50%; - size: $button-icon-size $button-icon-size; - } - .leaflet-retina & { - background-image: url('assets/#{ $icon }_@2X.png'); - } +@mixin button($icon) { + display: inline; + width: auto; + height: auto; + padding-left: 20px; + margin-right: $button-icon-spacing; + line-height: 1em; + border: 0; + text-align: left; + color: $color-button; + &, + &:hover { + background-color: transparent; + } + background: { + image: url("assets/#{ $icon }.png"); + repeat: no-repeat; + position: 0% 50%; + size: $button-icon-size $button-icon-size; + } + .leaflet-retina & { + background-image: url("assets/#{ $icon }_@2X.png"); + } - @include hoverbutton; + @include hoverbutton; } .leaflet-control-measure, .leaflet-measure-resultpopup { - h3 { - margin: 0 0 $spacing-external 0; - padding-bottom: $spacing-internal; - border-bottom: solid 1px $color-divider; - } - p { - margin: $spacing-internal 0 0 0; - line-height: 1.5em; - &:first-child { - margin-top: 0; + h3 { + margin: 0 0 $spacing-external 0; + padding-bottom: $spacing-internal; + border-bottom: solid 1px $color-divider; } - } - .tasks { - margin: $spacing-external 0 0 0; - padding: $spacing-internal 0 0 0; - border-top: solid 1px $color-divider; - text-align: right; - - list-style: none; - list-style-image: none; - - li { - display: inline; - margin: 0 $spacing-internal 0 0; - &:last-child { - margin-right: 0; - } + p { + margin: $spacing-internal 0 0 0; + line-height: 1.5em; + &:first-child { + margin-top: 0; + } } - } + .tasks { + margin: $spacing-external 0 0 0; + padding: $spacing-internal 0 0 0; + border-top: solid 1px $color-divider; + text-align: right; - .coorddivider { - color: $color-lightertext; - } + list-style: none; + list-style-image: none; + + li { + display: inline; + margin: 0 $spacing-internal 0 0; + &:last-child { + margin-right: 0; + } + } + } + + .coorddivider { + color: $color-lightertext; + } } .leaflet-control-measure { - max-width: $max-width; - background: #fff; + max-width: $max-width; + background: #fff; - .leaflet-control-measure-toggle, - .leaflet-control-measure-toggle:hover { - background: { - size: 14px 14px; - image: url(assets/rulers.png); - } - border: 0; - border-radius: 4px; - .leaflet-touch & { - border-radius: 2px; + .leaflet-control-measure-toggle, + .leaflet-control-measure-toggle:hover { + background: { + size: 14px 14px; + image: url(assets/rulers.png); + } + border: 0; + border-radius: 4px; + .leaflet-touch & { + border-radius: 2px; + } + + // Hide text + text-indent: 100%; + white-space: nowrap; + overflow: hidden; + + .leaflet-retina & { + background-image: url(assets/rulers_@2X.png); + } + + .leaflet-touch & { + background-size: 16px 16px; + } } - // Hide text - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - - .leaflet-retina & { - background-image: url(assets/rulers_@2X.png); + // Special styling because start prompt has no content, just header and tasks + .startprompt { + h3 { + margin-bottom: $spacing-internal; + } + .tasks { + margin-top: 0; + padding-top: 0; + border-top: 0; + text-align: left; + } } - .leaflet-touch & { - background-size: 16px 16px; + .leaflet-control-measure-interaction { + padding: $spacing-internal $spacing-external; } - } - // Special styling because start prompt has no content, just header and tasks - .startprompt { - h3 { - margin-bottom: $spacing-internal; + .results { + .group { + margin-top: $spacing-internal; + padding-top: $spacing-internal; + border-top: dotted 1px lighten($color-divider, 5); + &:first-child { + margin-top: 0; + padding-top: 0; + border-top: 0; + } + } + .heading { + margin-right: $spacing-internal * 0.5; + color: $color-lightertext; + } } - .tasks { - margin-top: 0; - padding-top: 0; - border-top: 0; - text-align: left; - } - } - .leaflet-control-measure-interaction { - padding: $spacing-internal $spacing-external; - } - - .results { - .group { - margin-top: $spacing-internal; - padding-top: $spacing-internal; - border-top: dotted 1px lighten($color-divider, 5); - &:first-child { - margin-top: 0; - padding-top: 0; - border-top: 0; - } + a.start { + @include button(start); } - .heading { - margin-right: $spacing-internal * 0.5; - color: $color-lightertext; + a.cancel { + @include button(cancel); + } + a.finish { + @include button(check); } - } - - a.start { - @include button(start); - } - a.cancel { - @include button(cancel); - } - a.finish { - @include button(check); - } } .leaflet-measure-resultpopup { - a.zoomto { - @include button(focus); - } - a.deletemarkup { - @include button(trash); - } -} \ No newline at end of file + a.zoomto { + @include button(focus); + } + a.deletemarkup { + @include button(trash); + } +} diff --git a/src/components/dashboard/inquiryPrivacy/city-admin/CityAdminList.jsx b/src/components/dashboard/inquiryPrivacy/city-admin/CityAdminList.jsx index 14b18ec..b732d9b 100644 --- a/src/components/dashboard/inquiryPrivacy/city-admin/CityAdminList.jsx +++ b/src/components/dashboard/inquiryPrivacy/city-admin/CityAdminList.jsx @@ -1,31 +1,32 @@ -import CustomSelectByDependency from '@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency'; -import DataTableWithAuth from '@/core/components/DataTableWithAuth'; -import { GET_CITY_ADMIN_LIST } from '@/core/utils/routes'; -import useInquiryPrivacyState from '@/lib/hooks/useInquiryPrivacyState'; -import { Box, Stack } from '@mui/material'; -import moment from 'jalali-moment'; -import { useMemo } from 'react'; -import MapsHomeWorkIcon from '@mui/icons-material/MapsHomeWork'; -import SecurityIcon from '@mui/icons-material/Security'; -import ManageAccountsIcon from '@mui/icons-material/ManageAccounts'; -import PsychologyAltIcon from '@mui/icons-material/PsychologyAlt'; -import ReceiptLongIcon from '@mui/icons-material/ReceiptLong'; -import WindowIcon from '@mui/icons-material/Window'; -import DangerousIcon from '@mui/icons-material/Dangerous'; -import AutorenewIcon from '@mui/icons-material/Autorenew'; -import RowActions from './RowActions'; -import ShowPrimaryArea from './ShowPrimaryArea'; +import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency"; +import DataTableWithAuth from "@/core/components/DataTableWithAuth"; +import { GET_CITY_ADMIN_LIST } from "@/core/utils/routes"; +import useInquiryPrivacyState from "@/lib/hooks/useInquiryPrivacyState"; +import { Box, Stack } from "@mui/material"; +import moment from "jalali-moment"; +import { useMemo } from "react"; +import MapsHomeWorkIcon from "@mui/icons-material/MapsHomeWork"; +import SecurityIcon from "@mui/icons-material/Security"; +import ManageAccountsIcon from "@mui/icons-material/ManageAccounts"; +import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt"; +import ReceiptLongIcon from "@mui/icons-material/ReceiptLong"; +import WindowIcon from "@mui/icons-material/Window"; +import DangerousIcon from "@mui/icons-material/Dangerous"; +import AutorenewIcon from "@mui/icons-material/Autorenew"; +import RowActions from "./RowActions"; +import ShowPrimaryArea from "./ShowPrimaryArea"; const CityAdminList = () => { const stateIcon = (state_id) => { - if (state_id === 1) return ; - if (state_id === 2 || state_id === 5 || state_id === 13) return ; - if (state_id === 3 || state_id === 6 || state_id === 14) return ; - if (state_id === 4 || state_id === 7 || state_id === 15) return ; - if (state_id === 8) return ; - if (state_id === 9 || state_id === 11) return ; - if (state_id === 10) return ; - if (state_id === 12) return ; + if (state_id === 1) return ; + if (state_id === 2 || state_id === 5 || state_id === 13) return ; + if (state_id === 3 || state_id === 6 || state_id === 14) + return ; + if (state_id === 4 || state_id === 7 || state_id === 15) return ; + if (state_id === 8) return ; + if (state_id === 9 || state_id === 11) return ; + if (state_id === 10) return ; + if (state_id === 12) return ; }; const columns = useMemo(() => { return [ @@ -96,7 +97,7 @@ const CityAdminList = () => { {stateIcon(row.original.state_id)} - {row.original.state_name} + {row.original.state_name} ), @@ -164,11 +165,14 @@ const CityAdminList = () => { columnFilterModeOptions: ["equals", "contains"], grow: false, size: 100, - Cell: ({ row }) => row.original.primary_area ? ( - - - - ) : ("-"), + Cell: ({ row }) => + row.original.primary_area ? ( + + + + ) : ( + "-" + ), }, { accessorKey: "province_id", @@ -233,7 +237,7 @@ const CityAdminList = () => { /> - ) -} + ); +}; -export default CityAdminList \ No newline at end of file +export default CityAdminList; diff --git a/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/DrawBound.jsx b/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/DrawBound.jsx index 31b9706..02b567f 100644 --- a/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/DrawBound.jsx +++ b/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/DrawBound.jsx @@ -5,148 +5,145 @@ import "leaflet-draw"; import { calculatePolygonMetrics } from "@/core/utils/geoCalculations"; const DrawPolygon = ({ control, controlDispach, drawBound, setDrawBound }) => { - const map = useMap(); - const featureRef = useRef(null); - const drawControlRef = useRef(null); + const map = useMap(); + const featureRef = useRef(null); + const drawControlRef = useRef(null); - const [area, setArea] = useState(0); - const [sideLengths, setSideLengths] = useState([]); + const [area, setArea] = useState(0); + const [sideLengths, setSideLengths] = useState([]); - const calculatePolygonMetricsForLayer = useCallback( - (layer) => { - if (!layer) return; + const calculatePolygonMetricsForLayer = useCallback( + (layer) => { + if (!layer) return; - const latlngs = layer.getLatLngs()[0]; - if (!latlngs || latlngs.length < 3) return; + const latlngs = layer.getLatLngs()[0]; + if (!latlngs || latlngs.length < 3) return; - const coordinates = latlngs.map((p) => [p.lat, p.lng]); + const coordinates = latlngs.map((p) => [p.lat, p.lng]); - const metrics = calculatePolygonMetrics(coordinates, true); + const metrics = calculatePolygonMetrics(coordinates, true); - setArea(metrics.area); - setSideLengths(metrics.sides); + setArea(metrics.area); + setSideLengths(metrics.sides); - setDrawBound({ - layer, - metrics, - }); - }, - [setDrawBound] - ); - - const safeFitBounds = (layer) => { - if (!layer || !map) return; - try { - const latLngs = layer.getLatLngs(); - map.fitBounds(latLngs, { - paddingTopLeft: [20, 35], - paddingBottomRight: [20, 55], - }); - } catch (e) { - console.warn("fitBounds failed:", e); - } - }; - - const bindEditEvent = useCallback( - (layer) => { - if (!layer) return; - layer.on("edit", function (e) { - const editedLayer = e.target; - calculatePolygonMetricsForLayer(editedLayer); - }); - }, - [calculatePolygonMetricsForLayer] - ); - - const handlerCreatedBound = useCallback( - (event) => { - const { layer } = event; - layer.editing.enable(); - featureRef.current.addLayer(layer); - - calculatePolygonMetricsForLayer(layer); - bindEditEvent(layer); - - controlDispach({ type: "SET_STATUS", status: 2 }); - }, - [calculatePolygonMetricsForLayer, bindEditEvent, controlDispach] - ); - - useEffect(() => { - if ( - control.status === 1 && - drawControlRef.current && - drawControlRef.current._toolbars?.draw?._modes?.polygon?.handler - ) { - drawControlRef.current._toolbars.draw._modes.polygon.handler.enable(); - } - }, [control.status]); - - useEffect(() => { - if (control.status === 0 && featureRef.current) { - featureRef.current.clearLayers(); - setArea(0); - setSideLengths([]); - setDrawBound(null); - } - }, [control.status, setDrawBound]); - - useEffect(() => { - if (control.status === 2 && drawBound && featureRef.current) { - const { layer, metrics } = drawBound; - featureRef.current.addLayer(layer); - layer.editing.enable(); - safeFitBounds(layer); - bindEditEvent(layer); - - setArea(metrics?.area || 0); - setSideLengths(metrics?.sides || []); - } - }, [control.status, drawBound, bindEditEvent]); - - useEffect(() => { - if (!featureRef.current) return; - - L.drawLocal.draw.handlers.polygon.tooltip.start = - "برای شروع ترسیم محدوده، روی نقشه کلیک کنید"; - L.drawLocal.draw.handlers.polygon.tooltip.cont = - "برای ادامه ترسیم، نقاط بعدی را کلیک کنید"; - L.drawLocal.draw.handlers.polygon.tooltip.end = - "برای بستن محدوده، روی نقطه‌ی شروع کلیک کنید"; - - const drawControl = new L.Control.Draw({ - draw: { - polygon: { - shapeOptions: { - color: "red", - weight: 3, - clickable: true, - }, + setDrawBound({ + layer, + metrics, + }); }, - polyline: false, - rectangle: false, - circle: false, - marker: false, - circlemarker: false, - }, - edit: { - featureGroup: featureRef.current, - edit: true, - remove: true, - }, - }); + [setDrawBound] + ); - drawControlRef.current = drawControl; - map.addControl(drawControl); - map.on(L.Draw.Event.CREATED, handlerCreatedBound); - - return () => { - map.off(L.Draw.Event.CREATED, handlerCreatedBound); - map.removeControl(drawControl); + const safeFitBounds = (layer) => { + if (!layer || !map) return; + try { + const latLngs = layer.getLatLngs(); + map.fitBounds(latLngs, { + paddingTopLeft: [20, 35], + paddingBottomRight: [20, 55], + }); + } catch (e) { + console.warn("fitBounds failed:", e); + } }; - }, [map, handlerCreatedBound]); - return ; + const bindEditEvent = useCallback( + (layer) => { + if (!layer) return; + layer.on("edit", function (e) { + const editedLayer = e.target; + calculatePolygonMetricsForLayer(editedLayer); + }); + }, + [calculatePolygonMetricsForLayer] + ); + + const handlerCreatedBound = useCallback( + (event) => { + const { layer } = event; + layer.editing.enable(); + featureRef.current.addLayer(layer); + + calculatePolygonMetricsForLayer(layer); + bindEditEvent(layer); + + controlDispach({ type: "SET_STATUS", status: 2 }); + }, + [calculatePolygonMetricsForLayer, bindEditEvent, controlDispach] + ); + + useEffect(() => { + if ( + control.status === 1 && + drawControlRef.current && + drawControlRef.current._toolbars?.draw?._modes?.polygon?.handler + ) { + drawControlRef.current._toolbars.draw._modes.polygon.handler.enable(); + } + }, [control.status]); + + useEffect(() => { + if (control.status === 0 && featureRef.current) { + featureRef.current.clearLayers(); + setArea(0); + setSideLengths([]); + setDrawBound(null); + } + }, [control.status, setDrawBound]); + + useEffect(() => { + if (control.status === 2 && drawBound && featureRef.current) { + const { layer, metrics } = drawBound; + featureRef.current.addLayer(layer); + layer.editing.enable(); + safeFitBounds(layer); + bindEditEvent(layer); + + setArea(metrics?.area || 0); + setSideLengths(metrics?.sides || []); + } + }, [control.status, drawBound, bindEditEvent]); + + useEffect(() => { + if (!featureRef.current) return; + + L.drawLocal.draw.handlers.polygon.tooltip.start = "برای شروع ترسیم محدوده، روی نقشه کلیک کنید"; + L.drawLocal.draw.handlers.polygon.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید"; + L.drawLocal.draw.handlers.polygon.tooltip.end = "برای بستن محدوده، روی نقطه‌ی شروع کلیک کنید"; + + const drawControl = new L.Control.Draw({ + draw: { + polygon: { + shapeOptions: { + color: "red", + weight: 3, + clickable: true, + }, + }, + polyline: false, + rectangle: false, + circle: false, + marker: false, + circlemarker: false, + }, + edit: { + featureGroup: featureRef.current, + edit: true, + remove: true, + }, + }); + + drawControlRef.current = drawControl; + map.addControl(drawControl); + map.on(L.Draw.Event.CREATED, handlerCreatedBound); + + return () => { + map.off(L.Draw.Event.CREATED, handlerCreatedBound); + map.removeControl(drawControl); + }; + }, [map, handlerCreatedBound]); + + return ; }; export default DrawPolygon; diff --git a/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/index.jsx b/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/index.jsx index 41ebf0f..ab4c1f4 100644 --- a/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/index.jsx +++ b/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/index.jsx @@ -62,11 +62,16 @@ const MapDrawPolygon = ({ drawBound, setDrawBound }) => { return ( <> - + { +const FeedbackAction = ({ rowId, mutate, rowPrimaryArea }) => { const requestServer = useRequest({ notificationSuccess: true }); const [openFeedbackDialog, setOpenFeedbackDialog] = useState(false); const [drawBound, setDrawBound] = useState(null); const bound = useMemo(() => { - const latLngCoords = rowPrimaryArea.coordinates.map(coord => [coord[1], coord[0]]); - return rowPrimaryArea.type === "polygon" - ? L.polygon(latLngCoords) - : L.polyline(latLngCoords); - }, [rowPrimaryArea]); - + const latLngCoords = rowPrimaryArea.coordinates.map((coord) => [coord[1], coord[0]]); + return rowPrimaryArea.type === "polygon" ? L.polygon(latLngCoords) : L.polyline(latLngCoords); + }, [rowPrimaryArea]); const { register, handleSubmit, formState: { isSubmitting, errors }, - } = useForm({ - defaultValues: {expert_description: "", forbidden_area: "", forbidden_area_space: ""}, - resolver: yupResolver(validationSchema), - mode: "all" - }); + } = useForm({ + defaultValues: { expert_description: "", forbidden_area: "", forbidden_area_space: "" }, + resolver: yupResolver(validationSchema), + mode: "all", + }); const onSubmit = async (data) => { try { const payload = { - expert_description: data.expert_description, + expert_description: data.expert_description, }; if (drawBound && drawBound.metrics) { @@ -62,7 +70,6 @@ const FeedbackAction = ({rowId, mutate, rowPrimaryArea}) => { } }; - return ( <> @@ -77,7 +84,8 @@ const FeedbackAction = ({rowId, mutate, rowPrimaryArea}) => { PaperProps={{ sx: { transition: "all .3s", - boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px", + boxShadow: + "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px", borderRadius: 2, }, }} @@ -93,12 +101,17 @@ const FeedbackAction = ({rowId, mutate, rowPrimaryArea}) => { - - منطقه ممنوعه (در صورت وجود انتخاب کنید) + + + منطقه ممنوعه{" "} + + (در صورت وجود انتخاب کنید) + + - - + + { > بستن - - ) -} + ); +}; -export default FeedbackAction \ No newline at end of file +export default FeedbackAction; diff --git a/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/index.jsx b/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/index.jsx index 69d588a..cb1517b 100644 --- a/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/index.jsx +++ b/src/components/dashboard/inquiryPrivacy/city-admin/RowActions/index.jsx @@ -4,7 +4,11 @@ import FeedbackAction from "./FeedbackAction"; const RowActions = ({ row, mutate }) => { return ( - {row.original.state_id === 1 ? : "-"} + {row.original.state_id === 1 ? ( + + ) : ( + "-" + )} ); }; diff --git a/src/components/dashboard/inquiryPrivacy/city-admin/ShowPrimaryArea/index.jsx b/src/components/dashboard/inquiryPrivacy/city-admin/ShowPrimaryArea/index.jsx index 7300a1f..98e24d0 100644 --- a/src/components/dashboard/inquiryPrivacy/city-admin/ShowPrimaryArea/index.jsx +++ b/src/components/dashboard/inquiryPrivacy/city-admin/ShowPrimaryArea/index.jsx @@ -1,61 +1,69 @@ -const { Button, IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent, DialogActions } = require("@mui/material"); -import LayersIcon from '@mui/icons-material/Layers'; +const { + Button, + IconButton, + Tooltip, + Box, + Dialog, + DialogTitle, + Typography, + DialogContent, + DialogActions, +} = require("@mui/material"); +import LayersIcon from "@mui/icons-material/Layers"; import CloseIcon from "@mui/icons-material/Close"; -import { useMemo, useState } from 'react'; -import MapLayer from '@/core/components/MapLayer'; -import ShowBound from './ShowBound'; +import { useMemo, useState } from "react"; +import MapLayer from "@/core/components/MapLayer"; +import ShowBound from "./ShowBound"; -const ShowPrimaryArea = ({primaryArea}) => { +const ShowPrimaryArea = ({ primaryArea }) => { const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false); const bound = useMemo(() => { - const latLngCoords = primaryArea.coordinates.map(coord => [coord[1], coord[0]]); - return primaryArea.type === "polygon" - ? L.polygon(latLngCoords) - : L.polyline(latLngCoords); + const latLngCoords = primaryArea.coordinates.map((coord) => [coord[1], coord[0]]); + return primaryArea.type === "polygon" ? L.polygon(latLngCoords) : L.polyline(latLngCoords); }, [primaryArea]); - - return ( - - - setOpenShowAreaDialog(true)}> - - - - setOpenShowAreaDialog(false)} - PaperProps={{ - sx: { - transition: "all .3s", - boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px", - borderRadius: 2, - padding: 1, - }, - }} - maxWidth="sm" - fullWidth - dir="rtl" - > - - - محدوده طرح - - setOpenShowAreaDialog(false)} size="small"> - + + return ( + + + setOpenShowAreaDialog(true)}> + - - - + + setOpenShowAreaDialog(false)} + PaperProps={{ + sx: { + transition: "all .3s", + boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px", + borderRadius: 2, + padding: 1, + }, + }} + maxWidth="sm" + fullWidth + dir="rtl" + > + + + محدوده طرح + + setOpenShowAreaDialog(false)} size="small"> + + + + + - - - - ) -} + + + + ); +}; -export default ShowPrimaryArea \ No newline at end of file +export default ShowPrimaryArea; diff --git a/src/components/dashboard/inquiryPrivacy/privacy-office/PrivacyOfficeList.jsx b/src/components/dashboard/inquiryPrivacy/privacy-office/PrivacyOfficeList.jsx index 20fe52d..913c803 100644 --- a/src/components/dashboard/inquiryPrivacy/privacy-office/PrivacyOfficeList.jsx +++ b/src/components/dashboard/inquiryPrivacy/privacy-office/PrivacyOfficeList.jsx @@ -1,31 +1,32 @@ -import CustomSelectByDependency from '@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency'; -import DataTableWithAuth from '@/core/components/DataTableWithAuth'; -import useInquiryPrivacyState from '@/lib/hooks/useInquiryPrivacyState'; -import AutorenewIcon from '@mui/icons-material/Autorenew'; -import DangerousIcon from '@mui/icons-material/Dangerous'; -import ManageAccountsIcon from '@mui/icons-material/ManageAccounts'; -import MapsHomeWorkIcon from '@mui/icons-material/MapsHomeWork'; -import PsychologyAltIcon from '@mui/icons-material/PsychologyAlt'; -import ReceiptLongIcon from '@mui/icons-material/ReceiptLong'; -import SecurityIcon from '@mui/icons-material/Security'; -import WindowIcon from '@mui/icons-material/Window'; -import { Box, Stack } from '@mui/material'; -import moment from 'jalali-moment'; -import { useMemo } from 'react'; -import RowActions from './RowActions'; -import { GET_PRIVACY_ADMIN_LIST } from '@/core/utils/routes'; -import ShowPrimaryArea from './ShowPrimaryArea'; +import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency"; +import DataTableWithAuth from "@/core/components/DataTableWithAuth"; +import useInquiryPrivacyState from "@/lib/hooks/useInquiryPrivacyState"; +import AutorenewIcon from "@mui/icons-material/Autorenew"; +import DangerousIcon from "@mui/icons-material/Dangerous"; +import ManageAccountsIcon from "@mui/icons-material/ManageAccounts"; +import MapsHomeWorkIcon from "@mui/icons-material/MapsHomeWork"; +import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt"; +import ReceiptLongIcon from "@mui/icons-material/ReceiptLong"; +import SecurityIcon from "@mui/icons-material/Security"; +import WindowIcon from "@mui/icons-material/Window"; +import { Box, Stack } from "@mui/material"; +import moment from "jalali-moment"; +import { useMemo } from "react"; +import RowActions from "./RowActions"; +import { GET_PRIVACY_ADMIN_LIST } from "@/core/utils/routes"; +import ShowPrimaryArea from "./ShowPrimaryArea"; const PrivacyOfficeList = () => { const stateIcon = (state_id) => { - if (state_id === 1) return ; - if (state_id === 2 || state_id === 5 || state_id === 13) return ; - if (state_id === 3 || state_id === 6 || state_id === 14) return ; - if (state_id === 4 || state_id === 7 || state_id === 15) return ; - if (state_id === 8) return ; - if (state_id === 9 || state_id === 11) return ; - if (state_id === 10) return ; - if (state_id === 12) return ; + if (state_id === 1) return ; + if (state_id === 2 || state_id === 5 || state_id === 13) return ; + if (state_id === 3 || state_id === 6 || state_id === 14) + return ; + if (state_id === 4 || state_id === 7 || state_id === 15) return ; + if (state_id === 8) return ; + if (state_id === 9 || state_id === 11) return ; + if (state_id === 10) return ; + if (state_id === 12) return ; }; const columns = useMemo(() => { return [ @@ -96,7 +97,7 @@ const PrivacyOfficeList = () => { {stateIcon(row.original.state_id)} - {row.original.state_name} + {row.original.state_name} ), @@ -164,11 +165,14 @@ const PrivacyOfficeList = () => { columnFilterModeOptions: ["equals", "contains"], grow: false, size: 100, - Cell: ({ row }) => row.original.primary_area ? ( - - - - ) : ("-"), + Cell: ({ row }) => + row.original.primary_area ? ( + + + + ) : ( + "-" + ), }, { accessorKey: "province_id", @@ -233,7 +237,7 @@ const PrivacyOfficeList = () => { /> - ) -} + ); +}; -export default PrivacyOfficeList \ No newline at end of file +export default PrivacyOfficeList; diff --git a/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ConfirmAction/index.jsx b/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ConfirmAction/index.jsx index 6eb22a6..c2a0cfc 100644 --- a/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ConfirmAction/index.jsx +++ b/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ConfirmAction/index.jsx @@ -1,4 +1,4 @@ -import ThumbUpIcon from '@mui/icons-material/ThumbUp'; +import ThumbUpIcon from "@mui/icons-material/ThumbUp"; import { IconButton, Tooltip } from "@mui/material"; import { useState } from "react"; diff --git a/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/RejectAction/index.jsx b/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/RejectAction/index.jsx index c8a7e96..c16a405 100644 --- a/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/RejectAction/index.jsx +++ b/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/RejectAction/index.jsx @@ -1,4 +1,4 @@ -import ThumbDownIcon from '@mui/icons-material/ThumbDown'; +import ThumbDownIcon from "@mui/icons-material/ThumbDown"; import { IconButton, Tooltip } from "@mui/material"; import { useState } from "react"; diff --git a/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/index.jsx b/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/index.jsx index 45e1693..06ea132 100644 --- a/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/index.jsx +++ b/src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/index.jsx @@ -3,7 +3,6 @@ import ConfirmAction from "./ConfirmAction"; import RejectAction from "./RejectAction"; const RowActions = ({ row, mutate }) => { - return ( diff --git a/src/components/dashboard/inquiryPrivacy/privacy-office/ShowPrimaryArea/index.jsx b/src/components/dashboard/inquiryPrivacy/privacy-office/ShowPrimaryArea/index.jsx index 7300a1f..98e24d0 100644 --- a/src/components/dashboard/inquiryPrivacy/privacy-office/ShowPrimaryArea/index.jsx +++ b/src/components/dashboard/inquiryPrivacy/privacy-office/ShowPrimaryArea/index.jsx @@ -1,61 +1,69 @@ -const { Button, IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent, DialogActions } = require("@mui/material"); -import LayersIcon from '@mui/icons-material/Layers'; +const { + Button, + IconButton, + Tooltip, + Box, + Dialog, + DialogTitle, + Typography, + DialogContent, + DialogActions, +} = require("@mui/material"); +import LayersIcon from "@mui/icons-material/Layers"; import CloseIcon from "@mui/icons-material/Close"; -import { useMemo, useState } from 'react'; -import MapLayer from '@/core/components/MapLayer'; -import ShowBound from './ShowBound'; +import { useMemo, useState } from "react"; +import MapLayer from "@/core/components/MapLayer"; +import ShowBound from "./ShowBound"; -const ShowPrimaryArea = ({primaryArea}) => { +const ShowPrimaryArea = ({ primaryArea }) => { const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false); const bound = useMemo(() => { - const latLngCoords = primaryArea.coordinates.map(coord => [coord[1], coord[0]]); - return primaryArea.type === "polygon" - ? L.polygon(latLngCoords) - : L.polyline(latLngCoords); + const latLngCoords = primaryArea.coordinates.map((coord) => [coord[1], coord[0]]); + return primaryArea.type === "polygon" ? L.polygon(latLngCoords) : L.polyline(latLngCoords); }, [primaryArea]); - - return ( - - - setOpenShowAreaDialog(true)}> - - - - setOpenShowAreaDialog(false)} - PaperProps={{ - sx: { - transition: "all .3s", - boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px", - borderRadius: 2, - padding: 1, - }, - }} - maxWidth="sm" - fullWidth - dir="rtl" - > - - - محدوده طرح - - setOpenShowAreaDialog(false)} size="small"> - + + return ( + + + setOpenShowAreaDialog(true)}> + - - - + + setOpenShowAreaDialog(false)} + PaperProps={{ + sx: { + transition: "all .3s", + boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px", + borderRadius: 2, + padding: 1, + }, + }} + maxWidth="sm" + fullWidth + dir="rtl" + > + + + محدوده طرح + + setOpenShowAreaDialog(false)} size="small"> + + + + + - - - - ) -} + + + + ); +}; -export default ShowPrimaryArea \ No newline at end of file +export default ShowPrimaryArea; diff --git a/src/core/utils/geoCalculations.js b/src/core/utils/geoCalculations.js index f0f9f03..ebf8a96 100644 --- a/src/core/utils/geoCalculations.js +++ b/src/core/utils/geoCalculations.js @@ -1,35 +1,35 @@ import * as turf from "@turf/turf"; export const calculatePolygonMetrics = (coordinates, isLatLngOrder = true) => { - if (!coordinates || coordinates.length < 3) { - return { area: 0, sides: [], coordinates: [] }; - } + if (!coordinates || coordinates.length < 3) { + return { area: 0, sides: [], coordinates: [] }; + } - const geoCoords = isLatLngOrder - ? coordinates.map(([lat, lng]) => [lng, lat]) - : coordinates.map(([lng, lat]) => [lng, lat]); + const geoCoords = isLatLngOrder + ? coordinates.map(([lat, lng]) => [lng, lat]) + : coordinates.map(([lng, lat]) => [lng, lat]); - if ( - geoCoords[0][0] !== geoCoords[geoCoords.length - 1][0] || - geoCoords[0][1] !== geoCoords[geoCoords.length - 1][1] - ) { - geoCoords.push(geoCoords[0]); - } + if ( + geoCoords[0][0] !== geoCoords[geoCoords.length - 1][0] || + geoCoords[0][1] !== geoCoords[geoCoords.length - 1][1] + ) { + geoCoords.push(geoCoords[0]); + } - const polygon = turf.polygon([geoCoords]); + const polygon = turf.polygon([geoCoords]); - const area = turf.area(polygon); + const area = turf.area(polygon); - const sides = []; - for (let i = 0; i < geoCoords.length - 1; i++) { - const line = turf.lineString([geoCoords[i], geoCoords[i + 1]]); - const length = turf.length(line, { units: "meters" }); - sides.push(length); - } + const sides = []; + for (let i = 0; i < geoCoords.length - 1; i++) { + const line = turf.lineString([geoCoords[i], geoCoords[i + 1]]); + const length = turf.length(line, { units: "meters" }); + sides.push(length); + } - return { - area, - sides, - coordinates: geoCoords, - }; -}; \ No newline at end of file + return { + area, + sides, + coordinates: geoCoords, + }; +}; diff --git a/src/core/utils/pageMenuDev.js b/src/core/utils/pageMenuDev.js index 67b05dc..23c42d7 100644 --- a/src/core/utils/pageMenuDev.js +++ b/src/core/utils/pageMenuDev.js @@ -24,10 +24,10 @@ import RouteIcon from "@mui/icons-material/Route"; import ScienceIcon from "@mui/icons-material/Science"; import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard"; import SpeedIcon from "@mui/icons-material/Speed"; -import PsychologyAltIcon from '@mui/icons-material/PsychologyAlt'; -import MapsHomeWorkIcon from '@mui/icons-material/MapsHomeWork'; -import SecurityIcon from '@mui/icons-material/Security'; -import ManageAccountsIcon from '@mui/icons-material/ManageAccounts'; +import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt"; +import MapsHomeWorkIcon from "@mui/icons-material/MapsHomeWork"; +import SecurityIcon from "@mui/icons-material/Security"; +import ManageAccountsIcon from "@mui/icons-material/ManageAccounts"; export const pageMenuDev = [ { diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js index d51af49..8572b6f 100644 --- a/src/core/utils/routes.js +++ b/src/core/utils/routes.js @@ -239,4 +239,4 @@ export const CREATE_RAHDARAN_ITEM = api + "/api/v3/rahdaran"; export const GET_CITY_ADMIN_LIST = api + "/api/v3/harim/province_office"; export const GET_INQUIRY_PRIVACY_STATE_LIST = api + "/api/v3/harim/detail/states"; export const CITY_ADMIN_FEEDBACK = api + "/api/v3/harim/province_office/feedback"; -export const GET_PRIVACY_ADMIN_LIST = api + "/api/v3/harim/harim_office" \ No newline at end of file +export const GET_PRIVACY_ADMIN_LIST = api + "/api/v3/harim/harim_office";