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

formatting

Browse Source
This commit is contained in:
mhmjalali
2025-11-04 09:08:32 +03:30
parent 26924102f7
commit 5b61380550
15 changed files with 533 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/assets/scss/leaflet-measure.scss
View File

@@ -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);
}
}
a.zoomto {
@include button(focus);
}
a.deletemarkup {
@include button(trash);
}
}

72
src/components/dashboard/inquiryPrivacy/city-admin/CityAdminList.jsx
View File

@@ -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 <MapsHomeWorkIcon sx={{color: "#A0B9C6"}} />;
if (state_id === 2 || state_id === 5 || state_id === 13) return <SecurityIcon sx={{color: "#995FA3"}} />;
if (state_id === 3 || state_id === 6 || state_id === 14) return <ManageAccountsIcon sx={{color: "#9A98B5"}} />;
if (state_id === 4 || state_id === 7 || state_id === 15) return <PsychologyAltIcon sx={{color: "#1B9AAA"}} />;
if (state_id === 8) return <ReceiptLongIcon sx={{color: "#9A98B5"}} />;
if (state_id === 9 || state_id === 11) return <WindowIcon sx={{color: "#DDDBCB"}} />;
if (state_id === 10) return <DangerousIcon sx={{color: "error.main"}} />;
if (state_id === 12) return <AutorenewIcon sx={{color: "#899878"}} />;
if (state_id === 1) return <MapsHomeWorkIcon sx={{ color: "#A0B9C6" }} />;
if (state_id === 2 || state_id === 5 || state_id === 13) return <SecurityIcon sx={{ color: "#995FA3" }} />;
if (state_id === 3 || state_id === 6 || state_id === 14)
return <ManageAccountsIcon sx={{ color: "#9A98B5" }} />;
if (state_id === 4 || state_id === 7 || state_id === 15) return <PsychologyAltIcon sx={{ color: "#1B9AAA" }} />;
if (state_id === 8) return <ReceiptLongIcon sx={{ color: "#9A98B5" }} />;
if (state_id === 9 || state_id === 11) return <WindowIcon sx={{ color: "#DDDBCB" }} />;
if (state_id === 10) return <DangerousIcon sx={{ color: "error.main" }} />;
if (state_id === 12) return <AutorenewIcon sx={{ color: "#899878" }} />;
};
const columns = useMemo(() => {
return [
@@ -96,7 +97,7 @@ const CityAdminList = () => {
<Box sx={{ display: "flex", alignItems: "center" }}>
{stateIcon(row.original.state_id)}
<Box component="span" ml={1}>
{row.original.state_name}
{row.original.state_name}
</Box>
</Box>
),
@@ -164,11 +165,14 @@ const CityAdminList = () => {
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
Cell: ({ row }) => row.original.primary_area ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowPrimaryArea primaryArea={row.original.primary_area} />
</Stack>
) : ("-"),
Cell: ({ row }) =>
row.original.primary_area ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowPrimaryArea primaryArea={row.original.primary_area} />
</Stack>
) : (
"-"
),
},
{
accessorKey: "province_id",
@@ -233,7 +237,7 @@ const CityAdminList = () => {
/>
</Box>
</>
)
}
);
};
export default CityAdminList
export default CityAdminList;

259
src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/DrawBound.jsx
View File

@@ -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 <FeatureGroup ref={featureRef} />;
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 <FeatureGroup ref={featureRef} />;
};
export default DrawPolygon;

9
src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/MapDrawPolygon/index.jsx
View File

