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

Feature/change filter report map

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2025-04-14 11:11:53 +00:00
parent 0b719c9043
commit a56e123d47
27 changed files with 918 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/dashboard/roadSafety/operator/OperatorList.jsx
View File

@@ -121,8 +121,8 @@ const OperatorList = () => {
props.dependencyFieldValue?.value === ""
? "empty"
: loadingEdaratList
? "loading"
: props.filterParameters.value
? "loading"
: props.filterParameters.value
}
columnSelectOption={getColumnSelectOptions}
/>

32
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/ActionDate.jsx
View File

@@ -1,32 +0,0 @@
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Box } from "@mui/material";
const ActionDate = ({ value, onChange, error }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker
label={"تاریخ اقدام"}
name={`action_date[0]`}
value={value[0]}
setFieldValue={(name, formattedDate) => {
onChange([formattedDate, value[1]]);
}}
maxDate={value[1]}
placeholder={`از تاریخ`}
/>
<MuiDatePicker
label={"تاریخ اقدام"}
name={`action_date[1]`}
value={value[1]}
setFieldValue={(name, formattedDate) => {
onChange([value[0], formattedDate]);
}}
minDate={value[0]}
placeholder={`تا تاریخ`}
helperText={error ? error.message : null}
error={Boolean(error)}
/>
</Box>
);
};
export default ActionDate;

32
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/ActivityDateTimeFilter.jsx
View File

@@ -1,32 +0,0 @@
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Box } from "@mui/material";
const ActivityDateTimeFilter = ({ value, onChange, error }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker
label={"تاریخ بازدید"}
name={`activity_date_time[0]`}
value={value[0]}
setFieldValue={(name, formattedDate) => {
onChange([formattedDate, value[1]]);
}}
maxDate={value[1]}
placeholder={`از تاریخ`}
/>
<MuiDatePicker
label={"تاریخ بازدید"}
name={`activity_date_time[1]`}
value={value[1]}
setFieldValue={(name, formattedDate) => {
onChange([value[0], formattedDate]);
}}
minDate={value[0]}
placeholder={`تا تاریخ`}
helperText={error ? error.message : null}
error={Boolean(error)}
/>
</Box>
);
};
export default ActivityDateTimeFilter;

37
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/AxisTypeFilter.jsx
View File

