From 37dccc5ec36318cfd0b31543016575c33d7b49cc Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Mon, 8 Jul 2024 12:27:06 +0330 Subject: [PATCH] start some change on sending data to local storage --- public/global.scss | 1 - src/app/template.js | 2 +- src/core/components/DataTable/Main.js | 52 ++++++++++------ .../DataTable/filter/FilterBody.jsx | 33 ++-------- .../NotificationDesign/AskForKeepData.jsx | 62 +++++++++++++++++++ .../NotificationDesign/AskForKeepFilter.jsx | 60 ++++++++++++++++++ .../{AskForKeep.jsx => AskForKeepSort.jsx} | 19 ++++-- src/lib/contexts/DataTable.jsx | 19 +++++- src/lib/hooks/useDataTable.jsx | 4 +- 9 files changed, 192 insertions(+), 60 deletions(-) create mode 100644 src/core/components/NotificationDesign/AskForKeepData.jsx create mode 100644 src/core/components/NotificationDesign/AskForKeepFilter.jsx rename src/core/components/NotificationDesign/{AskForKeep.jsx => AskForKeepSort.jsx} (69%) diff --git a/public/global.scss b/public/global.scss index a383b5f..e3d2485 100644 --- a/public/global.scss +++ b/public/global.scss @@ -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; } \ No newline at end of file diff --git a/src/app/template.js b/src/app/template.js index 14f15b6..48a2ae9 100644 --- a/src/app/template.js +++ b/src/app/template.js @@ -12,7 +12,7 @@ const Template = ({children}) => { {children} - + ) diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js index ec33f55..10a7a40 100644 --- a/src/core/components/DataTable/Main.js +++ b/src/core/components/DataTable/Main.js @@ -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(, { + 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}) => (<> - - ), 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}) => (<> + + ), ...props }) diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx index 385981b..df0509b 100644 --- a/src/core/components/DataTable/filter/FilterBody.jsx +++ b/src/core/components/DataTable/filter/FilterBody.jsx @@ -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(, { - 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 ( setDrawerState(false)} sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}> diff --git a/src/core/components/NotificationDesign/AskForKeepData.jsx b/src/core/components/NotificationDesign/AskForKeepData.jsx new file mode 100644 index 0000000..65a8620 --- /dev/null +++ b/src/core/components/NotificationDesign/AskForKeepData.jsx @@ -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 ( + + + + ذخیره سازی تغییرات + + + + + + آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟ + + + + + + + + ); +} + +export default AskForKeepData; \ No newline at end of file diff --git a/src/core/components/NotificationDesign/AskForKeepFilter.jsx b/src/core/components/NotificationDesign/AskForKeepFilter.jsx new file mode 100644 index 0000000..3f0e321 --- /dev/null +++ b/src/core/components/NotificationDesign/AskForKeepFilter.jsx @@ -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 ( + + + + ذخیره سازی فیلتر + + + + + + آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟ + + + + + + + + ); +} + +export default AskForKeepFilter; \ No newline at end of file diff --git a/src/core/components/NotificationDesign/AskForKeep.jsx b/src/core/components/NotificationDesign/AskForKeepSort.jsx similarity index 69% rename from src/core/components/NotificationDesign/AskForKeep.jsx rename to src/core/components/NotificationDesign/AskForKeepSort.jsx index 7a68d2f..0a87ee9 100644 --- a/src/core/components/NotificationDesign/AskForKeep.jsx +++ b/src/core/components/NotificationDesign/AskForKeepSort.jsx @@ -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 ( - ذخیره سازی اطلاعات + ذخیره سازی ترتیب - آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟ + آیا مایل به ذخیره ترتیب های اعمال شده برای دفعات بعد هستید؟ @@ -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", }}>ذخیره - فیلتر + ترتیب ); } -export default AskForKeep; \ No newline at end of file +export default AskForKeepSort; \ No newline at end of file diff --git a/src/lib/contexts/DataTable.jsx b/src/lib/contexts/DataTable.jsx index 975b859..cd1fe1d 100644 --- a/src/lib/contexts/DataTable.jsx +++ b/src/lib/contexts/DataTable.jsx @@ -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(, { + containerId: "datatable", + className: "filter-toast", + position: "bottom-left", + draggable: true, + autoClose: false, + }); + }, [filterData, sortData]); return ( - + {children} ); diff --git a/src/lib/hooks/useDataTable.jsx b/src/lib/hooks/useDataTable.jsx index ba7acb5..a38f648 100644 --- a/src/lib/hooks/useDataTable.jsx +++ b/src/lib/hooks/useDataTable.jsx @@ -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;