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

start some change on sending data to local storage

Browse Source
This commit is contained in:
Mohammad Jalali
2024-07-08 12:27:06 +03:30
parent fa8caad7ef
commit 37dccc5ec3
9 changed files with 192 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,8 @@ import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
import Toolbar from "@/components/home/Toolbar";
import useDataTable from "@/lib/hooks/useDataTable";
import {useMemo, useState} from "react";
import {toast} from "react-toastify";
import AskForKeepSort from "@/core/components/NotificationDesign/AskForKeepSort";
const data = [
{
@@ -76,11 +78,33 @@ const data = [
];
const DataTable_Main = (props) => {
const {filterData} = useDataTable();
const {filterData, sortData, setSortData} = useDataTable();
const {table_url, user_id, page_name, table_name, columns, initialStateProps} = props
const flatColumns = flattenArrayOfObjects(columns, 'columns')
const {settingStore, hideAction, sortAction} = useTableSetting();
const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
const onColumnVisibilityChange = (event) => {
const settingValue = event();
hideAction(user_id, page_name, table_name, settingValue, flatColumns);
};
const onSortingChange = (event) => {
toast.dismiss({containerId: "datatable", id: "sort"});
setSortData(event);
setTimeout(() => {
toast(<AskForKeepSort event={event} user_id={user_id} page_name={page_name} table_name={table_name}
columns={columns} flatColumns={flatColumns}/>, {
containerId: "datatable",
toastId: "sort",
className: "filter-toast",
position: "bottom-left",
draggable: true,
autoClose: false,
});
}, 1000);
}
const filters = Object.keys(filterData)
.map(key => {
const value = filterData[key].value;
@@ -102,34 +126,19 @@ const DataTable_Main = (props) => {
return `${table_url}?${params}`;
}, [table_url, finalFilters, pagination, columns]);
const onColumnVisibilityChange = (event) => {
const settingValue = event();
hideAction(user_id, page_name, table_name, settingValue, flatColumns);
};
const onSortingChange = (event) => {
const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
sortAction(user_id, page_name, table_name, settingValue, flatColumns);
}
const table = useMaterialReactTable({
localization: FA_DATATABLE_LOCALIZATION,
columns,
data: data,
// manualSorting: true,
renderTopToolbarCustomActions: ({table}) => (<>
<Toolbar
columns={flatColumns}
/>
</>),
initialState: {
density: 'compact',
columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
sorting: sortData,
...initialStateProps
},
state: {
columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
sorting: sortData,
pagination
},
muiTableHeadProps: {
@@ -157,10 +166,15 @@ const DataTable_Main = (props) => {
},
manualFiltering: true,
manualPagination: true,
onPaginationChange: setPagination,
manualSorting: true,
onPaginationChange: setPagination,
onColumnVisibilityChange: onColumnVisibilityChange,
onSortingChange: onSortingChange,
renderTopToolbarCustomActions: ({table}) => (<>
<Toolbar
columns={flatColumns}
/>
</>),
...props
})

33
src/core/components/DataTable/filter/FilterBody.jsx
View File

@@ -3,12 +3,11 @@
import {Box, Button, Drawer, styled} from "@mui/material";
import {Form, Formik} from "formik";
import useTableSetting from "@/lib/hooks/useTableSetting";
import {useEffect, useRef, useState} from "react";
import {useEffect, useState} from "react";
import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
import * as Yup from "yup";
import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
import {toast} from "react-toastify";
import AskForKeep from "@/core/components/NotificationDesign/AskForKeep";
import useDataTable from "@/lib/hooks/useDataTable";
const ScrollBox = styled(Box)({
@@ -29,14 +28,10 @@ const ScrollBox = styled(Box)({
});
function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, table_name}) {
const {settingStore, filterAction} = useTableSetting();
const {settingStore} = useTableSetting();
const [initialValues, setInitialValues] = useState({});
const [validationSchema, setValidationSchema] = useState({});
const {filterData, setFilterData} = useDataTable();
const filterDataRef = useRef(filterData);
useEffect(() => {
filterDataRef.current = filterData;
}, [filterData]);
useEffect(() => {
const values = columns.reduce((acc, column) => {
@@ -104,32 +99,12 @@ function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, t
const handleSubmit = (values, {setSubmitting}) => {
toast.dismiss({containerId: "filtering"});
toast.dismiss({containerId: "datatable", id: "filter"});
setDrawerState(false);
setFilterData(values);
toast(<AskForKeep onSaveFilter={onSaveFilter}/>, {
containerId: "filtering",
className: "filter-toast",
position: "bottom-left",
draggable: true,
autoClose: false,
});
setFilterData(values)
setSubmitting(false);
};
const onSaveFilter = () => {
const currentFilterData = filterDataRef.current;
const arrayOfObjects = Object.keys(currentFilterData).map(key => {
const value = currentFilterData[key].value;
if (value !== "" &&
!(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
return currentFilterData[key];
}
}).filter(Boolean);
filterAction(user_id, page_name, table_name, arrayOfObjects, columns)
toast.dismiss({containerId: "filtering"});
};
return (
<Drawer open={drawerState} onClose={() => setDrawerState(false)}
sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>