@@ -62,11 +62,16 @@ const MapDrawPolygon = ({ drawBound, setDrawBound }) => {
return (
<>
<DrawPolygon drawBound={drawBound} setDrawBound={setDrawBound} control={control} controlDispach={controlDispach} />
<DrawPolygon
drawBound={drawBound}
setDrawBound={setDrawBound}
control={control}
controlDispach={controlDispach}
/>
<Box
direction={"row"}
justifyContent={"center"}
sx={{ display: "flex",position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
sx={{ display: "flex", position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
>
<Box
sx={{

72
src/components/dashboard/inquiryPrivacy/city-admin/RowActions/FeedbackAction/index.jsx
View File

@@ -3,11 +3,22 @@ import { CITY_ADMIN_FEEDBACK } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import CloseIcon from "@mui/icons-material/Close";
import ForumIcon from '@mui/icons-material/Forum';
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Tooltip, Typography } from '@mui/material';
import { useMemo, useState } from 'react';
import ForumIcon from "@mui/icons-material/Forum";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
TextField,
Tooltip,
Typography,
} from "@mui/material";
import { useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { object, string } from 'yup';
import { object, string } from "yup";
import ShowBound from "../../ShowPrimaryArea/ShowBound";
import MapDrawPolygon from "./MapDrawPolygon";
@@ -15,32 +26,29 @@ const validationSchema = object({
expert_description: string().required("توضیحات ناظر اجباری است!"),
});
const FeedbackAction = ({rowId, mutate, rowPrimaryArea}) => {
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 (
<>
<Box>
@@ -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}) => {
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent sx={{display: "flex", flexDirection: "column"}}>
<Typography variant="h6">منطقه ممنوعه <Typography variant="caption" sx={{color: "error.main"}}>(در صورت وجود انتخاب کنید)</Typography></Typography>
<DialogContent sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="h6">
منطقه ممنوعه{" "}
<Typography variant="caption" sx={{ color: "error.main" }}>
(در صورت وجود انتخاب کنید)
</Typography>
</Typography>
<Box sx={{ width: "100%", height: "400px", mb: 2 }}>
<MapLayer style={{ borderRadius: "4px", border: "1px solid #eeeeee" }}>
<ShowBound bound={bound} />
<MapDrawPolygon drawBound={drawBound} setDrawBound={setDrawBound} />
<ShowBound bound={bound} />
<MapDrawPolygon drawBound={drawBound} setDrawBound={setDrawBound} />
</MapLayer>
</Box>
<TextField
@@ -125,14 +138,19 @@ const FeedbackAction = ({rowId, mutate, rowPrimaryArea}) => {
>
بستن
</Button>
<Button onClick={handleSubmit(onSubmit)} variant="contained" color="primary" disabled={isSubmitting}>
<Button
onClick={handleSubmit(onSubmit)}
variant="contained"
color="primary"
disabled={isSubmitting}
>
{isSubmitting ? "درحال ثبت تایید..." : "ثبت توضیحات"}
</Button>
</DialogActions>
</Dialog>
</Box>
</>
)
}
);
};
export default FeedbackAction
export default FeedbackAction;

6
src/components/dashboard/inquiryPrivacy/city-admin/RowActions/index.jsx
View File

@@ -4,7 +4,11 @@ import FeedbackAction from "./FeedbackAction";
const RowActions = ({ row, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1, justifyContent: "Center" }}>
{row.original.state_id === 1 ? <FeedbackAction mutate={mutate} rowId={row.original.id} rowPrimaryArea={row.original.primary_area} /> : "-"}
{row.original.state_id === 1 ? (
<FeedbackAction mutate={mutate} rowId={row.original.id} rowPrimaryArea={row.original.primary_area} />
) : (
"-"
)}
</Box>
);
};

104
src/components/dashboard/inquiryPrivacy/city-admin/ShowPrimaryArea/index.jsx
View File

@@ -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 (
<Box>
<Tooltip title="نمایش پلیگان" placement='right' arrow>
<IconButton size='small' color='primary' onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => 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"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
return (
<Box>
<Tooltip title="نمایش پلیگان" placement="right" arrow>
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => 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"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
</Box>
</Box>
</DialogContent>
</Dialog>
</Box>
)
}
</DialogContent>
</Dialog>
</Box>
);
};
export default ShowPrimaryArea
export default ShowPrimaryArea;

72
src/components/dashboard/inquiryPrivacy/privacy-office/PrivacyOfficeList.jsx
View File

@@ -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 <MapsHomeWorkIcon sx={{color: "#A0B9C6"}} />;
if (state_id === 2 || state_id === 5 || state_id === 13) return <SecurityIcon sx={{color: "#995FA3"}} />;
if (state_id === 3 || state_id === 6 || state_id === 14) return <ManageAccountsIcon sx={{color: "#9A98B5"}} />;
if (state_id === 4 || state_id === 7 || state_id === 15) return <PsychologyAltIcon sx={{color: "#1B9AAA"}} />;
if (state_id === 8) return <ReceiptLongIcon sx={{color: "#9A98B5"}} />;
if (state_id === 9 || state_id === 11) return <WindowIcon sx={{color: "#DDDBCB"}} />;
if (state_id === 10) return <DangerousIcon sx={{color: "error.main"}} />;
if (state_id === 12) return <AutorenewIcon sx={{color: "#899878"}} />;
if (state_id === 1) return <MapsHomeWorkIcon sx={{ color: "#A0B9C6" }} />;
if (state_id === 2 || state_id === 5 || state_id === 13) return <SecurityIcon sx={{ color: "#995FA3" }} />;
if (state_id === 3 || state_id === 6 || state_id === 14)
return <ManageAccountsIcon sx={{ color: "#9A98B5" }} />;
if (state_id === 4 || state_id === 7 || state_id === 15) return <PsychologyAltIcon sx={{ color: "#1B9AAA" }} />;
if (state_id === 8) return <ReceiptLongIcon sx={{ color: "#9A98B5" }} />;
if (state_id === 9 || state_id === 11) return <WindowIcon sx={{ color: "#DDDBCB" }} />;
if (state_id === 10) return <DangerousIcon sx={{ color: "error.main" }} />;
if (state_id === 12) return <AutorenewIcon sx={{ color: "#899878" }} />;
};
const columns = useMemo(() => {
return [
@@ -96,7 +97,7 @@ const PrivacyOfficeList = () => {
<Box sx={{ display: "flex", alignItems: "center" }}>
{stateIcon(row.original.state_id)}
<Box component="span" ml={1}>
{row.original.state_name}
{row.original.state_name}
</Box>
</Box>
),
@@ -164,11 +165,14 @@ const PrivacyOfficeList = () => {
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
Cell: ({ row }) => row.original.primary_area ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowPrimaryArea primaryArea={row.original.primary_area} />
</Stack>
) : ("-"),
Cell: ({ row }) =>
row.original.primary_area ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowPrimaryArea primaryArea={row.original.primary_area} />
</Stack>
) : (
"-"
),
},
{
accessorKey: "province_id",
@@ -233,7 +237,7 @@ const PrivacyOfficeList = () => {
/>
</Box>
</>
)
}
);
};
export default PrivacyOfficeList
export default PrivacyOfficeList;

