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

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>
)}