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

start refactor

Browse Source
This commit is contained in:
Mohammad Jalali
2024-05-18 18:00:02 +03:30
parent a383c8510e
commit 23f1b9a4b1
14 changed files with 106 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/core/components/DataTable/filter/BetweenNumberFilter.jsx
View File

@@ -1,58 +0,0 @@
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;

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

@@ -1,35 +0,0 @@
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;

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

@@ -1,67 +0,0 @@
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>
);
}

58
src/core/components/DataTable/filter/FilterBody.jsx Normal file
View File

@@ -0,0 +1,58 @@
'use client'
import {Box, Drawer, IconButton, Typography} from "@mui/material";
import CancelIcon from '@mui/icons-material/Cancel';
import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
function FilterBody({columns, drawerState, setDrawerState}) {
// 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 initialValues = {};
return (
<Drawer open={drawerState} onClose={() => {
setDrawerState(false)
}}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
px: 2,
py: 1,
backgroundColor: "#095b8c",
width: 400
}}>
<Typography variant="h5" sx={{color: "#fff"}}>فیلتر</Typography>
<IconButton sx={{color: "#fff"}} onClick={() => {
setDrawerState(false)
}}>
<CancelIcon sx={{fontSize: "1.2em"}}/>
</IconButton>
</Box>
<Box sx={{display: "flex", flexDirection: "column"}}>
{/*<Formik*/}
{/* initialValues={initialValues}*/}
{/* onSubmit={handleSubmit}*/}
{/* validationSchema={validationSchema}*/}
{/*>*/}
{columns.map((column) => {
<FilterBodyField column={column}/>
})}
{/*</Formik>*/}
</Box>
</Drawer>
);
}
export default FilterBody;

9
src/core/components/DataTable/filter/FilterBodyField.jsx Normal file
View File

@@ -0,0 +1,9 @@
'use client'
function FilterBodyField({column}) {
return (
asdasdasd
);
}
export default FilterBodyField;

17
src/core/components/DataTable/filter/FilterButton.jsx Normal file
View File

@@ -0,0 +1,17 @@
'use client'
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import {IconButton, Tooltip} from "@mui/material";
function FilterButton({drawerState, setDrawerState}) {
return (
<Tooltip title="فیلتر">
<IconButton onClick={() => {
setDrawerState(!drawerState)
}} aria-label="filter table">
<FilterAltIcon/>
</IconButton>
</Tooltip>
);
}
export default FilterButton;

201
src/core/components/DataTable/filter/FilterColumn.jsx
View File

@@ -1,201 +0,0 @@
"use client"
import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material';
import {useFormik} from 'formik';
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';
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
function FilterColumn({columns}) {
const [open, setOpen] = useState(false);
const [selectedFilters, setSelectedFilters] = useState([]);
const [userId, setUserId] = useState(0);
const [pageName, setPageName] = useState('testPage');
const [tableName, setTableName] = useState('testTable');
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 : []);
if (!settingValue.length > 0) {
formik.resetForm();
}
}, [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);
}
});
console.log(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'])
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.inputType === 'betweenDate' ?
<BetWeenDateFilter
key={index}
id={column.id}
formik={formik}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
: column.inputType === 'betweenNum' ?
<BetweenNumberFilter
key={index}
id={column.id}
formik={formik}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]}
/>
: column.inputType === 'select2' ?
<SelectBoxMultiple
key={index}
id={column.id}
formik={formik}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
/>
: column.inputType === 'select' ?
<SelectBox
key={index}
id={column.id}
formik={formik}
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
View File

@@ -1,53 +0,0 @@
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
View File

@@ -1,116 +0,0 @@
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;

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

@@ -1,46 +0,0 @@
import {ClickAwayListener, List, ListItem, ListItemText, Paper, Popper} from '@mui/material';
import {useState} from "react";
const columnFilterModeOptionFa = {
equals: "برابر",
notEquals: "نابرابر",
contains: "شامل",
lessThan: "کوچکتر",
greaterThan: "بزرگتر",
fuzzy: "فازی",
}
function FilterBox({
anchorEl, open = false, handleClose = () => {
}, columnFilterModeOptions, onSelectFilter, defaultFilter
}) {
const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
const id = open ? 'simple-popper' : undefined;
const handleSelectFilter = (filterFn) => {
setSelectedFilter(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 === selectedFilter} sx={{cursor: 'pointer'}}>
<ListItemText primary={columnFilterModeOptionFa[option]}/>
</ListItem>
))}
</List>
</Paper>
</ClickAwayListener>
</Popper>
</div>
);
}
export default FilterBox;

61
src/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox.jsx
View File

@@ -1,61 +0,0 @@
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;

18
src/core/components/DataTable/filter/index.jsx Normal file
View File

@@ -0,0 +1,18 @@
'use client'
import {useState} from "react";
import FilterButton from "@/core/components/DataTable/filter/FilterButton";
import FilterBody from "@/core/components/DataTable/filter/FilterBody";
function FilterColumn({columns}) {
const [open, setOpen] = useState(false);
return (
<>
<FilterButton drawerState={open} setDrawerState={setOpen}/>
<FilterBody columns={columns} drawerState={open} setDrawerState={setOpen}/>
</>
);
}
export default FilterColumn;

6
src/core/components/DataTable/refactor/RefactorTable.jsx
View File

@@ -6,9 +6,9 @@ import {useState} from "react";
function RefactorTable() {
const {refactorAction} = useTableSetting();
const [userId, setUserId] = useState(2);
const [pageName, setPageName] = useState('loan');
const [tableName, setTableName] = useState('loan_table');
const [userId, setUserId] = useState(0);
const [pageName, setPageName] = useState('testPage');
const [tableName, setTableName] = useState('testTable');
const refactor = () => {
refactorAction(userId, pageName, tableName);

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

@@ -3,7 +3,7 @@ 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";
import FilterColumn from "@/core/components/DataTable/filter";
import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
const DataTable_TopToolbar = ({table, columns}) => {