2
src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ConfirmAction/index.jsx
View File

@@ -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";

2
src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/RejectAction/index.jsx
View File

@@ -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";

1
src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/index.jsx
View File

@@ -3,7 +3,6 @@ import ConfirmAction from "./ConfirmAction";
import RejectAction from "./RejectAction";
const RowActions = ({ row, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1, justifyContent: "Center" }}>
<RejectAction />

104
src/components/dashboard/inquiryPrivacy/privacy-office/ShowPrimaryArea/index.jsx
View File

@@ -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 (
<Box>
<Tooltip title="نمایش پلیگان" placement='right' arrow>
<IconButton size='small' color='primary' onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => 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"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
return (
<Box>
<Tooltip title="نمایش پلیگان" placement="right" arrow>
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => 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"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
</Box>
</Box>
</DialogContent>
</Dialog>
</Box>
)
}
</DialogContent>
</Dialog>
</Box>
);
};
export default ShowPrimaryArea
export default ShowPrimaryArea;

52
src/core/utils/geoCalculations.js
View File

@@ -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,
};
};
return {
area,
sides,
coordinates: geoCoords,
};
};

8
src/core/utils/pageMenuDev.js
View File

@@ -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 = [
{

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

@@ -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"
export const GET_PRIVACY_ADMIN_LIST = api + "/api/v3/harim/harim_office";