rez-table-listing-mui 1.3.30 → 1.3.31

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 (21) hide show
  1. package/dist/index.d.ts +39 -2
  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/common/saved-filter-modal/index.tsx +480 -0
  8. package/src/listing/components/filter/components/forms/components/Date.tsx +1 -1
  9. package/src/listing/components/filter/components/forms/components/Dropdown.tsx +135 -2
  10. package/src/listing/components/filter/components/forms/components/Textfield.tsx +1 -4
  11. package/src/listing/components/filter/components/forms/index.tsx +60 -108
  12. package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx +48 -24
  13. package/src/listing/components/filter/components/main-filter.tsx +6 -6
  14. package/src/listing/components/filter/components/saved-edit-filter.tsx +5 -3
  15. package/src/listing/components/filter/components/saved-filter.tsx +205 -127
  16. package/src/listing/components/filter/components/single-filter-rendering.tsx +3 -3
  17. package/src/listing/components/filter/index.tsx +107 -5
  18. package/src/listing/components/login/index.tsx +5 -8
  19. package/src/listing/libs/hooks/useEntityTableAPI.tsx +3 -0
  20. package/src/listing/types/filter.ts +40 -1
  21. package/src/view/FIlterWrapper.tsx +10 -0
package/src/listing/components/filter/components/forms/index.tsx CHANGED
@@ -36,7 +36,7 @@ const FilterForm = ({
36
36
  handleRemoveFilter,
37
37
  editMode = false,
38
38
  tableStates,
39
- setSavedFilterModalOpen,
39
+ onSaveFilterButtonClick,
40
40
  setDeleteFilterModalOpen,
41
41
  onChangeFunction,
42
42
  filterComponentOptions,
@@ -48,7 +48,7 @@ const FilterForm = ({
48
48
  handleRemoveFilter: (filter_attribute: string) => void;
49
49
  editMode?: boolean;
50
50
  tableStates: CraftTableOptionsProps;
51
- setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
51
+ onSaveFilterButtonClick?: () => void;
52
52
  setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
53
53
  onChangeFunction: ({
54
54
  updatedFilters,
@@ -350,7 +350,7 @@ const FilterForm = ({
350
350
  `${filter?.filter_attribute_name}.operator`
351
351
  );
352
352
 
353
- // Toggle dummy field to force form dirty
353
+ // ✅ Toggle dummy field to force form dirty
354
354
  const dummy = watch("dummyChange");
355
355
  setValue(
356
356
  "dummyChange",
@@ -442,7 +442,7 @@ const FilterForm = ({
442
442
  },
443
443
  }}
444
444
  onClick={() => {
445
- setSavedFilterModalOpen && setSavedFilterModalOpen(true);
445
+ onSaveFilterButtonClick && onSaveFilterButtonClick();
446
446
  }}
447
447
  >
448
448
  Save Filter
@@ -469,7 +469,7 @@ const FilterForm = ({
469
469
 
470
470
  export default FilterForm;
471
471
 
472
- // !! PLEASE DO NOT DELETE THIS COMMENTED BLOCK !!
472
+ // !! PLEASE DO NOT DELETE THIS COMMENT BLOCK !!
473
473
  // import {
474
474
  // Box,
475
475
  // Button,
@@ -831,7 +831,7 @@ export default FilterForm;
831
831
  // `${filter?.filter_attribute_name}.operator`
832
832
  // );
833
833
 
834
- // // Toggle dummy field to force form dirty
834
+ // // ✅ Toggle dummy field to force form dirty
835
835
  // const dummy = watch("dummyChange");
836
836
  // setValue(
837
837
  // "dummyChange",
@@ -850,108 +850,60 @@ export default FilterForm;
850
850
  // </Box>
851
851
 
852
852
  // <Box>
853
- // {(() => {
854
- // const fieldValue = formValues[
855
- // filter?.filter_attribute_name as string
856
- // ] as
857
- // | { value: string | string[]; operator: string }
858
- // | undefined;
859
-
860
- // const operator = fieldValue?.operator;
861
-
862
- // // Operators that should show a Date Picker
863
- // const dateAllowedOperators = [
864
- // "equal",
865
- // "before",
866
- // "after",
867
- // "between",
868
- // "is",
869
- // "today",
870
- // "is_before",
871
- // "is_after",
872
- // "is_on_or_before",
873
- // "is_on_or_after",
874
- // "empty",
875
- // "not_empty",
876
- // ];
877
-
878
- // const showDatePicker =
879
- // filter?.filter_attribute_data_type === "date" &&
880
- // operator &&
881
- // dateAllowedOperators.includes(operator);
882
-
883
- // if (
884
- // filter?.filter_attribute_data_type === "text" ||
885
- // filter?.filter_attribute_data_type === "number"
886
- // ) {
887
- // return (
888
- // <FormTextfield
889
- // filter={filter}
890
- // control={control}
891
- // onValueChange={updateFiltersFromForm}
892
- // />
893
- // );
894
- // }
895
-
896
- // if (
897
- // filter?.filter_attribute_data_type === "select"
898
- // ) {
899
- // return (
900
- // <FormMultiSelect
901
- // filter={filter}
902
- // control={control}
903
- // dropdownData={dropdownData}
904
- // onValueChange={updateFiltersFromForm}
905
- // />
906
- // );
907
- // }
908
-
909
- // if (
910
- // filter?.filter_attribute_data_type ===
911
- // "multiselect"
912
- // ) {
913
- // return (
914
- // <FormMultiSelect
915
- // filter={filter}
916
- // control={control}
917
- // dropdownData={dropdownData}
918
- // onValueChange={updateFiltersFromForm}
919
- // />
920
- // );
921
- // }
922
-
923
- // if (filter?.filter_attribute_data_type === "year") {
924
- // return (
925
- // <FormDatePicker
926
- // filter={filter}
927
- // control={control}
928
- // views={["year"]}
929
- // onValueChange={updateFiltersFromForm}
930
- // />
931
- // );
932
- // }
933
-
934
- // // DATE LOGIC
935
- // if (showDatePicker) {
936
- // return (
937
- // <FormDatePicker
938
- // filter={filter}
939
- // control={control}
940
- // onValueChange={updateFiltersFromForm}
941
- // />
942
- // );
943
- // } else {
944
- // return (
945
- // <FormTextfield
946
- // filter={filter}
947
- // control={control}
948
- // onValueChange={updateFiltersFromForm}
949
- // />
950
- // );
951
- // }
952
-
953
- // return <FormControl fullWidth size="small" />;
954
- // })()}
853
+ // {filter?.filter_attribute_data_type === "text" ||
854
+ // filter?.filter_attribute_data_type === "number" ? (
855
+ // <FormTextfield
856
+ // filter={filter}
857
+ // control={control}
858
+ // onValueChange={updateFiltersFromForm}
859
+ // />
860
+ // ) : filter?.filter_attribute_data_type === "year" ? (
861
+ // <FormDatePicker
862
+ // filter={filter}
863
+ // control={control}
864
+ // views={["year"]}
865
+ // onValueChange={updateFiltersFromForm}
866
+ // />
867
+ // ) : filter?.filter_attribute_data_type === "date" ? (
868
+ // <FormDatePicker
869
+ // filter={filter}
870
+ // control={control}
871
+ // onValueChange={updateFiltersFromForm}
872
+ // />
873
+ // ) : filter?.filter_attribute_data_type ===
874
+ // "select" ? (
875
+ // <FormMultiSelect
876
+ // filter={filter}
877
+ // control={control}
878
+ // dropdownData={dropdownData}
879
+ // onValueChange={updateFiltersFromForm}
880
+ // />
881
+ // ) : filter?.filter_attribute_data_type ===
882
+ // "multiselect" ? (
883
+ // <FormMultiSelect
884
+ // filter={filter}
885
+ // control={control}
886
+ // dropdownData={dropdownData}
887
+ // onValueChange={updateFiltersFromForm}
888
+ // />
889
+ // ) : filter?.filter_attribute_data_type === "radio" ? (
890
+ // <FormMultiSelect
891
+ // filter={filter}
892
+ // control={control}
893
+ // dropdownData={dropdownData}
894
+ // onValueChange={updateFiltersFromForm}
895
+ // />
896
+ // ) : filter?.filter_attribute_data_type ===
897
+ // "checkbox" ? (
898
+ // <FormMultiSelect
899
+ // filter={filter}
900
+ // control={control}
901
+ // dropdownData={dropdownData}
902
+ // onValueChange={updateFiltersFromForm}
903
+ // />
904
+ // ) : (
905
+ // <FormControl fullWidth size="small" />
906
+ // )}
955
907
  // </Box>
956
908
  // </Box>
957
909
  // );
package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx CHANGED
@@ -4,20 +4,37 @@ import FormTextfield from "../components/Textfield";
4
4
  import FormDatePicker from "../components/Date";
5
5
  import FormMultiSelect from "../components/Multi-Select";
6
6
 
7
- // Operators that should show a Date Picker
8
- const dateAllowedOperators = [
7
+ export type DateOperator =
8
+ | "equal"
9
+ | "before"
10
+ | "after"
11
+ | "between"
12
+ | "is"
13
+ | "today"
14
+ | "is_day_before"
15
+ | "is_day_after"
16
+ | "is_month_before"
17
+ | "is_month_after"
18
+ | "is_before"
19
+ | "is_after"
20
+ | "is_on_or_before"
21
+ | "is_on_or_after";
22
+
23
+ export const DATE_ALLOWED_OPERATORS: DateOperator[] = [
9
24
  "equal",
10
25
  "before",
11
26
  "after",
12
27
  "between",
13
28
  "is",
14
29
  "today",
30
+ "is_day_before",
31
+ "is_day_after",
32
+ "is_month_before",
33
+ "is_month_after",
15
34
  "is_before",
16
35
  "is_after",
17
36
  "is_on_or_before",
18
37
  "is_on_or_after",
19
- "empty",
20
- "not_empty",
21
38
  ];
22
39
 
23
40
  export const resolveFilterInput = ({
@@ -33,10 +50,20 @@ export const resolveFilterInput = ({
33
50
  dropdownData: any;
34
51
  updateFiltersFromForm: () => void;
35
52
  }) => {
36
- const dataType = filter?.filter_attribute_data_type;
53
+ const isDateType = filter.filter_attribute_data_type === "date";
54
+
55
+ const showDatePicker =
56
+ isDateType && operator && DATE_ALLOWED_OPERATORS.includes(operator as any);
37
57
 
38
- // TEXT / NUMBER → always textfield
39
- if (dataType === "text" || dataType === "number") {
58
+ const showTextInsteadOfDate =
59
+ isDateType &&
60
+ (!operator || !DATE_ALLOWED_OPERATORS.includes(operator as any));
61
+
62
+ // TEXT / NUMBER -> Always TextField
63
+ if (
64
+ filter?.filter_attribute_data_type === "text" ||
65
+ filter?.filter_attribute_data_type === "number"
66
+ ) {
40
67
  return (
41
68
  <FormTextfield
42
69
  filter={filter}
@@ -46,8 +73,8 @@ export const resolveFilterInput = ({
46
73
  );
47
74
  }
48
75
 
49
- // YEAR → DatePicker (Year mode)
50
- if (dataType === "year") {
76
+ // YEAR
77
+ if (filter?.filter_attribute_data_type === "year") {
51
78
  return (
52
79
  <FormDatePicker
53
80
  filter={filter}
@@ -58,21 +85,18 @@ export const resolveFilterInput = ({
58
85
  );
59
86
  }
60
87
 
61
- // DATE FIELD
62
- if (dataType === "date") {
63
- const showDatePicker = operator && dateAllowedOperators.includes(operator);
64
-
65
- if (showDatePicker) {
66
- // Date Picker
67
- return (
68
- <FormDatePicker
69
- filter={filter}
70
- control={control}
71
- onValueChange={updateFiltersFromForm}
72
- />
73
- );
74
- }
88
+ // DATE LOGIC
89
+ if (showDatePicker) {
90
+ return (
91
+ <FormDatePicker
92
+ filter={filter}
93
+ control={control}
94
+ onValueChange={updateFiltersFromForm}
95
+ />
96
+ );
97
+ }
75
98
 
99
+ if (showTextInsteadOfDate) {
76
100
  return (
77
101
  <FormTextfield
78
102
  filter={filter}
@@ -82,7 +106,7 @@ export const resolveFilterInput = ({
82
106
  );
83
107
  }
84
108
 
85
- // SELECT / MULTISELECT / RADIO / CHECKBOX
109
+ // MULTISELECT / SELECT / RADIO / CHECKBOX
86
110
  if (
87
111
  filter?.filter_attribute_data_type !== undefined &&
88
112
  ["select", "multiselect", "radio", "checkbox"].includes(
package/src/listing/components/filter/components/main-filter.tsx CHANGED
@@ -11,7 +11,7 @@ const MainFilter = ({
11
11
  columnsData,
12
12
  dropdownData,
13
13
  tableStates,
14
- setSavedFilterModalOpen,
14
+ onSaveFilterButtonClick,
15
15
  onChangeFunction,
16
16
  filterComponentOptions,
17
17
  }: FilterFormComponentProps) => {
@@ -22,10 +22,10 @@ const MainFilter = ({
22
22
  useEffect(() => {
23
23
  setFilterMaster(
24
24
  (prev) =>
25
- ({
26
- ...prev,
27
- activeFilterTabIndex: 0,
28
- } as FilterMasterStateProps)
25
+ ({
26
+ ...prev,
27
+ activeFilterTabIndex: 0,
28
+ } as FilterMasterStateProps)
29
29
  );
30
30
  }, []);
31
31
 
@@ -61,7 +61,7 @@ const MainFilter = ({
61
61
  setSearchTerm={setSearchTerm}
62
62
  handleRemoveFilter={handleRemoveFilter}
63
63
  tableStates={tableStates}
64
- setSavedFilterModalOpen={setSavedFilterModalOpen}
64
+ onSaveFilterButtonClick={onSaveFilterButtonClick}
65
65
  dropdownData={dropdownData}
66
66
  onChangeFunction={onChangeFunction}
67
67
  filterComponentOptions={filterComponentOptions}
package/src/listing/components/filter/components/saved-edit-filter.tsx CHANGED
@@ -18,7 +18,7 @@ const SavedFilterEditComponent = ({
18
18
  setEditMode,
19
19
  searchTerm,
20
20
  setSearchTerm,
21
- setSavedFilterModalOpen,
21
+ onSaveFilterButtonClick,
22
22
  setDeleteFilterModalOpen,
23
23
  onChangeFunction,
24
24
  filterComponentOptions,
@@ -30,7 +30,7 @@ const SavedFilterEditComponent = ({
30
30
  setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
31
31
  searchTerm?: string;
32
32
  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
33
- setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
33
+ onSaveFilterButtonClick?: () => void;
34
34
  setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
35
35
  onChangeFunction: ({
36
36
  updatedFilters,
@@ -62,6 +62,8 @@ const SavedFilterEditComponent = ({
62
62
  selectedId: "",
63
63
  selectedName: "",
64
64
  selectedCode: "",
65
+ shareWithTeam: false,
66
+ allowTeamEdit: false,
65
67
  },
66
68
  activeFilterTabIndex: -1,
67
69
  } as FilterMasterStateProps)
@@ -99,7 +101,7 @@ const SavedFilterEditComponent = ({
99
101
  dropdownData={dropdownData}
100
102
  searchTerm={searchTerm}
101
103
  setSearchTerm={setSearchTerm}
102
- setSavedFilterModalOpen={setSavedFilterModalOpen}
104
+ onSaveFilterButtonClick={onSaveFilterButtonClick}
103
105
  setDeleteFilterModalOpen={setDeleteFilterModalOpen}
104
106
  onChangeFunction={onChangeFunction}
105
107
  filterComponentOptions={filterComponentOptions}