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

complete making data part working on validation bug and after that go for react toastify

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-12 15:17:06 +03:30
parent e71a682deb
commit c599ae74ae
10 changed files with 125 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,9 +4,9 @@ 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 FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
import * as Yup from "yup";
import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
const ScrollBox = styled(Box)({
flexGrow: 1,
@@ -38,11 +38,23 @@ function FilterBody({columns, drawerState, setDrawerState}) {
if (!column.enableColumnFilter) return acc;
const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id);
if (column.datatype === 'array') {
acc[column.id] = filter?.value || [];
acc[column.id] = {
value: filter?.value || [],
filterFn: filter?.fn || column._filterFn,
datatype: column.datatype
};
} else if (column._filterFn === "between") {
acc[column.id] = filter?.value || ["", ""];
acc[column.id] = {
value: filter?.value || ["", ""],
filterFn: filter?.fn || column._filterFn,
datatype: column.datatype
};
} else {
acc[column.id] = filter?.value || '';
acc[column.id] = {
value: filter?.value || '',
filterFn: filter?.fn || column._filterFn,
datatype: column.datatype
};
}
return acc;
}, {});
@@ -54,7 +66,8 @@ function FilterBody({columns, drawerState, setDrawerState}) {
if (column._filterFn === "between" && column.datatype === "numeric") {
acc[column.id] = Yup.array().of(Yup.string()).test({
test(value, ctx) {
const [start, end] = value || ["", ""];
console.log("vavavava", value)
const [start, end] = value.value || ["", ""];
const startInt = parseInt(start, 10);
const endInt = parseInt(end, 10);
if (start && end && endInt <= startInt) {
@@ -99,24 +112,28 @@ function FilterBody({columns, drawerState, setDrawerState}) {
touched,
isSubmitting,
isValid,
dirty
dirty,
resetForm
}) => (
<Form>
<Box sx={{px: 1, py: 2}}>
{columns.map((column) => (
column.enableColumnFilter && (
<FilterBodyField
key={column.id}
column={column}
value={values[column.id]}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setFieldValue}
errors={errors}
touched={touched}
/>
)
))}
{
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',

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

@@ -1,14 +1,11 @@
'use client'
import {useState} from "react";
import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
import useTableSetting from "@/lib/hooks/useTableSetting";
import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange";
import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
const columnFilterModeOptionFa = {
equals: "برابر",
@@ -18,28 +15,31 @@ const columnFilterModeOptionFa = {
greaterThan: "بزرگتر",
fuzzy: "فازی",
between: "مابین"
}
};
function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue, errors, touched}) {
function FilterBodyField({
column,
filterParameters,
handleChange,
handleBlur,
setFieldValue,
errors,
touched,
resetForm
}) {
const [anchorEl, setAnchorEl] = useState(null);
const [userId, setUserId] = useState(0);
const [pageName, setPageName] = useState('testPage');
const [tableName, setTableName] = useState('testTable');
const {settingStore} = useTableSetting();
const defaultFilter = (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn;
const defaultFilterTranslation = columnFilterModeOptionFa[defaultFilter] || defaultFilter;
const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn;
const handleOpenFilterBox = (event) => {
setAnchorEl(event.currentTarget);
};
const handleCloseFilterBox = () => {
setAnchorEl(null);
};
return (
<>
{column.datatype === "numeric" && column._filterFn === "between" ? (
{column.datatype === "numeric" && filterParameters.filterFn === "between" ? (
<CustomTextFieldRange
column={column}
value={value}
filterParameters={filterParameters}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
@@ -47,34 +47,34 @@ function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue
errors={errors}
touched={touched}
/>
) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
) : column.datatype === "numeric" && filterParameters.filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
<CustomSelect
column={column}
value={value}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "date" && column._filterFn === "equals" ? (
) : column.datatype === "date" && filterParameters.filterFn === "equals" ? (
<CustomDatePicker
column={column}
value={value}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "date" && column._filterFn === "between" ? (
) : column.datatype === "date" && filterParameters.filterFn === "between" ? (
<CustomDatePickerRange
column={column}
value={value}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "array" && column._filterFn === "equals" ? (
) : column.datatype === "array" && filterParameters.filterFn === "equals" ? (
<CustomSelectMultiple
column={column}
value={value}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
@@ -82,20 +82,23 @@ function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue
) : (
<CustomTextField
column={column}
value={value}
filterParameters={filterParameters}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
handleChange={handleChange}
handleChange={(e) => setFieldValue(`${column.id}.value`, e.target.value)}
/>
)}
{Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && (
{Array.isArray(column.columnFilterModeOptions) && (
<FilterOptionList
handleCloseFilterBox={handleCloseFilterBox}
column={column}
anchorEl={anchorEl}
setanchorEl={setAnchorEl}
setAnchorEl={setAnchorEl}
filterParameters={filterParameters}
filterType={filterParameters.filterFn}
setFieldValue={setFieldValue}
resetForm={resetForm}
filterOption={column.columnFilterModeOptions}
defaultFilter={defaultFilter}
columnFilterModeOptionFa={columnFilterModeOptionFa}
/>
)}

23
src/core/components/DataTable/filter/FilterOptionList.jsx
View File

@@ -3,13 +3,28 @@
import {ListItem, Menu} from "@mui/material";
import {useState} from "react";
function FilterOptionList({defaultFilter, filterOption, anchorEl, columnFilterModeOptionFa, handleCloseFilterBox}) {
const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
function FilterOptionList({
column,
filterType,
filterOption,
anchorEl,
columnFilterModeOptionFa,
setAnchorEl,
setFieldValue
}) {
const [selectedFilter, setSelectedFilter] = useState(filterType);
const handleChnageItem = (event, index) => {
const handleChangeItem = (event, index) => {
setFieldValue(`${column.id}.value`, filterOption[index] === "between" ? ["", ""] : "");
setFieldValue(`${column.id}.filterFn`, filterOption[index]);
setSelectedFilter(filterOption[index]);
setAnchorEl(null);
}
const handleCloseFilterBox = () => {
setAnchorEl(null);
};
return (
<Menu
id="simple-menu"
@@ -20,7 +35,7 @@ function FilterOptionList({defaultFilter, filterOption, anchorEl, columnFilterMo
>
{filterOption.map((option, index) => (
<ListItem key={index}
onClick={(event) => handleChnageItem(event, index)}
onClick={(event) => handleChangeItem(event, index)}
selected={option === selectedFilter}
sx={{cursor: 'pointer', width: "100px", display: "flex", justifyContent: "center"}}>
{columnFilterModeOptionFa[option]}

6
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
View File

@@ -2,11 +2,11 @@ import React from 'react';
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import {Typography} from "@mui/material";
function CustomDatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
function CustomDatePicker({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
return (
<MuiDatePicker
name={column.id}
value={value}
name={`${column.id}.value`}
value={filterParameters.value}
setFieldValue={setFieldValue}
placeholder={column.header}
helperText={

14
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
View File

@@ -4,15 +4,15 @@ import React from "react";
import {Box, Typography} from "@mui/material";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
function CustomDatePickerRange({column, value, defaultFilterTranslation, setFieldValue}) {
function CustomDatePickerRange({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
return (
<Box sx={{display: "flex", gap: 1}}>
<MuiDatePicker
name={`${column.id}[0]`}
value={value[0]}
name={`${column.id}.value[0]`}
value={filterParameters.value[0]}
setFieldValue={setFieldValue}
maxDate={value[1]}
maxDate={filterParameters.value[1]}
placeholder={`از تاریخ`}
helperText={
<Typography variant="button" sx={{color: "#16534a"}}>
@@ -21,10 +21,10 @@ function CustomDatePickerRange({column, value, defaultFilterTranslation, setFiel
}
/>
<MuiDatePicker
name={`${column.id}[1]`}
value={value[1]}
name={`${column.id}.value[1]`}
value={filterParameters.value[1]}
setFieldValue={setFieldValue}
minDate={value[0]}
minDate={filterParameters.value[0]}
placeholder={`تا تاریخ`}
/>
</Box>

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

@@ -19,6 +19,7 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
name={name}
aria-describedby="component-helper-text"
onChange={(value) => {
console.log(value)
const date = new Date(value);
const formattedDate = moment(date)
.locale("en")

8
src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
View File

@@ -2,7 +2,7 @@
import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
function CustomSelect({column, value, defaultFilterTranslation, setFieldValue}) {
function CustomSelect({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
const columnSelectOption = column.columnSelectOption;
return (
@@ -11,11 +11,11 @@ function CustomSelect({column, value, defaultFilterTranslation, setFieldValue})
<Select
labelId={`label${column.id}`}
id={column.id}
name={column.header}
value={value}
name={`${column.id}.value`}
value={filterParameters.value}
input={<OutlinedInput label={column.header}/>}
onChange={(e) => {
setFieldValue(column.id, e.target.value)
setFieldValue(`${column.id}.value`, e.target.value)
}}
>
{columnSelectOption.map((option) => (

6
src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
View File

@@ -12,7 +12,7 @@ import {
Typography
} from "@mui/material";
function CustomSelectMultiple({column, value, defaultFilterTranslation, setFieldValue}) {
function CustomSelectMultiple({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
const columnSelectOption = column.columnSelectOption;
const getLabelForValue = (value) => {
@@ -27,10 +27,10 @@ function CustomSelectMultiple({column, value, defaultFilterTranslation, setField
<Select
labelId={`label${column.id}`}
id={column.id}
value={value}
value={filterParameters.value}
multiple
onChange={(e) => {
setFieldValue(column.id, e.target.value)
setFieldValue(`${column.id}.value`, e.target.value)
}}
renderValue={(selected) => (
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>

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

@@ -1,15 +1,20 @@
'use client'
import {InputAdornment, TextField, Typography} from "@mui/material";
import FilterListIcon from '@mui/icons-material/FilterList';
function CustomTextField({column, value, defaultFilterTranslation, handleOpenFilterBox, handleChange, handleBlur}) {
function CustomTextField({
column,
filterParameters,
defaultFilterTranslation,
handleOpenFilterBox,
handleChange,
handleBlur
}) {
return (
<TextField
id={column.id}
name={column.id}
label={column.header}
value={value}
value={filterParameters.value}
onChange={handleChange}
onBlur={handleBlur}
fullWidth
@@ -30,4 +35,4 @@ function CustomTextField({column, value, defaultFilterTranslation, handleOpenFil
);
}
export default CustomTextField;
export default CustomTextField;

14
src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
View File

@@ -3,7 +3,7 @@ import FilterListIcon from '@mui/icons-material/FilterList';
function CustomTextFieldRange({
column,
value,
filterParameters,
defaultFilterTranslation,
handleOpenFilterBox,
handleChange,
@@ -14,12 +14,12 @@ function CustomTextFieldRange({
return (
<Box sx={{display: "flex"}}>
<TextField
id={`${column.id}[0]`}
name={`${column.id}[0]`}
id={`${column.id}.value[0]`}
name={`${column.id}.value[0]`}
onChange={handleChange}
onBlur={handleBlur}
label={<Typography>از {column.header}</Typography>}
value={value[0]}
value={filterParameters.value[0]}
fullWidth
error={touched?.[column.id] && Boolean(errors?.[column.id])}
helperText={<Typography variant="button" sx={{color: "#16534a"}}>نوع
@@ -29,14 +29,14 @@ function CustomTextFieldRange({
sx={{marginY: 1, marginRight: 1}}
/>
<TextField
id={`${column.id}[1]`}
name={`${column.id}[1]`}
id={`${column.id}.value[1]`}
name={`${column.id}.value[1]`}
onChange={handleChange}
onBlur={handleBlur}
error={touched?.[column.id] && Boolean(errors?.[column.id])}
helperText={touched?.[column.id] ? errors?.[column.id] : null}
label={<Typography>تا {column.header}</Typography>}
value={value[1]}
value={filterParameters.value[1]}
fullWidth
variant="outlined"
size="normal"