From fe8364fbb94e2452fdcaaab3921650f5fdd7d51a Mon Sep 17 00:00:00 2001 From: AminGhasempoor Date: Mon, 19 Feb 2024 13:22:03 +0330 Subject: [PATCH] summary text --- src/components/DataTableTest.jsx | 16 ++++---- src/lib/contexts/tableSetting.jsx | 63 +++++++++++++++++++++++++++---- 2 files changed, 64 insertions(+), 15 deletions(-) diff --git a/src/components/DataTableTest.jsx b/src/components/DataTableTest.jsx index 4daf803..d9960ac 100644 --- a/src/components/DataTableTest.jsx +++ b/src/components/DataTableTest.jsx @@ -57,13 +57,12 @@ const TestDataTable = () => { const [pageName, setPageName] = useState('loan'); const [tableName, setTableName] = useState('loan_table'); const {settingStore, hideAction, filterAction, sortAction, oldSorting} = useTableSetting(); - console.log(settingStore) const columns = useMemo( () => [ { accessorKey: 'name.firstName', - header: 'First Name', + header: 'نام', size: 150, id: "firstName", enableColumnFilter: true, @@ -77,7 +76,7 @@ const TestDataTable = () => { }, { accessorKey: 'name.lastName', - header: 'Last Name', + header: 'نام خانوادگی', size: 150, id: "lastName", enableColumnFilter: true, @@ -91,7 +90,7 @@ const TestDataTable = () => { }, { accessorKey: 'address', - header: 'Address', + header: 'آدرس', size: 200, id: "address", enableColumnFilter: true, @@ -105,7 +104,7 @@ const TestDataTable = () => { }, { accessorKey: 'city', - header: 'City', + header: 'شهر', size: 150, id: "city", enableColumnFilter: true, @@ -123,9 +122,10 @@ const TestDataTable = () => { }, { accessorKey: 'state', - header: 'State', + header: 'وضعیت', size: 150, id: "state", + text:'نام', enableColumnFilter: true, datatype: "text", filterFn: "contains", @@ -140,11 +140,11 @@ const TestDataTable = () => { ); const onColumnVisibilityChange = (event) => { const settingValue = event(); - hideAction(userId, pageName, tableName, settingValue); + hideAction(userId, pageName, tableName, settingValue, columns); }; const onSortingChange = (event) => { const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []); - sortAction(userId, pageName, tableName, settingValue); + sortAction(userId, pageName, tableName, settingValue, columns); } return { const [settingStore, setSettingStore] = useState({}); + useEffect(() => { const _localStorage = localStorage.getItem("_setting-app") if (_localStorage) { @@ -11,16 +13,16 @@ export const TableSettingProvider = ({children}) => { } }, []); - const hideAction = useCallback((user_id, page_name, table_name, settingValue) => { - updateSettingStorage(user_id, page_name, table_name, "hides", settingValue); - },[]) - const sortAction = useCallback((user_id, page_name, table_name, settingValue) => { - updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue); - },[]) + const hideAction = useCallback((user_id, page_name, table_name, settingValue, columns) => { + updateSettingStorage(user_id, page_name, table_name, "hides", settingValue, columns); + }, []) + const sortAction = useCallback((user_id, page_name, table_name, settingValue, columns) => { + updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue, columns); + }, []) const filterAction = (user_id, page_name, table_name, settingValue) => { updateSettingStorage(user_id, page_name, table_name, "filters", settingValue); } - const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue) => { + const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue, columns) => { const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {}; const userSettings = prevLocalStorage[user_id] || {}; const pageSettings = userSettings[page_name] || {}; @@ -40,6 +42,10 @@ export const TableSettingProvider = ({children}) => { [table_name]: { ...tableSettings, [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings}, + summary: SummaryTextMessage({ + ...tableSettings, + [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings}, + }, columns) }, }, }, @@ -48,6 +54,49 @@ export const TableSettingProvider = ({children}) => { setSettingStore(updatedLocalStorage); } + const SummaryTextMessage = (values, columns) => { + let SummaryText = ""; + let HideText = ""; + let FilterText; + let SortText = ""; + + if (values.sorts && values.sorts.length > 0) { + const _list = [] + for (const sort of values.sorts) { + const _column = columns.find(column => column.id == sort.id) + _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`) + } + SortText = " مرتب شده بر اساس " + _list.join(", ") + } + + if (values.hides) { + const hidesArray = Object.entries(values.hides).map((e) => ({id: e[0], value: e[1]})) + if (hidesArray.length > 0) { + const _list = [] + for (const hide of hidesArray) { + if (hide.value) continue + const _column = columns.find(c => c.id == hide.id) + _list.push(_column.header) + } + HideText = "ستون های مخفی شده : " + _list.join(", "); + } + } + + if (HideText || SortText) { + if (SortText) { + SummaryText += SortText; + if (HideText) { + SummaryText += " ; "; + } + } + if (HideText) { + SummaryText += HideText; + } + } + + return SummaryText; + }; + return (