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

Merge branch 'feature/localStorage_performance' into 'develop'

Browse Source 
Feature/local storage performance

See merge request witel-front-end/rms!15
This commit is contained in:
AmirHossein Mahmoodi
2024-08-10 12:15:27 +00:00
parent f62ecbfaaa c0a48ac7bf
commit 8edf267d93
4 changed files with 71 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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",

7
src/core/components/NotificationDesign/AskForKeepData.jsx
View File

@@ -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)

2
src/lib/contexts/DataTable.js
View File

@@ -61,8 +61,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 {

141
src/lib/contexts/tableSetting.js
View File

@@ -1,31 +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) => {
updateSettingStorage(user_id, page_name, table_name, "hides", 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);
}, []);
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]: {
@@ -35,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]: {
@@ -58,79 +85,39 @@ export const TableSettingProvider = ({ children }) => {
[table_name]: {
...tableSettings,
[settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
summary: SummaryTextMessage(
{
...tableSettings,
[settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
},
columns,
),
},
},
},
};
localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
localStorage.setItem("_setting-app", LZString.compressToUTF16(JSON.stringify(updatedLocalStorage)));
setSettingStore(updatedLocalStorage);
};
const SummaryTextMessage = (values, columns) => {
let SummaryText = "";
let HideText = "";
let FilterText = "";
let SortText = "";
const clearAction = (user_id, page_name, table_name, key) => {
const compressedData = localStorage.getItem("_setting-app");
const prevLocalStorage = compressedData ? decompressData(compressedData) : {};
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(", ");
}
const userSettings = prevLocalStorage[user_id] || {};
const pageSettings = userSettings[page_name] || {};
const tableSettings = pageSettings[table_name] || {};
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(", ");
}
}
const updatedSettings = {
...prevLocalStorage,
[user_id]: {
...userSettings,
[page_name]: {
...pageSettings,
[table_name]: {
...tableSettings,
[key]: Array.isArray(tableSettings[key]) ? [] : {},
},
},
},
};
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", LZString.compressToUTF16(JSON.stringify(updatedSettings)));
setSettingStore(updatedSettings);
};
return (
@@ -138,4 +125,4 @@ export const TableSettingProvider = ({ children }) => {
{children}
</TableSettingContext.Provider>
);
};
};