clear structure of datatable directories
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useMaterialReactTable } from "material-react-table";
|
||||
import {useMaterialReactTable} from "material-react-table";
|
||||
import DataTable_Paper from "./table/Paper";
|
||||
|
||||
const isTableInstanceProp = (props) => props.table !== undefined;
|
||||
@@ -13,7 +13,7 @@ const DataTable_Main = (props) => {
|
||||
table = useMaterialReactTable(props);
|
||||
}
|
||||
|
||||
return <DataTable_Paper table={table} />;
|
||||
return <DataTable_Paper table={table} columns={props.columns}/>;
|
||||
};
|
||||
|
||||
export default DataTable_Main;
|
||||
|
||||
58
src/core/components/DataTable/filter/BetweenNumberFilter.jsx
Normal file
58
src/core/components/DataTable/filter/BetweenNumberFilter.jsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import {Grid, TextField} from '@mui/material';
|
||||
import {useEffect} from "react";
|
||||
|
||||
const BetweenNumberFilter = ({formik, id , defaultValue}) => {
|
||||
|
||||
useEffect(() => {
|
||||
formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || '');
|
||||
formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || '');
|
||||
}, []);
|
||||
const handleBlur = (index) => () => {
|
||||
const minValue = formik.values[id][0];
|
||||
const maxValue = formik.values[id][1];
|
||||
|
||||
if (index === 0 && minValue !== '' && maxValue !== '' && parseInt(minValue) > parseInt(maxValue)) {
|
||||
formik.setFieldValue(`${id}[0]`, maxValue);
|
||||
}
|
||||
|
||||
if (index === 1 && minValue !== '' && maxValue !== '' && parseInt(maxValue) < parseInt(minValue)) {
|
||||
formik.setFieldValue(`${id}[1]`, minValue);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
name={`${id}[0]`}
|
||||
label="کمترین رقم"
|
||||
id={`${id}_min`}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={handleBlur(0)}
|
||||
fullWidth
|
||||
value={formik.values[id][0] || ''}
|
||||
margin="normal"
|
||||
sx={{
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
name={`${id}[1]`}
|
||||
label="بیشترین رقم"
|
||||
id={`${id}_max`}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={handleBlur(1)}
|
||||
fullWidth
|
||||
value={formik.values[id][1] || ''}
|
||||
margin="normal"
|
||||
sx={{
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default BetweenNumberFilter;
|
||||
@@ -0,0 +1,35 @@
|
||||
import {Grid} from '@mui/material';
|
||||
import MuiDatePicker from "@/core/components/DataTable/filter/DatePicker/MuiDatePicker";
|
||||
import {useEffect, useState} from "react";
|
||||
|
||||
const BetWeenDateFilter = ({formik, id, defaultValue}) => {
|
||||
useEffect(() => {
|
||||
formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || '');
|
||||
formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || '');
|
||||
}, []);
|
||||
|
||||
const [dateRange, setDateRange] = useState(defaultValue);
|
||||
|
||||
const handleDateChange = (index, value) => {
|
||||
const newRange = [...dateRange];
|
||||
newRange[index] = value;
|
||||
setDateRange(newRange);
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid container spacing={1} mt={1} mb={2}>
|
||||
<Grid item xs={6}>
|
||||
<MuiDatePicker label="تاریخ شروع " name={`${id}[0]`} formik={formik} defaultValue={defaultValue?.[0]}
|
||||
minDate={null} maxDate={dateRange[1]}
|
||||
onDateChange={(value) => handleDateChange(0, value)}/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<MuiDatePicker label="تاریخ پایان" name={`${id}[1]`} formik={formik} defaultValue={defaultValue?.[1]}
|
||||
minDate={dateRange[0]} maxDate={null}
|
||||
onDateChange={(value) => handleDateChange(1, value)}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default BetWeenDateFilter;
|
||||
@@ -0,0 +1,67 @@
|
||||
import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers";
|
||||
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import moment from "jalali-moment";
|
||||
import { faIR } from "@mui/x-date-pickers/locales";
|
||||
import { Box, IconButton, InputAdornment, TextField } from "@mui/material";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function MuiDatePicker({label, name, formik, defaultValue, minDate, maxDate, onDateChange }) {
|
||||
const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null);
|
||||
|
||||
return (
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
key={formik.values[name]}
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
formik.setFieldValue(name, formattedDate);
|
||||
onDateChange(formattedDate);
|
||||
setPickerValue(newValue);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: label,
|
||||
InputProps: {
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
formik.setFieldValue(name, "");
|
||||
setPickerValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: "#bfbfbf",
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(189, 189, 189, 0.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
},
|
||||
},
|
||||
}}
|
||||
value={pickerValue}
|
||||
minDate={minDate ? new Date(minDate) : null}
|
||||
maxDate={maxDate ? new Date(maxDate) : null}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
203
src/core/components/DataTable/filter/FilterColumn.jsx
Normal file
203
src/core/components/DataTable/filter/FilterColumn.jsx
Normal file
@@ -0,0 +1,203 @@
|
||||
"use client"
|
||||
import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material';
|
||||
import {useFormik} from 'formik';
|
||||
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
|
||||
import {useEffect, useState} from "react";
|
||||
import useTableSetting from "@/lib/hooks/useTableSetting";
|
||||
import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter";
|
||||
import BetWeenDateFilter from "@/core/components/DataTable/filter/DatePicker/BetweenDateFilter";
|
||||
import SelectBoxMultiple from "@/core/components/DataTable/filter/SelectBoxMultiple";
|
||||
import SelectBox from "@/core/components/DataTable/filter/SelectBox";
|
||||
import FilterAltIcon from '@mui/icons-material/FilterAlt';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
function FilterColumn({columns}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedFilters, setSelectedFilters] = useState([]);
|
||||
const [userId, setUserId] = useState(2);
|
||||
const [pageName, setPageName] = useState('loan');
|
||||
const [tableName, setTableName] = useState('loan_table');
|
||||
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
|
||||
|
||||
const DrawerHeader = styled('div')(({theme}) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(0, 1),
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
const toggleDrawer = (newOpen) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
|
||||
setSelectedFilters(settingValue.length > 0 ? settingValue : []);
|
||||
}, [settingStore]);
|
||||
|
||||
const handleSelectFilter = (fieldName, filterFn) => {
|
||||
const filterIndex = selectedFilters.findIndex(filter => filter.id === fieldName);
|
||||
|
||||
if (filterIndex !== -1) {
|
||||
const updatedFilters = [...selectedFilters];
|
||||
updatedFilters[filterIndex].fn = filterFn;
|
||||
setSelectedFilters(updatedFilters);
|
||||
} else {
|
||||
const newFilter = {id: fieldName, fn: filterFn};
|
||||
const updatedFilters = [...selectedFilters, newFilter];
|
||||
setSelectedFilters(updatedFilters);
|
||||
}
|
||||
};
|
||||
|
||||
const initialValues = columns.reduce((acc, column) => {
|
||||
if (column.enableColumnFilter) {
|
||||
const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
|
||||
if (column.filterFn === 'betweenNum' || column.filterFn === 'betweenDate') {
|
||||
acc[column.id] = filter?.value || ["", ""];
|
||||
} else if (column.type === 'select2') {
|
||||
acc[column.id] = filter?.value || [];
|
||||
} else {
|
||||
acc[column.id] = filter?.value || '';
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues,
|
||||
onSubmit: (values) => {
|
||||
const updatedFilters = selectedFilters.map(filter => {
|
||||
const value = values[filter.id];
|
||||
if (value !== undefined) {
|
||||
return {...filter, value};
|
||||
}
|
||||
return filter;
|
||||
});
|
||||
Object.entries(values).forEach(([fieldName, value]) => {
|
||||
const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName);
|
||||
if (filterIndex === -1 && value !== '' && value !== null && value !== undefined) {
|
||||
const column = columns.find(col => col.id === fieldName);
|
||||
updatedFilters.push({id: fieldName, value, fn: column.filterFn, datatype: column.datatype});
|
||||
}
|
||||
});
|
||||
|
||||
const newArrayFilter = updatedFilters.filter((filter) => {
|
||||
const value = values[filter.id];
|
||||
|
||||
return (
|
||||
value !== '' &&
|
||||
value !== null &&
|
||||
value !== undefined &&
|
||||
!(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value.every((v) => v === ''))))
|
||||
);
|
||||
});
|
||||
|
||||
setSelectedFilters(newArrayFilter);
|
||||
filterAction(userId, pageName, tableName, newArrayFilter, columns);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="فیلتر">
|
||||
<IconButton onClick={toggleDrawer(true)} aria-label="filter table">
|
||||
<FilterAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Drawer open={open} onClose={toggleDrawer(false)}
|
||||
sx={{
|
||||
"& .MuiDrawer-paper": {
|
||||
padding: '16px',
|
||||
overflowY: 'auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
scrollbarWidth: 'thin',
|
||||
width: 450,
|
||||
"&::-webkit-scrollbar": {
|
||||
width: '8px',
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
backgroundColor: '#ccc',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
width: '100%'
|
||||
},
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DrawerHeader>
|
||||
<Typography variant="h6" mb={2}>فیلتر</Typography>
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
<CloseIcon/>
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column'}}>
|
||||
<FormControl fullWidth>
|
||||
{columns.map((column, index) => (
|
||||
column.enableColumnFilter &&
|
||||
(column.filterFn === 'betweenDate' ?
|
||||
<BetWeenDateFilter
|
||||
key={index}
|
||||
id={column.id}
|
||||
formik={formik}
|
||||
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
|
||||
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
|
||||
/>
|
||||
: column.filterFn === 'betweenNum' ?
|
||||
<BetweenNumberFilter
|
||||
key={index}
|
||||
id={column.id}
|
||||
formik={formik}
|
||||
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
|
||||
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]}
|
||||
/>
|
||||
: column.type === 'select2' ?
|
||||
<SelectBoxMultiple
|
||||
key={index}
|
||||
id={column.id}
|
||||
formik={formik}
|
||||
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
|
||||
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
|
||||
/>
|
||||
: column.type === 'select' ?
|
||||
<SelectBox
|
||||
key={index}
|
||||
id={column.id}
|
||||
formik={formik}
|
||||
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
|
||||
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
|
||||
/>
|
||||
:
|
||||
<TextFieldWithFnBox
|
||||
key={index}
|
||||
id={column.id}
|
||||
header={column.header}
|
||||
formik={formik}
|
||||
defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column.filterFn}
|
||||
columnFilterModeOptions={column.columnFilterModeOptions}
|
||||
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
|
||||
defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
|
||||
/>
|
||||
)
|
||||
))}
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box sx={{mt: 2}}>
|
||||
<Divider/>
|
||||
<Box sx={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
|
||||
<Button variant="contained" size="medium" onClick={formik.handleSubmit}
|
||||
sx={{mt: 1}}>ثبت</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FilterColumn;
|
||||
|
||||
|
||||
53
src/core/components/DataTable/filter/SelectBox.jsx
Normal file
53
src/core/components/DataTable/filter/SelectBox.jsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
import {useEffect, useState} from "react";
|
||||
const names = [
|
||||
'Oliver Hansen',
|
||||
'Van Henry',
|
||||
'April Tucker',
|
||||
'Ralph Hubbard',
|
||||
'Omar Alexander',
|
||||
'Carlos Abbott',
|
||||
'Miriam Wagner',
|
||||
'Bradley Wilkerson',
|
||||
'Virginia Andrews',
|
||||
'Kelly Snyder',
|
||||
];
|
||||
const SelectBox = ({ formik, id, defaultValue }) => {
|
||||
|
||||
useEffect(() => {
|
||||
formik.setFieldValue(id, defaultValue || '');
|
||||
}, []);
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState(defaultValue || '');
|
||||
|
||||
const handleChange = (event) => {
|
||||
const { value } = event.target;
|
||||
setSelectedValue(value);
|
||||
formik.setFieldValue(id, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormControl sx={{ mt: 3 }}>
|
||||
<InputLabel>انتخاب</InputLabel>
|
||||
<Select
|
||||
id={id}
|
||||
value={selectedValue}
|
||||
onChange={handleChange}
|
||||
label="انتخاب"
|
||||
>
|
||||
{names.map((name) => (
|
||||
<MenuItem key={name} value={name}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectBox;
|
||||
116
src/core/components/DataTable/filter/SelectBoxMultiple.jsx
Normal file
116
src/core/components/DataTable/filter/SelectBoxMultiple.jsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import {useTheme} from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import {useEffect, useState} from "react";
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const names = [
|
||||
'Oliver Hansen',
|
||||
'Van Henry',
|
||||
'April Tucker',
|
||||
'Ralph Hubbard',
|
||||
'Omar Alexander',
|
||||
'Carlos Abbott',
|
||||
'Miriam Wagner',
|
||||
'Bradley Wilkerson',
|
||||
'Virginia Andrews',
|
||||
'Kelly Snyder',
|
||||
];
|
||||
|
||||
function getStyles(name, personName, theme) {
|
||||
return {
|
||||
fontWeight:
|
||||
personName.indexOf(name) === -1
|
||||
? theme.typography.fontWeightRegular
|
||||
: theme.typography.fontWeightMedium,
|
||||
};
|
||||
}
|
||||
|
||||
const SelectBoxMultiple = ({formik, id, defaultValue}) => {
|
||||
const theme = useTheme();
|
||||
const [personName, setPersonName] = useState(defaultValue || []);
|
||||
|
||||
useEffect(() => {
|
||||
defaultValue.forEach((value, index) => {
|
||||
formik.setFieldValue(`${id}[${index}]`, value || '');
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const {
|
||||
target: {value},
|
||||
} = event;
|
||||
|
||||
const selectedValues = typeof value === 'string' ? value.split(',').filter(item => item.trim() !== '') : value;
|
||||
|
||||
formik.setFieldValue(id, []);
|
||||
|
||||
if (selectedValues.length === 0) {
|
||||
setPersonName([]);
|
||||
formik.setFieldValue(id, []);
|
||||
} else {
|
||||
setPersonName(selectedValues);
|
||||
selectedValues.forEach((selectedValue, index) => {
|
||||
formik.setFieldValue(`${id}[${index}]`, selectedValue);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormControl sx={{width: '100%'}}>
|
||||
<InputLabel id={id}>انتخاب</InputLabel>
|
||||
<Select
|
||||
id={id}
|
||||
multiple
|
||||
value={personName}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput label="Chip"/>}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value}/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
MenuProps={MenuProps}
|
||||
sx={{
|
||||
"&.MuiSelect-select": {
|
||||
minWidth: 0,
|
||||
maxWidth: '100%',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{names.map((name) => (
|
||||
<MenuItem
|
||||
key={name}
|
||||
value={name}
|
||||
style={getStyles(name, personName, theme)}
|
||||
>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectBoxMultiple;
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Popper, Paper, List, ListItem, ListItemText, ClickAwayListener } from '@mui/material';
|
||||
|
||||
function FilterBox({anchorEl , open = false, handleClose = () => {} , columnFilterModeOptions , onSelectFilter , defaultFilter}) {
|
||||
|
||||
const id = open ? 'simple-popper' : undefined;
|
||||
const handleSelectFilter = (filterFn) => {
|
||||
onSelectFilter(filterFn);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{ zIndex: 1301 }}>
|
||||
<ClickAwayListener onClickAway={handleClose}>
|
||||
<Paper>
|
||||
<List>
|
||||
{columnFilterModeOptions.map((option, index) => (
|
||||
<ListItem key={index} onClick={() => handleSelectFilter(option)} selected={option === defaultFilter} sx={{ cursor: 'pointer' }}>
|
||||
<ListItemText primary={option} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Paper>
|
||||
</ClickAwayListener>
|
||||
</Popper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FilterBox;
|
||||
@@ -0,0 +1,61 @@
|
||||
import {IconButton, TextField} from '@mui/material';
|
||||
import ArtTrackIcon from '@mui/icons-material/ArtTrack';
|
||||
import {useEffect, useState} from "react";
|
||||
import FilterBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox";
|
||||
|
||||
const TextFieldWithFnBox = ({
|
||||
formik,
|
||||
id,
|
||||
header,
|
||||
defaultValue,
|
||||
defaultFilter,
|
||||
columnFilterModeOptions,
|
||||
onSelectFilter
|
||||
}) => {
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
formik.setFieldValue(id, defaultValue || '');
|
||||
}, []);
|
||||
|
||||
const handleClick = (event) => {
|
||||
setOpen((prevOpen) => !prevOpen);
|
||||
setAnchorEl(anchorEl ? null : event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextField
|
||||
name={id}
|
||||
label={header}
|
||||
id={id}
|
||||
onChange={formik.handleChange}
|
||||
fullWidth
|
||||
value={formik.values[id]}
|
||||
margin="normal"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<IconButton onClick={handleClick}>
|
||||
<ArtTrackIcon/>
|
||||
</IconButton>
|
||||
)
|
||||
}}
|
||||
sx={{
|
||||
position: 'relative'
|
||||
}}
|
||||
/>
|
||||
<FilterBox anchorEl={anchorEl} open={open} handleClose={handleClose}
|
||||
columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter}
|
||||
defaultFilter={defaultFilter}/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TextFieldWithFnBox;
|
||||
@@ -1,123 +1,122 @@
|
||||
import { useMaterialReactTable } from "material-react-table";
|
||||
import {useMaterialReactTable} from "material-react-table";
|
||||
import DataTable_Main from "./Main";
|
||||
import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
|
||||
import CustomToolbar from "@/components/CustomToolbar";
|
||||
import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable";
|
||||
import useTableSetting from "@/lib/hooks/useTableSetting";
|
||||
import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
|
||||
import Toolbar from "@/components/home/Toolbar";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
{
|
||||
name: {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
},
|
||||
address: '261 Erdman Ford',
|
||||
city: 'East Daphne',
|
||||
state: 'Kentucky',
|
||||
},
|
||||
address: '261 Erdman Ford',
|
||||
city: 'East Daphne',
|
||||
state: 'Kentucky',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
firstName: 'Jane',
|
||||
lastName: 'Doe',
|
||||
{
|
||||
name: {
|
||||
firstName: 'Jane',
|
||||
lastName: 'Doe',
|
||||
},
|
||||
address: '769 Dominic Grove',
|
||||
city: 'Columbus',
|
||||
state: 'Ohio',
|
||||
},
|
||||
address: '769 Dominic Grove',
|
||||
city: 'Columbus',
|
||||
state: 'Ohio',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
firstName: 'Joe',
|
||||
lastName: 'Doe',
|
||||
{
|
||||
name: {
|
||||
firstName: 'Joe',
|
||||
lastName: 'Doe',
|
||||
},
|
||||
address: '566 Brakus Inlet',
|
||||
city: 'South Linda',
|
||||
state: 'West Virginia',
|
||||
},
|
||||
address: '566 Brakus Inlet',
|
||||
city: 'South Linda',
|
||||
state: 'West Virginia',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
firstName: 'Kevin',
|
||||
lastName: 'Vandy',
|
||||
{
|
||||
name: {
|
||||
firstName: 'Kevin',
|
||||
lastName: 'Vandy',
|
||||
},
|
||||
address: '722 Emie Stream',
|
||||
city: 'Lincoln',
|
||||
state: 'Nebraska',
|
||||
},
|
||||
address: '722 Emie Stream',
|
||||
city: 'Lincoln',
|
||||
state: 'Nebraska',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
firstName: 'Joshua',
|
||||
lastName: 'Rolluffs',
|
||||
{
|
||||
name: {
|
||||
firstName: 'Joshua',
|
||||
lastName: 'Rolluffs',
|
||||
},
|
||||
address: '32188 Larkin Turnpike',
|
||||
city: 'Charleston',
|
||||
state: 'South Carolina',
|
||||
},
|
||||
address: '32188 Larkin Turnpike',
|
||||
city: 'Charleston',
|
||||
state: 'South Carolina',
|
||||
},
|
||||
];
|
||||
|
||||
const DataTable = (props) => {
|
||||
const { userId, pageName, tableName, columns, initialStateProps } = props
|
||||
const { settingStore, hideAction, sortAction } = useTableSetting();
|
||||
const flatColumns = flattenArrayOfObjects(columns,'columns')
|
||||
const {userId, pageName, tableName, columns, initialStateProps} = props
|
||||
const {settingStore, hideAction, sortAction} = useTableSetting();
|
||||
const flatColumns = flattenArrayOfObjects(columns, 'columns')
|
||||
|
||||
const onColumnVisibilityChange = (event) => {
|
||||
const settingValue = event();
|
||||
hideAction(userId, pageName, tableName, settingValue, flatColumns);
|
||||
};
|
||||
const onSortingChange = (event) => {
|
||||
const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
|
||||
sortAction(userId, pageName, tableName, settingValue, flatColumns);
|
||||
}
|
||||
const onColumnVisibilityChange = (event) => {
|
||||
const settingValue = event();
|
||||
hideAction(userId, pageName, tableName, settingValue, flatColumns);
|
||||
};
|
||||
const onSortingChange = (event) => {
|
||||
const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
|
||||
sortAction(userId, pageName, tableName, settingValue, flatColumns);
|
||||
}
|
||||
|
||||
|
||||
const table = useMaterialReactTable({
|
||||
localization: FA_DATATABLE_LOCALIZATION,
|
||||
columns,
|
||||
data: data,
|
||||
// manualSorting: true,
|
||||
renderTopToolbarCustomActions: ({ table }) => (<>
|
||||
<CustomToolbar
|
||||
columns={flatColumns}
|
||||
/>
|
||||
</>),
|
||||
initialState: {
|
||||
density: 'compact',
|
||||
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
|
||||
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
|
||||
...initialStateProps
|
||||
},
|
||||
state: {
|
||||
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
|
||||
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
|
||||
},
|
||||
muiTableHeadProps: {
|
||||
sx: {
|
||||
borderTop: "1px solid #e1e1e1",
|
||||
borderBottom: "2px solid #e1e1e1",
|
||||
}
|
||||
},
|
||||
muiTableHeadCellProps: {
|
||||
sx: {
|
||||
color: "primary.main",
|
||||
borderLeft: "1px solid #e1e1e1",
|
||||
"&:first-of-type": {
|
||||
borderLeft: "unset"
|
||||
}
|
||||
},
|
||||
},
|
||||
muiTableBodyCellProps: {
|
||||
sx: {
|
||||
borderLeft: "1px solid #e1e1e1",
|
||||
"&:first-of-type": {
|
||||
borderLeft: "unset"
|
||||
}
|
||||
},
|
||||
},
|
||||
onColumnVisibilityChange: onColumnVisibilityChange,
|
||||
onSortingChange: onSortingChange,
|
||||
...props
|
||||
})
|
||||
const table = useMaterialReactTable({
|
||||
localization: FA_DATATABLE_LOCALIZATION,
|
||||
columns,
|
||||
data: data,
|
||||
// manualSorting: true,
|
||||
renderTopToolbarCustomActions: ({table}) => (<>
|
||||
<Toolbar
|
||||
columns={flatColumns}
|
||||
/>
|
||||
</>),
|
||||
initialState: {
|
||||
density: 'compact',
|
||||
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
|
||||
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
|
||||
...initialStateProps
|
||||
},
|
||||
state: {
|
||||
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
|
||||
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
|
||||
},
|
||||
muiTableHeadProps: {
|
||||
sx: {
|
||||
borderTop: "1px solid #e1e1e1",
|
||||
borderBottom: "2px solid #e1e1e1",
|
||||
}
|
||||
},
|
||||
muiTableHeadCellProps: {
|
||||
sx: {
|
||||
color: "primary.main",
|
||||
borderLeft: "1px solid #e1e1e1",
|
||||
"&:first-of-type": {
|
||||
borderLeft: "unset"
|
||||
}
|
||||
},
|
||||
},
|
||||
muiTableBodyCellProps: {
|
||||
sx: {
|
||||
borderLeft: "1px solid #e1e1e1",
|
||||
"&:first-of-type": {
|
||||
borderLeft: "unset"
|
||||
}
|
||||
},
|
||||
},
|
||||
onColumnVisibilityChange: onColumnVisibilityChange,
|
||||
onSortingChange: onSortingChange,
|
||||
...props
|
||||
})
|
||||
|
||||
|
||||
return <DataTable_Main table={table} />;
|
||||
return <DataTable_Main table={table} columns={columns}/>;
|
||||
};
|
||||
|
||||
export default DataTable;
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
import { parseFromValuesOrFunc } from "@/core/utils/utils";
|
||||
import { Paper } from "@mui/material";
|
||||
import {parseFromValuesOrFunc} from "@/core/utils/utils";
|
||||
import {Paper} from "@mui/material";
|
||||
import DataTable_BottomToolbar from "../toolbar/BottomToolbar";
|
||||
import DataTable_TopToolbar from "../toolbar/TopToolbar";
|
||||
import DataTable_TableContainer from "./TableContainer";
|
||||
|
||||
const DataTable_Paper = ({ table, ...rest }) => {
|
||||
const {
|
||||
getState,
|
||||
options: {
|
||||
enableBottomToolbar,
|
||||
enableTopToolbar,
|
||||
mrtTheme: { baseBackgroundColor },
|
||||
muiTablePaperProps,
|
||||
renderBottomToolbar,
|
||||
renderTopToolbar,
|
||||
},
|
||||
refs: { tablePaperRef },
|
||||
} = table;
|
||||
const DataTable_Paper = ({table, ...rest}) => {
|
||||
const {
|
||||
getState,
|
||||
options: {
|
||||
enableBottomToolbar,
|
||||
enableTopToolbar,
|
||||
mrtTheme: {baseBackgroundColor},
|
||||
muiTablePaperProps,
|
||||
renderBottomToolbar,
|
||||
renderTopToolbar,
|
||||
},
|
||||
refs: {tablePaperRef},
|
||||
} = table;
|
||||
|
||||
const { isFullScreen } = getState();
|
||||
const {isFullScreen} = getState();
|
||||
|
||||
const paperProps = {
|
||||
...parseFromValuesOrFunc(muiTablePaperProps, { table }),
|
||||
...rest,
|
||||
};
|
||||
const paperProps = {
|
||||
...parseFromValuesOrFunc(muiTablePaperProps, {table}),
|
||||
...rest,
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
{...paperProps}
|
||||
ref={(ref) => {
|
||||
tablePaperRef.current = ref;
|
||||
if (paperProps?.ref) {
|
||||
//@ts-ignore
|
||||
paperProps.ref.current = ref;
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
...(isFullScreen
|
||||
? {
|
||||
bottom: 0,
|
||||
height: '100dvh',
|
||||
left: 0,
|
||||
margin: 0,
|
||||
maxHeight: '100dvh',
|
||||
maxWidth: '100dvw',
|
||||
padding: 0,
|
||||
position: 'fixed',
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: '100dvw',
|
||||
zIndex: 999,
|
||||
}
|
||||
: {}),
|
||||
...paperProps?.style,
|
||||
}}
|
||||
sx={(theme) => ({
|
||||
backgroundColor: baseBackgroundColor,
|
||||
backgroundImage: 'unset',
|
||||
overflow: 'hidden',
|
||||
transition: 'all 100ms ease-in-out',
|
||||
...(parseFromValuesOrFunc(paperProps?.sx, theme)),
|
||||
})}
|
||||
>
|
||||
{enableTopToolbar &&
|
||||
(parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
|
||||
<DataTable_TopToolbar table={table} />
|
||||
))}
|
||||
<DataTable_TableContainer table={table} />
|
||||
{enableBottomToolbar &&
|
||||
(parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
|
||||
<DataTable_BottomToolbar table={table} />
|
||||
))}
|
||||
</Paper>
|
||||
);
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
{...paperProps}
|
||||
ref={(ref) => {
|
||||
tablePaperRef.current = ref;
|
||||
if (paperProps?.ref) {
|
||||
//@ts-ignore
|
||||
paperProps.ref.current = ref;
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
...(isFullScreen
|
||||
? {
|
||||
bottom: 0,
|
||||
height: '100dvh',
|
||||
left: 0,
|
||||
margin: 0,
|
||||
maxHeight: '100dvh',
|
||||
maxWidth: '100dvw',
|
||||
padding: 0,
|
||||
position: 'fixed',
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: '100dvw',
|
||||
zIndex: 999,
|
||||
}
|
||||
: {}),
|
||||
...paperProps?.style,
|
||||
}}
|
||||
sx={(theme) => ({
|
||||
backgroundColor: baseBackgroundColor,
|
||||
backgroundImage: 'unset',
|
||||
overflow: 'hidden',
|
||||
transition: 'all 100ms ease-in-out',
|
||||
...(parseFromValuesOrFunc(paperProps?.sx, theme)),
|
||||
})}
|
||||
>
|
||||
{enableTopToolbar &&
|
||||
(parseFromValuesOrFunc(renderTopToolbar, {table}) ?? (
|
||||
<DataTable_TopToolbar table={table} columns={paperProps.columns}/>
|
||||
))}
|
||||
<DataTable_TableContainer table={table}/>
|
||||
{enableBottomToolbar &&
|
||||
(parseFromValuesOrFunc(renderBottomToolbar, {table}) ?? (
|
||||
<DataTable_BottomToolbar table={table}/>
|
||||
))}
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
export default DataTable_Paper;
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
|
||||
import { Box, useMediaQuery } from "@mui/material";
|
||||
import {getCommonToolbarStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
|
||||
import {Box, useMediaQuery} from "@mui/material";
|
||||
import DataTable_LinearProgressBar from "./LinearProgressBar";
|
||||
import DataTable_TablePagination from "./TablePagination";
|
||||
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
|
||||
import FilterColumn from "@/core/components/DataTable/filter/FilterColumn";
|
||||
|
||||
const DataTable_TopToolbar = ({ table }) => {
|
||||
const DataTable_TopToolbar = ({table, columns}) => {
|
||||
const {
|
||||
getState,
|
||||
options: {
|
||||
@@ -14,14 +15,14 @@ const DataTable_TopToolbar = ({ table }) => {
|
||||
positionPagination,
|
||||
renderTopToolbarCustomActions,
|
||||
},
|
||||
refs: { topToolbarRef },
|
||||
refs: {topToolbarRef},
|
||||
} = table;
|
||||
const { isFullScreen, showGlobalFilter } = getState();
|
||||
const {isFullScreen, showGlobalFilter} = getState();
|
||||
|
||||
const isMobile = useMediaQuery('(max-width:720px)');
|
||||
const isTablet = useMediaQuery('(max-width:1024px)');
|
||||
|
||||
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
|
||||
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, {table});
|
||||
|
||||
const stackAlertBanner =
|
||||
isMobile ||
|
||||
@@ -39,7 +40,7 @@ const DataTable_TopToolbar = ({ table }) => {
|
||||
}
|
||||
}}
|
||||
sx={(theme) => ({
|
||||
...getCommonToolbarStyles({ table, theme }),
|
||||
...getCommonToolbarStyles({table, theme}),
|
||||
position: isFullScreen ? 'sticky' : 'relative',
|
||||
top: isFullScreen ? '0' : undefined,
|
||||
...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
|
||||
@@ -59,7 +60,7 @@ const DataTable_TopToolbar = ({ table }) => {
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{renderTopToolbarCustomActions?.({ table }) ?? <span />}
|
||||
{renderTopToolbarCustomActions?.({table}) ?? <span/>}
|
||||
{enableToolbarInternalActions && (
|
||||
<Box
|
||||
sx={{
|
||||
@@ -70,15 +71,16 @@ const DataTable_TopToolbar = ({ table }) => {
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<DataTable_ToolbarInternalButtons table={table} />
|
||||
<FilterColumn columns={columns}/>
|
||||
<DataTable_ToolbarInternalButtons table={table}/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
{enablePagination &&
|
||||
['both', 'top'].includes(positionPagination ?? '') && (
|
||||
<DataTable_TablePagination position="top" table={table} />
|
||||
<DataTable_TablePagination position="top" table={table}/>
|
||||
)}
|
||||
<DataTable_LinearProgressBar isTopToolbar table={table} />
|
||||
<DataTable_LinearProgressBar isTopToolbar table={table}/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user