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

merge with mohamad branch

Browse Source
This commit is contained in:
Yasiu1376
2024-02-21 09:53:52 +03:30
parent 251d1db1ed
commit 76f8dfad06
3 changed files with 94 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/app/page.js
View File

@@ -1,11 +1,93 @@
import DataTableTest from "@/components/DataTableTest"; import DataTableTest from "@/components/DataTableTest";
import FilterColumn from "@/components/FilterColumn"; 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 (
<> <>
<FilterColumn /> <DataTableTest columns={columns}/>
<DataTableTest/> <FilterColumn column={columns}/>
</> </>
); );

81
src/components/DataTableTest.jsx
View File

@@ -53,92 +53,13 @@ const data = [
}, },
]; ];
const TestDataTable = () => { const TestDataTable = ({columns}) => {
const [userId, setUserId] = useState(2); const [userId, setUserId] = useState(2);
const [pageName, setPageName] = useState('loan'); const [pageName, setPageName] = useState('loan');
const [tableName, setTableName] = useState('loan_table'); const [tableName, setTableName] = useState('loan_table');
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting(); 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 onColumnVisibilityChange = (event) => {
const settingValue = event(); const settingValue = event();
hideAction(userId, pageName, tableName, settingValue, columns); hideAction(userId, pageName, tableName, settingValue, columns);

56
src/components/FilterColumn.jsx
View File

@@ -9,13 +9,18 @@ import {
import {useFormik} from 'formik'; import {useFormik} from 'formik';
import TextFieldWithFnBox from "@/components/TextFieldWithFnBox"; import TextFieldWithFnBox from "@/components/TextFieldWithFnBox";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import useTableSetting from "@/lib/hooks/useTableSetting";
function FilterColumn({ onSubmit , column }) { function FilterColumn({ onSubmit , column }) {
const [selectedFilters, setSelectedFilters] = useState([]); 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(() => { useEffect(() => {
const initialFilters = column const initialFilters = column
.filter(col => col.ColumnFiterStatus) .filter(col => col.enableColumnFilter)
.map(col => ({ id: col.field, fn: col.filterFn })); .map(col => ({ id: col.field, fn: col.filterFn }));
setSelectedFilters(initialFilters); setSelectedFilters(initialFilters);
}, [column]); }, [column]);
@@ -33,7 +38,7 @@ function FilterColumn({ onSubmit , column }) {
const formik = useFormik({ const formik = useFormik({
initialValues: column.reduce((acc, column) => { initialValues: column.reduce((acc, column) => {
if (column.ColumnFiterStatus) { if (column.enableColumnFilter) {
acc[column.field] = ''; acc[column.field] = '';
} }
return acc; return acc;
@@ -44,50 +49,7 @@ function FilterColumn({ onSubmit , column }) {
// { "id": "navgan_id", "value": values.name2, "fn": values.nameFn, "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);
} }
}); });
@@ -98,7 +60,7 @@ function FilterColumn({ onSubmit , column }) {
<DialogContent> <DialogContent>
<FormControl fullWidth> <FormControl fullWidth>
{column.map((column, index) => ( {column.map((column, index) => (
column.ColumnFiterStatus && column.enableColumnFilter &&
<TextFieldWithFnBox <TextFieldWithFnBox
key={index} key={index}
formik={formik} formik={formik}