TF-4 user management add filter on type id

public/locales/fa/app.json

@@ -18,8 +18,13 @@
     "open_profile": "پروفایل",
     "edit_profile": " پروفایل",
     "change_password": "تغییر رمز عبور",
+    "equals": "برابر",
     "logout": "خروج"
   },
+  "Select": {
+    "helper_text": "حالت فیلتر: برابر",
+    "menu_item": "نوع کاربر را وارد کنید"
+  },
   "Titles": {
     "title_login_page": "صفحه ورود",
     "title_login_expert_page": "ورود کارشناس",

src/components/dashboard/user-management/index.jsx

@@ -1,5 +1,5 @@
 import DashboardLayouts from "@/layouts/dashboardLayouts";
-import {Box, Typography} from "@mui/material";
+import {Box, FormControl, FormHelperText, IconButton, MenuItem, Select, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_USER_MANAGEMENT} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
@@ -8,148 +8,133 @@ import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
 import TableToolbar from "@/components/dashboard/user-management/TableToolbar";
 import TableRowActions from "./TableRowActions"
+import ClearIcon from "@mui/icons-material/Clear";
 
 function DashboardUserManagementComponent() {
     const t = useTranslations();
 
-    const columns = useMemo(
-        () => [
-            {
-                accessorFn: (row) => row.id,
-                id: "id",
-                header: t("UserManagement.id"),
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterFn: "equals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "between",
-                ],
-                Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
-                ),
-            },
-            {
-                accessorFn: (row) => row.navgan_id,
-                id: "navgan_id",
-                header: t("UserManagement.navgan_id"),
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: ["contains", "equals", "notEquals"],
-                Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
-                ),
-            },
-            {
-                accessorFn: (row) => row.national_id,
-                id: "national_id",
-                header: t("UserManagement.national_id"),
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterFn: "equals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "between",
-                ],
-                Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
-                ),
-            },
-            {
-                accessorFn: (row) => row.phone_number,
-                id: "phone_number",
-                header: t("UserManagement.phone_number"),
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterFn: "equals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "between",
-                ],
-                Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
-                ),
-            },
-            {
-                accessorFn: (row) =>
-                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
-                id: "created_at",
-                header: t("UserManagement.created_at"),
-                enableColumnFilter: true,
-                datatype: "date",
-                filterFn: "lessThan",
-                columnFilterModeOptions: ["lessThan", "greaterThan"],
-                Cell: ({renderedCellValue}) => {
-                    return <Typography variant="body2">{renderedCellValue}</Typography>;
-                },
-                Header: ({column}) => <>{column.columnDef.header}</>,
-                Filter: ({column}) => {
-                    return (
-                        <MuiDatePicker column={column}/>
-                    );
-                },
-            },
-            {
-                accessorFn: (row) =>
-                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
-                id: "updated_at",
-                header: t("UserManagement.updated_at"),
-                enableColumnFilter: false,
-                datatype: "numeric",
-                Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
-                ),
-            },
-            {
-                accessorFn: (row) => row.type_name,
-                id: "type_name",
-                header: t("UserManagement.type_name"),
-                enableColumnFilter: false,
-                datatype: "numeric",
-                Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
-                ),
-            },
-        ],
-        []
-    );
-    return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_USER_MANAGEMENT}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={true}
-                    CustomToolbar={TableToolbar}
-                    enableLastUpdate={true}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
-    );
+    const columns = useMemo(() => [{
+        accessorFn: (row) => row.id,
+        id: "id",
+        header: t("UserManagement.id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    }, {
+        accessorFn: (row) => row.navgan_id,
+        id: "navgan_id",
+        header: t("UserManagement.navgan_id"),
+        enableColumnFilter: true,
+        datatype: "text",
+        filterFn: "contains",
+        columnFilterModeOptions: ["contains", "equals", "notEquals"],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    }, {
+        accessorFn: (row) => row.national_id,
+        id: "national_id",
+        header: t("UserManagement.national_id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    }, {
+        accessorFn: (row) => row.phone_number,
+        id: "phone_number",
+        header: t("UserManagement.phone_number"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    }, {
+        accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+        id: "created_at",
+        header: t("UserManagement.created_at"),
+        enableColumnFilter: true,
+        datatype: "date",
+        filterFn: "lessThan",
+        columnFilterModeOptions: ["lessThan", "greaterThan"],
+        Cell: ({renderedCellValue}) => {
+            return <Typography variant="body2">{renderedCellValue}</Typography>;
+        },
+        Header: ({column}) => <>{column.columnDef.header}</>,
+        Filter: ({column}) => {
+            return (<MuiDatePicker column={column}/>);
+        },
+    }, {
+        accessorFn: (row) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+        id: "updated_at",
+        header: t("UserManagement.updated_at"),
+        enableColumnFilter: false,
+        datatype: "numeric",
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    }, {
+        accessorFn: (row) => row.type_name,
+        id: "type_id",
+        header: t("UserManagement.type_name"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals"],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        Header: ({column}) => <>{column.columnDef.header}</>,
+        Filter: ({column}) => {
+            return (<Stack direction="row" spacing={2}>
+                <FormControl fullWidth>
+                    <Select
+                        variant={'standard'}
+                        value={column.getFilterValue() ? column.getFilterValue() : 0}
+                        onChange={(e) => column.setFilterValue(e.target.value)}
+                        sx={{color: column.getFilterValue() ? 'black' : "gray"}}
+                    >
+                        <MenuItem disabled value={0}>
+                            {t("Select.menu_item")}
+                        </MenuItem>
+                        <MenuItem value={1}>{t("UpdateDialog.navgan")}</MenuItem>
+                        <MenuItem value={2}>{t("UpdateDialog.refahi")}</MenuItem>
+                    </Select>
+                    <FormHelperText>{t("Select.helper_text")}</FormHelperText>
+                </FormControl>
+                <IconButton
+                    size="small"
+                    onClick={() => {
+                        column.setFilterValue(null);
+                    }}
+                    sx={{
+                        color: column.getFilterValue() ? "rgba(0, 0, 0, 0.54)" : "#bfbfbf",
+                        height: 20
+                    }}
+                >
+                    <ClearIcon/>
+                </IconButton>
+            </Stack>)
+        }
+    },], []);
+    return (<DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_USER_MANAGEMENT}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={true}
+                CustomToolbar={TableToolbar}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
+    </DashboardLayouts>);
 }
 
 export default DashboardUserManagementComponent;