124 lines
4.7 KiB
JavaScript
124 lines
4.7 KiB
JavaScript
"use client"
|
|
import {
|
|
Button,
|
|
Dialog, DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
FormControl
|
|
} from '@mui/material';
|
|
import {useFormik} from 'formik';
|
|
import TextFieldWithFnBox from "@/components/TextFieldWithFnBox";
|
|
import {useEffect, useState} from "react";
|
|
|
|
function FilterColumn({ onSubmit , column }) {
|
|
const [selectedFilters, setSelectedFilters] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const initialFilters = column
|
|
.filter(col => col.ColumnFiterStatus)
|
|
.map(col => ({ id: col.field, fn: col.filterFn }));
|
|
setSelectedFilters(initialFilters);
|
|
}, [column]);
|
|
|
|
const handleSelectFilter = (fieldName, filterFn) => {
|
|
const updatedFilters = [...selectedFilters];
|
|
const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName);
|
|
if (filterIndex !== -1) {
|
|
updatedFilters[filterIndex].fn = filterFn;
|
|
} else {
|
|
updatedFilters.push({ id: fieldName, fn: filterFn });
|
|
}
|
|
setSelectedFilters(updatedFilters);
|
|
};
|
|
|
|
const formik = useFormik({
|
|
initialValues: column.reduce((acc, column) => {
|
|
if (column.ColumnFiterStatus) {
|
|
acc[column.field] = '';
|
|
}
|
|
return acc;
|
|
}, {}),
|
|
onSubmit: (values) => {
|
|
// const selectedFilters = [
|
|
// { "id": "name", "value": values.name1, "fn": values.cityFn, "datatype": values.nameDatatype },
|
|
// { "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);
|
|
}
|
|
});
|
|
|
|
|
|
return (
|
|
<Dialog open={true}>
|
|
<DialogTitle>Select Filters</DialogTitle>
|
|
<DialogContent>
|
|
<FormControl fullWidth>
|
|
{column.map((column, index) => (
|
|
column.ColumnFiterStatus &&
|
|
<TextFieldWithFnBox
|
|
key={index}
|
|
formik={formik}
|
|
fieldName={column.field}
|
|
label={column.label}
|
|
defaultFilter={column.defaultFilter}
|
|
columnFilterModeOptions={column.columnFilterModeOptions}
|
|
onSelectFilter={(filterFn) => handleSelectFilter(column.field, filterFn)}
|
|
/>
|
|
))}
|
|
</FormControl>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={formik.handleSubmit}>Submit</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export default FilterColumn;
|
|
|
|
|