Feature/update datatable filter

src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx

@@ -6,8 +6,11 @@ import Toolbar from "./Toolbar";
 import { GET_SUPERVISOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
+import useProvinces from "@/lib/hooks/useProvince";
 
 const OperatorList = () => {
+    const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+    const citiesListApi = "https://rms.rmto.ir/public/contents/edarate_shahri_by_province";
     const columns = useMemo(
         () => [
             {
@@ -24,18 +27,38 @@ const OperatorList = () => {
                 header: "استان",
                 id: "province",
                 enableColumnFilter: true,
-                datatype: "text",
+                datatype: "numeric",
                 filterFn: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                columnSelectOption: () => {
+                    if (loadingProvinces) {
+                        return [{ value: "", label: "در حال بارگذاری..." }];
+                    }
+
+                    if (errorProvinces) {
+                        return [{ value: "", label: "خطا در بارگذاری" }];
+                    }
+
+                    return provinces.map((province) => ({
+                        value: province.id,
+                        label: province.name_fa,
+                    }));
+                },
             },
             {
                 accessorKey: "office",
                 header: "اداره",
                 id: "office",
                 enableColumnFilter: true,
-                datatype: "text",
+                datatype: "numeric",
                 filterFn: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                dependencyId: "province",
+                columnSelectOption: (dependencyField) => {
+                    if (dependencyField.value === "") {
+                        return [{ value: "", label: "ابتدا استان را انتخاب کنید" }];
+                    }
+
+                    return [{ value: dependencyField.value, label: dependencyField.value }];
+                },
             },
             {
                 accessorKey: "operator_name",
@@ -107,7 +130,7 @@ const OperatorList = () => {
                 ),
             },
         ],
-        []
+        [provinces]
     );
 
     return (

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Box, Button, Drawer, styled } from "@mui/material";
-import { Form, Formik } from "formik";
+import { Form, Formik, getIn } from "formik";
 import useTableSetting from "@/lib/hooks/useTableSetting";
 import { useEffect, useState } from "react";
 import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
@@ -110,6 +110,9 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
                                                     filterParameters={values[column.id]}
                                                     handleChange={handleChange}
                                                     handleBlur={handleBlur}
+                                                    dependencyFieldValue={
+                                                        column.dependencyId ? getIn(values, column.dependencyId) : null
+                                                    }
                                                     setFieldValue={setFieldValue}
                                                     resetForm={resetForm}
                                                     errors={errors}

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

@@ -22,6 +22,7 @@ function FilterBodyField({
     filterParameters,
     handleChange,
     handleBlur,
+    dependencyFieldValue,
     setFieldValue,
     errors,
     touched,
@@ -33,7 +34,6 @@ function FilterBodyField({
     const handleOpenFilterBox = (event) => {
         setAnchorEl(event.currentTarget);
     };
-
     return (
         <>
             {filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? (
@@ -47,12 +47,11 @@ function FilterBodyField({
                     errors={errors}
                     touched={touched}
                 />
-            ) : filterParameters.datatype === "numeric" &&
-              filterParameters.filterFn === "equals" &&
-              Array.isArray(column.columnSelectOption) ? (
+            ) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" ? (
                 <CustomSelect
                     column={column}
                     filterParameters={filterParameters}
+                    dependencyFieldValue={dependencyFieldValue}
                     setFieldValue={setFieldValue}
                     defaultFilterTranslation={defaultFilterTranslation}
                     handleOpenFilterBox={handleOpenFilterBox}

src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx

@@ -2,8 +2,8 @@
 
 import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
 
-function CustomSelect({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
-    const columnSelectOption = column.columnSelectOption;
+function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, setFieldValue }) {
+    const columnSelectOption = column.columnSelectOption(dependencyFieldValue);
 
     return (
         <FormControl fullWidth sx={{ marginY: 1 }}>