@@ -1,37 +0,0 @@
import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
const AxisTypeFilter = ({ value, onChange }) => {
const axisOptions = [
{ value: "", label: "همه محور ها" },
{ value: 1, label: "آزادراه" },
{ value: 2, label: "بزرگراه" },
{ value: 3, label: "اصلی" },
{ value: 4, label: "فرعی" },
{ value: 5, label: "روستایی" },
];
return (
<FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel id={`labelaxis`} shrink>
نوع محور
</InputLabel>
<Select
labelId={`labelaxis`}
id={"axis"}
name={`axis`}
value={value}
input={<OutlinedInput label="نوع محور" />}
size="small"
onChange={(e) => onChange(e.target.value)}
displayEmpty
>
{axisOptions.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default AxisTypeFilter;

32
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/CreatedAtFilter.jsx
View File

@@ -1,32 +0,0 @@
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Box } from "@mui/material";
const CreatedAtFilter = ({ value, onChange, error }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker
label={"تاریخ ثبت"}
name={`activity_date_time[0]`}
value={value[0]}
setFieldValue={(name, formattedDate) => {
onChange([formattedDate, value[1]]);
}}
maxDate={value[1]}
placeholder={`از تاریخ`}
/>
<MuiDatePicker
label={"تاریخ ثبت"}
name={`activity_date_time[1]`}
value={value[1]}
setFieldValue={(name, formattedDate) => {
onChange([value[0], formattedDate]);
}}
minDate={value[0]}
placeholder={`تا تاریخ`}
helperText={error ? error.message : null}
error={Boolean(error)}
/>
</Box>
);
};
export default CreatedAtFilter;

65
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/EdarehShahriFilter.jsx
View File

@@ -1,65 +0,0 @@
"use client";
import useEdaratLists from "@/lib/hooks/useEdaratLists";
import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { useWatch } from "react-hook-form";
const EdarehShahriFilter = ({ control, value, onChange }) => {
const dependencyField = useWatch({ control, name: "province_id" });
return <EdarehShahriController value={value} onChange={onChange} dependencyField={dependencyField} />;
};
const EdarehShahriController = ({ value, onChange, dependencyField }) => {
const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(dependencyField);
const [prevDependency, setPrevDependency] = useState(dependencyField);
const columnSelectOption = useMemo(() => {
if (dependencyField === "") {
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
}
if (loadingEdaratList) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorEdaratList) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "کل ادارات" },
...edaratList.map((edare) => ({
value: edare.id,
label: edare.name_fa,
})),
];
}, [edaratList, loadingEdaratList, errorEdaratList]);
useEffect(() => {
if (prevDependency === dependencyField) return;
onChange("");
setPrevDependency(dependencyField);
}, [dependencyField]);
return (
<FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel id={`labeledarat_id`} shrink>
اداره
</InputLabel>
<Select
labelId={`labeledarat_id`}
id={"edarat_id"}
name={`edarat_id`}
value={dependencyField === "" ? "empty" : loadingEdaratList ? "loading" : value}
input={<OutlinedInput label="اداره" />}
size="small"
onChange={(e) => onChange(e.target.value)}
displayEmpty
>
{columnSelectOption.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default EdarehShahriFilter;

47
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/InfoFilter.jsx
View File

@@ -1,47 +0,0 @@
import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
import { useMemo } from "react";
const InfoFilter = ({ value, onChange }) => {
const { itemsList, loadingItemsList, errorItemsList } = useSafetyAndPrivacyGetItems();
const columnSelectOption = useMemo(() => {
if (loadingItemsList) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorItemsList) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "همه موارد" },
...itemsList.map((item) => ({
value: item.id,
label: item.name,
})),
];
}, [itemsList, loadingItemsList, errorItemsList]);
return (
<FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel id={`labelinfo_id`} shrink>
مورد مشاهده شده
</InputLabel>
<Select
labelId={`labelinfo_id`}
id={"info_id"}
name={`info_id`}
value={loadingItemsList ? "loading" : value}
input={<OutlinedInput label="مورد مشاهده شده" />}
size="small"
onChange={(e) => onChange(e.target.value)}
displayEmpty
>
{columnSelectOption.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default InfoFilter;

32
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/JudiciaryDocumentUploadDateFilter.jsx
View File

@@ -1,32 +0,0 @@
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Box } from "@mui/material";
const JudiciaryDocumentUploadDateFilter = ({ value, onChange, error }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker
label={"تاریخ بارگذاری مستندات"}
name={`judiciary_document_upload_date[0]`}
value={value[0]}
setFieldValue={(name, formattedDate) => {
onChange([formattedDate, value[1]]);
}}
maxDate={value[1]}
placeholder={`از تاریخ`}
/>
<MuiDatePicker
label={"تاریخ بارگذاری مستندات"}
name={`judiciary_document_upload_date[1]`}
value={value[1]}
setFieldValue={(name, formattedDate) => {
onChange([value[0], formattedDate]);
}}
minDate={value[0]}
placeholder={`تا تاریخ`}
helperText={error ? error.message : null}
error={Boolean(error)}
/>
</Box>
);
};
export default JudiciaryDocumentUploadDateFilter;

47
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/ProvinceFilter.jsx
View File

