rez-table-listing-mui 1.3.3 → 1.3.5

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 (20) hide show
  1. package/dist/index.d.ts +27 -14
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/listing/components/filter/components/attributes-filter.tsx +8 -7
  8. package/src/listing/components/filter/components/forms/components/Date.tsx +1 -1
  9. package/src/listing/components/filter/components/forms/components/Dropdown.tsx +7 -6
  10. package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx +5 -3
  11. package/src/listing/components/filter/components/forms/components/Multi-Select.tsx +1 -1
  12. package/src/listing/components/filter/components/forms/components/Select.tsx +1 -1
  13. package/src/listing/components/filter/components/forms/components/Textfield.tsx +2 -2
  14. package/src/listing/components/filter/components/forms/index.tsx +33 -23
  15. package/src/listing/components/filter/index.tsx +237 -96
  16. package/src/listing/libs/hooks/useEntityTableAPI.tsx +2 -5
  17. package/src/listing/libs/utils/apiColumn.ts +3 -1
  18. package/src/listing/types/filter.ts +33 -16
  19. package/src/view/FIlterWrapper.tsx +40 -19
  20. package/src/view/ListingView.tsx +43 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rez-table-listing-mui",
3
- "version": "1.3.3",
3
+ "version": "1.3.5",
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/attributes-filter.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  import {
11
11
  AttributesFilterProps,
12
12
  FilterMasterStateProps,
13
+ FilterStateProps,
13
14
  } from "../../../types/filter";
14
15
  import CustomSearch from "./search";
15
16
  import { useMemo } from "react";
