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

create custom components for fileds and start to get hand dirty on datepicker (step2)

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-01 17:19:56 +03:30
parent fddf629214
commit 474e6f3e8d
8 changed files with 287 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/home/index.jsx
View File

@@ -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: "تپسی"}
],
},
],

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

@@ -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 (
<>
<TextField
id={column.id}
label={column.header}
value={value}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{cursor: "pointer"}} onClick={HandleOpenFilterBox}>
<FilterListIcon/>
</InputAdornment>
),
}}
/>
<FilterOptionList handleCloseFilterBox={handleCloseFilterBox} anchorEl={anchorEl}
filterOption={column.columnFilterModeOptions}
defaultFilter={defaultFilter}
columnFilterModeOptionFa={columnFilterModeOptionFa}/>
{column.datatype === "numeric" && column._filterFn === "between" ? (
<CustomTextFieldRange
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "numeric" && column._filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
<CustomSelect
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "date" && column._filterFn === "equals" ? (
<CustomDatePicker
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "date" && column._filterFn === "between" ? (
<CustomDatePickerRange
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : column.datatype === "array" && column._filterFn === "equals" ? (
<CustomSelectMultiple
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : (
<CustomTextField
column={column}
value={value}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
)}
{Array.isArray(column.columnFilterModeOptions) && anchorEl !== null && (
<FilterOptionList
handleCloseFilterBox={handleCloseFilterBox}
anchorEl={anchorEl}
filterOption={column.columnFilterModeOptions}
defaultFilter={defaultFilter}
columnFilterModeOptionFa={columnFilterModeOptionFa}
/>
)}
</>
);
}
export default FilterBodyField;
export default FilterBodyField;

30
src/core/components/DataTable/filter/fieldsType/CustomDatePicker.jsx Normal file
View File

@@ -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 (
<TextField
id={column.id}
label={column.header}
value={value}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
<FilterListIcon/>
</InputAdornment>
),
}}
/>
);
}
export default CustomDatePicker;

30
src/core/components/DataTable/filter/fieldsType/CustomDatePickerRange.jsx Normal file
View File

@@ -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 (
<TextField
id={column.id}
label={column.header}
value={value}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
<FilterListIcon/>
</InputAdornment>
),
}}
/>
);
}
export default CustomDatePickerRange;

44
src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx Normal file
View File

@@ -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 (
<FormControl fullWidth sx={{marginY: 1}}>
<InputLabel htmlFor="uncontrolled-native"
id={`label${column.id}`}>{column.header}</InputLabel>
<Select
labelId={`label${column.id}`}
id={column.id}
name={column.header}
value={fieldValue}
input={<OutlinedInput label={column.header}/>}
onChange={handleChange}
>
{columnSelectOption.map((option) => (
<MenuItem
key={option.value}
value={option.value}
>
{option.label}
</MenuItem>
))}
</Select>
<FormHelperText>
<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>
</FormHelperText>
</FormControl>
);
}
export default CustomSelect;

36
src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx Normal file
View File

@@ -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 (
<FormControl fullWidth sx={{marginY: 1}}>
<InputLabel htmlFor="uncontrolled-native"
id={`label${column.id}`}>{column.header}</InputLabel>
<Select
labelId={`label${column.id}`}
id={column.id}
value={value}
input={<OutlinedInput label={column.header}/>}
// onChange={handleChange}
>
{columnSelectOption.map((option) => (
<MenuItem
key={option.value}
value={option.value}
>
{option.label}
</MenuItem>
))}
</Select>
<FormHelperText>
<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>
</FormHelperText>
</FormControl>
);
}
export default CustomSelectMultiple;

30
src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx Normal file
View File

@@ -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 (
<TextField
id={column.id}
label={column.header}
value={value}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
<FilterListIcon/>
</InputAdornment>
),
}}
/>
);
}
export default CustomTextField;

45
src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx Normal file
View File

@@ -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 (
<Box sx={{display: "flex"}}>
<TextField
id={column.id}
label={<Typography>
از {column.header}
</Typography>}
value={value}
fullWidth
helperText={<Typography variant="button" sx={{color: "#16534a"}}>
نوع فیلتر: {defaultFilterTranslation}
</Typography>}
variant="outlined"
size="normal"
sx={{marginY: 1, marginRight: 1}}
/>
<TextField
id={column.id}
label={<Typography>
تا {column.header}
</Typography>}
value={value}
fullWidth
variant="outlined"
size="normal"
sx={{marginY: 1}}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
<FilterListIcon/>
</InputAdornment>
),
}}
/>
</Box>
);
}
export default CustomTextFieldRange;