@@ -1,47 +0,0 @@
import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
import { useMemo } from "react";
const ProvinceFilter = ({ value, onChange }) => {
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
const columnSelectOption = useMemo(() => {
if (loadingProvinces) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorProvinces) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "کل کشور" },
...provinces.map((province) => ({
value: province.id,
label: province.name_fa,
})),
];
}, [provinces, errorProvinces, loadingProvinces]);
return (
<FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel id={`labelprovince_id`} shrink>
استان
</InputLabel>
<Select
labelId={`labelprovince_id`}
id={"province_id"}
name={`province_id`}
value={loadingProvinces ? "loading" : value}
input={<OutlinedInput label="استان" />}
size="small"
onChange={(e) => onChange(e.target.value)}
displayEmpty
>
{columnSelectOption.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default ProvinceFilter;

35
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/StepFilter.jsx
View File

@@ -1,35 +0,0 @@
import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
const StepFilter = ({ value, onChange }) => {
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 1, label: "گام اول (شناسایی)" },
{ value: 2, label: "گام دوم (مستندات قضایی)" },
{ value: 3, label: "گام سوم (برخورد)" },
];
return (
<FormControl fullWidth sx={{ marginY: 1 }} size="small">
<InputLabel id={`labelstep`} shrink>
وضعیت
</InputLabel>
<Select
labelId={`labelstep`}
id={"step"}
name={`step`}
value={value}
input={<OutlinedInput label="وضعیت" />}
size="small"
onChange={(e) => onChange(e.target.value)}
displayEmpty
>
{statusOptions.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default StepFilter;

166
src/components/dashboard/roadSafety/reports/map/Filter/Drawer/index.jsx
View File

@@ -1,166 +0,0 @@
import ScrollBox from "@/core/components/ScrollBox";
import { yupResolver } from "@hookform/resolvers/yup";
import CancelIcon from "@mui/icons-material/Cancel";
import FilterAltIcon from "@mui/icons-material/FilterAlt";
import { Box, Button, IconButton, Typography } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import * as Yup from "yup";
import ActivityDateTimeFilter from "./ActivityDateTimeFilter";
import AxisTypeFilter from "./AxisTypeFilter";
import EdarehShahriFilter from "./EdarehShahriFilter";
import InfoFilter from "./InfoFilter";
import ProvinceFilter from "./ProvinceFilter";
import StepFilter from "./StepFilter";
import CreatedAtFilter from "./CreatedAtFilter";
import JudiciaryDocumentUploadDateFilter from "./JudiciaryDocumentUploadDateFilter";
import ActionPictureDocumentUploadDateFilter from "./ActionDate";
import ActionDate from "./ActionDate";
const validationSchema = Yup.object({
activity_date_time: Yup.array()
.of(Yup.string().nullable())
.test({
test(value, ctx) {
const [start, end] = value || ["", ""];
if ((start && !end) || (!start && end)) {
return ctx.createError({ message: "این بخش را تکمیل نمایید" });
}
return true;
},
}),
});
const headerSx = {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
px: 2,
py: 1,
backgroundColor: "#155175",
boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
maxWidth: "450px",
};
const headerTitleSx = { display: "flex", alignItems: "center" };
const headerIconSx = { color: "#fff", mr: 1 };
const iconButtonSx = { color: "#fff" };
const formContainerSx = { px: 2, py: 3 };
const footerSx = { display: "flex", justifyContent: "center", alignItems: "center", pb: 2 };
const submitButtonSx = {
px: 8,
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "primary2",
":hover": { backgroundColor: "primary2" },
};
const FilterDrawer = ({ defaultValues, setFilterData, closeDrawer }) => {
const {
control,
handleSubmit,
formState: { isDirty },
} = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "onBlur",
});
const onSubmit = (data) => {
setFilterData(data);
closeDrawer();
};
return (
<>
<Box sx={headerSx}>
<Box sx={headerTitleSx}>
<FilterAltIcon sx={headerIconSx} />
<Typography variant="h6" sx={{ color: "#fff" }}>
فیلتر
</Typography>
</Box>
<IconButton sx={iconButtonSx} onClick={closeDrawer}>
<CancelIcon sx={{ fontSize: "1em" }} />
</IconButton>
</Box>
<ScrollBox>
<form onSubmit={handleSubmit(onSubmit)}>
<Box sx={formContainerSx}>
<Controller
name="province_id"
control={control}
render={({ field: { value, onChange } }) => (
<ProvinceFilter value={value} onChange={onChange} />
)}
/>
<Controller
name="edarat_id"
control={control}
render={({ field: { value, onChange } }) => (
<EdarehShahriFilter value={value} onChange={onChange} control={control} />
)}
/>
<Controller
name="info_id"
control={control}
render={({ field: { value, onChange } }) => (
<InfoFilter value={value} onChange={onChange} />
)}
/>
<Controller
name="axis_type_id"
control={control}
render={({ field: { value, onChange } }) => (
<AxisTypeFilter value={value} onChange={onChange} control={control} />
)}
/>
<Controller
name="step"
control={control}
render={({ field: { value, onChange } }) => (
<StepFilter value={value} onChange={onChange} control={control} />
)}
/>
<Controller
name="created_at"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<CreatedAtFilter value={value} onChange={onChange} error={error} />
)}
/>
<Controller
name="activity_date_time"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<ActivityDateTimeFilter value={value} onChange={onChange} error={error} />
)}
/>
<Controller
name="judiciary_document_upload_date"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<JudiciaryDocumentUploadDateFilter value={value} onChange={onChange} error={error} />
)}
/>
<Controller
name="action_date"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<ActionDate value={value} onChange={onChange} error={error} />
)}
/>
</Box>
<Box sx={footerSx}>
<Button type="submit" variant="contained" size="large" disabled={!isDirty} sx={submitButtonSx}>
اعمال فیلتر
</Button>
</Box>
</form>
</ScrollBox>
</>
);
};
export default FilterDrawer;

2
src/components/dashboard/roadSafety/reports/map/Filter/index.jsx
View File

