From d630ab772203c141cd86685678e6fe7f5ebfd4a0 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Tue, 6 Aug 2024 15:48:50 +0330 Subject: [PATCH 1/2] debug and make better data structure for hiding items in material react table hide part --- .../NotificationDesign/AskForKeepData.jsx | 7 +- src/lib/contexts/DataTable.js | 2 - src/lib/contexts/tableSetting.js | 85 +++++-------------- 3 files changed, 27 insertions(+), 67 deletions(-) diff --git a/src/core/components/NotificationDesign/AskForKeepData.jsx b/src/core/components/NotificationDesign/AskForKeepData.jsx index 203a3db..fa9bfa6 100644 --- a/src/core/components/NotificationDesign/AskForKeepData.jsx +++ b/src/core/components/NotificationDesign/AskForKeepData.jsx @@ -9,7 +9,12 @@ import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects"; function AskForKeepData({ filterData, sortData, hideData, user_id, page_name, table_name, columns }) { const { filterAction, sortAction, hideAction } = useTableSetting(); - const flattenHideData = flattenObjectOfObjects(hideData); + + const filteredHideData = Object.fromEntries( + Object.entries(hideData).filter(([key, value]) => value === false), + ); + + const flattenHideData = flattenObjectOfObjects(filteredHideData); const onSaveFilter = () => { const filteredItems = Object.keys(filterData) diff --git a/src/lib/contexts/DataTable.js b/src/lib/contexts/DataTable.js index f5a625d..23f6e3e 100644 --- a/src/lib/contexts/DataTable.js +++ b/src/lib/contexts/DataTable.js @@ -60,8 +60,6 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns } return columns.reduce((acc, column) => { const columnId = column.id; const storeHide = settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"]?.[columnId]; - - // If the column has nested columns, process them recursively if (column.columns && column.columns.length > 0) { acc[columnId] = getHideValues(column.columns); } else { diff --git a/src/lib/contexts/tableSetting.js b/src/lib/contexts/tableSetting.js index 064fab2..a55bf58 100644 --- a/src/lib/contexts/tableSetting.js +++ b/src/lib/contexts/tableSetting.js @@ -13,6 +13,7 @@ export const TableSettingProvider = ({ children }) => { }, []); const hideAction = useCallback((user_id, page_name, table_name, settingValue, columns) => { + clearAction(user_id, page_name, table_name, "hides"); updateSettingStorage(user_id, page_name, table_name, "hides", settingValue, columns); }, []); const sortAction = useCallback((user_id, page_name, table_name, settingValue, columns) => { @@ -58,13 +59,6 @@ export const TableSettingProvider = ({ children }) => { [table_name]: { ...tableSettings, [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings }, - summary: SummaryTextMessage( - { - ...tableSettings, - [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings }, - }, - columns, - ), }, }, }, @@ -73,64 +67,27 @@ export const TableSettingProvider = ({ children }) => { setSettingStore(updatedLocalStorage); }; - const SummaryTextMessage = (values, columns) => { - let SummaryText = ""; - let HideText = ""; - let FilterText = ""; - let SortText = ""; + const clearAction = (user_id, page_name, table_name, key) => { + const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {}; + const userSettings = prevLocalStorage[user_id] || {}; + const pageSettings = userSettings[page_name] || {}; + const tableSettings = pageSettings[table_name] || {}; + const updatedSettings = { + ...prevLocalStorage, + [user_id]: { + ...userSettings, + [page_name]: { + ...pageSettings, + [table_name]: { + ...tableSettings, + [key]: Array.isArray(tableSettings[key]) ? [] : {}, + }, + }, + }, + }; - if (values.sorts && values.sorts.length > 0) { - const _list = []; - for (const sort of values.sorts) { - const _column = columns.find((column) => column.id == sort.id); - if (_column) _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`); - } - if (_list.length > 0) SortText = " مرتب شده بر اساس : " + _list.join(", "); - } - if (values.filters && values.filters.length > 0) { - const _list = []; - for (const filter of values.filters) { - const _column = columns.find((column) => column.id == filter.id); - if (_column) _list.push(`${_column.header}`); - } - if (_list.length > 0) FilterText = " فیلتر شده بر اساس : " + _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); - if (_column) _list.push(_column.header); - } - if (_list.length > 0) HideText = "ستون های مخفی شده : " + _list.join(", "); - } - } - - if (HideText || SortText || FilterText) { - if (SortText) { - SummaryText += SortText; - if (HideText) { - SummaryText += " ; "; - } - if (FilterText) { - SummaryText += " ; "; - } - } - if (HideText) { - SummaryText += HideText; - if (FilterText) { - SummaryText += " ; "; - } - } - if (FilterText) { - SummaryText += FilterText; - } - } - - return SummaryText; + localStorage.setItem("_setting-app", JSON.stringify(updatedSettings)); + setSettingStore(updatedSettings); }; return ( From c0a48ac7bf162bf275bc277fe76dfb1fa5fbe986 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sat, 10 Aug 2024 14:13:45 +0330 Subject: [PATCH 2/2] install lz-string package and compress & decompress data for setting or getting from local storage --- package.json | 1 + src/lib/contexts/tableSetting.js | 64 +++++++++++++++++++++++--------- 2 files changed, 48 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index f9593c8..46f004d 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "dayjs": "^1.11.10", "formik": "^2.4.5", "jalali-moment": "^3.3.11", + "lz-string": "^1.5.0", "material-react-table": "^2.11.2", "next": "^14.2.3", "react": "^18", diff --git a/src/lib/contexts/tableSetting.js b/src/lib/contexts/tableSetting.js index a55bf58..2d565b6 100644 --- a/src/lib/contexts/tableSetting.js +++ b/src/lib/contexts/tableSetting.js @@ -1,32 +1,52 @@ "use client"; import { createContext, useCallback, useEffect, useState } from "react"; +import LZString from "lz-string"; export const TableSettingContext = createContext(); + +const decompressData = (compressedData) => { + const decompressed = LZString.decompressFromUTF16(compressedData); + if (decompressed === null) { + localStorage.removeItem("_setting-app"); + return null; + } else { + return JSON.parse(decompressed); + } +}; + export const TableSettingProvider = ({ children }) => { const [settingStore, setSettingStore] = useState({}); useEffect(() => { - const _localStorage = localStorage.getItem("_setting-app"); - if (_localStorage) { - setSettingStore(JSON.parse(_localStorage)); + const compressedData = localStorage.getItem("_setting-app"); + + const data = compressedData ? decompressData(compressedData) : null; + if (data) { + setSettingStore(data); } }, []); - const hideAction = useCallback((user_id, page_name, table_name, settingValue, columns) => { + const hideAction = useCallback((user_id, page_name, table_name, settingValue) => { clearAction(user_id, page_name, table_name, "hides"); - updateSettingStorage(user_id, page_name, table_name, "hides", settingValue, columns); + updateSettingStorage(user_id, page_name, table_name, "hides", settingValue); }, []); - const sortAction = useCallback((user_id, page_name, table_name, settingValue, columns) => { - updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue, columns); + + const sortAction = useCallback((user_id, page_name, table_name, settingValue) => { + updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue); }, []); - const filterAction = (user_id, page_name, table_name, settingValue, columns) => { - updateSettingStorage(user_id, page_name, table_name, "filters", settingValue, columns); + + const filterAction = (user_id, page_name, table_name, settingValue) => { + updateSettingStorage(user_id, page_name, table_name, "filters", settingValue); }; + const resetAction = (user_id, page_name, table_name) => { - const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {}; + const compressedData = localStorage.getItem("_setting-app"); + const prevLocalStorage = compressedData ? decompressData(compressedData) : {}; + const userSettings = prevLocalStorage[user_id] || {}; const pageSettings = userSettings[page_name] || {}; delete pageSettings[table_name]; + const resetData = { ...prevLocalStorage, [user_id]: { @@ -36,20 +56,26 @@ export const TableSettingProvider = ({ children }) => { }, }, }; - localStorage.setItem("_setting-app", JSON.stringify(resetData)); + + localStorage.setItem("_setting-app", LZString.compressToUTF16(JSON.stringify(resetData))); setSettingStore(resetData); }; - const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue, columns) => { - const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {}; + + const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue) => { + const compressedData = localStorage.getItem("_setting-app"); + const prevLocalStorage = compressedData ? decompressData(compressedData) : {}; + const userSettings = prevLocalStorage[user_id] || {}; const pageSettings = userSettings[page_name] || {}; const tableSettings = pageSettings[table_name] || {}; + let newSettings; if (settingType === "sorts" || settingType === "filters") { newSettings = [...settingValue]; } else { newSettings = { ...(tableSettings[settingType] || {}), ...settingValue }; } + const updatedLocalStorage = { ...prevLocalStorage, [user_id]: { @@ -63,15 +89,19 @@ export const TableSettingProvider = ({ children }) => { }, }, }; - localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage)); + + localStorage.setItem("_setting-app", LZString.compressToUTF16(JSON.stringify(updatedLocalStorage))); setSettingStore(updatedLocalStorage); }; const clearAction = (user_id, page_name, table_name, key) => { - const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {}; + const compressedData = localStorage.getItem("_setting-app"); + const prevLocalStorage = compressedData ? decompressData(compressedData) : {}; + const userSettings = prevLocalStorage[user_id] || {}; const pageSettings = userSettings[page_name] || {}; const tableSettings = pageSettings[table_name] || {}; + const updatedSettings = { ...prevLocalStorage, [user_id]: { @@ -86,7 +116,7 @@ export const TableSettingProvider = ({ children }) => { }, }; - localStorage.setItem("_setting-app", JSON.stringify(updatedSettings)); + localStorage.setItem("_setting-app", LZString.compressToUTF16(JSON.stringify(updatedSettings))); setSettingStore(updatedSettings); }; @@ -95,4 +125,4 @@ export const TableSettingProvider = ({ children }) => { {children} ); -}; +}; \ No newline at end of file