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", "next": "^14.2.3",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-toastify": "^10.0.5",
"sass": "^1.75.0", "sass": "^1.75.0",
"stylis": "^4.3.1", "stylis": "^4.3.1",
"stylis-plugin-rtl": "^2.1.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}) => { const Layout = ({children}) => {
return ( return (
<>{children}</> <>
{children}
</>
) )
} }

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

@@ -1,6 +1,8 @@
import {Box, Stack} from "@mui/material"; import {Box, Stack} from "@mui/material";
import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo"; import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar"; import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
import 'react-toastify/dist/ReactToastify.css';
import {ToastContainer} from "react-toastify";
const Template = ({children}) => { const Template = ({children}) => {
return (<Stack> return (<Stack>
@@ -8,6 +10,7 @@ const Template = ({children}) => {
<Box> <Box>
<HeaderWithSidebar> <HeaderWithSidebar>
{children} {children}
<ToastContainer/>
</HeaderWithSidebar> </HeaderWithSidebar>
</Box> </Box>
</Stack>) </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 {CssBaseline, ThemeProvider} from "@mui/material";
import theme from "@/core/utils/theme"; import theme from "@/core/utils/theme";
import {AppRouterCacheProvider} from "@mui/material-nextjs/v14-appRouter"; 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}) => { const Template = ({children}) => {
return ( return (
@@ -10,6 +12,7 @@ const Template = ({children}) => {
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline/> <CssBaseline/>
{children} {children}
<ToastContainer rtl containerId="filtering" closeButton={false}/>
</ThemeProvider> </ThemeProvider>
</AppRouterCacheProvider> </AppRouterCacheProvider>
) )

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

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