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

complete validation and make validation for between type on numeric and date inputs

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-15 14:28:24 +03:30
parent c599ae74ae
commit fd727b9cff
5 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,24 +63,25 @@ function FilterBody({columns, drawerState, setDrawerState}) {
const validationSchema = Yup.object().shape(
columns.reduce((acc, column) => {
if (column._filterFn === "between" && column.datatype === "numeric") {
acc[column.id] = Yup.array().of(Yup.string()).test({
test(value, ctx) {
console.log("vavavava", value)
const [start, end] = value.value || ["", ""];
const startInt = parseInt(start, 10);
const endInt = parseInt(end, 10);
if (start && end && endInt <= startInt) {
return ctx.createError({
message: `مقدار وارده باید بیشتر از (${start}) باشد`
});
} else if ((start && !end) || (!start && end)) {
return ctx.createError({
message: "این بخش را تکمیل نمایید"
});
}
return true;
}
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;

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

@@ -70,6 +70,8 @@ function FilterBodyField({
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
errors={errors}
touched={touched}
/>
) : column.datatype === "array" && filterParameters.filterFn === "equals" ? (
<CustomSelectMultiple

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

@@ -4,8 +4,7 @@ import React from "react";
import {Box, Typography} from "@mui/material";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
function CustomDatePickerRange({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
function CustomDatePickerRange({column, filterParameters, defaultFilterTranslation, setFieldValue, errors, touched}) {
return (
<Box sx={{display: "flex", gap: 1}}>
<MuiDatePicker
@@ -26,6 +25,8 @@ function CustomDatePickerRange({column, filterParameters, defaultFilterTranslati
setFieldValue={setFieldValue}
minDate={filterParameters.value[0]}
placeholder={`تا تاریخ`}
helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null}
error={Boolean(errors?.[`${column.id}`]?.value)}
/>
</Box>
);

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

@@ -6,7 +6,12 @@ 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}) {
function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error}) {
// console.log("error", error);
//
// console.log("helperText", helperText)
return (
<Box sx={{display: "flex", flexDirection: "column", my: 1}}>
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}
@@ -19,7 +24,6 @@ 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")
@@ -30,6 +34,7 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
maxDate={maxDate ? new Date(maxDate) : null}
slotProps={{
textField: {
error: error,
placeholder: placeholder,
InputProps: {
endAdornment: (
@@ -56,7 +61,7 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
},
}}
/>
<FormHelperText id="component-helper-text" sx={{ml: 2}}>
<FormHelperText id="component-helper-text" sx={{ml: 2, color: error ? '#d32f2f' : "unset"}}>
{helperText ? helperText : ""}
</FormHelperText>
</LocalizationProvider>

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

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