@@ -2,7 +2,7 @@
import { Box, Button, Drawer } from "@mui/material";
import FilterListIcon from "@mui/icons-material/FilterList";
import { useCallback, useState } from "react";
import FilterDrawer from "./Drawer";
import FilterDrawer from "@/core/components/FilterDrawer";
const drawerSx = {
overflowY: "hidden",

28
src/components/dashboard/roadSafety/reports/map/PointsOnMap/DialogInfoItem/ContentInfoItem.jsx
View File

@@ -63,7 +63,7 @@ const ContentInfoItem = ({ data }) => {
</Stack>
)}
<Stack spacing={2}>
<Stack sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }} alignItems={"center"}>
<Stack sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }} spacing={1} alignItems={"center"}>
<Chip size="small" label="تصویر بازدید" />
<Box sx={{ position: "relative", height: 300, width: "100%" }}>
<Image
@@ -75,18 +75,20 @@ const ContentInfoItem = ({ data }) => {
/>
</Box>
</Stack>
<Stack sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }} alignItems={"center"}>
<Chip size="small" label="تصویر اقدام" />
<Box sx={{ position: "relative", height: 300, width: "100%" }}>
<Image
src={data.action_picture}
style={{ objectFit: "contain" }}
alt="action_picture"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</Box>
</Stack>
{data.step == 3 && (
<Stack sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }} spacing={1} alignItems={"center"}>
<Chip size="small" label="تصویر اقدام" />
<Box sx={{ position: "relative", height: 300, width: "100%" }}>
<Image
src={data.action_picture}
style={{ objectFit: "contain" }}
alt="action_picture"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</Box>
</Stack>
)}
</Stack>
</Stack>
);

260
src/components/dashboard/roadSafety/reports/map/index.jsx
View File

