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

complete toast and notification for keeping data in local storage for filtering and move on next step

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-16 11:34:01 +03:30
parent fd727b9cff
commit 9886ed52db
8 changed files with 138 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -25,6 +25,7 @@
"next": "^14.2.3",
"react": "^18",
"react-dom": "^18",
"react-toastify": "^10.0.5",
"sass": "^1.75.0",
"stylis": "^4.3.1",
"stylis-plugin-rtl": "^2.1.1",

6
src/app/(withAuth)/dashboard/layout.js
View File

@@ -1,6 +1,10 @@
import 'react-toastify/dist/ReactToastify.css';
const Layout = ({children}) => {
return (
<>{children}</>
<>
{children}
</>
)
}

3
src/app/(withAuth)/dashboard/template.js
View File

@@ -1,6 +1,8 @@
import {Box, Stack} from "@mui/material";
import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
import 'react-toastify/dist/ReactToastify.css';
import {ToastContainer} from "react-toastify";
const Template = ({children}) => {
return (<Stack>
@@ -8,6 +10,7 @@ const Template = ({children}) => {
<Box>
<HeaderWithSidebar>
{children}
<ToastContainer/>
</HeaderWithSidebar>
</Box>
</Stack>)

5
src/app/template.js
View File

@@ -2,7 +2,9 @@ import cacheProviderRtl from "@/core/utils/cacheRtl";
import {CssBaseline, ThemeProvider} from "@mui/material";
import theme from "@/core/utils/theme";
import {AppRouterCacheProvider} from "@mui/material-nextjs/v14-appRouter";
import "^/global.scss"
import 'react-toastify/dist/ReactToastify.css';
import "^/global.scss";
import {ToastContainer} from "react-toastify";
const Template = ({children}) => {
return (
@@ -10,6 +12,7 @@ const Template = ({children}) => {
<ThemeProvider theme={theme}>
<CssBaseline/>
{children}
<ToastContainer rtl containerId="filtering" closeButton={false}/>
</ThemeProvider>
</AppRouterCacheProvider>
)

10
src/components/home/Toolbar.jsx
View File

@@ -1,8 +1,16 @@
import {Button} from "@mui/material";
import {toast} from "react-toastify";
const Toolbar = ({columns}) => {
const notif = () => {
toast("Wow so easy!")
}
return (
<Button>add something</Button>
<>
<Button onClick={notif}>add something</Button>
</>
)
}
export default Toolbar

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

@@ -7,6 +7,8 @@ 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";
const ScrollBox = styled(Box)({
flexGrow: 1,
@@ -89,10 +91,19 @@ function FilterBody({columns, drawerState, setDrawerState}) {
);
const handleSubmit = (values, {setSubmitting}) => {
console.log("Form values:", values);
toast(<AskForKeep onSaveFilter={onSaveFilter}/>, {
draggable: true,
containerId: "filtering",
autoClose: false,
position: "bottom-left",
});
setSubmitting(false);
};
const onSaveFilter = () => {
toast.dismiss({containerId: "filtering"});
};
return (
<Drawer open={drawerState} onClose={() => setDrawerState(false)}
sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>
@@ -104,60 +115,62 @@ function FilterBody({columns, drawerState, setDrawerState}) {
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{({
values,
handleChange,
handleBlur,
setFieldValue,
errors,
touched,
isSubmitting,
isValid,
dirty,
resetForm
}) => (
<Form>
<Box sx={{px: 1, py: 2}}>
{
columns.map((column) => (
column.enableColumnFilter && (
<FilterBodyField
key={column.id}
column={column}
filterParameters={values[column.id]}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setFieldValue}
resetForm={resetForm}
errors={errors}
touched={touched}
/>
)
))
}
</Box>
<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
pb: 2
}}>
<Button
type="submit"
variant="contained"
size="large"
disabled={isSubmitting || !isValid || !dirty}
sx={{
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "#16534a", ':hover': {
backgroundColor: "#16534a",
}, width: "50%"
}}>
اعمال فیلتر
</Button>
</Box>
</Form>
)}
{
({
values,
handleChange,
handleBlur,
setFieldValue,
errors,
touched,
isSubmitting,
isValid,
dirty,
resetForm
}) => (
<Form>
<Box sx={{px: 1, py: 2}}>
{
columns.map((column) => (
column.enableColumnFilter && (
<FilterBodyField
key={column.id}
column={column}
filterParameters={values[column.id]}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setFieldValue}
resetForm={resetForm}
errors={errors}
touched={touched}
/>
)
))
}
</Box>
<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
pb: 2
}}>
<Button
type="submit"
variant="contained"
size="large"
disabled={isSubmitting || !isValid || !dirty}
sx={{
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "#16534a", ':hover': {
backgroundColor: "#16534a",
}, width: "50%"
}}>
اعمال فیلتر
</Button>
</Box>
</Form>
)}
</Formik>
</ScrollBox>
)}

47
src/core/components/NotificationDesign/AskForKeep.jsx Normal file
View File

@@ -0,0 +1,47 @@
'use client'
import BeenhereIcon from '@mui/icons-material/Beenhere';
import {Box, Button, Typography} from "@mui/material";
import DownloadIcon from '@mui/icons-material/Download';
import {toast} from "react-toastify";
function AskForKeep({onSaveFilter}) {
const handleDismiss = () => {
toast.dismiss({containerId: "filtering"});
};
return (
<Box sx={{width: "100%"}}>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
<Typography color="#16534a" variant="subtitle1" sx={{fontWeight: "500"}}>
ذخیره سازی اطلاعات
</Typography>
<BeenhereIcon sx={{color: "#16534a"}}/>
</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: "#16534a",
':hover': {backgroundColor: "#16534a"},
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
}}>ذخیره
فیلتر</Button>
</Box>
</Box>
);
}
export default AskForKeep;

2
src/core/utils/theme.js
View File

@@ -1,5 +1,5 @@
'use client'
import { createTheme } from "@mui/material";
import {createTheme} from "@mui/material";
const theme = createTheme({
direction: 'rtl',