loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TF-4 user management add filter on type id

Browse Source
This commit is contained in:
Amin Ghasempoor
2023-09-11 11:18:35 +03:30
parent 48cf959e0d
commit 044b98d065
2 changed files with 129 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/locales/fa/app.json
View File

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

263
src/components/dashboard/user-management/index.jsx
View File

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