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

Merge branch 'feature/datatable_hide_action' into 'develop'

Browse Source 
debug hide action of datatable

See merge request witel-front-end/rms!10
This commit is contained in:
AmirHossein Mahmoodi
2024-07-14 08:01:09 +00:00
parent 93eb24818f 363135c10f
commit 08cde8b00b
4 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/core/components/DataTable/Main.js
View File

@@ -11,15 +11,14 @@ import useSWR from "swr";
const DataTable_Main = (props) => {
const request = useRequest();
const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
const { filterData, sortData, setSortData } = useDataTable();
const { filterData, sortData, setSortData, hideData, setHideData } = useDataTable();
const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
const flatColumns = flattenArrayOfObjects(columns, "columns");
const { settingStore, hideAction } = useTableSetting();
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
const onColumnVisibilityChange = (event) => {
const settingValue = event();
hideAction(user_id, page_name, table_name, settingValue, flatColumns);
setHideData(event);
};
const onSortingChange = (event) => {
@@ -57,13 +56,13 @@ const DataTable_Main = (props) => {
data: data?.data ?? [],
initialState: {
density: "compact",
columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
columnVisibility: hideData,
sorting: sortData,
...initialStateProps,
},
state: {
showProgressBars: isValidating,
columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
columnVisibility: hideData,
sorting: sortData,
pagination,
},

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

@@ -6,8 +6,8 @@ import DownloadIcon from "@mui/icons-material/Download";
import { toast } from "react-toastify";
import useTableSetting from "@/lib/hooks/useTableSetting";
function AskForKeepData({ filterData, sortData, user_id, page_name, table_name, columns }) {
const { filterAction, sortAction } = useTableSetting();
function AskForKeepData({ filterData, sortData, hideData, user_id, page_name, table_name, columns }) {
const { filterAction, sortAction, hideAction } = useTableSetting();
const onSaveFilter = () => {
const filteredItems = Object.keys(filterData)
@@ -25,8 +25,8 @@ function AskForKeepData({ filterData, sortData, user_id, page_name, table_name,
})
.filter(Boolean);
filterAction(user_id, page_name, table_name, filteredItems, columns);
sortAction(user_id, page_name, table_name, sortData, columns);
hideAction(user_id, page_name, table_name, hideData, columns);
toast.dismiss({ containerId: "datatable" });
};

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

@@ -11,9 +11,11 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
const [isInitStates, setInitStates] = useState(false);
const flatColumns = flattenArrayOfObjects(columns, "columns");
const [initFilter, setInitFilter] = useState({});
const [initSort, setInitSort] = useState([]);
const [filterData, setFilterData] = useState({});
const [initSort, setInitSort] = useState([]);
const [sortData, setSortData] = useState([]);
const [initHide, setInitHide] = useState([]);
const [hideData, setHideData] = useState([]);
useEffect(() => {
if (!settingStore) return;
@@ -47,22 +49,26 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
return acc;
}, {});
setFilterData(values);
setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
setInitFilter(values);
setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
setHideData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"] || []);
setInitHide(settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"] || []);
setInitStates(true);
}, [settingStore, isInitStates]);
useEffect(() => {
if (
JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
JSON.stringify(initSort) !== JSON.stringify(sortData)
JSON.stringify(initSort) !== JSON.stringify(sortData) ||
JSON.stringify(initHide) !== JSON.stringify(hideData)
) {
if (!toast.isActive("keep_data", "filtering")) {
toast(
<AskForKeepData
filterData={filterData}
sortData={sortData}
hideData={hideData}
user_id={user_id}
page_name={page_name}
table_name={table_name}
@@ -85,6 +91,7 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
<AskForKeepData
filterData={filterData}
sortData={sortData}
hideData={hideData}
user_id={user_id}
page_name={page_name}
table_name={table_name}
@@ -96,12 +103,12 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns }
} else {
toast.dismiss({ containerId: "datatable" });
}
}, [filterData, sortData]);
}, [filterData, sortData, hideData]);
if (!isInitStates) return null;
return (
<DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
<DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData, hideData, setHideData }}>
{children}
</DataTableContext.Provider>
);

4
src/lib/hooks/useDataTable.js
View File

@@ -2,8 +2,8 @@ import { useContext } from "react";
import { DataTableContext } from "@/lib/contexts/DataTable";
const useTableSetting = () => {
const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext);
return { filterData, setFilterData, sortData, setSortData };
const { filterData, setFilterData, sortData, setSortData, hideData, setHideData } = useContext(DataTableContext);
return { filterData, setFilterData, sortData, setSortData, hideData, setHideData };
};
export default useTableSetting;