RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clear structure of datatable directories

Browse Source
This commit is contained in:
Mohammad Jalali
2024-04-29 16:35:27 +03:30
parent 886a5a88a2
commit 0445fc8331
18 changed files with 321 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/app/page.js
View File

@@ -1,148 +1,8 @@
'use client' 'use client'
import DataTable from "@/core/components/DataTable"; import HomeComponent from "@/components/home";
import { useMemo } from "react";
function Page() { function Page() {
const columns = useMemo( return <HomeComponent/>;
() => [
{
accessorKey: 'fullname',
header: 'نام کامل',
id: "fullname",
columns: [
{
accessorKey: 'name.firstName',
header: 'نام',
id: "firstName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
enableClickToCopy: true,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'name.lastName',
header: 'نام خانوادگی',
id: "lastName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
],
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'address',
header: 'آدرس',
id: "address",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'city',
header: 'شهر',
id: "city",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
},
{
accessorKey: 'state',
header: 'وضعیت',
id: "state",
text: 'نام',
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'state',
header: 'محدوده',
id: "betweenNum",
text: 'محدوده',
enableColumnFilter: true,
datatype: "text",
filterFn: "betweenNum",
columnFilterModeOptions: [],
},
{
accessorKey: 'state',
header: 'تاریخ',
id: "betweenDate",
text: 'تاریخ',
enableColumnFilter: true,
datatype: "text",
filterFn: "betweenDate",
columnFilterModeOptions: [],
},
{
accessorKey: 'state',
header: 'شلکت',
id: "select2",
text: 'تاریخ',
type: 'select2',
enableColumnFilter: true,
datatype: "text",
filterFn: "equals",
columnFilterModeOptions: [],
},
{
accessorKey: 'state',
header: 'سلکت',
id: "select",
text: 'تنتنت',
type: 'select',
enableColumnFilter: true,
datatype: "text",
filterFn: "equals",
columnFilterModeOptions: [],
},
],
[],
);
return (
<>
<DataTable columns={columns} userId={0} pageName={'testPage'} tableName={'testTable'} />
</>
);
} }
export default Page; export default Page;

20
src/components/CustomToolbar.jsx
View File

@@ -1,20 +0,0 @@
import FilterColumn from "@/components/FilterColumn";
const CustomToolbar = ({columns}) => {
return (
<FilterColumn columns={columns}/>
)
}
export default CustomToolbar

104
src/components/DataTableTest.jsx
View File

@@ -1,104 +0,0 @@
"use client"
import {useMemo, useState} from 'react';
import {MaterialReactTable} from 'material-react-table';
import useTableSetting from "@/lib/hooks/useTableSetting";
import {IconButton, Tooltip, Typography} from "@mui/material";
import CustomToolbar from "@/components/CustomToolbar";
const data = [
{
name: {
firstName: 'John',
lastName: 'Doe',
},
address: '261 Erdman Ford',
city: 'East Daphne',
state: 'Kentucky',
},
{
name: {
firstName: 'Jane',
lastName: 'Doe',
},
address: '769 Dominic Grove',
city: 'Columbus',
state: 'Ohio',
},
{
name: {
firstName: 'Joe',
lastName: 'Doe',
},
address: '566 Brakus Inlet',
city: 'South Linda',
state: 'West Virginia',
},
{
name: {
firstName: 'Kevin',
lastName: 'Vandy',
},
address: '722 Emie Stream',
city: 'Lincoln',
state: 'Nebraska',
},
{
name: {
firstName: 'Joshua',
lastName: 'Rolluffs',
},
address: '32188 Larkin Turnpike',
city: 'Charleston',
state: 'South Carolina',
},
];
function RefreshIcon() {
return null;
}
const TestDataTable = ({columns}) => {
const [userId, setUserId] = useState(2);
const [pageName, setPageName] = useState('loan');
const [tableName, setTableName] = useState('loan_table');
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
const onColumnVisibilityChange = (event) => {
const settingValue = event();
hideAction(userId, pageName, tableName, settingValue, columns);
};
const onSortingChange = (event) => {
const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
sortAction(userId, pageName, tableName, settingValue, columns);
}
return (
<>
<Typography>{settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']}</Typography>
<MaterialReactTable
columns={columns}
data={data}
manualSorting={true}
renderTopToolbarCustomActions={({table}) => (<>
<CustomToolbar
columns={columns}
/>
</>)}
initialState={{
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
}}
state={{
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
}}
onColumnVisibilityChange={onColumnVisibilityChange}
onSortingChange={onSortingChange}
/>
</>
);
};
export default TestDataTable;

41
src/components/MapTest.jsx
View File

@@ -1,41 +0,0 @@
"use client"
import {Typography} from "@mui/material";
const data = [
{
id : "hello",
Subitems : [
{id : "amin",firstName : "amin", lastName:"ali",Subitems : [{id : "shahrokh",shahrokh : "shahrokh"}], hasSubitems : true, showSubitems : false},
{id : "amir",firstName : "amir", lastName:"akbar", hasSubitems : false, showSubitems : false},
],
hasSubitems : true,
showSubitems : false
},
{
id : "hi",
Subitems : [
{id : "ali",firstName : "ali", lastName:"ali", hasSubitems : false, showSubitems : false},
{id : "akbar",firstName : "akbar", lastName:"akbar", hasSubitems : false, showSubitems : false},
],
hasSubitems : true,
showSubitems : false
}
]
const MapTest = () => {
const Amin = data.map((item) => {
return item.hasSubitems ? {...item, Subitems: item.Subitems.map((subitem) => true ? {
...subitem, showSubitems: !item.showSubitems
} : subitem)} : item
})
console.log(Amin)
return (
<>
<Typography>hello</Typography>
</>
)
}
export default MapTest

20
src/components/home/Toolbar.jsx Normal file
View File

@@ -0,0 +1,20 @@
import {Button} from "@mui/material";
const Toolbar = ({columns}) => {
return (
<Button>add something</Button>
)
}
export default Toolbar

77
src/components/DataTableMain.jsx → src/components/home/index.jsx
View File

@@ -1,30 +1,43 @@
import DataTableTest from "@/components/DataTableTest"; 'use client'
import FilterColumn from "@/components/FilterColumn"; import DataTable from "@/core/components/DataTable";
import {useMemo} from "react"; import {useMemo} from "react";
import {Button} from "@mui/material";
function DataTableMain() { function HomeComponent() {
const columns = useMemo( const columns = useMemo(
() => [ () => [
{ {
accessorKey: 'name.firstName', accessorKey: 'fullname',
header: 'نام', header: 'نام کامل',
size: 150, id: "fullname",
id: "firstName", columns: [
enableColumnFilter: true, {
datatype: "text", accessorKey: 'name.firstName',
filterFn: "contains", header: 'نام',
columnFilterModeOptions: [ id: "firstName",
"equals", enableColumnFilter: true,
"notEquals", datatype: "text",
"contains" filterFn: "contains",
enableClickToCopy: true,
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'name.lastName',
header: 'نام خانوادگی',
id: "lastName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
], ],
},
{
accessorKey: 'name.lastName',
header: 'نام خانوادگی',
size: 150,
id: "lastName",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "contains",
@@ -37,7 +50,6 @@ function DataTableMain() {
{ {
accessorKey: 'address', accessorKey: 'address',
header: 'آدرس', header: 'آدرس',
size: 200,
id: "address", id: "address",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
@@ -51,7 +63,6 @@ function DataTableMain() {
{ {
accessorKey: 'city', accessorKey: 'city',
header: 'شهر', header: 'شهر',
size: 150,
id: "city", id: "city",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
@@ -69,9 +80,8 @@ function DataTableMain() {
{ {
accessorKey: 'state', accessorKey: 'state',
header: 'وضعیت', header: 'وضعیت',
size: 150,
id: "state", id: "state",
text:'نام', text: 'نام',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "contains",
@@ -84,9 +94,8 @@ function DataTableMain() {
{ {
accessorKey: 'state', accessorKey: 'state',
header: 'محدوده', header: 'محدوده',
size: 150,
id: "betweenNum", id: "betweenNum",
text:'محدوده', text: 'محدوده',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "betweenNum", filterFn: "betweenNum",
@@ -95,9 +104,8 @@ function DataTableMain() {
{ {
accessorKey: 'state', accessorKey: 'state',
header: 'تاریخ', header: 'تاریخ',
size: 150,
id: "betweenDate", id: "betweenDate",
text:'تاریخ', text: 'تاریخ',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "betweenDate", filterFn: "betweenDate",
@@ -106,9 +114,8 @@ function DataTableMain() {
{ {
accessorKey: 'state', accessorKey: 'state',
header: 'شلکت', header: 'شلکت',
size: 150,
id: "select2", id: "select2",
text:'تاریخ', text: 'تاریخ',
type: 'select2', type: 'select2',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
@@ -118,9 +125,8 @@ function DataTableMain() {
{ {
accessorKey: 'state', accessorKey: 'state',
header: 'سلکت', header: 'سلکت',
size: 150,
id: "select", id: "select",
text:'تنتنت', text: 'تنتنت',
type: 'select', type: 'select',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
@@ -130,12 +136,13 @@ function DataTableMain() {
], ],
[], [],
); );
return ( return (
<> <>
<DataTableTest columns={columns}/> <DataTable columns={columns} userId={0} pageName={'testPage'} tableName={'testTable'}/>
</> </>
); );
} }
export default DataTableMain; export default HomeComponent;

4
src/core/components/DataTable/Main.js
View File

@@ -1,4 +1,4 @@
import { useMaterialReactTable } from "material-react-table"; import {useMaterialReactTable} from "material-react-table";
import DataTable_Paper from "./table/Paper"; import DataTable_Paper from "./table/Paper";
const isTableInstanceProp = (props) => props.table !== undefined; const isTableInstanceProp = (props) => props.table !== undefined;
@@ -13,7 +13,7 @@ const DataTable_Main = (props) => {
table = useMaterialReactTable(props); table = useMaterialReactTable(props);
} }
return <DataTable_Paper table={table} />; return <DataTable_Paper table={table} columns={props.columns}/>;
}; };
export default DataTable_Main; export default DataTable_Main;

0
src/components/BetweenNumberFilter.jsx → src/core/components/DataTable/filter/BetweenNumberFilter.jsx
View File

14
src/components/BetweenDateFilter.jsx → src/core/components/DataTable/filter/DatePicker/BetweenDateFilter.jsx
View File

@@ -1,8 +1,8 @@
import {Grid} from '@mui/material'; import {Grid} from '@mui/material';
import MuiDatePicker from "@/components/MuiDatePicker"; import MuiDatePicker from "@/core/components/DataTable/filter/DatePicker/MuiDatePicker";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
const BetWeenDateFilter = ({formik, id , defaultValue}) => { const BetWeenDateFilter = ({formik, id, defaultValue}) => {
useEffect(() => { useEffect(() => {
formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || ''); formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || '');
formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || ''); formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || '');
@@ -19,10 +19,14 @@ const BetWeenDateFilter = ({formik, id , defaultValue}) => {
return ( return (
<Grid container spacing={1} mt={1} mb={2}> <Grid container spacing={1} mt={1} mb={2}>
<Grid item xs={6}> <Grid item xs={6}>
<MuiDatePicker label="تاریخ شروع " name={`${id}[0]`} formik={formik} defaultValue={defaultValue?.[0]} minDate={null} maxDate={dateRange[1]} onDateChange={(value) => handleDateChange(0, value)}/> <MuiDatePicker label="تاریخ شروع " name={`${id}[0]`} formik={formik} defaultValue={defaultValue?.[0]}
minDate={null} maxDate={dateRange[1]}
onDateChange={(value) => handleDateChange(0, value)}/>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<MuiDatePicker label="تاریخ پایان" name={`${id}[1]`} formik={formik} defaultValue={defaultValue?.[1]} minDate={dateRange[0]} maxDate={null} onDateChange={(value) => handleDateChange(1, value)}/> <MuiDatePicker label="تاریخ پایان" name={`${id}[1]`} formik={formik} defaultValue={defaultValue?.[1]}
minDate={dateRange[0]} maxDate={null}
onDateChange={(value) => handleDateChange(1, value)}/>
</Grid> </Grid>
</Grid> </Grid>
); );

0
src/components/MuiDatePicker.jsx → src/core/components/DataTable/filter/DatePicker/MuiDatePicker.jsx
View File

95
src/components/FilterColumn.jsx → src/core/components/DataTable/filter/FilterColumn.jsx
View File

@@ -1,21 +1,17 @@
"use client" "use client"
import { import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material';
Box,
Button, Divider, Drawer,
FormControl, IconButton, styled, Typography
} from '@mui/material';
import {useFormik} from 'formik'; import {useFormik} from 'formik';
import TextFieldWithFnBox from "@/components/TextFieldWithFnBox"; import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import useTableSetting from "@/lib/hooks/useTableSetting"; import useTableSetting from "@/lib/hooks/useTableSetting";
import BetweenNumberFilter from "@/components/BetweenNumberFilter"; import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter";
import BetWeenDateFilter from "@/components/BetweenDateFilter"; import BetWeenDateFilter from "@/core/components/DataTable/filter/DatePicker/BetweenDateFilter";
import SelectBoxMultiple from "@/components/SelectBoxMultiple"; import SelectBoxMultiple from "@/core/components/DataTable/filter/SelectBoxMultiple";
import SelectBox from "@/components/SelectBox"; import SelectBox from "@/core/components/DataTable/filter/SelectBox";
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import { useTheme } from '@mui/material/styles';
function FilterColumn({ columns }) { function FilterColumn({columns}) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [selectedFilters, setSelectedFilters] = useState([]); const [selectedFilters, setSelectedFilters] = useState([]);
const [userId, setUserId] = useState(2); const [userId, setUserId] = useState(2);
@@ -23,7 +19,7 @@ function FilterColumn({ columns }) {
const [tableName, setTableName] = useState('loan_table'); const [tableName, setTableName] = useState('loan_table');
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting(); const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
const DrawerHeader = styled('div')(({ theme }) => ({ const DrawerHeader = styled('div')(({theme}) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
padding: theme.spacing(0, 1), padding: theme.spacing(0, 1),
@@ -48,7 +44,7 @@ function FilterColumn({ columns }) {
updatedFilters[filterIndex].fn = filterFn; updatedFilters[filterIndex].fn = filterFn;
setSelectedFilters(updatedFilters); setSelectedFilters(updatedFilters);
} else { } else {
const newFilter = { id: fieldName, fn: filterFn }; const newFilter = {id: fieldName, fn: filterFn};
const updatedFilters = [...selectedFilters, newFilter]; const updatedFilters = [...selectedFilters, newFilter];
setSelectedFilters(updatedFilters); setSelectedFilters(updatedFilters);
} }
@@ -59,11 +55,9 @@ function FilterColumn({ columns }) {
const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id); const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
if (column.filterFn === 'betweenNum' || column.filterFn === 'betweenDate') { if (column.filterFn === 'betweenNum' || column.filterFn === 'betweenDate') {
acc[column.id] = filter?.value || ["", ""]; acc[column.id] = filter?.value || ["", ""];
} } else if (column.type === 'select2') {
else if ( column.type === 'select2' ) {
acc[column.id] = filter?.value || []; acc[column.id] = filter?.value || [];
} } else {
else {
acc[column.id] = filter?.value || ''; acc[column.id] = filter?.value || '';
} }
} }
@@ -76,7 +70,7 @@ function FilterColumn({ columns }) {
const updatedFilters = selectedFilters.map(filter => { const updatedFilters = selectedFilters.map(filter => {
const value = values[filter.id]; const value = values[filter.id];
if (value !== undefined) { if (value !== undefined) {
return { ...filter, value }; return {...filter, value};
} }
return filter; return filter;
}); });
@@ -84,7 +78,7 @@ function FilterColumn({ columns }) {
const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName); const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName);
if (filterIndex === -1 && value !== '' && value !== null && value !== undefined) { if (filterIndex === -1 && value !== '' && value !== null && value !== undefined) {
const column = columns.find(col => col.id === fieldName); const column = columns.find(col => col.id === fieldName);
updatedFilters.push({ id: fieldName, value, fn: column.filterFn, datatype: column.datatype }); updatedFilters.push({id: fieldName, value, fn: column.filterFn, datatype: column.datatype});
} }
}); });
@@ -107,29 +101,33 @@ function FilterColumn({ columns }) {
return ( return (
<> <>
<Button onClick={toggleDrawer(true)}>Open drawer</Button> <Tooltip title="فیلتر">
<Drawer open={open} onClose={toggleDrawer(false)} <IconButton onClick={toggleDrawer(true)} aria-label="filter table">
sx={{ <FilterAltIcon/>
"& .MuiDrawer-paper": { </IconButton>
padding: '16px', </Tooltip>
overflowY: 'auto', <Drawer open={open} onClose={toggleDrawer(false)}
display: 'flex', sx={{
flexDirection: 'column', "& .MuiDrawer-paper": {
justifyContent: 'space-between', padding: '16px',
scrollbarWidth: 'thin', overflowY: 'auto',
width:450, display: 'flex',
"&::-webkit-scrollbar": { flexDirection: 'column',
width: '8px', justifyContent: 'space-between',
}, scrollbarWidth: 'thin',
"&::-webkit-scrollbar-thumb": { width: 450,
backgroundColor: '#ccc', "&::-webkit-scrollbar": {
borderRadius: '4px', width: '8px',
}, },
"@media (max-width: 600px)": { "&::-webkit-scrollbar-thumb": {
width: '100%' backgroundColor: '#ccc',
}, borderRadius: '4px',
} },
}} "@media (max-width: 600px)": {
width: '100%'
},
}
}}
> >
<DrawerHeader> <DrawerHeader>
<Typography variant="h6" mb={2}>فیلتر</Typography> <Typography variant="h6" mb={2}>فیلتر</Typography>
@@ -137,7 +135,7 @@ function FilterColumn({ columns }) {
<CloseIcon/> <CloseIcon/>
</IconButton> </IconButton>
</DrawerHeader> </DrawerHeader>
<Box sx={{ display: 'flex', flexDirection: 'column' }}> <Box sx={{display: 'flex', flexDirection: 'column'}}>
<FormControl fullWidth> <FormControl fullWidth>
{columns.map((column, index) => ( {columns.map((column, index) => (
column.enableColumnFilter && column.enableColumnFilter &&
@@ -188,10 +186,11 @@ function FilterColumn({ columns }) {
))} ))}
</FormControl> </FormControl>
</Box> </Box>
<Box sx={{ mt:2 }}> <Box sx={{mt: 2}}>
<Divider /> <Divider/>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <Box sx={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<Button variant="contained" size="medium" onClick={formik.handleSubmit} sx={{ mt: 1 }}>ثبت</Button> <Button variant="contained" size="medium" onClick={formik.handleSubmit}
sx={{mt: 1}}>ثبت</Button>
</Box> </Box>
</Box> </Box>
</Drawer> </Drawer>

0
src/components/SelectBox.jsx → src/core/components/DataTable/filter/SelectBox.jsx
View File

0
src/components/SelectBoxMultiple.jsx → src/core/components/DataTable/filter/SelectBoxMultiple.jsx
View File

0
src/components/FilterBox.jsx → src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx
View File

20
src/components/TextFieldWithFnBox.jsx → src/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox.jsx
View File

@@ -1,9 +1,17 @@
import {IconButton, Paper, TextField} from '@mui/material'; import {IconButton, TextField} from '@mui/material';
import ArtTrackIcon from '@mui/icons-material/ArtTrack'; import ArtTrackIcon from '@mui/icons-material/ArtTrack';
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import FilterBox from "@/components/FilterBox"; import FilterBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox";
const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter , columnFilterModeOptions ,onSelectFilter}) => { const TextFieldWithFnBox = ({
formik,
id,
header,
defaultValue,
defaultFilter,
columnFilterModeOptions,
onSelectFilter
}) => {
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -35,7 +43,7 @@ const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter ,
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<IconButton onClick={handleClick}> <IconButton onClick={handleClick}>
<ArtTrackIcon /> <ArtTrackIcon/>
</IconButton> </IconButton>
) )
}} }}
@@ -43,7 +51,9 @@ const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter ,
position: 'relative' position: 'relative'
}} }}
/> />
<FilterBox anchorEl={anchorEl} open={open} handleClose={handleClose} columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter} defaultFilter={defaultFilter}/> <FilterBox anchorEl={anchorEl} open={open} handleClose={handleClose}
columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter}
defaultFilter={defaultFilter}/>
</> </>
); );
}; };

205
src/core/components/DataTable/index.js
View File

@@ -1,123 +1,122 @@
import { useMaterialReactTable } from "material-react-table"; import {useMaterialReactTable} from "material-react-table";
import DataTable_Main from "./Main"; import DataTable_Main from "./Main";
import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable"; import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable";
import CustomToolbar from "@/components/CustomToolbar";
import useTableSetting from "@/lib/hooks/useTableSetting"; import useTableSetting from "@/lib/hooks/useTableSetting";
import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects"; import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
import Toolbar from "@/components/home/Toolbar";
const data = [ const data = [
{ {
name: { name: {
firstName: 'John', firstName: 'John',
lastName: 'Doe', lastName: 'Doe',
},
address: '261 Erdman Ford',
city: 'East Daphne',
state: 'Kentucky',
}, },
address: '261 Erdman Ford', {
city: 'East Daphne', name: {
state: 'Kentucky', firstName: 'Jane',
}, lastName: 'Doe',
{ },
name: { address: '769 Dominic Grove',
firstName: 'Jane', city: 'Columbus',
lastName: 'Doe', state: 'Ohio',
}, },
address: '769 Dominic Grove', {
city: 'Columbus', name: {
state: 'Ohio', firstName: 'Joe',
}, lastName: 'Doe',
{ },
name: { address: '566 Brakus Inlet',
firstName: 'Joe', city: 'South Linda',
lastName: 'Doe', state: 'West Virginia',
}, },
address: '566 Brakus Inlet', {
city: 'South Linda', name: {
state: 'West Virginia', firstName: 'Kevin',
}, lastName: 'Vandy',
{ },
name: { address: '722 Emie Stream',
firstName: 'Kevin', city: 'Lincoln',
lastName: 'Vandy', state: 'Nebraska',
}, },
address: '722 Emie Stream', {
city: 'Lincoln', name: {
state: 'Nebraska', firstName: 'Joshua',
}, lastName: 'Rolluffs',
{ },
name: { address: '32188 Larkin Turnpike',
firstName: 'Joshua', city: 'Charleston',
lastName: 'Rolluffs', state: 'South Carolina',
}, },
address: '32188 Larkin Turnpike',
city: 'Charleston',
state: 'South Carolina',
},
]; ];
const DataTable = (props) => { const DataTable = (props) => {
const { userId, pageName, tableName, columns, initialStateProps } = props const {userId, pageName, tableName, columns, initialStateProps} = props
const { settingStore, hideAction, sortAction } = useTableSetting(); const {settingStore, hideAction, sortAction} = useTableSetting();
const flatColumns = flattenArrayOfObjects(columns,'columns') const flatColumns = flattenArrayOfObjects(columns, 'columns')
const onColumnVisibilityChange = (event) => { const onColumnVisibilityChange = (event) => {
const settingValue = event(); const settingValue = event();
hideAction(userId, pageName, tableName, settingValue, flatColumns); hideAction(userId, pageName, tableName, settingValue, flatColumns);
}; };
const onSortingChange = (event) => { const onSortingChange = (event) => {
const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []); const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
sortAction(userId, pageName, tableName, settingValue, flatColumns); sortAction(userId, pageName, tableName, settingValue, flatColumns);
} }
const table = useMaterialReactTable({ const table = useMaterialReactTable({
localization: FA_DATATABLE_LOCALIZATION, localization: FA_DATATABLE_LOCALIZATION,
columns, columns,
data: data, data: data,
// manualSorting: true, // manualSorting: true,
renderTopToolbarCustomActions: ({ table }) => (<> renderTopToolbarCustomActions: ({table}) => (<>
<CustomToolbar <Toolbar
columns={flatColumns} columns={flatColumns}
/> />
</>), </>),
initialState: { initialState: {
density: 'compact', density: 'compact',
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [], sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
...initialStateProps ...initialStateProps
}, },
state: { state: {
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [] sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
}, },
muiTableHeadProps: { muiTableHeadProps: {
sx: { sx: {
borderTop: "1px solid #e1e1e1", borderTop: "1px solid #e1e1e1",
borderBottom: "2px solid #e1e1e1", borderBottom: "2px solid #e1e1e1",
} }
}, },
muiTableHeadCellProps: { muiTableHeadCellProps: {
sx: { sx: {
color: "primary.main", color: "primary.main",
borderLeft: "1px solid #e1e1e1", borderLeft: "1px solid #e1e1e1",
"&:first-of-type": { "&:first-of-type": {
borderLeft: "unset" borderLeft: "unset"
} }
}, },
}, },
muiTableBodyCellProps: { muiTableBodyCellProps: {
sx: { sx: {
borderLeft: "1px solid #e1e1e1", borderLeft: "1px solid #e1e1e1",
"&:first-of-type": { "&:first-of-type": {
borderLeft: "unset" borderLeft: "unset"
} }
}, },
}, },
onColumnVisibilityChange: onColumnVisibilityChange, onColumnVisibilityChange: onColumnVisibilityChange,
onSortingChange: onSortingChange, onSortingChange: onSortingChange,
...props ...props
}) })
return <DataTable_Main table={table} columns={columns}/>;
return <DataTable_Main table={table} />;
}; };
export default DataTable; export default DataTable;

138
src/core/components/DataTable/table/Paper.js
View File

@@ -1,78 +1,78 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils"; import {parseFromValuesOrFunc} from "@/core/utils/utils";
import { Paper } from "@mui/material"; import {Paper} from "@mui/material";
import DataTable_BottomToolbar from "../toolbar/BottomToolbar"; import DataTable_BottomToolbar from "../toolbar/BottomToolbar";
import DataTable_TopToolbar from "../toolbar/TopToolbar"; import DataTable_TopToolbar from "../toolbar/TopToolbar";
import DataTable_TableContainer from "./TableContainer"; import DataTable_TableContainer from "./TableContainer";
const DataTable_Paper = ({ table, ...rest }) => { const DataTable_Paper = ({table, ...rest}) => {
const { const {
getState, getState,
options: { options: {
enableBottomToolbar, enableBottomToolbar,
enableTopToolbar, enableTopToolbar,
mrtTheme: { baseBackgroundColor }, mrtTheme: {baseBackgroundColor},
muiTablePaperProps, muiTablePaperProps,
renderBottomToolbar, renderBottomToolbar,
renderTopToolbar, renderTopToolbar,
}, },
refs: { tablePaperRef }, refs: {tablePaperRef},
} = table; } = table;
const { isFullScreen } = getState(); const {isFullScreen} = getState();
const paperProps = { const paperProps = {
...parseFromValuesOrFunc(muiTablePaperProps, { table }), ...parseFromValuesOrFunc(muiTablePaperProps, {table}),
...rest, ...rest,
}; };
return ( return (
<Paper <Paper
elevation={0} elevation={0}
{...paperProps} {...paperProps}
ref={(ref) => { ref={(ref) => {
tablePaperRef.current = ref; tablePaperRef.current = ref;
if (paperProps?.ref) { if (paperProps?.ref) {
//@ts-ignore //@ts-ignore
paperProps.ref.current = ref; paperProps.ref.current = ref;
} }
}} }}
style={{ style={{
...(isFullScreen ...(isFullScreen
? { ? {
bottom: 0, bottom: 0,
height: '100dvh', height: '100dvh',
left: 0, left: 0,
margin: 0, margin: 0,
maxHeight: '100dvh', maxHeight: '100dvh',
maxWidth: '100dvw', maxWidth: '100dvw',
padding: 0, padding: 0,
position: 'fixed', position: 'fixed',
right: 0, right: 0,
top: 0, top: 0,
width: '100dvw', width: '100dvw',
zIndex: 999, zIndex: 999,
} }
: {}), : {}),
...paperProps?.style, ...paperProps?.style,
}} }}
sx={(theme) => ({ sx={(theme) => ({
backgroundColor: baseBackgroundColor, backgroundColor: baseBackgroundColor,
backgroundImage: 'unset', backgroundImage: 'unset',
overflow: 'hidden', overflow: 'hidden',
transition: 'all 100ms ease-in-out', transition: 'all 100ms ease-in-out',
...(parseFromValuesOrFunc(paperProps?.sx, theme)), ...(parseFromValuesOrFunc(paperProps?.sx, theme)),
})} })}
> >
{enableTopToolbar && {enableTopToolbar &&
(parseFromValuesOrFunc(renderTopToolbar, { table }) ?? ( (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? (
<DataTable_TopToolbar table={table} /> <DataTable_TopToolbar table={table} columns={paperProps.columns}/>
))} ))}
<DataTable_TableContainer table={table} /> <DataTable_TableContainer table={table}/>
{enableBottomToolbar && {enableBottomToolbar &&
(parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? ( (parseFromValuesOrFunc(renderBottomToolbar, {table}) ?? (
<DataTable_BottomToolbar table={table} /> <DataTable_BottomToolbar table={table}/>
))} ))}
</Paper> </Paper>
); );
}; };
export default DataTable_Paper; export default DataTable_Paper;

24
src/core/components/DataTable/toolbar/TopToolbar.js
View File

@@ -1,10 +1,11 @@
import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils"; import {getCommonToolbarStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
import { Box, useMediaQuery } from "@mui/material"; import {Box, useMediaQuery} from "@mui/material";
import DataTable_LinearProgressBar from "./LinearProgressBar"; import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination"; import DataTable_TablePagination from "./TablePagination";
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons"; import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
import FilterColumn from "@/core/components/DataTable/filter/FilterColumn";
const DataTable_TopToolbar = ({ table }) => { const DataTable_TopToolbar = ({table, columns}) => {
const { const {
getState, getState,
options: { options: {
@@ -14,14 +15,14 @@ const DataTable_TopToolbar = ({ table }) => {
positionPagination, positionPagination,
renderTopToolbarCustomActions, renderTopToolbarCustomActions,
}, },
refs: { topToolbarRef }, refs: {topToolbarRef},
} = table; } = table;
const { isFullScreen, showGlobalFilter } = getState(); const {isFullScreen, showGlobalFilter} = getState();
const isMobile = useMediaQuery('(max-width:720px)'); const isMobile = useMediaQuery('(max-width:720px)');
const isTablet = useMediaQuery('(max-width:1024px)'); const isTablet = useMediaQuery('(max-width:1024px)');
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table }); const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, {table});
const stackAlertBanner = const stackAlertBanner =
isMobile || isMobile ||
@@ -39,7 +40,7 @@ const DataTable_TopToolbar = ({ table }) => {
} }
}} }}
sx={(theme) => ({ sx={(theme) => ({
...getCommonToolbarStyles({ table, theme }), ...getCommonToolbarStyles({table, theme}),
position: isFullScreen ? 'sticky' : 'relative', position: isFullScreen ? 'sticky' : 'relative',
top: isFullScreen ? '0' : undefined, top: isFullScreen ? '0' : undefined,
...(parseFromValuesOrFunc(toolbarProps?.sx, theme)), ...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
@@ -59,7 +60,7 @@ const DataTable_TopToolbar = ({ table }) => {
width: '100%', width: '100%',
}} }}
> >
{renderTopToolbarCustomActions?.({ table }) ?? <span />} {renderTopToolbarCustomActions?.({table}) ?? <span/>}
{enableToolbarInternalActions && ( {enableToolbarInternalActions && (
<Box <Box
sx={{ sx={{
@@ -70,15 +71,16 @@ const DataTable_TopToolbar = ({ table }) => {
justifyContent: 'flex-end', justifyContent: 'flex-end',
}} }}
> >
<DataTable_ToolbarInternalButtons table={table} /> <FilterColumn columns={columns}/>
<DataTable_ToolbarInternalButtons table={table}/>
</Box> </Box>
)} )}
</Box> </Box>
{enablePagination && {enablePagination &&
['both', 'top'].includes(positionPagination ?? '') && ( ['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> </Box>
); );
} }