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

DatePicker finished and start changing menu filter type value

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-10 16:45:38 +03:30
parent 3f896ef5e9
commit e71a682deb
8 changed files with 136 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,10 +22,7 @@ const ScrollBox = styled(Box)({
'::-webkit-scrollbar-thumb': {
background: '#16534a',
borderRadius: '0px',
},
'::-webkit-scrollbar-thumb:hover': {
background: '#ffffff',
},
}
});
function FilterBody({columns, drawerState, setDrawerState}) {
@@ -52,11 +49,9 @@ function FilterBody({columns, drawerState, setDrawerState}) {
setInitialValues(values);
}, [columns, settingStore, userId, pageName, tableName]);
console.log("initialValues", initialValues)
const validationSchema = Yup.object().shape(
columns.reduce((acc, column) => {
if (column._filterFn === "between") {
if (column._filterFn === "between" && column.datatype === "numeric") {
acc[column.id] = Yup.array().of(Yup.string()).test({
test(value, ctx) {
const [start, end] = value || ["", ""];
@@ -66,9 +61,9 @@ function FilterBody({columns, drawerState, setDrawerState}) {
return ctx.createError({
message: `مقدار وارده باید بیشتر از (${start}) باشد`
});
} else if (start && !end) {
} else if ((start && !end) || (!start && end)) {
return ctx.createError({
message: "این بخش را پر نمایید"
message: "این بخش را تکمیل نمایید"
});
}
return true;
@@ -79,8 +74,9 @@ function FilterBody({columns, drawerState, setDrawerState}) {
}, {})
);
const handleSubmit = (values) => {
const handleSubmit = (values, {setSubmitting}) => {
console.log("Form values:", values);
setSubmitting(false);
};
return (
@@ -94,7 +90,17 @@ function FilterBody({columns, drawerState, setDrawerState}) {
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{({values, handleChange, handleBlur, setFieldValue, errors, touched}) => (
{({
values,
handleChange,
handleBlur,
setFieldValue,
errors,
touched,
isSubmitting,
isValid,
dirty
}) => (
<Form>
<Box sx={{px: 1, py: 2}}>
{columns.map((column) => (
@@ -118,13 +124,19 @@ function FilterBody({columns, drawerState, setDrawerState}) {
alignItems: 'center',
pb: 2
}}>
<Button variant="contained" size="large" type="submit"
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>
<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>
)}

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

@@ -67,6 +67,7 @@ function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue
<CustomDatePickerRange
column={column}
value={value}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
@@ -92,6 +93,7 @@ function FilterBodyField({column, value, handleChange, handleBlur, setFieldValue
<FilterOptionList
handleCloseFilterBox={handleCloseFilterBox}
anchorEl={anchorEl}
setanchorEl={setAnchorEl}
filterOption={column.columnFilterModeOptions}
defaultFilter={defaultFilter}
columnFilterModeOptionFa={columnFilterModeOptionFa}

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

@@ -3,10 +3,13 @@
import {ListItem, Menu} from "@mui/material";
import {useState} from "react";
function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, anchorEl, columnFilterModeOptionFa}) {
function FilterOptionList({defaultFilter, filterOption, anchorEl, columnFilterModeOptionFa, handleCloseFilterBox}) {
const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
const handleChnageItem = (event, index) => {
setSelectedFilter(filterOption[index]);
}
return (
<Menu
id="simple-menu"
@@ -17,6 +20,7 @@ function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, an
>
{filterOption.map((option, index) => (
<ListItem key={index}
onClick={(event) => handleChnageItem(event, index)}
selected={option === selectedFilter}
sx={{cursor: 'pointer', width: "100px", display: "flex", justifyContent: "center"}}>
{columnFilterModeOptionFa[option]}
@@ -26,4 +30,4 @@ function FilterOptionList({defaultFilter, filterOption, handleCloseFilterBox, an
);
}
export default FilterOptionList;
export default FilterOptionList;

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

@@ -1,13 +1,19 @@
import React from 'react';
import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import {Typography} from "@mui/material";
function CustomDatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
return (
<DatePicker
column={column}
<MuiDatePicker
name={column.id}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
setFieldValue={setFieldValue}
placeholder={column.header}
helperText={
<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography>
}
/>
);
}

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

@@ -1,24 +1,33 @@
'use client'
import DatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker";
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}) {
return (
<>
<DatePicker
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
<Box sx={{display: "flex", gap: 1}}>
<MuiDatePicker
name={`${column.id}[0]`}
value={value[0]}
setFieldValue={setFieldValue}
maxDate={value[1]}
placeholder={`از تاریخ`}
helperText={
<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography>
}
/>
<DatePicker
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
<MuiDatePicker
name={`${column.id}[1]`}
value={value[1]}
setFieldValue={setFieldValue}
minDate={value[0]}
placeholder={`تا تاریخ`}
/>
</>
</Box>
);
}

66
src/core/components/DataTable/filter/fieldsType/CustomDate/DatePicker.jsx
View File

@@ -1,66 +0,0 @@
import React from 'react';
import {LocalizationProvider, MobileDatePicker} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {faIR} from "@mui/x-date-pickers/locales";
import {IconButton, InputAdornment, Typography} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import moment from "jalali-moment";
function DatePicker({column, value, defaultFilterTranslation, setFieldValue}) {
return (
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps.localeText
}
>
<MobileDatePicker
value={value ? new Date(value) : null}
sx={{my: 1, width: "100%"}}
id={column.id}
name={column.id}
onChange={(value) => {
const date = new Date(value);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD");
setFieldValue(column.id, formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: (
<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography>
),
InputProps: {
endAdornment: (
<InputAdornment position="end">
<IconButton
size="small"
onClick={(event) => {
event.stopPropagation();
setFieldValue(column.id, "");
}}
sx={{
color: "#bfbfbf",
'&:hover': {
backgroundColor: 'rgba(189, 189, 189, 0.1)',
color: "#363434"
},
}}
>
<ClearIcon/>
</IconButton>
</InputAdornment>
),
},
},
}}
/>
</LocalizationProvider>
);
}
export default DatePicker;

66
src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx Normal file
View File

@@ -0,0 +1,66 @@
import React from 'react';
import {LocalizationProvider, MobileDatePicker} from "@mui/x-date-pickers";
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
import {faIR} from "@mui/x-date-pickers/locales";
import {Box, FormHelperText, IconButton, InputAdornment} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import moment from "jalali-moment";
function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText, placeholder}) {
return (
<Box sx={{display: "flex", flexDirection: "column", my: 1}}>
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
>
<MobileDatePicker
value={value ? new Date(value) : null}
sx={{width: "100%"}}
id={name}
name={name}
aria-describedby="component-helper-text"
onChange={(value) => {
const date = new Date(value);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD");
setFieldValue(name, formattedDate);
}}
minDate={minDate ? new Date(minDate) : null}
maxDate={maxDate ? new Date(maxDate) : null}
slotProps={{
textField: {
placeholder: placeholder,
InputProps: {
endAdornment: (
<InputAdornment position="end">
<IconButton
size="small"
onClick={(event) => {
event.stopPropagation();
setFieldValue(name, "");
}}
sx={{
color: "#bfbfbf",
'&:hover': {
backgroundColor: 'rgba(189, 189, 189, 0.1)',
color: "#363434"
},
}}
>
<ClearIcon/>
</IconButton>
</InputAdornment>
),
},
},
}}
/>
<FormHelperText id="component-helper-text" sx={{ml: 2}}>
{helperText ? helperText : ""}
</FormHelperText>
</LocalizationProvider>
</Box>
);
}
export default MuiDatePicker;

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

@@ -21,6 +21,7 @@ function CustomTextFieldRange({
label={<Typography>از {column.header}</Typography>}
value={value[0]}
fullWidth
error={touched?.[column.id] && Boolean(errors?.[column.id])}
helperText={<Typography variant="button" sx={{color: "#16534a"}}>نوع
فیلتر: {defaultFilterTranslation}</Typography>}
variant="outlined"