rez-table-listing-mui 1.3.20 → 1.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/listing/components/filter/components/forms/components/Dropdown.tsx +148 -62
- package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx +30 -55
package/package.json
CHANGED
|
@@ -1,37 +1,18 @@
|
|
|
1
1
|
import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
|
|
2
2
|
import { Controller, UseFormSetValue } from "react-hook-form";
|
|
3
|
-
import { FilterStateProps } from "../../../../../types/filter";
|
|
4
3
|
import moment from "moment";
|
|
4
|
+
import { FilterStateProps } from "../../../../../types/filter";
|
|
5
5
|
|
|
6
6
|
interface FormDropdownProps {
|
|
7
7
|
filter: FilterStateProps;
|
|
8
8
|
control: any;
|
|
9
9
|
setValue: UseFormSetValue<any>;
|
|
10
|
-
dropdownList: {
|
|
11
|
-
label?: string;
|
|
12
|
-
value?: string;
|
|
13
|
-
}[];
|
|
10
|
+
dropdownList: { label?: string; value?: string }[];
|
|
14
11
|
isLoading?: boolean;
|
|
15
12
|
sx?: SxProps<Theme>;
|
|
16
13
|
onValueChange?: () => void;
|
|
17
14
|
}
|
|
18
15
|
|
|
19
|
-
// Allowed date-based operators
|
|
20
|
-
const DATE_ALLOWED_OPERATORS = [
|
|
21
|
-
"equal",
|
|
22
|
-
"before",
|
|
23
|
-
"after",
|
|
24
|
-
"between",
|
|
25
|
-
"is",
|
|
26
|
-
"today",
|
|
27
|
-
"is_before",
|
|
28
|
-
"is_after",
|
|
29
|
-
"is_on_or_before",
|
|
30
|
-
"is_on_or_after",
|
|
31
|
-
"empty",
|
|
32
|
-
"not_empty",
|
|
33
|
-
];
|
|
34
|
-
|
|
35
16
|
const FormDropdown = ({
|
|
36
17
|
filter,
|
|
37
18
|
control,
|
|
@@ -43,80 +24,54 @@ const FormDropdown = ({
|
|
|
43
24
|
}: FormDropdownProps) => {
|
|
44
25
|
return (
|
|
45
26
|
<Controller
|
|
46
|
-
name={`${filter
|
|
27
|
+
name={`${filter.filter_attribute_name}.operator`}
|
|
47
28
|
control={control}
|
|
48
|
-
defaultValue={filter
|
|
29
|
+
defaultValue={filter.filter_operator || dropdownList?.[0]?.value || ""}
|
|
49
30
|
render={({ field }) => (
|
|
50
31
|
<FormControl sx={sx} size="small">
|
|
51
32
|
<Select
|
|
52
33
|
{...field}
|
|
53
34
|
variant="standard"
|
|
35
|
+
disableUnderline
|
|
36
|
+
disabled={isLoading}
|
|
54
37
|
sx={{
|
|
55
38
|
fontSize: "0.875rem",
|
|
56
39
|
minWidth: 50,
|
|
57
|
-
border: "none",
|
|
58
40
|
boxShadow: "none",
|
|
59
|
-
"& .MuiSelect-icon": {
|
|
60
|
-
top: "45%",
|
|
61
|
-
transform: "translateY(-50%)",
|
|
62
|
-
"& .MuiOutlinedInput-input": {
|
|
63
|
-
padding: "12px 20px",
|
|
64
|
-
},
|
|
65
|
-
},
|
|
66
41
|
}}
|
|
67
|
-
disabled={isLoading}
|
|
68
|
-
disableUnderline
|
|
69
42
|
onChange={(e) => {
|
|
70
43
|
const newOperator = e.target.value;
|
|
71
44
|
const oldOperator = field.value;
|
|
72
45
|
|
|
73
46
|
field.onChange(e);
|
|
74
47
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
const wasDateOp = DATE_ALLOWED_OPERATORS.includes(oldOperator);
|
|
78
|
-
const isDateOpNow =
|
|
79
|
-
DATE_ALLOWED_OPERATORS.includes(newOperator);
|
|
48
|
+
const fieldName = `${filter.filter_attribute_name}.value`;
|
|
49
|
+
const type = filter.filter_attribute_data_type;
|
|
80
50
|
|
|
81
|
-
|
|
82
|
-
|
|
51
|
+
// RESET RULES (Unified)
|
|
52
|
+
if (type === "date" || type === "year") {
|
|
53
|
+
if (newOperator === "today") {
|
|
54
|
+
setValue(fieldName, moment().format("YYYY-MM-DD"), {
|
|
83
55
|
shouldDirty: true,
|
|
84
56
|
});
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
if (
|
|
89
|
-
(filter?.filter_attribute_data_type === "date" ||
|
|
90
|
-
filter?.filter_attribute_data_type === "year") &&
|
|
91
|
-
newOperator !== oldOperator
|
|
92
|
-
) {
|
|
93
|
-
if (newOperator === "today") {
|
|
94
|
-
setValue(
|
|
95
|
-
`${filter?.filter_attribute_name}.value`,
|
|
96
|
-
moment().format("YYYY-MM-DD"),
|
|
97
|
-
{
|
|
98
|
-
shouldDirty: true,
|
|
99
|
-
}
|
|
100
|
-
);
|
|
101
57
|
} else if (newOperator === "between") {
|
|
102
|
-
setValue(
|
|
58
|
+
setValue(fieldName, ["", ""], {
|
|
103
59
|
shouldDirty: true,
|
|
104
60
|
});
|
|
105
61
|
} else if (
|
|
106
62
|
oldOperator === "between" ||
|
|
107
63
|
oldOperator === "today"
|
|
108
64
|
) {
|
|
109
|
-
setValue(
|
|
110
|
-
shouldDirty: true,
|
|
111
|
-
});
|
|
65
|
+
setValue(fieldName, "", { shouldDirty: true });
|
|
112
66
|
}
|
|
113
67
|
}
|
|
114
68
|
|
|
115
|
-
|
|
69
|
+
// Delay to ensure RHF state updates
|
|
70
|
+
setTimeout(() => onValueChange?.(), 0);
|
|
116
71
|
}}
|
|
117
72
|
>
|
|
118
73
|
{dropdownList?.map((item, idx) => (
|
|
119
|
-
<MenuItem
|
|
74
|
+
<MenuItem value={item.value} key={idx}>
|
|
120
75
|
{item.label}
|
|
121
76
|
</MenuItem>
|
|
122
77
|
))}
|
|
@@ -129,6 +84,137 @@ const FormDropdown = ({
|
|
|
129
84
|
|
|
130
85
|
export default FormDropdown;
|
|
131
86
|
|
|
87
|
+
// import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
|
|
88
|
+
// import { Controller, UseFormSetValue } from "react-hook-form";
|
|
89
|
+
// import { FilterStateProps } from "../../../../../types/filter";
|
|
90
|
+
// import moment from "moment";
|
|
91
|
+
|
|
92
|
+
// interface FormDropdownProps {
|
|
93
|
+
// filter: FilterStateProps;
|
|
94
|
+
// control: any;
|
|
95
|
+
// setValue: UseFormSetValue<any>;
|
|
96
|
+
// dropdownList: {
|
|
97
|
+
// label?: string;
|
|
98
|
+
// value?: string;
|
|
99
|
+
// }[];
|
|
100
|
+
// isLoading?: boolean;
|
|
101
|
+
// sx?: SxProps<Theme>;
|
|
102
|
+
// onValueChange?: () => void;
|
|
103
|
+
// }
|
|
104
|
+
|
|
105
|
+
// // Allowed date-based operators
|
|
106
|
+
// const DATE_ALLOWED_OPERATORS = [
|
|
107
|
+
// "equal",
|
|
108
|
+
// "before",
|
|
109
|
+
// "after",
|
|
110
|
+
// "between",
|
|
111
|
+
// "is",
|
|
112
|
+
// "today",
|
|
113
|
+
// "is_before",
|
|
114
|
+
// "is_after",
|
|
115
|
+
// "is_on_or_before",
|
|
116
|
+
// "is_on_or_after",
|
|
117
|
+
// "empty",
|
|
118
|
+
// "not_empty",
|
|
119
|
+
// ];
|
|
120
|
+
|
|
121
|
+
// const FormDropdown = ({
|
|
122
|
+
// filter,
|
|
123
|
+
// control,
|
|
124
|
+
// setValue,
|
|
125
|
+
// dropdownList,
|
|
126
|
+
// isLoading = false,
|
|
127
|
+
// sx,
|
|
128
|
+
// onValueChange,
|
|
129
|
+
// }: FormDropdownProps) => {
|
|
130
|
+
// return (
|
|
131
|
+
// <Controller
|
|
132
|
+
// name={`${filter?.filter_attribute_name}.operator`}
|
|
133
|
+
// control={control}
|
|
134
|
+
// defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
|
|
135
|
+
// render={({ field }) => (
|
|
136
|
+
// <FormControl sx={sx} size="small">
|
|
137
|
+
// <Select
|
|
138
|
+
// {...field}
|
|
139
|
+
// variant="standard"
|
|
140
|
+
// sx={{
|
|
141
|
+
// fontSize: "0.875rem",
|
|
142
|
+
// minWidth: 50,
|
|
143
|
+
// border: "none",
|
|
144
|
+
// boxShadow: "none",
|
|
145
|
+
// "& .MuiSelect-icon": {
|
|
146
|
+
// top: "45%",
|
|
147
|
+
// transform: "translateY(-50%)",
|
|
148
|
+
// "& .MuiOutlinedInput-input": {
|
|
149
|
+
// padding: "12px 20px",
|
|
150
|
+
// },
|
|
151
|
+
// },
|
|
152
|
+
// }}
|
|
153
|
+
// disabled={isLoading}
|
|
154
|
+
// disableUnderline
|
|
155
|
+
// onChange={(e) => {
|
|
156
|
+
// const newOperator = e.target.value;
|
|
157
|
+
// const oldOperator = field.value;
|
|
158
|
+
|
|
159
|
+
// field.onChange(e);
|
|
160
|
+
|
|
161
|
+
// // Reset value if operator switches date → non-date or non-date → date
|
|
162
|
+
// if (filter.filter_attribute_data_type === "date") {
|
|
163
|
+
// const wasDateOp = DATE_ALLOWED_OPERATORS.includes(oldOperator);
|
|
164
|
+
// const isDateOpNow =
|
|
165
|
+
// DATE_ALLOWED_OPERATORS.includes(newOperator);
|
|
166
|
+
|
|
167
|
+
// if (wasDateOp !== isDateOpNow) {
|
|
168
|
+
// setValue(`${filter?.filter_attribute_name}.value`, "", {
|
|
169
|
+
// shouldDirty: true,
|
|
170
|
+
// });
|
|
171
|
+
// }
|
|
172
|
+
// }
|
|
173
|
+
|
|
174
|
+
// if (
|
|
175
|
+
// (filter?.filter_attribute_data_type === "date" ||
|
|
176
|
+
// filter?.filter_attribute_data_type === "year") &&
|
|
177
|
+
// newOperator !== oldOperator
|
|
178
|
+
// ) {
|
|
179
|
+
// if (newOperator === "today") {
|
|
180
|
+
// setValue(
|
|
181
|
+
// `${filter?.filter_attribute_name}.value`,
|
|
182
|
+
// moment().format("YYYY-MM-DD"),
|
|
183
|
+
// {
|
|
184
|
+
// shouldDirty: true,
|
|
185
|
+
// }
|
|
186
|
+
// );
|
|
187
|
+
// } else if (newOperator === "between") {
|
|
188
|
+
// setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
|
|
189
|
+
// shouldDirty: true,
|
|
190
|
+
// });
|
|
191
|
+
// } else if (
|
|
192
|
+
// oldOperator === "between" ||
|
|
193
|
+
// oldOperator === "today"
|
|
194
|
+
// ) {
|
|
195
|
+
// setValue(`${filter?.filter_attribute_name}.value`, "", {
|
|
196
|
+
// shouldDirty: true,
|
|
197
|
+
// });
|
|
198
|
+
// }
|
|
199
|
+
// }
|
|
200
|
+
|
|
201
|
+
// onValueChange?.();
|
|
202
|
+
// }}
|
|
203
|
+
// >
|
|
204
|
+
// {dropdownList?.map((item, idx) => (
|
|
205
|
+
// <MenuItem key={idx} value={item.value}>
|
|
206
|
+
// {item.label}
|
|
207
|
+
// </MenuItem>
|
|
208
|
+
// ))}
|
|
209
|
+
// </Select>
|
|
210
|
+
// </FormControl>
|
|
211
|
+
// )}
|
|
212
|
+
// />
|
|
213
|
+
// );
|
|
214
|
+
// };
|
|
215
|
+
|
|
216
|
+
// export default FormDropdown;
|
|
217
|
+
|
|
132
218
|
// !! DON'T DELETE THIS OLD CODE !! //
|
|
133
219
|
|
|
134
220
|
// import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
|
|
@@ -4,33 +4,14 @@ import FormTextfield from "../components/Textfield";
|
|
|
4
4
|
import FormDatePicker from "../components/Date";
|
|
5
5
|
import FormMultiSelect from "../components/Multi-Select";
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
| "is_after"
|
|
16
|
-
| "is_on_or_before"
|
|
17
|
-
| "is_on_or_after"
|
|
18
|
-
| "empty"
|
|
19
|
-
| "not_empty";
|
|
20
|
-
|
|
21
|
-
export const DATE_ALLOWED_OPERATORS: DateOperator[] = [
|
|
22
|
-
"equal",
|
|
23
|
-
"before",
|
|
24
|
-
"after",
|
|
25
|
-
"between",
|
|
26
|
-
"is",
|
|
27
|
-
"today",
|
|
28
|
-
"is_before",
|
|
29
|
-
"is_after",
|
|
30
|
-
"is_on_or_before",
|
|
31
|
-
"is_on_or_after",
|
|
32
|
-
"empty",
|
|
33
|
-
"not_empty",
|
|
7
|
+
// Operators that SHOULD use TextField when applied on date fields
|
|
8
|
+
export const NON_DATE_OPERATORS = [
|
|
9
|
+
"is_day_before",
|
|
10
|
+
"is_day_after",
|
|
11
|
+
"is_month_before",
|
|
12
|
+
"is_month_after",
|
|
13
|
+
"is_before_bussiness_days",
|
|
14
|
+
"is_after_bussiness_days",
|
|
34
15
|
];
|
|
35
16
|
|
|
36
17
|
export const resolveFilterInput = ({
|
|
@@ -46,20 +27,10 @@ export const resolveFilterInput = ({
|
|
|
46
27
|
dropdownData: any;
|
|
47
28
|
updateFiltersFromForm: () => void;
|
|
48
29
|
}) => {
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
const showDatePicker =
|
|
52
|
-
isDateType && operator && DATE_ALLOWED_OPERATORS.includes(operator as any);
|
|
30
|
+
const dataType = filter?.filter_attribute_data_type;
|
|
53
31
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
(!operator || !DATE_ALLOWED_OPERATORS.includes(operator as any));
|
|
57
|
-
|
|
58
|
-
// TEXT / NUMBER -> Always TextField
|
|
59
|
-
if (
|
|
60
|
-
filter?.filter_attribute_data_type === "text" ||
|
|
61
|
-
filter?.filter_attribute_data_type === "number"
|
|
62
|
-
) {
|
|
32
|
+
// TEXT / NUMBER → always textfield
|
|
33
|
+
if (dataType === "text" || dataType === "number") {
|
|
63
34
|
return (
|
|
64
35
|
<FormTextfield
|
|
65
36
|
filter={filter}
|
|
@@ -69,8 +40,8 @@ export const resolveFilterInput = ({
|
|
|
69
40
|
);
|
|
70
41
|
}
|
|
71
42
|
|
|
72
|
-
// YEAR
|
|
73
|
-
if (
|
|
43
|
+
// YEAR → DatePicker (Year mode)
|
|
44
|
+
if (dataType === "year") {
|
|
74
45
|
return (
|
|
75
46
|
<FormDatePicker
|
|
76
47
|
filter={filter}
|
|
@@ -81,20 +52,24 @@ export const resolveFilterInput = ({
|
|
|
81
52
|
);
|
|
82
53
|
}
|
|
83
54
|
|
|
84
|
-
// DATE LOGIC
|
|
85
|
-
if (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
55
|
+
// DATE FIELD LOGIC
|
|
56
|
+
if (dataType === "date") {
|
|
57
|
+
const isNonDateOperator = operator && NON_DATE_OPERATORS.includes(operator);
|
|
58
|
+
|
|
59
|
+
if (isNonDateOperator) {
|
|
60
|
+
// Non-date operator → show TEXT FIELD
|
|
61
|
+
return (
|
|
62
|
+
<FormTextfield
|
|
63
|
+
filter={filter}
|
|
64
|
+
control={control}
|
|
65
|
+
onValueChange={updateFiltersFromForm}
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
94
69
|
|
|
95
|
-
|
|
70
|
+
// Default for all other operators → Date Picker
|
|
96
71
|
return (
|
|
97
|
-
<
|
|
72
|
+
<FormDatePicker
|
|
98
73
|
filter={filter}
|
|
99
74
|
control={control}
|
|
100
75
|
onValueChange={updateFiltersFromForm}
|
|
@@ -102,7 +77,7 @@ export const resolveFilterInput = ({
|
|
|
102
77
|
);
|
|
103
78
|
}
|
|
104
79
|
|
|
105
|
-
//
|
|
80
|
+
// SELECT / MULTISELECT / RADIO / CHECKBOX
|
|
106
81
|
if (
|
|
107
82
|
filter?.filter_attribute_data_type !== undefined &&
|
|
108
83
|
["select", "multiselect", "radio", "checkbox"].includes(
|