merge with mohamad branch
This commit is contained in:
@@ -1,11 +1,93 @@
|
||||
import DataTableTest from "@/components/DataTableTest";
|
||||
import FilterColumn from "@/components/FilterColumn";
|
||||
import {useMemo} from "react";
|
||||
|
||||
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 (
|
||||
<>
|
||||
<FilterColumn />
|
||||
<DataTableTest/>
|
||||
<DataTableTest columns={columns}/>
|
||||
<FilterColumn column={columns}/>
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
@@ -53,92 +53,13 @@ const data = [
|
||||
},
|
||||
];
|
||||
|
||||
const TestDataTable = () => {
|
||||
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 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"
|
||||
],
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
const onColumnVisibilityChange = (event) => {
|
||||
const settingValue = event();
|
||||
hideAction(userId, pageName, tableName, settingValue, columns);
|
||||
|
||||
@@ -9,13 +9,18 @@ import {
|
||||
import {useFormik} from 'formik';
|
||||
import TextFieldWithFnBox from "@/components/TextFieldWithFnBox";
|
||||
import {useEffect, useState} from "react";
|
||||
import useTableSetting from "@/lib/hooks/useTableSetting";
|
||||
|
||||
function FilterColumn({ onSubmit , column }) {
|
||||
function FilterColumn({ onSubmit , column }) {
|
||||
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();
|
||||
|
||||
useEffect(() => {
|
||||
const initialFilters = column
|
||||
.filter(col => col.ColumnFiterStatus)
|
||||
.filter(col => col.enableColumnFilter)
|
||||
.map(col => ({ id: col.field, fn: col.filterFn }));
|
||||
setSelectedFilters(initialFilters);
|
||||
}, [column]);
|
||||
@@ -33,7 +38,7 @@ function FilterColumn({ onSubmit , column }) {
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: column.reduce((acc, column) => {
|
||||
if (column.ColumnFiterStatus) {
|
||||
if (column.enableColumnFilter) {
|
||||
acc[column.field] = '';
|
||||
}
|
||||
return acc;
|
||||
@@ -44,50 +49,7 @@ function FilterColumn({ onSubmit , column }) {
|
||||
// { "id": "navgan_id", "value": values.name2, "fn": values.nameFn, "datatype": values.nameDatatype }
|
||||
// ];
|
||||
|
||||
const user_id = 456;
|
||||
const page_name = 'loan';
|
||||
const table_name = "amir_table";
|
||||
|
||||
let prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
|
||||
|
||||
const existingFilters = prevLocalStorage[user_id]?.[page_name]?.[table_name]?.filters || [];
|
||||
|
||||
const updatedFilters = selectedFilters.reduce((acc, filter) => {
|
||||
const currentValue = values[filter.id];
|
||||
const prevValue = formik.initialValues[filter.id];
|
||||
console.log(acc, filter)
|
||||
// Check if the current value is empty and the previous value was not empty
|
||||
if ((currentValue === '' || currentValue === undefined || currentValue === null) && prevValue !== '' && prevValue !== undefined && prevValue !== null) {
|
||||
// Remove filter data from localStorage
|
||||
const filterIndex = existingFilters.findIndex(f => f.id === filter.id);
|
||||
console.log({filterIndex})
|
||||
if (filterIndex !== -1) {
|
||||
existingFilters.splice(filterIndex, 1);
|
||||
}
|
||||
} else {
|
||||
acc.push({
|
||||
...filter,
|
||||
value: currentValue,
|
||||
datatype: column.find(col => col.field === filter.id).datatype
|
||||
});
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
|
||||
updatedFilters.forEach(newFilter => {
|
||||
const existingFilterIndex = existingFilters.findIndex(filter => filter.id === newFilter.id);
|
||||
existingFilterIndex !== -1 ? existingFilters[existingFilterIndex] = newFilter : existingFilters.push(newFilter);
|
||||
});
|
||||
|
||||
prevLocalStorage[user_id] = prevLocalStorage[user_id] || {};
|
||||
prevLocalStorage[user_id][page_name] = prevLocalStorage[user_id][page_name] || {};
|
||||
prevLocalStorage[user_id][page_name][table_name] = { hides: {}, filters: existingFilters };
|
||||
|
||||
localStorage.setItem('_setting-app', JSON.stringify(prevLocalStorage));
|
||||
|
||||
onSubmit(updatedFilters);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -98,7 +60,7 @@ function FilterColumn({ onSubmit , column }) {
|
||||
<DialogContent>
|
||||
<FormControl fullWidth>
|
||||
{column.map((column, index) => (
|
||||
column.ColumnFiterStatus &&
|
||||
column.enableColumnFilter &&
|
||||
<TextFieldWithFnBox
|
||||
key={index}
|
||||
formik={formik}
|
||||
|
||||
Reference in New Issue
Block a user