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 FilterColumn from "@/components/FilterColumn";
import {useMemo} from "react";
import DataTableMain from "@/components/DataTableMain";
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 (
<>
<DataTableTest columns={columns}/>
<FilterColumn column={columns}/>
<DataTableMain />
</>
);

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 {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
useEffect(() => {
const initialFilters = column
.filter(col => col.enableColumnFilter)
.map(col => ({ id: col.field, fn: col.filterFn }));
setSelectedFilters(initialFilters);
}, [column]);
const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
setSelectedFilters(settingValue.length > 0 ? settingValue : []);
console.log(selectedFilters)
}, [settingStore]);
const handleSelectFilter = (fieldName, filterFn) => {
const updatedFilters = [...selectedFilters];
@@ -63,10 +65,9 @@ function FilterColumn({ onSubmit , column }) {
column.enableColumnFilter &&
<TextFieldWithFnBox
key={index}
id={column.id}
formik={formik}
fieldName={column.field}
label={column.label}
defaultFilter={column.defaultFilter}
defaultFilter={column.filterFn}
columnFilterModeOptions={column.columnFilterModeOptions}
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 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 [open, setOpen] = useState(false);
@@ -20,9 +20,10 @@ const TextFieldWithFnBox = ({formik, fieldName , label , defaultFilter , column
return (
<>
<TextField
name={fieldName}
label={label}
value={formik.values[fieldName]}
name={id}
label={id}
id={id}
value={formik.values[id]}
onChange={formik.handleChange}
fullWidth
margin="normal"