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

Feature/migrate formik to react hook form

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2024-12-18 10:34:40 +00:00
parent f0fb662a1c
commit 8f770d3000
28 changed files with 331 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,7 +39,13 @@ const DataTable_Main = (props) => {
}
return value === "" || value === null || value === undefined;
};
const filteredFilterData = Object.values(filterData).filter((filter) => !isValueEmpty(filter.value));
const filteredFilterData = Object.values(filterData)
.filter((filter) => !isValueEmpty(filter.value))
.map(({ filterMode, ...rest }) => ({
...rest,
fn: filterMode,
}));
const params = new URLSearchParams();
params.set("start", `${pagination.pageIndex * pagination.pageSize}`);

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

@@ -1,13 +1,13 @@
"use client";
import { Box, Button, Drawer, styled } from "@mui/material";
import { Form, Formik, getIn } from "formik";
import useTableSetting from "@/lib/hooks/useTableSetting";
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 FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
import useDataTable from "@/lib/hooks/useDataTable";
import { yupResolver } from "@hookform/resolvers/yup";
import { Box, Button, Drawer, styled } from "@mui/material";
import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import * as Yup from "yup";
const ScrollBox = styled(Box)({
flexGrow: 1,
@@ -26,21 +26,15 @@ const ScrollBox = styled(Box)({
},
});
function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name, table_name }) {
const { settingStore } = useTableSetting();
const [initialValues, setInitialValues] = useState({});
const [validationSchema, setValidationSchema] = useState({});
function FilterBody({ columns, drawerState, setDrawerState }) {
const { filterData, setFilterData } = useDataTable();
const [validationSchema, setValidationSchema] = useState(Yup.object({}));
useEffect(() => {
setInitialValues(filterData);
}, [columns, settingStore, user_id, page_name, table_name, filterData]);
useEffect(() => {
const generatedSchema = Yup.object().shape(
Object.keys(initialValues).reduce((acc, key) => {
const initialValue = initialValues[key];
if (initialValue.filterFn === "between") {
const schema = Yup.object(
Object.keys(filterData).reduce((acc, key) => {
const initialValue = filterData[key];
if (initialValue.filterMode === "between") {
acc[key] = Yup.object().shape({
value: Yup.array()
.of(Yup.string().nullable())
@@ -68,13 +62,23 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
}, {})
);
setValidationSchema(generatedSchema);
}, [initialValues]);
setValidationSchema(schema);
}, [filterData]);
const handleSubmit = (values, { setSubmitting }) => {
const {
handleSubmit,
control,
reset,
formState: { errors, isDirty, isValid },
} = useForm({
defaultValues: filterData,
resolver: yupResolver(validationSchema),
mode: "onChange",
});
const onSubmit = (data) => {
setDrawerState(false);
setFilterData(values);
setSubmitting(false);
setFilterData(data);
};
return (
@@ -84,72 +88,64 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
>
<FilterHeader setDrawerState={setDrawerState} />
{Object.keys(initialValues).length > 0 && (
{Object.keys(filterData).length > 0 && (
<ScrollBox>
<Formik initialValues={initialValues} 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}
dependencyFieldValue={
column.dependencyId ? getIn(values, column.dependencyId) : null
}
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={{
px: 8,
boxShadow:
"rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "primary2",
":hover": {
backgroundColor: "primary2",
},
}}
>
اعمال فیلتر
</Button>
</Box>
</Form>
)}
</Formik>
<form onSubmit={handleSubmit(onSubmit)}>
<Box sx={{ px: 1, py: 2 }}>
{columns.map(
(column) =>
column.enableColumnFilter && (
<Controller
key={column.id}
name={`${column.id}`}
control={control}
render={({ field: { value, onBlur, onChange } }) => {
let dependencyField;
if (column.dependencyId) {
dependencyField = useWatch({ control, name: column.dependencyId });
}
return (
<FilterBodyField
column={column}
filterParameters={value}
handleChange={onChange}
handleBlur={onBlur}
dependencyFieldValue={dependencyField}
resetForm={() => reset()}
errors={errors}
/>
);
}}
/>
)
)}
</Box>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
pb: 2,
}}
>
<Button
type="submit"
variant="contained"
size="large"
disabled={!isDirty || !isValid}
sx={{
px: 8,
boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "primary2",
":hover": {
backgroundColor: "primary2",
},
}}
>
اعمال فیلتر
</Button>
</Box>
</form>
</ScrollBox>
)}
</Drawer>

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

@@ -1,11 +1,11 @@
import { useState } from "react";
import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
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 { useState } from "react";
const columnFilterModeOptionFa = {
equals: "برابر",
@@ -24,82 +24,71 @@ function FilterBodyField({
handleBlur,
dependencyFieldValue,
setFieldValue,
errors,
touched,
resetForm,
errors,
}) {
const [anchorEl, setAnchorEl] = useState(null);
const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn;
const defaultFilterTranslation =
columnFilterModeOptionFa[filterParameters.filterMode] || filterParameters.filterMode;
const handleOpenFilterBox = (event) => {
setAnchorEl(event.currentTarget);
};
const renderField = () => {
const commonProps = {
column,
filterParameters,
defaultFilterTranslation,
handleOpenFilterBox,
dependencyFieldValue,
setFieldValue,
handleChange,
handleBlur,
errors,
};
switch (filterParameters.datatype) {
case "numeric":
if (filterParameters.filterMode === "between") {
return <CustomTextFieldRange {...commonProps} />;
}
if (filterParameters.filterMode === "equals") {
return <CustomSelect {...commonProps} />;
}
break;
case "date":
if (filterParameters.filterMode === "equals") {
return <CustomDatePicker {...commonProps} />;
}
if (filterParameters.filterMode === "between") {
return <CustomDatePickerRange {...commonProps} />;
}
break;
case "array":
if (filterParameters.filterMode === "equals") {
return <CustomSelectMultiple {...commonProps} />;
}
break;
default:
return <CustomTextField {...commonProps} />;
}
};
return (
<>
{filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? (
<CustomTextFieldRange
column={column}
filterParameters={filterParameters}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
handleChange={handleChange}
errors={errors}
touched={touched}
/>
) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" ? (
<CustomSelect
column={column}
filterParameters={filterParameters}
dependencyFieldValue={dependencyFieldValue}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : filterParameters.datatype === "date" && filterParameters.filterFn === "equals" ? (
<CustomDatePicker
column={column}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : filterParameters.datatype === "date" && filterParameters.filterFn === "between" ? (
<CustomDatePickerRange
column={column}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
errors={errors}
touched={touched}
/>
) : filterParameters.datatype === "array" && filterParameters.filterFn === "equals" ? (
<CustomSelectMultiple
column={column}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : (
<CustomTextField
column={column}
filterParameters={filterParameters}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
handleChange={(e) => setFieldValue(`${column.id}.value`, e.target.value)}
/>
)}
{renderField()}
{Array.isArray(column.columnFilterModeOptions) && (
<FilterOptionList
column={column}
anchorEl={anchorEl}
setAnchorEl={setAnchorEl}
filterParameters={filterParameters}
filterType={filterParameters.filterFn}
setFieldValue={setFieldValue}
filterType={filterParameters.filterMode}
handleChange={handleChange}
resetForm={resetForm}
filterOption={column.columnFilterModeOptions}
columnFilterModeOptionFa={columnFilterModeOptionFa}

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

@@ -4,19 +4,22 @@ import { ListItem, Menu } from "@mui/material";
import { useState } from "react";
function FilterOptionList({
column,
filterType,
filterOption,
filterParameters,
anchorEl,
columnFilterModeOptionFa,
setAnchorEl,
setFieldValue,
handleChange,
}) {
const [selectedFilter, setSelectedFilter] = useState(filterType);
const handleChangeItem = (event, index) => {
setFieldValue(`${column.id}.value`, filterOption[index] === "between" ? ["", ""] : "");
setFieldValue(`${column.id}.filterFn`, filterOption[index]);
handleChange({
...filterParameters,
value: filterOption[index] === "between" ? ["", ""] : "",
filterMode: filterOption[index],
});
setSelectedFilter(filterOption[index]);
setAnchorEl(null);
};

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

@@ -2,12 +2,14 @@ import React from "react";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Typography } from "@mui/material";
function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, handleChange }) {
return (
<MuiDatePicker
name={`${column.id}.value`}
value={filterParameters.value}
setFieldValue={setFieldValue}
setFieldValue={(name, formattedDate) => {
handleChange({ ...filterParameters, value: formattedDate });
}}
placeholder={column.header}
helperText={
<Typography variant="button" sx={{ color: "#155175" }}>

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

@@ -4,13 +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, filterParameters, defaultFilterTranslation, setFieldValue, errors, touched }) {
function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslation, handleChange, errors }) {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker
name={`${column.id}.value[0]`}
value={filterParameters.value[0]}
setFieldValue={setFieldValue}
setFieldValue={(name, formattedDate) => {
handleChange({ ...filterParameters, value: [formattedDate, filterParameters.value[1]] });
}}
maxDate={filterParameters.value[1]}
placeholder={`از تاریخ`}
helperText={
@@ -22,10 +24,12 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat
<MuiDatePicker
name={`${column.id}.value[1]`}
value={filterParameters.value[1]}
setFieldValue={setFieldValue}
setFieldValue={(name, formattedDate) => {
handleChange({ ...filterParameters, value: [filterParameters.value[0], formattedDate] });
}}
minDate={filterParameters.value[0]}
placeholder={`تا تاریخ`}
helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null}
helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
error={Boolean(errors?.[`${column.id}`]?.value)}
/>
</Box>

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

@@ -18,6 +18,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
sx={{ width: "100%" }}
id={name}
name={name}
closeOnSelect={true}
aria-describedby="component-helper-text"
onChange={(value) => {
const date = new Date(value);

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

@@ -1,9 +1,22 @@
"use client";
import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
import { useEffect, useMemo } from "react";
function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, setFieldValue }) {
const columnSelectOption = column.columnSelectOption(dependencyFieldValue);
function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, handleChange }) {
const columnSelectOption = useMemo(() => {
return column?.columnSelectOption?.(dependencyFieldValue) || [];
}, [dependencyFieldValue]);
useEffect(() => {
const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
if (!isValidValue) {
handleChange({ ...filterParameters, value: "" });
}
}, [columnSelectOption, filterParameters.value, handleChange]);
const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
const selectedValue = isValidValue ? filterParameters.value : "";
return (
<FormControl fullWidth sx={{ marginY: 1 }}>
@@ -12,11 +25,9 @@ function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultF
labelId={`label${column.id}`}
id={column.id}
name={`${column.id}.value`}
value={filterParameters.value}
value={selectedValue}
input={<OutlinedInput label={column.header} />}
onChange={(e) => {
setFieldValue(`${column.id}.value`, e.target.value);
}}
onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
>
<MenuItem value="">{column.header}</MenuItem>
{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, filterParameters, defaultFilterTranslation, setFieldValue }) {
function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, handleChange }) {
const columnSelectOption = column.columnSelectOption;
const getLabelForValue = (value) => {
@@ -30,9 +30,7 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati
id={column.id}
value={filterParameters.value}
multiple
onChange={(e) => {
setFieldValue(`${column.id}.value`, e.target.value);
}}
onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => (

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

@@ -3,11 +3,11 @@ import FilterListIcon from "@mui/icons-material/FilterList";
function CustomTextField({
column,
filterParameters,
defaultFilterTranslation,
filterParameters,
handleOpenFilterBox,
handleChange,
handleBlur,
handleChange,
}) {
return (
<TextField
@@ -15,7 +15,7 @@ function CustomTextField({
name={column.id}
label={column.header}
value={filterParameters.value}
onChange={handleChange}
onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
onBlur={handleBlur}
fullWidth
helperText={

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

@@ -3,20 +3,21 @@ import FilterListIcon from "@mui/icons-material/FilterList";
function CustomTextFieldRange({
column,
filterParameters,
defaultFilterTranslation,
handleOpenFilterBox,
handleChange,
filterParameters,
handleBlur,
errors,
touched,
}) {
return (
<Box sx={{ display: "flex" }}>
<TextField
id={`${column.id}.value[0]`}
name={`${column.id}.value[0]`}
onChange={handleChange}
onChange={(e) =>
handleChange({ ...filterParameters, value: [e.target.value, filterParameters.value[1]] })
}
onBlur={handleBlur}
label={<Typography>از {column.header}</Typography>}
value={filterParameters.value[0]}
@@ -34,10 +35,12 @@ function CustomTextFieldRange({
<TextField
id={`${column.id}.value[1]`}
name={`${column.id}.value[1]`}
onChange={handleChange}
onChange={(e) =>
handleChange({ ...filterParameters, value: [filterParameters.value[0], e.target.value] })
}
onBlur={handleBlur}
error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
helperText={touched?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null}
error={Boolean(errors?.[`${column.id}`]?.value)}
helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
label={<Typography>تا {column.header}</Typography>}
value={filterParameters.value[1]}
fullWidth

2
src/core/components/LoadingHardPage.jsx
View File

@@ -1,4 +1,4 @@
'use client'
"use client";
import { Backdrop, Box, Stack, styled, Typography, useTheme } from "@mui/material";
import SvgLoading from "@/core/components/svgs/SvgLoading";
import SvgError from "@/core/components/svgs/SvgError";

18
src/core/components/PageLoading.jsx
View File

@@ -1,10 +1,12 @@
'use client'
import { Paper } from "@mui/material"
import LoadingHardPage from "./LoadingHardPage"
"use client";
import { Paper } from "@mui/material";
import LoadingHardPage from "./LoadingHardPage";
const PageLoading = () => {
return <Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: '100%', height: '100%' }}>
<LoadingHardPage width={100} height={100} loading={true} sx={{ position: 'absolute' }} />
</Paper>
}
export default PageLoading
return (
<Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: "100%", height: "100%" }}>
<LoadingHardPage width={100} height={100} loading={true} sx={{ position: "absolute" }} />
</Paper>
);
};
export default PageLoading;