@@ -64,7 +65,7 @@ const AttributesFilter = ({
64
65
  );
65
66
  if (!matchingColumn) return;
66
67
 
67
- let updatedFilters = [...filters];
68
+ let updatedFilters: FilterStateProps[] = [...filters];
68
69
  let updatedRadio: string[] = [];
69
70
 
70
71
  if (value === "") {
@@ -85,15 +86,15 @@ const AttributesFilter = ({
85
86
  filter_value: [value],
86
87
  };
87
88
 
88
- const exists = filters.some(
89
- (f) => f.filter_attribute === matchingColumn.attribute_key
89
+ const exists = filters?.some(
90
+ (f) => f?.filter_attribute === matchingColumn?.attribute_key
90
91
  );
91
92
  if (exists) {
92
- updatedFilters = filters.map((f) =>
93
- f.filter_attribute === matchingColumn.attribute_key ? newFilter : f
94
- );
93
+ updatedFilters = filters?.map((f) =>
94
+ f?.filter_attribute === matchingColumn?.attribute_key ? newFilter : f
95
+ ) as FilterStateProps[];
95
96
  } else {
96
- updatedFilters = [...filters, newFilter];
97
+ updatedFilters = [...filters, newFilter] as FilterStateProps[];
97
98
  }
98
99
 
99
100
  updatedRadio = [value];
package/src/listing/components/filter/components/forms/components/Date.tsx CHANGED
@@ -28,7 +28,7 @@ const FormDatePicker = ({
28
28
  <LocalizationProvider dateAdapter={AdapterDateFns}>
29
29
  <Box display="flex" gap={1}>
30
30
  <Controller
31
- name={`${filter?.name}.value`}
31
+ name={`${filter?.filter_attribute_name}.value`}
32
32
  control={control}
33
33
  defaultValue={
34
34
  isRange
package/src/listing/components/filter/components/forms/components/Dropdown.tsx CHANGED
@@ -27,9 +27,9 @@ const FormDropdown = ({
27
27
  }: FormDropdownProps) => {
28
28
  return (
29
29
  <Controller
30
- name={`${filter?.name}.operator`}
30
+ name={`${filter?.filter_attribute_name}.operator`}
31
31
  control={control}
32
- defaultValue={filter.filter_operator || dropdownList?.[0]?.value || ""}
32
+ defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
33
33
  render={({ field }) => (
34
34
  <FormControl sx={sx} size="small">
35
35
  <Select
@@ -57,26 +57,27 @@ const FormDropdown = ({
57
57
  field.onChange(e);
58
58
 
59
59
  if (
60
- (filter.data_type === "date" || filter.data_type === "year") &&
60
+ (filter?.filter_attribute_data_type === "date" ||
61
+ filter?.filter_attribute_data_type === "year") &&
61
62
  newOperator !== oldOperator
62
63
  ) {
63
64
  if (newOperator === "today") {
64
65
  setValue(
65
- `${filter.name}.value`,
66
+ `${filter?.filter_attribute_name}.value`,
66
67
  moment().format("YYYY-MM-DD"),
67
68
  {
68
69
  shouldDirty: true,
69
70
  }
70
71
  );
71
72
  } else if (newOperator === "between") {
72
- setValue(`${filter.name}.value`, ["", ""], {
73
+ setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
73
74
  shouldDirty: true,
74
75
  });
75
76
  } else if (
76
77
  oldOperator === "between" ||
77
78
  oldOperator === "today"
78
79
  ) {
79
- setValue(`${filter.name}.value`, "", {
80
+ setValue(`${filter?.filter_attribute_name}.value`, "", {
80
81
  shouldDirty: true,
81
82
  });
82
83
  }
package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx CHANGED
@@ -73,11 +73,13 @@ const FilterCriteria = ({
73
73
 
74
74
  const newSelectedFilter = {
75
75
  ...newFilter,
76
- id: attribute.id,
77
- name: attribute.name,
78
- data_type: attribute.element_type,
76
+ id: attribute?.id,
77
+ filter_attribute_name: attribute?.name,
78
+ filter_attribute_data_type: attribute?.element_type,
79
+ datasource_list: attribute?.datasource_list,
79
80
  dropdown_list: matchingDropdownList,
80
81
  filter_entity_name: selectedFilterEntity?.label,
82
+ attribute_key: attribute?.attribute_key,
81
83
  };
82
84
 
83
85
  setFilters((prev) => [...prev, newSelectedFilter]);
package/src/listing/components/filter/components/forms/components/Multi-Select.tsx CHANGED
@@ -27,7 +27,7 @@ const FormMultiSelect = ({
27
27
 
28
28
  return (
29
29
  <Controller
30
- name={`${filter?.name}.value`}
30
+ name={`${filter?.filter_attribute_name}.value`}
31
31
  control={control}
32
32
  defaultValue={
33
33
  Array.isArray(filter.filter_value)
package/src/listing/components/filter/components/forms/components/Select.tsx CHANGED
@@ -26,7 +26,7 @@ const FormSelect = ({
26
26
 
27
27
  return (
28
28
  <Controller
29
- name={`${filter?.name}.value`}
29
+ name={`${filter?.filter_attribute_name}.value`}
30
30
  control={control}
31
31
  defaultValue={filter.filter_value || ""}
32
32
  render={({ field }) => (
package/src/listing/components/filter/components/forms/components/Textfield.tsx CHANGED
@@ -18,7 +18,7 @@ const FormTextfield = ({
18
18
  }: FormTextfieldProps) => {
19
19
  return (
20
20
  <Controller
21
- name={`${filter?.name}.value`}
21
+ name={`${filter?.filter_attribute_name}.value`}
22
22
  control={control}
23
23
  defaultValue={filter.filter_value || ""}
24
24
  render={({ field }) => (
@@ -33,7 +33,7 @@ const FormTextfield = ({
33
33
  padding: "12px 20px",
34
34
  },
35
35
  }}
36
- type={filter.data_type || "text"}
36
+ type={filter?.filter_attribute_data_type || "text"}
37
37
  placeholder={"Enter value"}
38
38
  disabled={isLoading}
39
39
  onChange={(e) => {
package/src/listing/components/filter/components/forms/index.tsx CHANGED
@@ -81,11 +81,11 @@ const FilterForm = ({
81
81
 
82
82
  const defaultValues = useMemo(() => {
83
83
  const filterValues = filters?.reduce((acc, curr) => {
84
- if (curr.name) {
85
- acc[curr.name] = {
86
- value: curr.filter_value ?? "",
84
+ if (curr?.filter_attribute_name) {
85
+ acc[curr?.filter_attribute_name] = {
86
+ value: curr?.filter_value ?? "",
87
87
  operator:
88
- curr.filter_operator ?? curr.dropdown_list?.[0]?.value ?? "",
88
+ curr?.filter_operator ?? curr?.dropdown_list?.[0]?.value ?? "",
89
89
  };
90
90
  }
91
91
  return acc;
@@ -131,8 +131,11 @@ const FilterForm = ({
131
131
 
132
132
  const updateFiltersFromForm = useCallback(() => {
133
133
  const updatedFilters = filters?.map((filter) => {
134
- if (filter.name && typeof formValues[filter.name] === "object") {
135
- const filterValue = formValues[filter.name] as {
134
+ if (
135
+ filter?.filter_attribute_name &&
136
+ typeof formValues[filter?.filter_attribute_name] === "object"
137
+ ) {
138
+ const filterValue = formValues[filter?.filter_attribute_name] as {
136
139
  value: string | string[];
137
140
  operator: string;
138
141
  };
@@ -154,8 +157,8 @@ const FilterForm = ({
154
157
  return () => {
155
158
  reset();
156
159
  filters?.forEach((filter) => {
157
- if (filter.name) {
158
- unregister(filter.name);
160
+ if (filter?.filter_attribute_name) {
161
+ unregister(filter?.filter_attribute_name);
159
162
  }
160
163
  });
161
164
  };
@@ -179,9 +182,9 @@ const FilterForm = ({
179
182
 
180
183
  // unregister all fields belonging to this entity type
181
184
  filters?.forEach((f) => {
182
- if (f.filter_entity_name === entityType && f.name) {
183
- unregister(`${f.name}.value`);
184
- unregister(`${f.name}.operator`);
185
+ if (f?.filter_entity_name === entityType && f?.filter_attribute_name) {
186
+ unregister(`${f?.filter_attribute_name}.value`);
187
+ unregister(`${f?.filter_attribute_name}.operator`);
185
188
  }
186
189
  });
187
190
 
@@ -319,7 +322,7 @@ const FilterForm = ({
319
322
  {filters
320
323
  .filter(
321
324
  (filter) =>
322
- filter.name
325
+ filter?.filter_attribute_name
323
326
  ?.toLowerCase()
324
327
  .includes(searchTerm.toLowerCase()) ||
325
328
  filter.filter_value
@@ -339,7 +342,7 @@ const FilterForm = ({
339
342
  <Typography
340
343
  sx={filterFormStyles.formListItemHeaderName}
341
344
  >
342
- {filter.name}
345
+ {filter?.filter_attribute_name}
343
346
  </Typography>
344
347
  <FormDropdown
345
348
  filter={filter}
@@ -352,8 +355,12 @@ const FilterForm = ({
352
355
  <IconButton
353
356
  sx={{ marginLeft: "auto" }}
354
357
  onClick={() => {
355
- unregister(`${filter.name}.value`);
356
- unregister(`${filter.name}.operator`);
358
+ unregister(
359
+ `${filter?.filter_attribute_name}.value`
360
+ );
361
+ unregister(
362
+ `${filter?.filter_attribute_name}.operator`
363
+ );
357
364
 
358
365
  // ✅ Toggle dummy field to force form dirty
359
366
  const dummy = watch("dummyChange");
@@ -374,48 +381,51 @@ const FilterForm = ({
374
381
  </Box>
375
382
 
376
383
  <Box>
377
- {filter.data_type === "text" ||
378
- filter.data_type === "number" ? (
384
+ {filter?.filter_attribute_data_type === "text" ||
385
+ filter?.filter_attribute_data_type === "number" ? (
379
386
  <FormTextfield
380
387
  filter={filter}
381
388
  control={control}
382
389
  onValueChange={updateFiltersFromForm}
383
390
  />
384
- ) : filter.data_type === "year" ? (
391
+ ) : filter?.filter_attribute_data_type === "year" ? (
385
392
  <FormDatePicker
386
393
  filter={filter}
387
394
  control={control}
388
395
  views={["year"]}
389
396
  onValueChange={updateFiltersFromForm}
390
397
  />
391
- ) : filter.data_type === "date" ? (
398
+ ) : filter?.filter_attribute_data_type === "date" ? (
392
399
  <FormDatePicker
393
400
  filter={filter}
394
401
  control={control}
395
402
  onValueChange={updateFiltersFromForm}
396
403
  />
397
- ) : filter.data_type === "select" ? (
404
+ ) : filter?.filter_attribute_data_type ===
405
+ "select" ? (
398
406
  <FormMultiSelect
399
407
  filter={filter}
400
408
  control={control}
401
409
  dropdownData={dropdownData}
402
410
  onValueChange={updateFiltersFromForm}
403
411
  />
404
- ) : filter.data_type === "multiselect" ? (
412
+ ) : filter?.filter_attribute_data_type ===
413
+ "multiselect" ? (
405
414
  <FormMultiSelect
406
415
  filter={filter}
407
416
  control={control}
408
417
  dropdownData={dropdownData}
409
418
  onValueChange={updateFiltersFromForm}
410
419
  />
411
- ) : filter.data_type === "radio" ? (
420
+ ) : filter?.filter_attribute_data_type === "radio" ? (
412
421
  <FormMultiSelect
413
422
  filter={filter}
414
423
  control={control}
415
424
  dropdownData={dropdownData}
416
425
  onValueChange={updateFiltersFromForm}
417
426
  />
418
- ) : filter.data_type === "checkbox" ? (
427
+ ) : filter?.filter_attribute_data_type ===
428
+ "checkbox" ? (
419
429
  <FormMultiSelect
420
430
  filter={filter}
421
431
  control={control}