rez-table-listing-mui 1.3.22 → 1.3.24

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.
Files changed (9) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/listing/components/filter/components/forms/components/Dropdown.tsx +37 -254
  7. package/src/listing/components/filter/components/forms/components/Textfield.tsx +1 -1
  8. package/src/listing/components/filter/components/forms/index.tsx +1067 -911
  9. package/src/listing/components/login/index.tsx +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rez-table-listing-mui",
3
- "version": "1.3.22",
3
+ "version": "1.3.24",
4
4
  "type": "module",
5
5
  "description": "A rez table listing component built on TanStack Table",
6
6
  "main": "dist/index.js",
package/src/listing/components/filter/components/forms/components/Dropdown.tsx CHANGED
@@ -1,13 +1,18 @@
1
+ // !! DON'T DELETE THIS OLD CODE !! //
2
+
1
3
  import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
2
4
  import { Controller, UseFormSetValue } from "react-hook-form";
3
- import moment from "moment";
4
5
  import { FilterStateProps } from "../../../../../types/filter";
6
+ import moment from "moment";
5
7
 
6
8
  interface FormDropdownProps {
7
9
  filter: FilterStateProps;
8
10
  control: any;
9
11
  setValue: UseFormSetValue<any>;
10
- dropdownList: { label?: string; value?: string }[];
12
+ dropdownList: {
13
+ label?: string;
14
+ value?: string;
15
+ }[];
11
16
  isLoading?: boolean;
12
17
  sx?: SxProps<Theme>;
13
18
  onValueChange?: () => void;
@@ -24,54 +29,67 @@ const FormDropdown = ({
24
29
  }: FormDropdownProps) => {
25
30
  return (
26
31
  <Controller
27
- name={`${filter.filter_attribute_name}.operator`}
32
+ name={`${filter?.filter_attribute_name}.operator`}
28
33
  control={control}
29
- defaultValue={filter.filter_operator || dropdownList?.[0]?.value || ""}
34
+ defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
30
35
  render={({ field }) => (
31
36
  <FormControl sx={sx} size="small">
32
37
  <Select
33
38
  {...field}
34
39
  variant="standard"
35
- disableUnderline
36
- disabled={isLoading}
37
40
  sx={{
38
41
  fontSize: "0.875rem",
39
42
  minWidth: 50,
43
+ border: "none",
40
44
  boxShadow: "none",
45
+ "& .MuiSelect-icon": {
46
+ top: "45%",
47
+ transform: "translateY(-50%)",
48
+ "& .MuiOutlinedInput-input": {
49
+ padding: "12px 20px",
50
+ },
51
+ },
41
52
  }}
53
+ disabled={isLoading}
54
+ disableUnderline
42
55
  onChange={(e) => {
43
56
  const newOperator = e.target.value;
44
57
  const oldOperator = field.value;
45
58
 
46
59
  field.onChange(e);
47
60
 
48
- const fieldName = `${filter.filter_attribute_name}.value`;
49
- const type = filter.filter_attribute_data_type;
50
-
51
- // RESET RULES (Unified)
52
- if (type === "date" || type === "year") {
61
+ if (
62
+ (filter?.filter_attribute_data_type === "date" ||
63
+ filter?.filter_attribute_data_type === "year") &&
64
+ newOperator !== oldOperator
65
+ ) {
53
66
  if (newOperator === "today") {
54
- setValue(fieldName, moment().format("YYYY-MM-DD"), {
55
- shouldDirty: true,
56
- });
67
+ setValue(
68
+ `${filter?.filter_attribute_name}.value`,
69
+ moment().format("YYYY-MM-DD"),
70
+ {
71
+ shouldDirty: true,
72
+ }
73
+ );
57
74
  } else if (newOperator === "between") {
58
- setValue(fieldName, ["", ""], {
75
+ setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
59
76
  shouldDirty: true,
60
77
  });
61
78
  } else if (
62
79
  oldOperator === "between" ||
63
80
  oldOperator === "today"
64
81
  ) {
65
- setValue(fieldName, "", { shouldDirty: true });
82
+ setValue(`${filter?.filter_attribute_name}.value`, "", {
83
+ shouldDirty: true,
84
+ });
66
85
  }
67
86
  }
68
87
 
69
- // Delay to ensure RHF state updates
70
- setTimeout(() => onValueChange?.(), 0);
88
+ onValueChange?.();
71
89
  }}
72
90
  >
73
91
  {dropdownList?.map((item, idx) => (
74
- <MenuItem value={item.value} key={idx}>
92
+ <MenuItem key={idx} value={item.value}>
75
93
  {item.label}
76
94
  </MenuItem>
77
95
  ))}
@@ -83,238 +101,3 @@ const FormDropdown = ({
83
101
  };
84
102
 
85
103
  export default FormDropdown;
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
-
218
- // !! DON'T DELETE THIS OLD CODE !! //
219
-
220
- // import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
221
- // import { Controller, UseFormSetValue } from "react-hook-form";
222
- // import { FilterStateProps } from "../../../../../types/filter";
223
- // import moment from "moment";
224
-
225
- // interface FormDropdownProps {
226
- // filter: FilterStateProps;
227
- // control: any;
228
- // setValue: UseFormSetValue<any>;
229
- // dropdownList: {
230
- // label?: string;
231
- // value?: string;
232
- // }[];
233
- // isLoading?: boolean;
234
- // sx?: SxProps<Theme>;
235
- // onValueChange?: () => void;
236
- // }
237
-
238
- // const FormDropdown = ({
239
- // filter,
240
- // control,
241
- // setValue,
242
- // dropdownList,
243
- // isLoading = false,
244
- // sx,
245
- // onValueChange,
246
- // }: FormDropdownProps) => {
247
- // return (
248
- // <Controller
249
- // name={`${filter?.filter_attribute_name}.operator`}
250
- // control={control}
251
- // defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
252
- // render={({ field }) => (
253
- // <FormControl sx={sx} size="small">
254
- // <Select
255
- // {...field}
256
- // variant="standard"
257
- // sx={{
258
- // fontSize: "0.875rem",
259
- // minWidth: 50,
260
- // border: "none",
261
- // boxShadow: "none",
262
- // "& .MuiSelect-icon": {
263
- // top: "45%",
264
- // transform: "translateY(-50%)",
265
- // "& .MuiOutlinedInput-input": {
266
- // padding: "12px 20px",
267
- // },
268
- // },
269
- // }}
270
- // disabled={isLoading}
271
- // disableUnderline
272
- // onChange={(e) => {
273
- // const newOperator = e.target.value;
274
- // const oldOperator = field.value;
275
-
276
- // field.onChange(e);
277
-
278
- // if (
279
- // (filter?.filter_attribute_data_type === "date" ||
280
- // filter?.filter_attribute_data_type === "year") &&
281
- // newOperator !== oldOperator
282
- // ) {
283
- // if (newOperator === "today") {
284
- // setValue(
285
- // `${filter?.filter_attribute_name}.value`,
286
- // moment().format("YYYY-MM-DD"),
287
- // {
288
- // shouldDirty: true,
289
- // }
290
- // );
291
- // } else if (newOperator === "between") {
292
- // setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
293
- // shouldDirty: true,
294
- // });
295
- // } else if (
296
- // oldOperator === "between" ||
297
- // oldOperator === "today"
298
- // ) {
299
- // setValue(`${filter?.filter_attribute_name}.value`, "", {
300
- // shouldDirty: true,
301
- // });
302
- // }
303
- // }
304
-
305
- // onValueChange?.();
306
- // }}
307
- // >
308
- // {dropdownList?.map((item, idx) => (
309
- // <MenuItem key={idx} value={item.value}>
310
- // {item.label}
311
- // </MenuItem>
312
- // ))}
313
- // </Select>
314
- // </FormControl>
315
- // )}
316
- // />
317
- // );
318
- // };
319
-
320
- // export default FormDropdown;
package/src/listing/components/filter/components/forms/components/Textfield.tsx CHANGED
@@ -33,7 +33,7 @@ const FormTextfield = ({
33
33
  padding: "12px 20px",
34
34
  },
35
35
  }}
36
- type={filter?.filter_attribute_data_type || "text"}
36
+ type={filter?.filter_attribute_data_type || "text" || "number"}
37
37
  placeholder={"Enter value"}
38
38
  disabled={isLoading}
39
39
  onChange={(e) => {