@@ -1,31 +1,40 @@
"use client";
import LoadingHardPage from "@/core/components/LoadingHardPage";
import MapLoading from "@/core/components/MapLayer/Loading";
import isArrayEmpty from "@/core/utils/isArrayEmpty";
import { GET_ROAD_SAFETY_REPORT_MAP } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { Box, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import ClusterSwitch from "./ClusterSwitch";
import Filter from "./Filter";
import Legend from "./Legend";
import PointsOnMap from "./PointsOnMap";
import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
import useProvinces from "@/lib/hooks/useProvince";
import CustomSelectByDependency from "@/core/components/FilterDrawer/fieldsType/CustomSelectByDependency";
import useEdaratLists from "@/lib/hooks/useEdaratLists";
import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const defaultValues = {
province_id: "",
edarat_id: "",
info_id: "",
axis_type_id: "",
step: "",
created_at: ["", ""],
activity_date_time: ["", ""],
judiciary_document_upload_date: ["", ""],
action_date: ["", ""],
};
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 1, label: "گام اول (شناسایی)" },
{ value: 2, label: "گام دوم (مستندات قضایی)" },
{ value: 3, label: "گام سوم (برخورد)" },
];
const axisOptions = [
{ value: "", label: "همه محور ها" },
{ value: 1, label: "آزادراه" },
{ value: 2, label: "بزرگراه" },
{ value: 3, label: "اصلی" },
{ value: 4, label: "فرعی" },
{ value: 5, label: "روستایی" },
];
const MAX_POINTS = 1000;
@@ -44,62 +53,205 @@ const controlBarStyles = {
};
const RoadSafetyReportMap = () => {
const defaultValues = useMemo(
() => [
{
header: "استان",
id: "province_id",
filterMode: "equals",
datatype: "numeric",
value: "",
SelectComponent: (props) => {
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
const getSelectOptions = useMemo(() => {
if (loadingProvinces) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorProvinces) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "کل کشور" },
...provinces.map((province) => ({
value: province.id,
label: province.name_fa,
})),
];
}, [provinces, errorProvinces, loadingProvinces]);
return (
<CustomSelectByDependency
{...props}
value={loadingProvinces ? "loading" : props.filterParameters.value}
selectOption={getSelectOptions}
/>
);
},
},
{
eader: "اداره",
id: "edare_shahri_id",
filterMode: "equals",
datatype: "numeric",
dependencyId: "province_id",
value: "",
SelectComponent: (props) => {
const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
props.dependencyFieldValue.value
);
const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
const getSelectOptions = useMemo(() => {
if (props.dependencyFieldValue.value === "") {
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
}
if (loadingEdaratList) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorEdaratList) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "کل ادارات" },
...edaratList.map((edare) => ({
value: edare.id,
label: edare.name_fa,
})),
];
}, [edaratList, loadingEdaratList, errorEdaratList]);
useEffect(() => {
if (prevDependency === props.dependencyFieldValue?.value) return;
props.handleChange({ ...props.filterParameters, value: "" });
setPrevDependency(props.dependencyFieldValue?.value);
}, [props.dependencyFieldValue?.value]);
return (
<CustomSelectByDependency
{...props}
value={
props.dependencyFieldValue?.value === ""
? "empty"
: loadingEdaratList
? "loading"
: props.filterParameters.value
}
selectOption={getSelectOptions}
/>
);
},
},
{
header: "مورد مشاهده شده",
id: "info_id",
filterMode: "equals",
datatype: "numeric",
value: "",
SelectComponent: (props) => {
const { itemsList, loadingItemsList, errorItemsList } = useSafetyAndPrivacyGetItems();
const getSelectOptions = useMemo(() => {
if (loadingItemsList) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorItemsList) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "همه موارد" },
...itemsList.map((item) => ({
value: item.id,
label: item.name,
})),
];
}, [itemsList, loadingItemsList, errorItemsList]);
return (
<CustomSelectByDependency
{...props}
value={loadingItemsList ? "loading" : props.filterParameters.value}
selectOption={getSelectOptions}
/>
);
},
},
{
header: "نوع محور",
id: "axis_type_id",
filterMode: "equals",
datatype: "numeric",
value: "",
selectOption: () => {
return axisOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
},
{
header: "وضعیت",
id: "step",
filterMode: "equals",
datatype: "numeric",
value: "",
selectOption: () => {
return statusOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
},
{
header: "تاریخ ثبت",
id: "created_at",
filterMode: "between",
datatype: "date",
value: ["", ""],
},
{
header: "تاریخ بازدید",
id: "activity_date_time",
filterMode: "between",
datatype: "date",
value: ["", ""],
},
{
header: "تاریخ بارگذاری مستندات",
id: "judiciary_document_upload_date",
filterMode: "between",
datatype: "date",
value: ["", ""],
},
{
header: "تاریخ اقدام",
id: "action_date",
filterMode: "between",
datatype: "date",
value: ["", ""],
},
],
[]
);
const requestServer = useRequest();
const [filterData, setFilterData] = useState(defaultValues);
const [filterData, setFilterData] = useState(
defaultValues.reduce((acc, item) => {
acc[item.id] = item;
return acc;
}, {})
);
const [isCluster, setCluster] = useState(false);
const [data, setData] = useState([]);
const [isLoading, setLoading] = useState(true);
const buildQueryParams = useCallback(() => {
const params = new URLSearchParams();
const {
province_id,
edarat_id,
info_id,
axis_type_id,
step,
created_at,
activity_date_time,
judiciary_document_upload_date,
action_date,
} = filterData;
const filterArray = [];
if (province_id) filterArray.push({ id: "province_id", fn: "equals", datatype: "numeric", value: province_id });
if (edarat_id) filterArray.push({ id: "edarat_id", fn: "equals", datatype: "numeric", value: edarat_id });
if (info_id) filterArray.push({ id: "info_id", fn: "equals", datatype: "numeric", value: info_id });
if (axis_type_id)
filterArray.push({ id: "axis_type_id", fn: "equals", datatype: "numeric", value: axis_type_id });
if (step) filterArray.push({ id: "step", fn: "equals", datatype: "numeric", value: step });
if (created_at[0]) filterArray.push({ id: "created_at", fn: "between", datatype: "date", value: created_at });
if (activity_date_time[0])
filterArray.push({ id: "activity_date_time", fn: "between", datatype: "date", value: activity_date_time });
if (judiciary_document_upload_date[0])
filterArray.push({
id: "judiciary_document_upload_date",
fn: "between",
datatype: "date",
value: judiciary_document_upload_date,
});
if (action_date[0])
filterArray.push({ id: "action_date", fn: "between", datatype: "date", value: action_date });
console.log(filterArray);
params.set("filters", JSON.stringify(filterArray || []));
const filters = DataTableFilterDataStructure(filterData, isArrayEmpty);
params.set("filters", JSON.stringify(filters || []));
return params.toString();
}, [filterData]);
useEffect(() => {
console.log("gasgsa");
const fetchData = async () => {
try {
setLoading(true);
const query = buildQueryParams();
console.log("amir");
const response = await requestServer(`${GET_ROAD_SAFETY_REPORT_MAP}?${query}`);
const fetchedData = response?.data?.data || [];
@@ -117,8 +269,6 @@ const RoadSafetyReportMap = () => {
fetchData();
}, [filterData, buildQueryParams]);
console.log("sfa");
return (
<Box sx={containerStyles}>
<MapLayer style={{ borderRadius: "4px" }}>