From 474e6f3e8dfe864f4a953c2c18b40f0e306d7eb8 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sat, 1 Jun 2024 17:19:56 +0330 Subject: [PATCH] create custom components for fileds and start to get hand dirty on datepicker (step2) --- src/components/home/index.jsx | 30 +++---- .../DataTable/filter/FilterBodyField.jsx | 88 +++++++++++++------ .../filter/fieldsType/CustomDatePicker.jsx | 30 +++++++ .../fieldsType/CustomDatePickerRange.jsx | 30 +++++++ .../filter/fieldsType/CustomSelect.jsx | 44 ++++++++++ .../fieldsType/CustomSelectMultiple.jsx | 36 ++++++++ .../filter/fieldsType/CustomTextField.jsx | 30 +++++++ .../fieldsType/CustomTextFieldRange.jsx | 45 ++++++++++ 8 files changed, 287 insertions(+), 46 deletions(-) create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx create mode 100644 src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx index f8a3d65..ae8a116 100644 --- a/src/components/home/index.jsx +++ b/src/components/home/index.jsx @@ -14,7 +14,7 @@ function HomeComponent() { accessorKey: 'name.firstName', header: 'نام', id: "firstName", - enableColumnFilter: false, + enableColumnFilter: true, datatype: "text", filterFn: "contains", enableClickToCopy: true, @@ -67,7 +67,6 @@ function HomeComponent() { "greaterThan", "fuzzy" ], - }, { accessorKey: 'state', @@ -87,7 +86,7 @@ function HomeComponent() { header: 'محدوده', id: "price", enableColumnFilter: true, - datatype: "nemeric", + datatype: "numeric", filterFn: "between", columnFilterModeOptions: [ "equals", @@ -102,23 +101,18 @@ function HomeComponent() { enableColumnFilter: true, datatype: "date", filterFn: "between", - columnFilterModeOptions: [ - "equals", - "notEquals", - "between" - ], }, { accessorKey: 'company', header: 'نام شرکت', id: "company", enableColumnFilter: true, - datatype: "select2", + datatype: "numeric", filterFn: "equals", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" + columnSelectOption: [ + {value: 1, label: "وایتل"}, + {value: 2, label: "اسنپ"}, + {value: 3, label: "تپسی"} ], }, { @@ -126,12 +120,12 @@ function HomeComponent() { header: 'منطقه', id: "area", enableColumnFilter: true, - datatype: "text", + datatype: "numeric", filterFn: "equals", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" + columnSelectOption: [ + {value: 1, label: "وایتل"}, + {value: 2, label: "اسنپ"}, + {value: 3, label: "تپسی"} ], }, ], diff --git a/src/core/components/DataTable/filter/FilterBodyField.jsx b/src/core/components/DataTable/filter/FilterBodyField.jsx index 9d20133..f60f9df 100644 --- a/src/core/components/DataTable/filter/FilterBodyField.jsx +++ b/src/core/components/DataTable/filter/FilterBodyField.jsx @@ -1,10 +1,14 @@ 'use client' -import {InputAdornment, TextField, Typography} from "@mui/material"; -import FilterListIcon from '@mui/icons-material/FilterList'; 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 CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDatePicker"; +import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple"; +import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDatePickerRange"; const columnFilterModeOptionFa = { equals: "برابر", @@ -25,40 +29,68 @@ function FilterBodyField({column, value}) { const defaultFilter = (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn; const defaultFilterTranslation = columnFilterModeOptionFa[defaultFilter] || defaultFilter; - const HandleOpenFilterBox = (event) => { + const handleOpenFilterBox = (event) => { setAnchorEl(event.currentTarget); }; const handleCloseFilterBox = () => { setAnchorEl(null); }; - return ( <> - - نوع فیلتر: {defaultFilterTranslation} - } - variant="outlined" - size="normal" - sx={{marginY: 1}} - InputProps={{ - endAdornment: ( - - - - ), - }} - /> - + {column.datatype === "numeric" && column._filterFn === "between" ? ( + + ) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? ( + + ) : column.datatype === "date" && column._filterFn === "equals" ? ( + + ) : column.datatype === "date" && column._filterFn === "between" ? ( + + ) : column.datatype === "array" && column._filterFn === "equals" ? ( + + ) : ( + + )} + {Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && ( + + )} ); } -export default FilterBodyField; +export default FilterBodyField; \ No newline at end of file diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx new file mode 100644 index 0000000..5e600f0 --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx @@ -0,0 +1,30 @@ +'use client' + +import {InputAdornment, TextField, Typography} from "@mui/material"; +import FilterListIcon from '@mui/icons-material/FilterList'; + +function CustomDatePicker({column, value, defaultFilterTranslation, handleOpenFilterBox}) { + return ( + + نوع فیلتر: {defaultFilterTranslation} + } + variant="outlined" + size="normal" + sx={{marginY: 1}} + InputProps={{ + endAdornment: ( + + + + ), + }} + /> + ); +} + +export default CustomDatePicker; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx new file mode 100644 index 0000000..ace1e3f --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx @@ -0,0 +1,30 @@ +'use client' + +import {InputAdornment, TextField, Typography} from "@mui/material"; +import FilterListIcon from '@mui/icons-material/FilterList'; + +function CustomDatePickerRange({column, value, defaultFilterTranslation, handleOpenFilterBox}) { + return ( + + نوع فیلتر: {defaultFilterTranslation} + } + variant="outlined" + size="normal" + sx={{marginY: 1}} + InputProps={{ + endAdornment: ( + + + + ), + }} + /> + ); +} + +export default CustomDatePickerRange; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx new file mode 100644 index 0000000..4c44a5f --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx @@ -0,0 +1,44 @@ +'use client' + +import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material"; +import {useState} from "react"; + +function CustomSelect({column, value, defaultFilterTranslation}) { + const [fieldValue, setFieldValue] = useState(value); + const columnSelectOption = column.columnSelectOption; + + const handleChange = (event) => { + setFieldValue(event.target.value); + }; + + return ( + + {column.header} + + + + نوع فیلتر: {defaultFilterTranslation} + + + + ); +} + +export default CustomSelect; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx new file mode 100644 index 0000000..af5200e --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx @@ -0,0 +1,36 @@ +'use client' + +import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material"; + +function CustomSelectMultiple({column, value, defaultFilterTranslation}) { + const columnSelectOption = column.columnSelectOption; + return ( + + {column.header} + + + + نوع فیلتر: {defaultFilterTranslation} + + + + ); +} + +export default CustomSelectMultiple; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx new file mode 100644 index 0000000..c760de2 --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx @@ -0,0 +1,30 @@ +'use client' + +import {InputAdornment, TextField, Typography} from "@mui/material"; +import FilterListIcon from '@mui/icons-material/FilterList'; + +function CustomTextField({column, value, defaultFilterTranslation, handleOpenFilterBox}) { + return ( + + نوع فیلتر: {defaultFilterTranslation} + } + variant="outlined" + size="normal" + sx={{marginY: 1}} + InputProps={{ + endAdornment: ( + + + + ), + }} + /> + ); +} + +export default CustomTextField; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx new file mode 100644 index 0000000..1fbbd40 --- /dev/null +++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx @@ -0,0 +1,45 @@ +'use client' + +import {Box, InputAdornment, TextField, Typography} from "@mui/material"; +import FilterListIcon from '@mui/icons-material/FilterList'; + +function CustomTextFieldRange({column, value, defaultFilterTranslation, handleOpenFilterBox}) { + return ( + + + از {column.header} + } + value={value} + fullWidth + helperText={ + نوع فیلتر: {defaultFilterTranslation} + } + variant="outlined" + size="normal" + sx={{marginY: 1, marginRight: 1}} + /> + + تا {column.header} + } + value={value} + fullWidth + variant="outlined" + size="normal" + sx={{marginY: 1}} + InputProps={{ + endAdornment: ( + + + + ), + }} + /> + + ); +} + +export default CustomTextFieldRange;