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

change and merge yasi and mohamad code

Browse Source
This commit is contained in:
Yasiu1376
2024-02-21 13:35:00 +03:30
parent 76f8dfad06
commit 95c63f1058
4 changed files with 112 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/app/page.js
View File

@@ -1,93 +1,10 @@
import DataTableTest from "@/components/DataTableTest"; import DataTableMain from "@/components/DataTableMain";
import FilterColumn from "@/components/FilterColumn";
import {useMemo} from "react";
function page() { function page() {
const columns = useMemo(
() => [
{
accessorKey: 'name.firstName',
header: 'نام',
size: 150,
id: "firstName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'name.lastName',
header: 'نام خانوادگی',
size: 150,
id: "lastName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'address',
header: 'آدرس',
size: 200,
id: "address",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'city',
header: 'شهر',
size: 150,
id: "city",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
},
{
accessorKey: 'state',
header: 'وضعیت',
size: 150,
id: "state",
text:'نام',
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
],
[],
);
return ( return (
<> <>
<DataTableTest columns={columns}/> <DataTableMain />
<FilterColumn column={columns}/>
</> </>
); );

96
src/components/DataTableMain.jsx Normal file
View File

@@ -0,0 +1,96 @@
import DataTableTest from "@/components/DataTableTest";
import FilterColumn from "@/components/FilterColumn";
import {useMemo} from "react";
function DataTableMain() {
const columns = useMemo(
() => [
{
accessorKey: 'name.firstName',
header: 'نام',
size: 150,
id: "firstName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'name.lastName',
header: 'نام خانوادگی',
size: 150,
id: "lastName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'address',
header: 'آدرس',
size: 200,
id: "address",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'city',
header: 'شهر',
size: 150,
id: "city",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
],
},
{
accessorKey: 'state',
header: 'وضعیت',
size: 150,
id: "state",
text:'نام',
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
],
[],
);
return (
<>
<DataTableTest columns={columns}/>
<FilterColumn column={columns}/>
</>
);
}
export default DataTableMain;

17
src/components/FilterColumn.jsx
View File

@@ -18,12 +18,14 @@ function FilterColumn({ onSubmit , column }) {
const [tableName, setTableName] = useState('loan_table'); const [tableName, setTableName] = useState('loan_table');
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting(); const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
useEffect(() => { useEffect(() => {
const initialFilters = column
.filter(col => col.enableColumnFilter) const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
.map(col => ({ id: col.field, fn: col.filterFn })); setSelectedFilters(settingValue.length > 0 ? settingValue : []);
setSelectedFilters(initialFilters); console.log(selectedFilters)
}, [column]);
}, [settingStore]);
const handleSelectFilter = (fieldName, filterFn) => { const handleSelectFilter = (fieldName, filterFn) => {
const updatedFilters = [...selectedFilters]; const updatedFilters = [...selectedFilters];
@@ -63,10 +65,9 @@ function FilterColumn({ onSubmit , column }) {
column.enableColumnFilter && column.enableColumnFilter &&
<TextFieldWithFnBox <TextFieldWithFnBox
key={index} key={index}
id={column.id}
formik={formik} formik={formik}
fieldName={column.field} defaultFilter={column.filterFn}
label={column.label}
defaultFilter={column.defaultFilter}
columnFilterModeOptions={column.columnFilterModeOptions} columnFilterModeOptions={column.columnFilterModeOptions}
onSelectFilter={(filterFn) => handleSelectFilter(column.field, filterFn)} onSelectFilter={(filterFn) => handleSelectFilter(column.field, filterFn)}
/> />

9
src/components/TextFieldWithFnBox.jsx
View File

@@ -3,7 +3,7 @@ import AlignHorizontalCenterIcon from '@mui/icons-material/AlignHorizontalCenter
import {useState} from "react"; import {useState} from "react";
// import FilterBox from "@/components/FiterBox"; // import FilterBox from "@/components/FiterBox";
const TextFieldWithFnBox = ({formik, fieldName , label , defaultFilter , columnFilterModeOptions ,onSelectFilter}) => { const TextFieldWithFnBox = ({formik, id , defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -20,9 +20,10 @@ const TextFieldWithFnBox = ({formik, fieldName , label , defaultFilter , column
return ( return (
<> <>
<TextField <TextField
name={fieldName} name={id}
label={label} label={id}
value={formik.values[fieldName]} id={id}
value={formik.values[id]}
onChange={formik.handleChange} onChange={formik.handleChange}
fullWidth fullWidth
margin="normal" margin="normal"