From 76f8dfad06d6f888457dfd65d7ea60a0a34b915b Mon Sep 17 00:00:00 2001 From: Yasiu1376 Date: Wed, 21 Feb 2024 09:53:52 +0330 Subject: [PATCH] merge with mohamad branch --- src/app/page.js | 86 +++++++++++++++++++++++++++++++- src/components/DataTableTest.jsx | 81 +----------------------------- src/components/FilterColumn.jsx | 56 ++++----------------- 3 files changed, 94 insertions(+), 129 deletions(-) diff --git a/src/app/page.js b/src/app/page.js index af32e3b..ea420f9 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -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 ( <> - - + + ); diff --git a/src/components/DataTableTest.jsx b/src/components/DataTableTest.jsx index d255aaa..7b988ae 100644 --- a/src/components/DataTableTest.jsx +++ b/src/components/DataTableTest.jsx @@ -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); diff --git a/src/components/FilterColumn.jsx b/src/components/FilterColumn.jsx index 08ab968..37aa24a 100644 --- a/src/components/FilterColumn.jsx +++ b/src/components/FilterColumn.jsx @@ -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 }) { {column.map((column, index) => ( - column.ColumnFiterStatus && + column.enableColumnFilter &&