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

complete making needed data for keeping in local storage

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-23 09:45:25 +03:30
parent 18edfac9f9
commit acc13ef1d5
9 changed files with 94 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/components/DataTable/Main.js
View File

@@ -4,6 +4,7 @@ import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable";
import useTableSetting from "@/lib/hooks/useTableSetting";
import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
import Toolbar from "@/components/home/Toolbar";
import useDataTable from "@/lib/hooks/useDataTable";
const data = [
{
@@ -74,6 +75,7 @@ const data = [
];
const DataTable_Main = (props) => {
const {filterData} = useDataTable();
const {userId, pageName, tableName, columns, initialStateProps} = props
const flatColumns = flattenArrayOfObjects(columns, 'columns')

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

@@ -3,12 +3,13 @@
import {Box, Button, Drawer, styled} from "@mui/material";
import {Form, Formik} from "formik";
import useTableSetting from "@/lib/hooks/useTableSetting";
import {useEffect, useState} from "react";
import {useEffect, useRef, 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)({
flexGrow: 1,
@@ -30,6 +31,13 @@ const ScrollBox = styled(Box)({
function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tableName}) {
const {settingStore, filterAction} = useTableSetting();
const [initialValues, setInitialValues] = useState({});
const [validationSchema, setValidationSchema] = useState({});
const {filterData, setFilterData} = useDataTable();
const filterDataRef = useRef(filterData); // Create a ref to hold the latest filterData
useEffect(() => {
filterDataRef.current = filterData; // Update ref whenever filterData changes
}, [filterData]);
useEffect(() => {
const values = columns.reduce((acc, column) => {
@@ -37,18 +45,21 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
if (column.datatype === 'array') {
acc[column.id] = {
id: column.id,
value: filter?.value || [],
filterFn: filter?.fn || column._filterFn,
datatype: column.datatype
};
} else if (column._filterFn === "between") {
acc[column.id] = {
id: column.id,
value: filter?.value || ["", ""],
filterFn: filter?.fn || column._filterFn,
datatype: column.datatype
};
} else {
acc[column.id] = {
id: column.id,
value: filter?.value || '',
filterFn: filter?.fn || column._filterFn,
datatype: column.datatype
@@ -56,39 +67,47 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
}
return acc;
}, {});
setInitialValues(values);
}, [columns, settingStore, userId, pageName, tableName]);
setInitialValues(Object.keys(filterData).length !== 0 ? filterData : values);
}, [columns, settingStore, userId, pageName, tableName, filterData]);
useEffect(() => {
const generatedSchema = Yup.object().shape(
Object.keys(initialValues).reduce((acc, key) => {
const initialValue = initialValues[key];
if (initialValue.filterFn === "between") {
acc[key] = Yup.object().shape({
value: Yup.array()
.of(Yup.string().nullable())
.test({
test(value, ctx) {
const [start, end] = value || ["", ""];
if (initialValue.datatype === "numeric" && parseInt(end, 10) <= parseInt(start, 10)) {
return ctx.createError({
message: `مقدار وارده باید بیشتر از (${start}) باشد`,
});
} else if ((start && !end) || (!start && end)) {
return ctx.createError({
message: "این بخش را تکمیل نمایید",
});
}
return true;
},
}),
});
}
return acc;
}, {})
);
setValidationSchema(generatedSchema);
}, [initialValues]);
const validationSchema = Yup.object().shape(
columns.reduce((acc, column) => {
if (column._filterFn === "between") {
acc[column.id] = Yup.object().shape({
value: Yup.array()
.of(Yup.string().nullable())
.test({
test(value, ctx) {
const [start, end] = value || ["", ""];
if (column.datatype === "numeric" && start && end && parseInt(end, 10) <= parseInt(start, 10)) {
return ctx.createError({
message: `مقدار وارده باید بیشتر از (${start}) باشد`,
});
} else if ((start && !end) || (!start && end)) {
return ctx.createError({
message: "این بخش را تکمیل نمایید",
});
}
return true;
},
}),
});
}
return acc;
}, {})
);
const handleSubmit = (values, {setSubmitting}) => {
toast.dismiss({containerId: "filtering"});
setDrawerState(false);
setFilterData(values);
toast(<AskForKeep onSaveFilter={onSaveFilter}/>, {
containerId: "filtering",
className: "filter-toast",
@@ -100,6 +119,15 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
};
const onSaveFilter = () => {
const currentFilterData = filterDataRef.current; // Use the ref to get the latest filterData
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);
console.log("arrayOfObjects", arrayOfObjects);
toast.dismiss({containerId: "filtering"});
};
@@ -168,7 +196,6 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
</Button>
</Box>
</Form>
)}
</Formik>
</ScrollBox>

10
src/core/components/DataTable/filter/FilterBodyField.jsx
View File

@@ -36,7 +36,7 @@ function FilterBodyField({
return (
<>
{column.datatype === "numeric" && filterParameters.filterFn === "between" ? (
{filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? (
<CustomTextFieldRange
column={column}
filterParameters={filterParameters}
@@ -47,7 +47,7 @@ function FilterBodyField({
errors={errors}
touched={touched}
/>
) : column.datatype === "numeric" && filterParameters.filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
<CustomSelect
column={column}
filterParameters={filterParameters}
@@ -55,7 +55,7 @@ function FilterBodyField({
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "date" && filterParameters.filterFn === "equals" ? (
) : filterParameters.datatype === "date" && filterParameters.filterFn === "equals" ? (
<CustomDatePicker
column={column}
filterParameters={filterParameters}
@@ -63,7 +63,7 @@ function FilterBodyField({
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "date" && filterParameters.filterFn === "between" ? (
) : filterParameters.datatype === "date" && filterParameters.filterFn === "between" ? (
<CustomDatePickerRange
column={column}
filterParameters={filterParameters}
@@ -73,7 +73,7 @@ function FilterBodyField({
errors={errors}
touched={touched}
/>
) : column.datatype === "array" && filterParameters.filterFn === "equals" ? (
) : filterParameters.datatype === "array" && filterParameters.filterFn === "equals" ? (
<CustomSelectMultiple
column={column}
filterParameters={filterParameters}

1
src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
View File

@@ -9,6 +9,7 @@ function CustomTextField({
handleChange,
handleBlur
}) {
return (
<TextField
id={column.id}

5
src/core/components/DataTable/index.js
View File

@@ -1,8 +1,11 @@
import DataTable_Main from "./Main";
import DataTableProvider from "@/lib/contexts/DataTable";
const DataTable = (props) => {
return (
<DataTable_Main {...props}/>
<DataTableProvider>
<DataTable_Main {...props}/>
</DataTableProvider>
);
};