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

1
public/global.scss
View File

@@ -3,5 +3,4 @@
.filter-toast {
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
background-color: #d0dfe8;
border: 1px dashed #095b8c;
}

2
src/app/template.js
View File

@@ -12,7 +12,7 @@ const Template = ({children}) => {
<ThemeProvider theme={theme}>
<CssBaseline/>
{children}
<ToastContainer rtl containerId="filtering" closeButton={false}/>
<ToastContainer rtl containerId="datatable" closeButton={false}/>
</ThemeProvider>
</AppRouterCacheProvider>
)

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%"}}>

62
src/core/components/NotificationDesign/AskForKeepData.jsx Normal file
View File

@@ -0,0 +1,62 @@
'use client'
import SaveIcon from '@mui/icons-material/Save';
import {Box, Button, Typography} from "@mui/material";
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} = useTableSetting();
const onSaveFilter = () => {
const filteredItems = Object.keys(filterData).map(key => {
const value = filterData[key].value;
if (value !== "" &&
!(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
return filterData[key];
}
}).filter(Boolean);
filterAction(user_id, page_name, table_name, filteredItems, columns);
const settingValue = sortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
sortAction(user_id, page_name, table_name, settingValue, flatColumns);
toast.dismiss({containerId: "datatable"});
};
const handleDismiss = () => {
toast.dismiss({containerId: "datatable"});
};
return (
<Box sx={{width: "100%"}}>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
<Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
ذخیره سازی تغییرات
</Typography>
<SaveIcon sx={{color: "#155175"}}/>
</Box>
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography variant="caption">
آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟
</Typography>
</Box>
<Box sx={{display: "flex", gap: 1, mt: 1}}>
<Button variant="contained" onClick={handleDismiss} sx={{
backgroundColor: "#792626",
':hover': {backgroundColor: "#792626"},
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
}}>رد
کردن</Button>
<Button variant="contained" component="label" endIcon={<DownloadIcon/>}
onClick={onSaveFilter}
sx={{
backgroundColor: "#155175",
':hover': {backgroundColor: "#155175"},
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
}}>ذخیره
فیلتر</Button>
</Box>
</Box>
);
}
export default AskForKeepData;

60
src/core/components/NotificationDesign/AskForKeepFilter.jsx Normal file
View File

@@ -0,0 +1,60 @@
'use client'
import SaveIcon from '@mui/icons-material/Save';
import {Box, Button, Typography} from "@mui/material";
import DownloadIcon from '@mui/icons-material/Download';
import {toast} from "react-toastify";
import useTableSetting from "@/lib/hooks/useTableSetting";
function AskForKeepFilter({values, user_id, page_name, table_name, columns}) {
const {filterAction} = useTableSetting();
const onSaveFilter = () => {
const filteredItems = Object.keys(values).map(key => {
const value = values[key].value;
if (value !== "" &&
!(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
return values[key];
}
}).filter(Boolean);
filterAction(user_id, page_name, table_name, filteredItems, columns)
toast.dismiss({containerId: "datatable", id: "filter"});
};
const handleDismiss = () => {
toast.dismiss({containerId: "datatable", id: "filter"});
};
return (
<Box sx={{width: "100%"}}>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
<Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
ذخیره سازی فیلتر
</Typography>
<SaveIcon sx={{color: "#155175"}}/>
</Box>
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography variant="caption">
آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
</Typography>
</Box>
<Box sx={{display: "flex", gap: 1, mt: 1}}>
<Button variant="contained" onClick={handleDismiss} sx={{
backgroundColor: "#792626",
':hover': {backgroundColor: "#792626"},
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
}}>رد
کردن</Button>
<Button variant="contained" component="label" endIcon={<DownloadIcon/>}
onClick={onSaveFilter}
sx={{
backgroundColor: "#155175",
':hover': {backgroundColor: "#155175"},
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
}}>ذخیره
فیلتر</Button>
</Box>
</Box>
);
}
export default AskForKeepFilter;

19
src/core/components/NotificationDesign/AskForKeep.jsx → src/core/components/NotificationDesign/AskForKeepSort.jsx
View File

@@ -4,24 +4,31 @@ import SaveIcon from '@mui/icons-material/Save';
import {Box, Button, Typography} from "@mui/material";
import DownloadIcon from '@mui/icons-material/Download';
import {toast} from "react-toastify";
import useTableSetting from "@/lib/hooks/useTableSetting";
function AskForKeep({onSaveFilter}) {
function AskForKeepSort({event, user_id, page_name, table_name, flatColumns}) {
const {settingStore, sortAction} = useTableSetting();
const onSaveFilter = () => {
const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
sortAction(user_id, page_name, table_name, settingValue, flatColumns);
toast.dismiss({containerId: "filtering", id: "sort"});
};
const handleDismiss = () => {
toast.dismiss({containerId: "filtering"});
toast.dismiss({containerId: "filtering", id: "sort"});
};
return (
<Box sx={{width: "100%"}}>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
<Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
ذخیره سازی اطلاعات
ذخیره سازی ترتیب
</Typography>
<SaveIcon sx={{color: "#155175"}}/>
</Box>
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography variant="caption">
آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
آیا مایل به ذخیره ترتیب های اعمال شده برای دفعات بعد هستید؟
</Typography>
</Box>
<Box sx={{display: "flex", gap: 1, mt: 1}}>
@@ -38,10 +45,10 @@ function AskForKeep({onSaveFilter}) {
':hover': {backgroundColor: "#155175"},
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
}}>ذخیره
فیلتر</Button>
ترتیب</Button>
</Box>
</Box>
);
}
export default AskForKeep;
export default AskForKeepSort;

19
src/lib/contexts/DataTable.jsx
View File

@@ -1,12 +1,27 @@
import {createContext, useState} from "react";
import {createContext, useEffect, useState} from "react";
import {toast} from "react-toastify";
import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
export const DataTableContext = createContext();
const DataTableProvider = ({children}) => {
const [filterData, setFilterData] = useState({});
const [sortData, setSortData] = useState([]);
useEffect(() => {
toast(<AskForKeepData filterData={filterData} sortData={sortData} user_id={user_id} page_name={page_name}
table_name={table_name}
columns={columns}/>, {
containerId: "datatable",
className: "filter-toast",
position: "bottom-left",
draggable: true,
autoClose: false,
});
}, [filterData, sortData]);
return (
<DataTableContext.Provider value={{filterData, setFilterData}}>
<DataTableContext.Provider value={{filterData, setFilterData, sortData, setSortData}}>
{children}
</DataTableContext.Provider>
);

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

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