Merge branch 'feature/add_new_filter_report' into 'develop'

Feature/add new filter report

See merge request witel-front-end/rms!94

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

@@ -63,7 +63,11 @@ const ContentInfoItem = ({ data }) => {
                 </Stack>
             )}
             <Stack spacing={2}>
-                <Stack sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }} spacing={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
@@ -76,7 +80,11 @@ const ContentInfoItem = ({ data }) => {
                     </Box>
                 </Stack>
                 {data.step == 3 && (
-                    <Stack sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }} spacing={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

src/components/dashboard/roadSafety/reports/map/index.jsx

@@ -251,7 +251,10 @@ const RoadSafetyReportMap = () => {
         const fetchData = async () => {
             try {
                 setLoading(true);
-                const query = buildQueryParams();
+                const params = new URLSearchParams();
+                const filters = DataTableFilterDataStructure(filterData, isArrayEmpty);
+                params.set("filters", JSON.stringify(filters || []));
+                const query = params.toString();
                 const response = await requestServer(`${GET_ROAD_SAFETY_REPORT_MAP}?${query}`);
                 const fetchedData = response?.data?.data || [];
 

src/components/dashboard/roadSafety/reports/reportPage/ExcelPrint/index.jsx

@@ -7,18 +7,15 @@ import DescriptionIcon from "@mui/icons-material/Description";
 import useRequest from "@/lib/hooks/useRequest";
 import { useTheme } from "@emotion/react";
 import { EXPORT_COUNTRY_ROAD_PATROL_REPORTS, EXPORT_PROVINCE_ROAD_PATROL_REPORTS } from "@/core/utils/routes";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
 
 const PrintExcel = ({ table, filterData }) => {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
     const [loading, setLoading] = useState(false);
     const requestServer = useRequest({ notificationSuccess: true });
-    const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
+    const activeFilters = DataTableFilterDataStructure(filterData, isArrayEmpty);
-        if (filter.value) {
-            acc.push({ id: filter.id, value: filter.value });
-        }
-        return acc;
-    }, []);
 
     const filterParams = useMemo(() => {
         const params = new URLSearchParams();
@@ -33,7 +30,7 @@ const PrintExcel = ({ table, filterData }) => {
         setLoading(true);
         const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
         const requestUrl =
-            CountryOrProvince.value === "-1" ? EXPORT_COUNTRY_ROAD_PATROL_REPORTS : EXPORT_PROVINCE_ROAD_PATROL_REPORTS;
+            CountryOrProvince.value === "" ? EXPORT_COUNTRY_ROAD_PATROL_REPORTS : EXPORT_PROVINCE_ROAD_PATROL_REPORTS;
         requestServer(`${requestUrl}?${filterParams}`, "get", {
             requestOptions: { responseType: "blob" },
         })

src/components/dashboard/roadSafety/reports/reportPage/ReportLists.jsx

@@ -4,7 +4,7 @@ import { Box } from "@mui/material";
 import { useMemo } from "react";
 import Toolbar from "./Toolbar";
 
-const ReportLists = ({ data, specialFilter }) => {
+const ReportLists = ({ data, filterData, setFilterData, isLoading }) => {
     const columns = useMemo(() => {
         return [
             {
@@ -289,11 +289,13 @@ const ReportLists = ({ data, specialFilter }) => {
             <DataTableWithAuth
                 TableToolbar={Toolbar}
                 columns={columns}
-                data={data.data}
+                data={data}
                 page_name={"roadSafetyReport"}
                 table_name={"roadSafetyReportList"}
                 enablePagination={false}
-                specialFilter={specialFilter}
+                specialFilter={filterData}
+                setFilterData={setFilterData}
+                loading={isLoading}
             />
         </Box>
     );

src/components/dashboard/roadSafety/reports/reportPage/index.jsx

@@ -1,141 +1,247 @@
 "use client";
+import CustomSelectByDependency from "@/core/components/FilterDrawer/fieldsType/CustomSelectByDependency";
 import PageTitle from "@/core/components/PageTitle";
-import { LinearProgress, Stack } from "@mui/material";
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
-import SearchReportList from "./Search";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
-import { useEffect, useState } from "react";
-import ReportLists from "./ReportLists";
-import useRequest from "@/lib/hooks/useRequest";
 import { GET_ROAD_SAFETY_CITY_ACTIVITY_REPORT, GET_ROAD_SAFETY_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
-import moment from "jalali-moment";
-import * as yup from "yup";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
 import { usePermissions } from "@/lib/hooks/usePermissions";
-import { useAuth } from "@/lib/contexts/auth";
+import useProvinces from "@/lib/hooks/useProvince";
+import useRequest from "@/lib/hooks/useRequest";
+import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
+import { Box, LinearProgress, Stack } from "@mui/material";
+import { useEffect, useMemo, useState } from "react";
+import ReportLists from "./ReportLists";
+
+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 ReportPage = () => {
-    const [data, setData] = useState(null);
     const { data: userPermissions } = usePermissions();
-    const { user } = useAuth();
-    const requestServer = useRequest();
     const hasProvincesPermission = userPermissions.includes("show-safety-and-privacy-operator-cartable");
+    const requestServer = useRequest();
+    const [data, setData] = useState(null);
+    const [isLoading, setLoading] = useState(true);
 
-    const defaultValues = {
+    const defaultValues = useMemo(() => {
-        from_date: moment(new Date()).format("YYYY-MM-DD"),
+        const provinceFilter = {
-        date_to: moment(new Date()).format("YYYY-MM-DD"),
+            header: "استان",
-        province_id: hasProvincesPermission ? "-1" : user.province_id,
+            id: "province_id",
-        axis_type_id: "-1",
+            filterMode: "equals",
-    };
+            datatype: "numeric",
-    const defaultFilter = [
+            value: "",
-        { value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
+            SelectComponent: (props) => {
-        { value: `${defaultValues.axis_type_id}`, datatype: "numeric", id: "axis_type_id", fn: "equals" },
+                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
-        { value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
+                const getSelectOptions = useMemo(() => {
-        { value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+                    if (loadingProvinces) {
-    ];
+                        return [{ value: "loading", label: "در حال بارگذاری..." }];
-    const [specialFilter, setSpecialFilter] = useState(defaultFilter);
+                    }
+                    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}
+                    />
+                );
+            },
+        };
 
-    const onSearchSubmit = async (data) => {
+        return [
-        const params = new URLSearchParams();
+            ...(hasProvincesPermission ? [provinceFilter] : []),
-        params.set("from_date", `${data.from_date}`);
+            {
-        params.set("date_to", `${data.date_to}`);
+                header: "مورد مشاهده شده",
-        if (data.axis_type_id != "-1") params.set("axis_type_id", `${data.axis_type_id}`);
+                id: "info_id",
+                filterMode: "equals",
+                datatype: "numeric",
+                value: "",
+                SelectComponent: (props) => {
+                    const { itemsList, loadingItemsList, errorItemsList } = useSafetyAndPrivacyGetItems();
 
-        setSpecialFilter([
+                    const getSelectOptions = useMemo(() => {
-            { value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
+                        if (loadingItemsList) {
-            { value: `${data.axis_type_id}`, datatype: "numeric", id: "axis_type_id", fn: "equals" },
+                            return [{ value: "loading", label: "در حال بارگذاری..." }];
-            { value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
+                        }
-            { value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+                        if (errorItemsList) {
-        ]);
+                            return [{ value: "error", label: "خطا در بارگذاری" }];
-        if (data.province_id === "-1") {
+                        }
-            try {
+                        return [
-                const response = await requestServer(`${GET_ROAD_SAFETY_PROVINCE_ACTIVITY_REPORT}?${params}`);
+                            { value: "", label: "همه موارد" },
-                const result = response.data.data;
+                            ...itemsList.map((item) => ({
-                const nationalReportForItem = result.activities.find((report) => report.province_id === -1);
+                                value: item.id,
-                const nationalReport = {
+                                label: item.name,
-                    edare_name: "کل کشور",
+                            })),
-                    ...nationalReportForItem,
+                        ];
-                };
+                    }, [itemsList, loadingItemsList, errorItemsList]);
 
-                setData({
+                    return (
-                    data: [
+                        <CustomSelectByDependency
-                        nationalReport,
+                            {...props}
-                        ...result.provinces.map((province) => {
+                            value={loadingItemsList ? "loading" : props.filterParameters.value}
-                            const filteredReports = result.activities.find(
+                            selectOption={getSelectOptions}
-                                (report) => report.province_id === province.id
+                        />
-                            );
+                    );
-                            return {
+                },
-                                ...filteredReports,
+            },
-                                edare_name: province.name_fa,
+            {
-                            };
+                header: "نوع محور",
-                        }),
+                id: "axis_type_id",
-                    ],
+                filterMode: "equals",
-                    filters: data,
+                datatype: "numeric",
-                });
+                value: "",
-            } catch (e) {}
+                selectOption: () => {
-        } else {
+                    return axisOptions.map((status) => ({
-            try {
+                        value: status.value,
-                params.set("province_id", `${data.province_id}`);
+                        label: status.label,
-                const response = await requestServer(`${GET_ROAD_SAFETY_CITY_ACTIVITY_REPORT}?${params}`);
+                    }));
-                const result = response.data.data;
+                },
-                const nationalReportForItem = result.activities.find((report) => report.edare_shahri_id == "-1");
+            },
-                const nationalReport = {
+            {
-                    ...nationalReportForItem,
+                header: "وضعیت",
-                    edare_name: "کل استان",
+                id: "step",
-                };
+                filterMode: "equals",
-                setData({
+                datatype: "numeric",
-                    data: [
+                value: "",
-                        nationalReport,
+                selectOption: () => {
-                        ...result.edarateShahri.map((edare) => {
+                    return statusOptions.map((status) => ({
-                            const filteredReports = result.activities.find(
+                        value: status.value,
-                                (report) => report.edare_shahri_id == edare.id
+                        label: status.label,
-                            );
+                    }));
-                            return {
+                },
-                                edare_name: edare.name_fa,
+            },
-                                ...filteredReports,
+            {
-                            };
+                header: "تاریخ ثبت",
-                        }),
+                id: "created_at",
-                    ],
+                filterMode: "between",
-                    filters: data,
+                datatype: "date",
-                });
+                value: ["", ""],
-            } catch (e) {}
+            },
-        }
+            {
-    };
+                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 [filterData, setFilterData] = useState(
+        defaultValues.reduce((acc, item) => {
+            acc[item.id] = item;
+            return acc;
+        }, {})
+    );
     useEffect(() => {
-        if (!userPermissions) return;
+        const fetchData = async () => {
-        onSearchSubmit(defaultValues);
+            try {
-    }, [userPermissions]);
+                setLoading(true);
+                const params = new URLSearchParams();
+                const filters = DataTableFilterDataStructure(filterData, isArrayEmpty);
+                params.set("filters", JSON.stringify(filters || []));
+                const query = params.toString();
+                const province_id = filterData.province_id.value;
+                if (province_id === "") {
+                    try {
+                        const response = await requestServer(`${GET_ROAD_SAFETY_PROVINCE_ACTIVITY_REPORT}?${query}`);
+                        const result = response.data.data;
+                        const nationalReportForItem = result.activities.find((report) => report.province_id === -1);
+                        const nationalReport = {
+                            edare_name: "کل کشور",
+                            ...nationalReportForItem,
+                        };
 
-    const validationSchema = yup.object().shape({
+                        setData([
-        from_date: yup
+                            nationalReport,
-            .string()
+                            ...result.provinces.map((province) => {
-            .required("تاریخ ثبت الزامی است!")
+                                const filteredReports = result.activities.find(
-            .matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ ثبت الزامی است!")
+                                    (report) => report.province_id === province.id
-            .test("is-valid-date", "تاریخ ثبت معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
+                                );
-        date_to: yup
+                                return {
-            .string()
+                                    ...filteredReports,
-            .required("تاریخ ثبت الزامی است!")
+                                    edare_name: province.name_fa,
-            .matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ ثبت الزامی است!")
+                                };
-            .test("is-valid-date", "تاریخ ثبت معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
+                            }),
-        province_id: yup.string().nullable(),
+                        ]);
-        axis_type_id: yup.string().nullable(),
+                    } catch (e) { }
-    });
+                } else {
+                    try {
+                        const response = await requestServer(`${GET_ROAD_SAFETY_CITY_ACTIVITY_REPORT}?${params}`);
+                        const result = response.data.data;
+                        const nationalReportForItem = result.activities.find(
+                            (report) => report.edare_shahri_id == "-1"
+                        );
+                        const nationalReport = {
+                            ...nationalReportForItem,
+                            edare_name: "کل استان",
+                        };
+                        setData([
+                            nationalReport,
+                            ...result.edarateShahri.map((edare) => {
+                                const filteredReports = result.activities.find(
+                                    (report) => report.edare_shahri_id == edare.id
+                                );
+                                return {
+                                    edare_name: edare.name_fa,
+                                    ...filteredReports,
+                                };
+                            }),
+                        ]);
+                    } catch (e) { }
+                }
+            } catch (error) {
+                console.log(error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [filterData]);
 
-    const { control, handleSubmit } = useForm({
-        defaultValues,
-        resolver: yupResolver(validationSchema),
-        mode: "onBlur",
-    });
     return (
         <Stack spacing={1}>
             <PageTitle title={" کارتابل گزارش نگهداری حریم راه"} />
-            <SearchReportList
+            {!data ? (
-                control={control}
+                <LinearProgress />
-                hasProvincesPermission={hasProvincesPermission}
+            ) : (
-                handleSubmit={handleSubmit}
+                <ReportLists filterData={filterData} setFilterData={setFilterData} isLoading={isLoading} data={data} />
-                onSearchSubmit={onSearchSubmit}
+            )}
-            />
-            {!data ? <LinearProgress /> : <ReportLists specialFilter={specialFilter} data={data} />}
         </Stack>
     );
 };

src/core/components/DataTable/Main.js

@@ -113,7 +113,7 @@ const DataTable_Main = (props) => {
             ...initialStateProps,
         },
         state: {
-            showProgressBars: isValidating,
+            showProgressBars: isValidating || props.loading,
             columnVisibility: flattenHideData,
             sorting: sortData,
             pagination,
@@ -171,6 +171,8 @@ const DataTable_Main = (props) => {
             page_name={page_name}
             table_name={table_name}
             special_data={props.data}
+            special_filter={specialFilter}
+            setFilterData={props.setFilterData}
         />
     );
 };

src/core/components/DataTable/filter/FilterCustom.jsx

@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+import FilterButton from "./FilterButton";
+import { Box, Drawer } from "@mui/material";
+import FilterDrawer from "../../FilterDrawer";
+
+const FilterCustom = ({ filterData, setFilterData }) => {
+    const [open, setOpen] = useState(false);
+
+    const closeDrawer = useCallback(() => setOpen(false), []);
+
+    return (
+        <>
+            <FilterButton drawerState={open} setDrawerState={setOpen} />
+            <Drawer
+                open={open}
+                onClose={() => setOpen(false)}
+                sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
+            >
+                <Box sx={{ width: { xs: 300, sm: 450 } }}>
+                    {open && (
+                        <FilterDrawer
+                            defaultValues={filterData}
+                            setFilterData={setFilterData}
+                            closeDrawer={closeDrawer}
+                        />
+                    )}
+                </Box>
+            </Drawer>
+        </>
+    );
+};
+export default FilterCustom;

src/core/components/DataTable/table/Paper.js

@@ -14,6 +14,7 @@ const DataTable_Paper = ({
     need_filter,
     table_url,
     table_title,
+    setFilterData,
     ...rest
 }) => {
     const {
@@ -86,6 +87,7 @@ const DataTable_Paper = ({
                         page_name={page_name}
                         table_name={table_name}
                         table_title={table_title}
+                        setFilterData={setFilterData}
                         {...paperProps}
                     />
                 ))}

src/core/components/DataTable/toolbar/TopToolbar.js

@@ -6,6 +6,7 @@ import FilterColumn from "@/core/components/DataTable/filter";
 import UpdateTable from "@/core/components/DataTable/update/UpdateTable";
 import ResetStorage from "@/core/components/DataTable/reset/ResetStorage";
 import HideColumn from "@/core/components/DataTable/hide";
+import FilterCustom from "../filter/FilterCustom";
 
 const DataTable_TopToolbar = ({
     mutate,
@@ -18,6 +19,8 @@ const DataTable_TopToolbar = ({
     table_name,
     table_title,
     special_data,
+    special_filter,
+    setFilterData,
 }) => {
     const {
         getState,
@@ -118,6 +121,9 @@ const DataTable_TopToolbar = ({
                                 table_name={table_name}
                             />
                         )}
+                        {special_filter && setFilterData && (
+                            <FilterCustom filterData={special_filter} setFilterData={setFilterData} />
+                        )}
                     </Box>
                 )}
             </Box>

src/core/utils/DataTableFilterDataStructure.js

@@ -1,9 +1,10 @@
 export default function DataTableFilterDataStructure(filterData, isValueEmpty) {
     return Object.values(filterData)
         .filter((filter) => !isValueEmpty(filter.value))
-        .map(({ filterMode, id, ...rest }) => ({
+        .map(({ filterMode, id, datatype, value }) => ({
-            ...rest,
             id: id.replace(/__/g, "."),
             fn: filterMode,
+            datatype,
+            value,
         }));
 }