rez-table-listing-mui 1.3.29 → 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 +909 -1065
  12. package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx +55 -26
  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
@@ -1,1144 +1,988 @@
1
- // import { Box, Button, IconButton, TextField, Typography } from "@mui/material";
2
- // import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
3
- // import {
4
- // FilterColumnsDataProps,
5
- // FilterComponentOptions,
6
- // FilterDropdownDataProps,
7
- // FilterMasterStateProps,
8
- // FilterStateProps,
9
- // } from "../../../../types/filter";
10
- // import { Controller, useForm } from "react-hook-form";
11
- // import React, { useEffect, useMemo, useCallback } from "react";
12
- // import FormDropdown from "./components/Dropdown";
13
- // import { CraftTableOptionsProps } from "../../../../types/table-options";
14
- // import FilterCriteria from "./components/Filter-criteria";
15
- // import CustomSearch from "../search";
16
- // import { customDebounce } from "../../../../libs/utils/debounce";
17
- // import { filterFormStyles } from "../../style";
18
- // import { onFilterChangeFunctionProps } from "../../../../types/common";
19
- // import { resolveFilterInput } from "./utils/filter-date-input-resolver";
1
+ import { Box, Button, IconButton, TextField, Typography } from "@mui/material";
2
+ import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
3
+ import {
4
+ FilterColumnsDataProps,
5
+ FilterComponentOptions,
6
+ FilterDropdownDataProps,
7
+ FilterMasterStateProps,
8
+ FilterStateProps,
9
+ } from "../../../../types/filter";
10
+ import { Controller, useForm } from "react-hook-form";
11
+ import React, { useEffect, useMemo, useCallback } from "react";
12
+ import FormDropdown from "./components/Dropdown";
13
+ import { CraftTableOptionsProps } from "../../../../types/table-options";
14
+ import FilterCriteria from "./components/Filter-criteria";
15
+ import CustomSearch from "../search";
16
+ import { customDebounce } from "../../../../libs/utils/debounce";
17
+ import { filterFormStyles } from "../../style";
18
+ import { onFilterChangeFunctionProps } from "../../../../types/common";
19
+ import { resolveFilterInput } from "./utils/filter-date-input-resolver";
20
20
 
21
- // interface FormValues {
22
- // filterName: string;
23
- // [key: string]:
24
- // | {
25
- // value: string | string[];
26
- // operator: string;
27
- // }
28
- // | string;
29
- // }
21
+ interface FormValues {
22
+ filterName: string;
23
+ [key: string]:
24
+ | {
25
+ value: string | string[];
26
+ operator: string;
27
+ }
28
+ | string;
29
+ }
30
30
 
31
- // const FilterForm = ({
32
- // columnsData,
33
- // dropdownData,
34
- // searchTerm = "",
35
- // setSearchTerm,
36
- // handleRemoveFilter,
37
- // editMode = false,
38
- // tableStates,
39
- // setSavedFilterModalOpen,
40
- // setDeleteFilterModalOpen,
41
- // onChangeFunction,
42
- // filterComponentOptions,
43
- // }: {
44
- // columnsData: FilterColumnsDataProps;
45
- // dropdownData: FilterDropdownDataProps;
46
- // searchTerm?: string;
47
- // setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
48
- // handleRemoveFilter: (filter_attribute: string) => void;
49
- // editMode?: boolean;
50
- // tableStates: CraftTableOptionsProps;
51
- // setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
52
- // setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
53
- // onChangeFunction: ({
54
- // updatedFilters,
55
- // filterMaster,
56
- // }: onFilterChangeFunctionProps) => void;
57
- // filterComponentOptions?: FilterComponentOptions;
58
- // }) => {
59
- // const { filterMaster, filters, setFilters, setFilterMaster, setPagination } =
60
- // tableStates;
31
+ const FilterForm = ({
32
+ columnsData,
33
+ dropdownData,
34
+ searchTerm = "",
35
+ setSearchTerm,
36
+ handleRemoveFilter,
37
+ editMode = false,
38
+ tableStates,
39
+ onSaveFilterButtonClick,
40
+ setDeleteFilterModalOpen,
41
+ onChangeFunction,
42
+ filterComponentOptions,
43
+ }: {
44
+ columnsData: FilterColumnsDataProps;
45
+ dropdownData: FilterDropdownDataProps;
46
+ searchTerm?: string;
47
+ setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
48
+ handleRemoveFilter: (filter_attribute: string) => void;
49
+ editMode?: boolean;
50
+ tableStates: CraftTableOptionsProps;
51
+ onSaveFilterButtonClick?: () => void;
52
+ setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
53
+ onChangeFunction: ({
54
+ updatedFilters,
55
+ filterMaster,
56
+ }: onFilterChangeFunctionProps) => void;
57
+ filterComponentOptions?: FilterComponentOptions;
58
+ }) => {
59
+ const { filterMaster, filters, setFilters, setFilterMaster, setPagination } =
60
+ tableStates;
61
61
 
62
- // const showSaveButton =
63
- // filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
64
- // const showClearAllButton =
65
- // filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
66
- // const customButtons =
67
- // filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
62
+ const showSaveButton =
63
+ filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
64
+ const showClearAllButton =
65
+ filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
66
+ const customButtons =
67
+ filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
68
68
 
69
- // const filterName = filterMaster?.saved_filters?.selectedName || "";
69
+ const filterName = filterMaster?.saved_filters?.selectedName || "";
70
70
 
71
- // const defaultValues = useMemo(() => {
72
- // const filterValues = filters?.reduce((acc, curr) => {
73
- // if (curr?.filter_attribute_name) {
74
- // acc[curr?.filter_attribute_name] = {
75
- // value: curr?.filter_value ?? "",
76
- // operator:
77
- // curr?.filter_operator ?? curr?.dropdown_list?.[0]?.value ?? "",
78
- // };
79
- // }
80
- // return acc;
81
- // }, {} as Record<string, { value: string | string[]; operator: string }>);
71
+ const defaultValues = useMemo(() => {
72
+ const filterValues = filters?.reduce((acc, curr) => {
73
+ if (curr?.filter_attribute_name) {
74
+ acc[curr?.filter_attribute_name] = {
75
+ value: curr?.filter_value ?? "",
76
+ operator:
77
+ curr?.filter_operator ?? curr?.dropdown_list?.[0]?.value ?? "",
78
+ };
79
+ }
80
+ return acc;
81
+ }, {} as Record<string, { value: string | string[]; operator: string }>);
82
82
 
83
- // return {
84
- // filterName: filterName ?? "",
85
- // dummyChange: "",
86
- // ...filterValues,
87
- // };
88
- // }, [filters, filterName]);
83
+ return {
84
+ filterName: filterName ?? "",
85
+ dummyChange: "",
86
+ ...filterValues,
87
+ };
88
+ }, [filters, filterName]);
89
89
 
90
- // const { control, watch, reset, setValue, unregister } = useForm<
91
- // FormValues & { dummyChange: string }
92
- // >({
93
- // mode: "onChange",
94
- // defaultValues,
95
- // resetOptions: {
96
- // keepDirtyValues: false,
97
- // keepErrors: false,
98
- // },
99
- // });
90
+ const { control, watch, reset, setValue, unregister } = useForm<
91
+ FormValues & { dummyChange: string }
92
+ >({
93
+ mode: "onChange",
94
+ defaultValues,
95
+ resetOptions: {
96
+ keepDirtyValues: false,
97
+ keepErrors: false,
98
+ },
99
+ });
100
100
 
101
- // const formValues = watch();
101
+ const formValues = watch();
102
102
 
103
- // useEffect(() => {
104
- // reset(defaultValues);
105
- // }, [filters]);
103
+ useEffect(() => {
104
+ reset(defaultValues);
105
+ }, [filters]);
106
106
 
107
- // const debouncedUpdateFilters = useCallback(
108
- // customDebounce((updatedFilters: FilterStateProps[]) => {
109
- // setFilters(updatedFilters);
107
+ const debouncedUpdateFilters = useCallback(
108
+ customDebounce((updatedFilters: FilterStateProps[]) => {
109
+ setFilters(updatedFilters);
110
110
 
111
- // const newState = {
112
- // filterMaster: filterMaster,
113
- // filters: updatedFilters,
114
- // };
111
+ const newState = {
112
+ filterMaster: filterMaster,
113
+ filters: updatedFilters,
114
+ };
115
115
 
116
- // onChangeFunction && onChangeFunction(newState);
117
- // }, 1000),
118
- // [setFilters]
119
- // );
116
+ onChangeFunction && onChangeFunction(newState);
117
+ }, 1000),
118
+ [setFilters]
119
+ );
120
120
 
121
- // const updateFiltersFromForm = useCallback(() => {
122
- // const updatedFilters = filters?.map((filter) => {
123
- // if (
124
- // filter?.filter_attribute_name &&
125
- // typeof formValues[filter?.filter_attribute_name] === "object"
126
- // ) {
127
- // const filterValue = formValues[filter?.filter_attribute_name] as {
128
- // value: string | string[];
129
- // operator: string;
130
- // };
121
+ const updateFiltersFromForm = useCallback(() => {
122
+ const updatedFilters = filters?.map((filter) => {
123
+ if (
124
+ filter?.filter_attribute_name &&
125
+ typeof formValues[filter?.filter_attribute_name] === "object"
126
+ ) {
127
+ const filterValue = formValues[filter?.filter_attribute_name] as {
128
+ value: string | string[];
129
+ operator: string;
130
+ };
131
131
 
132
- // return {
133
- // ...filter,
134
- // filter_value: filterValue.value,
135
- // filter_operator: filterValue.operator,
136
- // };
137
- // }
138
- // return filter;
139
- // });
132
+ return {
133
+ ...filter,
134
+ filter_value: filterValue.value,
135
+ filter_operator: filterValue.operator,
136
+ };
137
+ }
138
+ return filter;
139
+ });
140
140
 
141
- // setPagination((prev) => ({ ...prev, pageIndex: 0 }));
142
- // debouncedUpdateFilters(updatedFilters);
143
- // }, [formValues, filters, debouncedUpdateFilters]);
141
+ setPagination((prev) => ({ ...prev, pageIndex: 0 }));
142
+ debouncedUpdateFilters(updatedFilters);
143
+ }, [formValues, filters, debouncedUpdateFilters]);
144
144
 
145
- // useEffect(() => {
146
- // return () => {
147
- // reset();
148
- // filters?.forEach((filter) => {
149
- // if (filter?.filter_attribute_name) {
150
- // unregister(filter?.filter_attribute_name);
151
- // }
152
- // });
153
- // };
154
- // }, []);
145
+ useEffect(() => {
146
+ return () => {
147
+ reset();
148
+ filters?.forEach((filter) => {
149
+ if (filter?.filter_attribute_name) {
150
+ unregister(filter?.filter_attribute_name);
151
+ }
152
+ });
153
+ };
154
+ }, []);
155
155
 
156
- // const groupedFilters = useMemo(() => {
157
- // return filters?.reduce((acc, filter) => {
158
- // const key = filter?.filter_entity_name || "";
159
- // if (!acc[key]) {
160
- // acc[key] = [];
161
- // }
162
- // acc[key].push(filter);
163
- // return acc;
164
- // }, {} as Record<string, FilterStateProps[]>);
165
- // }, [filters]);
156
+ const groupedFilters = useMemo(() => {
157
+ return filters?.reduce((acc, filter) => {
158
+ const key = filter?.filter_entity_name || "";
159
+ if (!acc[key]) {
160
+ acc[key] = [];
161
+ }
162
+ acc[key].push(filter);
163
+ return acc;
164
+ }, {} as Record<string, FilterStateProps[]>);
165
+ }, [filters]);
166
166
 
167
- // const handleRemoveEntityType = (entityType: string) => {
168
- // const remainingFilters = filters?.filter(
169
- // (f) => f.filter_entity_name !== entityType
170
- // );
167
+ const handleRemoveEntityType = (entityType: string) => {
168
+ const remainingFilters = filters?.filter(
169
+ (f) => f.filter_entity_name !== entityType
170
+ );
171
171
 
172
- // // unregister all fields belonging to this entity type
173
- // filters?.forEach((f) => {
174
- // if (f?.filter_entity_name === entityType && f?.filter_attribute_name) {
175
- // unregister(`${f?.filter_attribute_name}.value`);
176
- // unregister(`${f?.filter_attribute_name}.operator`);
177
- // }
178
- // });
172
+ // unregister all fields belonging to this entity type
173
+ filters?.forEach((f) => {
174
+ if (f?.filter_entity_name === entityType && f?.filter_attribute_name) {
175
+ unregister(`${f?.filter_attribute_name}.value`);
176
+ unregister(`${f?.filter_attribute_name}.operator`);
177
+ }
178
+ });
179
179
 
180
- // setFilters(remainingFilters);
180
+ setFilters(remainingFilters);
181
181
 
182
- // const newState = {
183
- // filterMaster,
184
- // filters: remainingFilters,
185
- // };
182
+ const newState = {
183
+ filterMaster,
184
+ filters: remainingFilters,
185
+ };
186
186
 
187
- // onChangeFunction && onChangeFunction(newState);
188
- // };
187
+ onChangeFunction && onChangeFunction(newState);
188
+ };
189
189
 
190
- // return (
191
- // <form
192
- // onSubmit={(e) => {
193
- // e.preventDefault(); // This prevents the page from reloading
194
- // }}
195
- // >
196
- // <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
197
- // {editMode && (
198
- // <Box
199
- // sx={{
200
- // "& .MuiOutlinedInput-root": {
201
- // borderRadius: "6px",
202
- // fontSize: "14px",
203
- // bgcolor: "#fafafa",
204
- // "& fieldset": { borderColor: "#c1c1c1" },
205
- // "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
206
- // },
207
- // display: "flex",
208
- // alignItems: "center",
209
- // justifyContent: "center",
210
- // padding: "0.5rem 0 1rem 0",
211
- // gap: 1,
212
- // }}
213
- // >
214
- // <Controller
215
- // name="filterName"
216
- // control={control}
217
- // render={({ field }) => (
218
- // <TextField
219
- // fullWidth
220
- // size="small"
221
- // placeholder="Filter Name"
222
- // value={filterName || field.value}
223
- // onChange={(e) => {
224
- // field.onChange(e);
225
- // if (editMode) {
226
- // setFilterMaster(
227
- // (prev) =>
228
- // ({
229
- // ...prev,
230
- // saved_filters: {
231
- // ...prev?.saved_filters,
232
- // selectedName: e.target.value,
233
- // },
234
- // } as FilterMasterStateProps)
235
- // );
236
- // }
237
- // }}
238
- // inputRef={field.ref}
239
- // sx={{
240
- // maxWidth: 400,
190
+ return (
191
+ <form
192
+ onSubmit={(e) => {
193
+ e.preventDefault(); // This prevents the page from reloading
194
+ }}
195
+ >
196
+ <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
197
+ {editMode && (
198
+ <Box
199
+ sx={{
200
+ "& .MuiOutlinedInput-root": {
201
+ borderRadius: "6px",
202
+ fontSize: "14px",
203
+ bgcolor: "#fafafa",
204
+ "& fieldset": { borderColor: "#c1c1c1" },
205
+ "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
206
+ },
207
+ display: "flex",
208
+ alignItems: "center",
209
+ justifyContent: "center",
210
+ padding: "0.5rem 0 1rem 0",
211
+ gap: 1,
212
+ }}
213
+ >
214
+ <Controller
215
+ name="filterName"
216
+ control={control}
217
+ render={({ field }) => (
218
+ <TextField
219
+ fullWidth
220
+ size="small"
221
+ placeholder="Filter Name"
222
+ value={filterName || field.value}
223
+ onChange={(e) => {
224
+ field.onChange(e);
225
+ if (editMode) {
226
+ setFilterMaster(
227
+ (prev) =>
228
+ ({
229
+ ...prev,
230
+ saved_filters: {
231
+ ...prev?.saved_filters,
232
+ selectedName: e.target.value,
233
+ },
234
+ } as FilterMasterStateProps)
235
+ );
236
+ }
237
+ }}
238
+ inputRef={field.ref}
239
+ sx={{
240
+ maxWidth: 400,
241
241
 
242
- // "& .MuiOutlinedInput-root": {
243
- // bgcolor: "white",
244
- // borderRadius: "0px",
245
- // fontSize: "14px",
246
- // color: "#272524",
247
- // fontWeight: "500",
248
- // "& fieldset": { borderColor: "#c5c5c5" },
249
- // "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
250
- // },
251
- // }}
252
- // />
253
- // )}
254
- // />
255
- // <Box onClick={(e) => e.stopPropagation()}>
256
- // <IconButton
257
- // size="small"
258
- // onClick={() =>
259
- // setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
260
- // }
261
- // >
262
- // <DeleteIcon />
263
- // </IconButton>
264
- // </Box>
265
- // </Box>
266
- // )}
242
+ "& .MuiOutlinedInput-root": {
243
+ bgcolor: "white",
244
+ borderRadius: "0px",
245
+ fontSize: "14px",
246
+ color: "#272524",
247
+ fontWeight: "500",
248
+ "& fieldset": { borderColor: "#c5c5c5" },
249
+ "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
250
+ },
251
+ }}
252
+ />
253
+ )}
254
+ />
255
+ <Box onClick={(e) => e.stopPropagation()}>
256
+ <IconButton
257
+ size="small"
258
+ onClick={() =>
259
+ setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
260
+ }
261
+ >
262
+ <DeleteIcon />
263
+ </IconButton>
264
+ </Box>
265
+ </Box>
266
+ )}
267
267
 
268
- // <Box
269
- // className="filter-criteria-form"
270
- // sx={filterFormStyles.formFlexContainer}
271
- // >
272
- // <FilterCriteria
273
- // columnsData={columnsData}
274
- // tableStates={tableStates}
275
- // onChangeFunction={onChangeFunction}
276
- // filterComponentOptions={filterComponentOptions}
277
- // />
268
+ <Box
269
+ className="filter-criteria-form"
270
+ sx={filterFormStyles.formFlexContainer}
271
+ >
272
+ <FilterCriteria
273
+ columnsData={columnsData}
274
+ tableStates={tableStates}
275
+ onChangeFunction={onChangeFunction}
276
+ filterComponentOptions={filterComponentOptions}
277
+ />
278
278
 
279
- // {!editMode && (
280
- // <CustomSearch value={searchTerm} onChange={setSearchTerm} />
281
- // )}
279
+ {!editMode && (
280
+ <CustomSearch value={searchTerm} onChange={setSearchTerm} />
281
+ )}
282
282
 
283
- // <Box
284
- // className="filter-form-inputs"
285
- // sx={filterFormStyles.formFlexContainer}
286
- // >
287
- // {Object.entries(groupedFilters).map(([entityType, filters]) => (
288
- // <Box
289
- // key={entityType}
290
- // sx={{
291
- // border: "1px solid #c5c5c5",
292
- // borderRadius: 2,
293
- // overflow: "hidden",
294
- // }}
295
- // >
296
- // {/* Group Header */}
297
- // <Box
298
- // className="group-header"
299
- // sx={filterFormStyles.formListSectionHeader}
300
- // >
301
- // <Typography fontSize={14}>{entityType}</Typography>
302
- // <IconButton
303
- // size="small"
304
- // onClick={() => handleRemoveEntityType(entityType)}
305
- // >
306
- // <CloseIcon />
307
- // </IconButton>
308
- // </Box>
309
-
310
- // {filters
311
- // .filter(
312
- // (filter) =>
313
- // filter?.filter_attribute_name
314
- // ?.toLowerCase()
315
- // .includes(searchTerm.toLowerCase()) ||
316
- // filter.filter_value
317
- // ?.toString()
318
- // .toLowerCase()
319
- // .includes(searchTerm.toLowerCase())
320
- // )
321
- // .reverse()
322
- // .map((filter) => {
323
- // const dropdown_list = filter.dropdown_list || [];
324
- // return (
325
- // <Box
326
- // key={filter.filter_attribute}
327
- // sx={filterFormStyles.formListItem}
328
- // >
329
- // <Box sx={filterFormStyles.formListItemHeader}>
330
- // <Typography
331
- // sx={filterFormStyles.formListItemHeaderName}
332
- // >
333
- // {filter?.filter_attribute_name}
334
- // </Typography>
335
- // <FormDropdown
336
- // filter={filter}
337
- // control={control}
338
- // setValue={setValue}
339
- // dropdownList={dropdown_list}
340
- // sx={filterFormStyles.formListItemHeaderDropdown}
341
- // onValueChange={updateFiltersFromForm}
342
- // />
343
- // <IconButton
344
- // sx={{ marginLeft: "auto" }}
345
- // onClick={() => {
346
- // unregister(
347
- // `${filter?.filter_attribute_name}.value`
348
- // );
349
- // unregister(
350
- // `${filter?.filter_attribute_name}.operator`
351
- // );
283
+ <Box
284
+ className="filter-form-inputs"
285
+ sx={filterFormStyles.formFlexContainer}
286
+ >
287
+ {Object.entries(groupedFilters).map(([entityType, filters]) => (
288
+ <Box
289
+ key={entityType}
290
+ sx={{
291
+ border: "1px solid #c5c5c5",
292
+ borderRadius: 2,
293
+ overflow: "hidden",
294
+ }}
295
+ >
296
+ {/* Group Header */}
297
+ <Box
298
+ className="group-header"
299
+ sx={filterFormStyles.formListSectionHeader}
300
+ >
301
+ <Typography fontSize={14}>{entityType}</Typography>
302
+ <IconButton
303
+ size="small"
304
+ onClick={() => handleRemoveEntityType(entityType)}
305
+ >
306
+ <CloseIcon />
307
+ </IconButton>
308
+ </Box>
352
309
 
353
- // // ✅ Toggle dummy field to force form dirty
354
- // const dummy = watch("dummyChange");
355
- // setValue(
356
- // "dummyChange",
357
- // dummy === "changed" ? "reset" : "changed",
358
- // {
359
- // shouldDirty: true,
360
- // }
361
- // );
310
+ {filters
311
+ .filter(
312
+ (filter) =>
313
+ filter?.filter_attribute_name
314
+ ?.toLowerCase()
315
+ .includes(searchTerm.toLowerCase()) ||
316
+ filter.filter_value
317
+ ?.toString()
318
+ .toLowerCase()
319
+ .includes(searchTerm.toLowerCase())
320
+ )
321
+ .reverse()
322
+ .map((filter) => {
323
+ const dropdown_list = filter.dropdown_list || [];
324
+ return (
325
+ <Box
326
+ key={filter.filter_attribute}
327
+ sx={filterFormStyles.formListItem}
328
+ >
329
+ <Box sx={filterFormStyles.formListItemHeader}>
330
+ <Typography
331
+ sx={filterFormStyles.formListItemHeaderName}
332
+ >
333
+ {filter?.filter_attribute_name}
334
+ </Typography>
335
+ <FormDropdown
336
+ filter={filter}
337
+ control={control}
338
+ setValue={setValue}
339
+ dropdownList={dropdown_list}
340
+ sx={filterFormStyles.formListItemHeaderDropdown}
341
+ onValueChange={updateFiltersFromForm}
342
+ />
343
+ <IconButton
344
+ sx={{ marginLeft: "auto" }}
345
+ onClick={() => {
346
+ unregister(
347
+ `${filter?.filter_attribute_name}.value`
348
+ );
349
+ unregister(
350
+ `${filter?.filter_attribute_name}.operator`
351
+ );
362
352
 
363
- // handleRemoveFilter(filter.filter_attribute);
364
- // }}
365
- // size="small"
366
- // >
367
- // <CloseIcon />
368
- // </IconButton>
369
- // </Box>
353
+ // ✅ Toggle dummy field to force form dirty
354
+ const dummy = watch("dummyChange");
355
+ setValue(
356
+ "dummyChange",
357
+ dummy === "changed" ? "reset" : "changed",
358
+ {
359
+ shouldDirty: true,
360
+ }
361
+ );
370
362
 
371
- // <Box>
372
- // {(() => {
373
- // const fieldValue = formValues[
374
- // filter?.filter_attribute_name as keyof FormValues
375
- // ] as
376
- // | { value: string | string[]; operator: string }
377
- // | undefined;
378
-
379
- // const operator = fieldValue?.operator;
380
-
381
- // return resolveFilterInput({
382
- // filter,
383
- // operator,
384
- // control,
385
- // dropdownData,
386
- // updateFiltersFromForm,
387
- // });
388
- // })()}
389
- // </Box>
390
- // </Box>
391
- // );
392
- // })}
393
- // </Box>
394
- // ))}
395
- // </Box>
396
- // </Box>
397
- // </Box>
363
+ handleRemoveFilter(filter.filter_attribute);
364
+ }}
365
+ size="small"
366
+ >
367
+ <CloseIcon />
368
+ </IconButton>
369
+ </Box>
398
370
 
399
- // {filters?.length > 0 && (showClearAllButton || showSaveButton) && (
400
- // <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
401
- // {showClearAllButton && (
402
- // <Button
403
- // variant="outlined"
404
- // sx={{
405
- // color: "#7A5AF8",
406
- // border: `1px solid #7A5AF8`,
407
- // borderRadius: "6px",
408
- // textTransform: "none",
409
- // fontSize: "14px",
410
- // }}
411
- // fullWidth
412
- // onClick={() => {
413
- // setFilters([]);
371
+ <Box>
372
+ {(() => {
373
+ const fieldValue = formValues[
374
+ filter?.filter_attribute_name as keyof FormValues
375
+ ] as
376
+ | { value: string | string[]; operator: string }
377
+ | undefined;
414
378
 
415
- // const filterMaster = {
416
- // ...tableStates.filterMaster,
417
- // activeFilterTabIndex: -1,
418
- // };
379
+ const operator = fieldValue?.operator;
419
380
 
420
- // const newState = {
421
- // filterMaster: filterMaster,
422
- // filters: [],
423
- // };
381
+ return resolveFilterInput({
382
+ filter,
383
+ operator,
384
+ control,
385
+ dropdownData,
386
+ updateFiltersFromForm,
387
+ });
388
+ })()}
389
+ </Box>
390
+ </Box>
391
+ );
392
+ })}
393
+ </Box>
394
+ ))}
395
+ </Box>
396
+ </Box>
397
+ </Box>
424
398
 
425
- // onChangeFunction && onChangeFunction(newState);
426
- // }}
427
- // >
428
- // Clear All
429
- // </Button>
430
- // )}
399
+ {filters?.length > 0 && (showClearAllButton || showSaveButton) && (
400
+ <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
401
+ {showClearAllButton && (
402
+ <Button
403
+ variant="outlined"
404
+ sx={{
405
+ color: "#7A5AF8",
406
+ border: `1px solid #7A5AF8`,
407
+ borderRadius: "6px",
408
+ textTransform: "none",
409
+ fontSize: "14px",
410
+ }}
411
+ fullWidth
412
+ onClick={() => {
413
+ setFilters([]);
431
414
 
432
- // {showSaveButton && (
433
- // <Button
434
- // variant="contained"
435
- // fullWidth
436
- // sx={{
437
- // color: "white",
438
- // backgroundColor: "#7A5AF8",
439
- // "&.Mui-disabled": {
440
- // backgroundColor: "#d7cefd",
441
- // color: "rgba(255, 255, 255, 0.7)",
442
- // },
443
- // }}
444
- // onClick={() => {
445
- // setSavedFilterModalOpen && setSavedFilterModalOpen(true);
446
- // }}
447
- // >
448
- // Save Filter
449
- // </Button>
450
- // )}
415
+ const filterMaster = {
416
+ ...tableStates.filterMaster,
417
+ activeFilterTabIndex: -1,
418
+ };
451
419
 
452
- // {/* Custom buttons from props */}
453
- // {customButtons?.map((btn, idx) => (
454
- // <Button
455
- // key={idx}
456
- // fullWidth
457
- // variant={btn?.variant ?? "outlined"}
458
- // sx={btn?.sx}
459
- // {...btn}
460
- // >
461
- // {btn?.label}
462
- // </Button>
463
- // ))}
464
- // </Box>
465
- // )}
466
- // </form>
467
- // );
468
- // };
420
+ const newState = {
421
+ filterMaster: filterMaster,
422
+ filters: [],
423
+ };
469
424
 
470
- // export default FilterForm;
425
+ onChangeFunction && onChangeFunction(newState);
426
+ }}
427
+ >
428
+ Clear All
429
+ </Button>
430
+ )}
471
431
 
472
- // !! PLEASE DO NOT DELETE THIS COMMENT BLOCK !!
473
- import {
474
- Box,
475
- Button,
476
- FormControl,
477
- IconButton,
478
- TextField,
479
- Typography,
480
- } from "@mui/material";
481
- import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
482
- import {
483
- FilterColumnsDataProps,
484
- FilterComponentOptions,
485
- FilterDropdownDataProps,
486
- FilterMasterStateProps,
487
- FilterStateProps,
488
- } from "../../../../types/filter";
489
- import { Controller, useForm } from "react-hook-form";
490
- import FormTextfield from "./components/Textfield";
491
- import React, { useEffect, useMemo, useCallback } from "react";
492
- import FormDatePicker from "./components/Date";
493
- import FormDropdown from "./components/Dropdown";
494
- import FormMultiSelect from "./components/Multi-Select";
495
- import { CraftTableOptionsProps } from "../../../../types/table-options";
496
- import FilterCriteria from "./components/Filter-criteria";
497
- import CustomSearch from "../search";
498
- import { customDebounce } from "../../../../libs/utils/debounce";
499
- import { filterFormStyles } from "../../style";
500
- import { onFilterChangeFunctionProps } from "../../../../types/common";
432
+ {showSaveButton && (
433
+ <Button
434
+ variant="contained"
435
+ fullWidth
436
+ sx={{
437
+ color: "white",
438
+ backgroundColor: "#7A5AF8",
439
+ "&.Mui-disabled": {
440
+ backgroundColor: "#d7cefd",
441
+ color: "rgba(255, 255, 255, 0.7)",
442
+ },
443
+ }}
444
+ onClick={() => {
445
+ onSaveFilterButtonClick && onSaveFilterButtonClick();
446
+ }}
447
+ >
448
+ Save Filter
449
+ </Button>
450
+ )}
501
451
 
502
- interface FormValues {
503
- filterName: string;
504
- [key: string]:
505
- | {
506
- value: string | string[];
507
- operator: string;
508
- }
509
- | string;
510
- }
452
+ {/* Custom buttons from props */}
453
+ {customButtons?.map((btn, idx) => (
454
+ <Button
455
+ key={idx}
456
+ fullWidth
457
+ variant={btn?.variant ?? "outlined"}
458
+ sx={btn?.sx}
459
+ {...btn}
460
+ >
461
+ {btn?.label}
462
+ </Button>
463
+ ))}
464
+ </Box>
465
+ )}
466
+ </form>
467
+ );
468
+ };
511
469
 
512
- const FilterForm = ({
513
- columnsData,
514
- dropdownData,
515
- searchTerm = "",
516
- setSearchTerm,
517
- handleRemoveFilter,
518
- editMode = false,
519
- tableStates,
520
- setSavedFilterModalOpen,
521
- setDeleteFilterModalOpen,
522
- onChangeFunction,
523
- filterComponentOptions,
524
- }: {
525
- columnsData: FilterColumnsDataProps;
526
- dropdownData: FilterDropdownDataProps;
527
- searchTerm?: string;
528
- setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
529
- handleRemoveFilter: (filter_attribute: string) => void;
530
- editMode?: boolean;
531
- tableStates: CraftTableOptionsProps;
532
- setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
533
- setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
534
- onChangeFunction: ({
535
- updatedFilters,
536
- filterMaster,
537
- }: onFilterChangeFunctionProps) => void;
538
- filterComponentOptions?: FilterComponentOptions;
539
- }) => {
540
- const { filterMaster, filters, setFilters, setFilterMaster, setPagination } =
541
- tableStates;
470
+ export default FilterForm;
542
471
 
543
- const showSaveButton =
544
- filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
545
- const showClearAllButton =
546
- filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
547
- const customButtons =
548
- filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
472
+ // !! PLEASE DO NOT DELETE THIS COMMENT BLOCK !!
473
+ // import {
474
+ // Box,
475
+ // Button,
476
+ // FormControl,
477
+ // IconButton,
478
+ // TextField,
479
+ // Typography,
480
+ // } from "@mui/material";
481
+ // import { CloseIcon, DeleteIcon } from "../../../../../assets/svg";
482
+ // import {
483
+ // FilterColumnsDataProps,
484
+ // FilterComponentOptions,
485
+ // FilterDropdownDataProps,
486
+ // FilterMasterStateProps,
487
+ // FilterStateProps,
488
+ // } from "../../../../types/filter";
489
+ // import { Controller, useForm } from "react-hook-form";
490
+ // import FormTextfield from "./components/Textfield";
491
+ // import React, { useEffect, useMemo, useCallback } from "react";
492
+ // import FormDatePicker from "./components/Date";
493
+ // import FormDropdown from "./components/Dropdown";
494
+ // import FormMultiSelect from "./components/Multi-Select";
495
+ // import { CraftTableOptionsProps } from "../../../../types/table-options";
496
+ // import FilterCriteria from "./components/Filter-criteria";
497
+ // import CustomSearch from "../search";
498
+ // import { customDebounce } from "../../../../libs/utils/debounce";
499
+ // import { filterFormStyles } from "../../style";
500
+ // import { onFilterChangeFunctionProps } from "../../../../types/common";
549
501
 
550
- const filterName = filterMaster?.saved_filters?.selectedName || "";
502
+ // interface FormValues {
503
+ // filterName: string;
504
+ // [key: string]:
505
+ // | {
506
+ // value: string | string[];
507
+ // operator: string;
508
+ // }
509
+ // | string;
510
+ // }
551
511
 
552
- const defaultValues = useMemo(() => {
553
- const filterValues = filters?.reduce((acc, curr) => {
554
- if (curr?.filter_attribute_name) {
555
- acc[curr?.filter_attribute_name] = {
556
- value: curr?.filter_value ?? "",
557
- operator:
558
- curr?.filter_operator ?? curr?.dropdown_list?.[0]?.value ?? "",
559
- };
560
- }
561
- return acc;
562
- }, {} as Record<string, { value: string | string[]; operator: string }>);
512
+ // const FilterForm = ({
513
+ // columnsData,
514
+ // dropdownData,
515
+ // searchTerm = "",
516
+ // setSearchTerm,
517
+ // handleRemoveFilter,
518
+ // editMode = false,
519
+ // tableStates,
520
+ // setSavedFilterModalOpen,
521
+ // setDeleteFilterModalOpen,
522
+ // onChangeFunction,
523
+ // filterComponentOptions,
524
+ // }: {
525
+ // columnsData: FilterColumnsDataProps;
526
+ // dropdownData: FilterDropdownDataProps;
527
+ // searchTerm?: string;
528
+ // setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
529
+ // handleRemoveFilter: (filter_attribute: string) => void;
530
+ // editMode?: boolean;
531
+ // tableStates: CraftTableOptionsProps;
532
+ // setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
533
+ // setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
534
+ // onChangeFunction: ({
535
+ // updatedFilters,
536
+ // filterMaster,
537
+ // }: onFilterChangeFunctionProps) => void;
538
+ // filterComponentOptions?: FilterComponentOptions;
539
+ // }) => {
540
+ // const { filterMaster, filters, setFilters, setFilterMaster, setPagination } =
541
+ // tableStates;
563
542
 
564
- return {
565
- filterName: filterName ?? "",
566
- dummyChange: "",
567
- ...filterValues,
568
- };
569
- }, [filters, filterName]);
543
+ // const showSaveButton =
544
+ // filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
545
+ // const showClearAllButton =
546
+ // filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
547
+ // const customButtons =
548
+ // filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
570
549
 
571
- const { control, watch, reset, setValue, unregister } = useForm<
572
- FormValues & { dummyChange: string }
573
- >({
574
- mode: "onChange",
575
- defaultValues,
576
- resetOptions: {
577
- keepDirtyValues: false,
578
- keepErrors: false,
579
- },
580
- });
550
+ // const filterName = filterMaster?.saved_filters?.selectedName || "";
581
551
 
582
- const formValues = watch();
552
+ // const defaultValues = useMemo(() => {
553
+ // const filterValues = filters?.reduce((acc, curr) => {
554
+ // if (curr?.filter_attribute_name) {
555
+ // acc[curr?.filter_attribute_name] = {
556
+ // value: curr?.filter_value ?? "",
557
+ // operator:
558
+ // curr?.filter_operator ?? curr?.dropdown_list?.[0]?.value ?? "",
559
+ // };
560
+ // }
561
+ // return acc;
562
+ // }, {} as Record<string, { value: string | string[]; operator: string }>);
583
563
 
584
- useEffect(() => {
585
- reset(defaultValues);
586
- }, [filters]);
564
+ // return {
565
+ // filterName: filterName ?? "",
566
+ // dummyChange: "",
567
+ // ...filterValues,
568
+ // };
569
+ // }, [filters, filterName]);
587
570
 
588
- const debouncedUpdateFilters = useCallback(
589
- customDebounce((updatedFilters: FilterStateProps[]) => {
590
- setFilters(updatedFilters);
571
+ // const { control, watch, reset, setValue, unregister } = useForm<
572
+ // FormValues & { dummyChange: string }
573
+ // >({
574
+ // mode: "onChange",
575
+ // defaultValues,
576
+ // resetOptions: {
577
+ // keepDirtyValues: false,
578
+ // keepErrors: false,
579
+ // },
580
+ // });
591
581
 
592
- const newState = {
593
- filterMaster: filterMaster,
594
- filters: updatedFilters,
595
- };
582
+ // const formValues = watch();
596
583
 
597
- onChangeFunction && onChangeFunction(newState);
598
- }, 1000),
599
- [setFilters]
600
- );
584
+ // useEffect(() => {
585
+ // reset(defaultValues);
586
+ // }, [filters]);
601
587
 
602
- const updateFiltersFromForm = useCallback(() => {
603
- const updatedFilters = filters?.map((filter) => {
604
- if (
605
- filter?.filter_attribute_name &&
606
- typeof formValues[filter?.filter_attribute_name] === "object"
607
- ) {
608
- const filterValue = formValues[filter?.filter_attribute_name] as {
609
- value: string | string[];
610
- operator: string;
611
- };
588
+ // const debouncedUpdateFilters = useCallback(
589
+ // customDebounce((updatedFilters: FilterStateProps[]) => {
590
+ // setFilters(updatedFilters);
612
591
 
613
- return {
614
- ...filter,
615
- filter_value: filterValue.value,
616
- filter_operator: filterValue.operator,
617
- };
618
- }
619
- return filter;
620
- });
592
+ // const newState = {
593
+ // filterMaster: filterMaster,
594
+ // filters: updatedFilters,
595
+ // };
621
596
 
622
- setPagination((prev) => ({ ...prev, pageIndex: 0 }));
623
- debouncedUpdateFilters(updatedFilters);
624
- }, [formValues, filters, debouncedUpdateFilters]);
597
+ // onChangeFunction && onChangeFunction(newState);
598
+ // }, 1000),
599
+ // [setFilters]
600
+ // );
625
601
 
626
- useEffect(() => {
627
- return () => {
628
- reset();
629
- filters?.forEach((filter) => {
630
- if (filter?.filter_attribute_name) {
631
- unregister(filter?.filter_attribute_name);
632
- }
633
- });
634
- };
635
- }, []);
602
+ // const updateFiltersFromForm = useCallback(() => {
603
+ // const updatedFilters = filters?.map((filter) => {
604
+ // if (
605
+ // filter?.filter_attribute_name &&
606
+ // typeof formValues[filter?.filter_attribute_name] === "object"
607
+ // ) {
608
+ // const filterValue = formValues[filter?.filter_attribute_name] as {
609
+ // value: string | string[];
610
+ // operator: string;
611
+ // };
636
612
 
637
- const groupedFilters = useMemo(() => {
638
- return filters?.reduce((acc, filter) => {
639
- const key = filter?.filter_entity_name || "";
640
- if (!acc[key]) {
641
- acc[key] = [];
642
- }
643
- acc[key].push(filter);
644
- return acc;
645
- }, {} as Record<string, FilterStateProps[]>);
646
- }, [filters]);
613
+ // return {
614
+ // ...filter,
615
+ // filter_value: filterValue.value,
616
+ // filter_operator: filterValue.operator,
617
+ // };
618
+ // }
619
+ // return filter;
620
+ // });
647
621
 
648
- const handleRemoveEntityType = (entityType: string) => {
649
- const remainingFilters = filters?.filter(
650
- (f) => f.filter_entity_name !== entityType
651
- );
622
+ // setPagination((prev) => ({ ...prev, pageIndex: 0 }));
623
+ // debouncedUpdateFilters(updatedFilters);
624
+ // }, [formValues, filters, debouncedUpdateFilters]);
652
625
 
653
- // unregister all fields belonging to this entity type
654
- filters?.forEach((f) => {
655
- if (f?.filter_entity_name === entityType && f?.filter_attribute_name) {
656
- unregister(`${f?.filter_attribute_name}.value`);
657
- unregister(`${f?.filter_attribute_name}.operator`);
658
- }
659
- });
626
+ // useEffect(() => {
627
+ // return () => {
628
+ // reset();
629
+ // filters?.forEach((filter) => {
630
+ // if (filter?.filter_attribute_name) {
631
+ // unregister(filter?.filter_attribute_name);
632
+ // }
633
+ // });
634
+ // };
635
+ // }, []);
660
636
 
661
- setFilters(remainingFilters);
637
+ // const groupedFilters = useMemo(() => {
638
+ // return filters?.reduce((acc, filter) => {
639
+ // const key = filter?.filter_entity_name || "";
640
+ // if (!acc[key]) {
641
+ // acc[key] = [];
642
+ // }
643
+ // acc[key].push(filter);
644
+ // return acc;
645
+ // }, {} as Record<string, FilterStateProps[]>);
646
+ // }, [filters]);
662
647
 
663
- const newState = {
664
- filterMaster,
665
- filters: remainingFilters,
666
- };
648
+ // const handleRemoveEntityType = (entityType: string) => {
649
+ // const remainingFilters = filters?.filter(
650
+ // (f) => f.filter_entity_name !== entityType
651
+ // );
667
652
 
668
- onChangeFunction && onChangeFunction(newState);
669
- };
653
+ // // unregister all fields belonging to this entity type
654
+ // filters?.forEach((f) => {
655
+ // if (f?.filter_entity_name === entityType && f?.filter_attribute_name) {
656
+ // unregister(`${f?.filter_attribute_name}.value`);
657
+ // unregister(`${f?.filter_attribute_name}.operator`);
658
+ // }
659
+ // });
670
660
 
671
- return (
672
- <form
673
- onSubmit={(e) => {
674
- e.preventDefault(); // This prevents the page from reloading
675
- }}
676
- >
677
- <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
678
- {editMode && (
679
- <Box
680
- sx={{
681
- "& .MuiOutlinedInput-root": {
682
- borderRadius: "6px",
683
- fontSize: "14px",
684
- bgcolor: "#fafafa",
685
- "& fieldset": { borderColor: "#c1c1c1" },
686
- "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
687
- },
688
- display: "flex",
689
- alignItems: "center",
690
- justifyContent: "center",
691
- padding: "0.5rem 0 1rem 0",
692
- gap: 1,
693
- }}
694
- >
695
- <Controller
696
- name="filterName"
697
- control={control}
698
- render={({ field }) => (
699
- <TextField
700
- fullWidth
701
- size="small"
702
- placeholder="Filter Name"
703
- value={filterName || field.value}
704
- onChange={(e) => {
705
- field.onChange(e);
706
- if (editMode) {
707
- setFilterMaster(
708
- (prev) =>
709
- ({
710
- ...prev,
711
- saved_filters: {
712
- ...prev?.saved_filters,
713
- selectedName: e.target.value,
714
- },
715
- } as FilterMasterStateProps)
716
- );
717
- }
718
- }}
719
- inputRef={field.ref}
720
- sx={{
721
- maxWidth: 400,
661
+ // setFilters(remainingFilters);
722
662
 
723
- "& .MuiOutlinedInput-root": {
724
- bgcolor: "white",
725
- borderRadius: "0px",
726
- fontSize: "14px",
727
- color: "#272524",
728
- fontWeight: "500",
729
- "& fieldset": { borderColor: "#c5c5c5" },
730
- "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
731
- },
732
- }}
733
- />
734
- )}
735
- />
736
- <Box onClick={(e) => e.stopPropagation()}>
737
- <IconButton
738
- size="small"
739
- onClick={() =>
740
- setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
741
- }
742
- >
743
- <DeleteIcon />
744
- </IconButton>
745
- </Box>
746
- </Box>
747
- )}
663
+ // const newState = {
664
+ // filterMaster,
665
+ // filters: remainingFilters,
666
+ // };
748
667
 
749
- <Box
750
- className="filter-criteria-form"
751
- sx={filterFormStyles.formFlexContainer}
752
- >
753
- <FilterCriteria
754
- columnsData={columnsData}
755
- tableStates={tableStates}
756
- onChangeFunction={onChangeFunction}
757
- filterComponentOptions={filterComponentOptions}
758
- />
668
+ // onChangeFunction && onChangeFunction(newState);
669
+ // };
759
670
 
760
- {!editMode && (
761
- <CustomSearch value={searchTerm} onChange={setSearchTerm} />
762
- )}
671
+ // return (
672
+ // <form
673
+ // onSubmit={(e) => {
674
+ // e.preventDefault(); // This prevents the page from reloading
675
+ // }}
676
+ // >
677
+ // <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
678
+ // {editMode && (
679
+ // <Box
680
+ // sx={{
681
+ // "& .MuiOutlinedInput-root": {
682
+ // borderRadius: "6px",
683
+ // fontSize: "14px",
684
+ // bgcolor: "#fafafa",
685
+ // "& fieldset": { borderColor: "#c1c1c1" },
686
+ // "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
687
+ // },
688
+ // display: "flex",
689
+ // alignItems: "center",
690
+ // justifyContent: "center",
691
+ // padding: "0.5rem 0 1rem 0",
692
+ // gap: 1,
693
+ // }}
694
+ // >
695
+ // <Controller
696
+ // name="filterName"
697
+ // control={control}
698
+ // render={({ field }) => (
699
+ // <TextField
700
+ // fullWidth
701
+ // size="small"
702
+ // placeholder="Filter Name"
703
+ // value={filterName || field.value}
704
+ // onChange={(e) => {
705
+ // field.onChange(e);
706
+ // if (editMode) {
707
+ // setFilterMaster(
708
+ // (prev) =>
709
+ // ({
710
+ // ...prev,
711
+ // saved_filters: {
712
+ // ...prev?.saved_filters,
713
+ // selectedName: e.target.value,
714
+ // },
715
+ // } as FilterMasterStateProps)
716
+ // );
717
+ // }
718
+ // }}
719
+ // inputRef={field.ref}
720
+ // sx={{
721
+ // maxWidth: 400,
763
722
 
764
- <Box
765
- className="filter-form-inputs"
766
- sx={filterFormStyles.formFlexContainer}
767
- >
768
- {Object.entries(groupedFilters).map(([entityType, filters]) => (
769
- <Box
770
- key={entityType}
771
- sx={{
772
- border: "1px solid #c5c5c5",
773
- borderRadius: 2,
774
- overflow: "hidden",
775
- }}
776
- >
777
- {/* Group Header */}
778
- <Box
779
- className="group-header"
780
- sx={filterFormStyles.formListSectionHeader}
781
- >
782
- <Typography fontSize={14}>{entityType}</Typography>
783
- <IconButton
784
- size="small"
785
- onClick={() => handleRemoveEntityType(entityType)}
786
- >
787
- <CloseIcon />
788
- </IconButton>
789
- </Box>
723
+ // "& .MuiOutlinedInput-root": {
724
+ // bgcolor: "white",
725
+ // borderRadius: "0px",
726
+ // fontSize: "14px",
727
+ // color: "#272524",
728
+ // fontWeight: "500",
729
+ // "& fieldset": { borderColor: "#c5c5c5" },
730
+ // "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
731
+ // },
732
+ // }}
733
+ // />
734
+ // )}
735
+ // />
736
+ // <Box onClick={(e) => e.stopPropagation()}>
737
+ // <IconButton
738
+ // size="small"
739
+ // onClick={() =>
740
+ // setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
741
+ // }
742
+ // >
743
+ // <DeleteIcon />
744
+ // </IconButton>
745
+ // </Box>
746
+ // </Box>
747
+ // )}
790
748
 
791
- {filters
792
- .filter(
793
- (filter) =>
794
- filter?.filter_attribute_name
795
- ?.toLowerCase()
796
- .includes(searchTerm.toLowerCase()) ||
797
- filter.filter_value
798
- ?.toString()
799
- .toLowerCase()
800
- .includes(searchTerm.toLowerCase())
801
- )
802
- .reverse()
803
- .map((filter) => {
804
- const dropdown_list = filter.dropdown_list || [];
805
- return (
806
- <Box
807
- key={filter.filter_attribute}
808
- sx={filterFormStyles.formListItem}
809
- >
810
- <Box sx={filterFormStyles.formListItemHeader}>
811
- <Typography
812
- sx={filterFormStyles.formListItemHeaderName}
813
- >
814
- {filter?.filter_attribute_name}
815
- </Typography>
816
- <FormDropdown
817
- filter={filter}
818
- control={control}
819
- setValue={setValue}
820
- dropdownList={dropdown_list}
821
- sx={filterFormStyles.formListItemHeaderDropdown}
822
- onValueChange={updateFiltersFromForm}
823
- />
824
- <IconButton
825
- sx={{ marginLeft: "auto" }}
826
- onClick={() => {
827
- unregister(
828
- `${filter?.filter_attribute_name}.value`
829
- );
830
- unregister(
831
- `${filter?.filter_attribute_name}.operator`
832
- );
749
+ // <Box
750
+ // className="filter-criteria-form"
751
+ // sx={filterFormStyles.formFlexContainer}
752
+ // >
753
+ // <FilterCriteria
754
+ // columnsData={columnsData}
755
+ // tableStates={tableStates}
756
+ // onChangeFunction={onChangeFunction}
757
+ // filterComponentOptions={filterComponentOptions}
758
+ // />
833
759
 
834
- // ✅ Toggle dummy field to force form dirty
835
- const dummy = watch("dummyChange");
836
- setValue(
837
- "dummyChange",
838
- dummy === "changed" ? "reset" : "changed",
839
- {
840
- shouldDirty: true,
841
- }
842
- );
760
+ // {!editMode && (
761
+ // <CustomSearch value={searchTerm} onChange={setSearchTerm} />
762
+ // )}
843
763
 
844
- handleRemoveFilter(filter.filter_attribute);
845
- }}
846
- size="small"
847
- >
848
- <CloseIcon />
849
- </IconButton>
850
- </Box>
764
+ // <Box
765
+ // className="filter-form-inputs"
766
+ // sx={filterFormStyles.formFlexContainer}
767
+ // >
768
+ // {Object.entries(groupedFilters).map(([entityType, filters]) => (
769
+ // <Box
770
+ // key={entityType}
771
+ // sx={{
772
+ // border: "1px solid #c5c5c5",
773
+ // borderRadius: 2,
774
+ // overflow: "hidden",
775
+ // }}
776
+ // >
777
+ // {/* Group Header */}
778
+ // <Box
779
+ // className="group-header"
780
+ // sx={filterFormStyles.formListSectionHeader}
781
+ // >
782
+ // <Typography fontSize={14}>{entityType}</Typography>
783
+ // <IconButton
784
+ // size="small"
785
+ // onClick={() => handleRemoveEntityType(entityType)}
786
+ // >
787
+ // <CloseIcon />
788
+ // </IconButton>
789
+ // </Box>
851
790
 
852
- <Box>
853
- {(() => {
854
- const fieldValue = formValues[
855
- filter?.filter_attribute_name as string
856
- ] as
857
- | { value: string | string[]; operator: string }
858
- | undefined;
791
+ // {filters
792
+ // .filter(
793
+ // (filter) =>
794
+ // filter?.filter_attribute_name
795
+ // ?.toLowerCase()
796
+ // .includes(searchTerm.toLowerCase()) ||
797
+ // filter.filter_value
798
+ // ?.toString()
799
+ // .toLowerCase()
800
+ // .includes(searchTerm.toLowerCase())
801
+ // )
802
+ // .reverse()
803
+ // .map((filter) => {
804
+ // const dropdown_list = filter.dropdown_list || [];
805
+ // return (
806
+ // <Box
807
+ // key={filter.filter_attribute}
808
+ // sx={filterFormStyles.formListItem}
809
+ // >
810
+ // <Box sx={filterFormStyles.formListItemHeader}>
811
+ // <Typography
812
+ // sx={filterFormStyles.formListItemHeaderName}
813
+ // >
814
+ // {filter?.filter_attribute_name}
815
+ // </Typography>
816
+ // <FormDropdown
817
+ // filter={filter}
818
+ // control={control}
819
+ // setValue={setValue}
820
+ // dropdownList={dropdown_list}
821
+ // sx={filterFormStyles.formListItemHeaderDropdown}
822
+ // onValueChange={updateFiltersFromForm}
823
+ // />
824
+ // <IconButton
825
+ // sx={{ marginLeft: "auto" }}
826
+ // onClick={() => {
827
+ // unregister(
828
+ // `${filter?.filter_attribute_name}.value`
829
+ // );
830
+ // unregister(
831
+ // `${filter?.filter_attribute_name}.operator`
832
+ // );
859
833
 
860
- console.log("fieldValue:", fieldValue);
834
+ // // ✅ Toggle dummy field to force form dirty
835
+ // const dummy = watch("dummyChange");
836
+ // setValue(
837
+ // "dummyChange",
838
+ // dummy === "changed" ? "reset" : "changed",
839
+ // {
840
+ // shouldDirty: true,
841
+ // }
842
+ // );
861
843
 
862
- const operator = fieldValue?.operator;
863
- console.log("Operator", operator);
864
-
865
- // Operators that should show a Date Picker
866
- const dateAllowedOperators = [
867
- "equal",
868
- "before",
869
- "after",
870
- "between",
871
- "is",
872
- "today",
873
- "is_before",
874
- "is_after",
875
- "is_on_or_before",
876
- "is_on_or_after",
877
- "empty",
878
- "not_empty",
879
- ];
880
-
881
- const showDatePicker =
882
- filter?.filter_attribute_data_type === "date" &&
883
- operator &&
884
- dateAllowedOperators.includes(operator);
885
-
886
- // Should textfield shown instead for date?
887
- // const showTextInsteadOfDate =
888
- // !operator ||
889
- // !dateAllowedOperators.includes(operator);
890
-
891
- // Now render exactly same logic except date override
892
- if (
893
- filter?.filter_attribute_data_type === "text" ||
894
- filter?.filter_attribute_data_type === "number"
895
- ) {
896
- return (
897
- <FormTextfield
898
- filter={filter}
899
- control={control}
900
- onValueChange={updateFiltersFromForm}
901
- />
902
- );
903
- }
904
-
905
- if (filter?.filter_attribute_data_type === "year") {
906
- return (
907
- <FormDatePicker
908
- filter={filter}
909
- control={control}
910
- views={["year"]}
911
- onValueChange={updateFiltersFromForm}
912
- />
913
- );
914
- }
915
-
916
- // DATE LOGIC
917
- if (showDatePicker) {
918
- console.log("Inside Date", showDatePicker);
919
- return (
920
- <FormDatePicker
921
- filter={filter}
922
- control={control}
923
- onValueChange={updateFiltersFromForm}
924
- />
925
- );
926
- } else {
927
- return (
928
- <FormTextfield
929
- filter={filter}
930
- control={control}
931
- onValueChange={updateFiltersFromForm}
932
- />
933
- );
934
- }
935
-
936
- // if (showTextInsteadOfDate) {
937
- // console.log(
938
- // "Inside Show text",
939
- // showTextInsteadOfDate
940
- // );
941
-
942
- // return (
943
- // <FormTextfield
944
- // filter={filter}
945
- // control={control}
946
- // onValueChange={updateFiltersFromForm}
947
- // />
948
- // );
949
- // }
950
-
951
- if (
952
- filter?.filter_attribute_data_type === "select"
953
- ) {
954
- return (
955
- <FormMultiSelect
956
- filter={filter}
957
- control={control}
958
- dropdownData={dropdownData}
959
- onValueChange={updateFiltersFromForm}
960
- />
961
- );
962
- }
963
-
964
- if (
965
- filter?.filter_attribute_data_type ===
966
- "multiselect"
967
- ) {
968
- return (
969
- <FormMultiSelect
970
- filter={filter}
971
- control={control}
972
- dropdownData={dropdownData}
973
- onValueChange={updateFiltersFromForm}
974
- />
975
- );
976
- }
977
-
978
- // if (
979
- // filter?.filter_attribute_data_type === "radio"
980
- // ) {
981
- // return (
982
- // <FormMultiSelect
983
- // filter={filter}
984
- // control={control}
985
- // dropdownData={dropdownData}
986
- // onValueChange={updateFiltersFromForm}
987
- // />
988
- // );
989
- // }
990
-
991
- // if (
992
- // filter?.filter_attribute_data_type === "checkbox"
993
- // ) {
994
- // return (
995
- // <FormMultiSelect
996
- // filter={filter}
997
- // control={control}
998
- // dropdownData={dropdownData}
999
- // onValueChange={updateFiltersFromForm}
1000
- // />
1001
- // );
1002
- // }
1003
-
1004
- return <FormControl fullWidth size="small" />;
1005
- })()}
1006
- </Box>
844
+ // handleRemoveFilter(filter.filter_attribute);
845
+ // }}
846
+ // size="small"
847
+ // >
848
+ // <CloseIcon />
849
+ // </IconButton>
850
+ // </Box>
1007
851
 
1008
- {/* <Box>
1009
- {filter?.filter_attribute_data_type === "text" ||
1010
- filter?.filter_attribute_data_type === "number" ? (
1011
- <FormTextfield
1012
- filter={filter}
1013
- control={control}
1014
- onValueChange={updateFiltersFromForm}
1015
- />
1016
- ) : filter?.filter_attribute_data_type === "year" ? (
1017
- <FormDatePicker
1018
- filter={filter}
1019
- control={control}
1020
- views={["year"]}
1021
- onValueChange={updateFiltersFromForm}
1022
- />
1023
- ) : filter?.filter_attribute_data_type === "date" ? (
1024
- <FormDatePicker
1025
- filter={filter}
1026
- control={control}
1027
- onValueChange={updateFiltersFromForm}
1028
- />
1029
- ) : filter?.filter_attribute_data_type ===
1030
- "select" ? (
1031
- <FormMultiSelect
1032
- filter={filter}
1033
- control={control}
1034
- dropdownData={dropdownData}
1035
- onValueChange={updateFiltersFromForm}
1036
- />
1037
- ) : filter?.filter_attribute_data_type ===
1038
- "multiselect" ? (
1039
- <FormMultiSelect
1040
- filter={filter}
1041
- control={control}
1042
- dropdownData={dropdownData}
1043
- onValueChange={updateFiltersFromForm}
1044
- />
1045
- ) : filter?.filter_attribute_data_type === "radio" ? (
1046
- <FormMultiSelect
1047
- filter={filter}
1048
- control={control}
1049
- dropdownData={dropdownData}
1050
- onValueChange={updateFiltersFromForm}
1051
- />
1052
- ) : filter?.filter_attribute_data_type ===
1053
- "checkbox" ? (
1054
- <FormMultiSelect
1055
- filter={filter}
1056
- control={control}
1057
- dropdownData={dropdownData}
1058
- onValueChange={updateFiltersFromForm}
1059
- />
1060
- ) : (
1061
- <FormControl fullWidth size="small" />
1062
- )}
1063
- </Box> */}
1064
- </Box>
1065
- );
1066
- })}
1067
- </Box>
1068
- ))}
1069
- </Box>
1070
- </Box>
1071
- </Box>
852
+ // <Box>
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
+ // )}
907
+ // </Box>
908
+ // </Box>
909
+ // );
910
+ // })}
911
+ // </Box>
912
+ // ))}
913
+ // </Box>
914
+ // </Box>
915
+ // </Box>
1072
916
 
1073
- {filters?.length > 0 && (showClearAllButton || showSaveButton) && (
1074
- <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
1075
- {showClearAllButton && (
1076
- <Button
1077
- variant="outlined"
1078
- sx={{
1079
- color: "#7A5AF8",
1080
- border: `1px solid #7A5AF8`,
1081
- borderRadius: "6px",
1082
- textTransform: "none",
1083
- fontSize: "14px",
1084
- }}
1085
- fullWidth
1086
- onClick={() => {
1087
- setFilters([]);
917
+ // {filters?.length > 0 && (showClearAllButton || showSaveButton) && (
918
+ // <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
919
+ // {showClearAllButton && (
920
+ // <Button
921
+ // variant="outlined"
922
+ // sx={{
923
+ // color: "#7A5AF8",
924
+ // border: `1px solid #7A5AF8`,
925
+ // borderRadius: "6px",
926
+ // textTransform: "none",
927
+ // fontSize: "14px",
928
+ // }}
929
+ // fullWidth
930
+ // onClick={() => {
931
+ // setFilters([]);
1088
932
 
1089
- const filterMaster = {
1090
- ...tableStates.filterMaster,
1091
- activeFilterTabIndex: -1,
1092
- };
933
+ // const filterMaster = {
934
+ // ...tableStates.filterMaster,
935
+ // activeFilterTabIndex: -1,
936
+ // };
1093
937
 
1094
- const newState = {
1095
- filterMaster: filterMaster,
1096
- filters: [],
1097
- };
938
+ // const newState = {
939
+ // filterMaster: filterMaster,
940
+ // filters: [],
941
+ // };
1098
942
 
1099
- onChangeFunction && onChangeFunction(newState);
1100
- }}
1101
- >
1102
- Clear All
1103
- </Button>
1104
- )}
943
+ // onChangeFunction && onChangeFunction(newState);
944
+ // }}
945
+ // >
946
+ // Clear All
947
+ // </Button>
948
+ // )}
1105
949
 
1106
- {showSaveButton && (
1107
- <Button
1108
- variant="contained"
1109
- fullWidth
1110
- sx={{
1111
- color: "white",
1112
- backgroundColor: "#7A5AF8",
1113
- "&.Mui-disabled": {
1114
- backgroundColor: "#d7cefd",
1115
- color: "rgba(255, 255, 255, 0.7)",
1116
- },
1117
- }}
1118
- onClick={() => {
1119
- setSavedFilterModalOpen && setSavedFilterModalOpen(true);
1120
- }}
1121
- >
1122
- Save Filter
1123
- </Button>
1124
- )}
950
+ // {showSaveButton && (
951
+ // <Button
952
+ // variant="contained"
953
+ // fullWidth
954
+ // sx={{
955
+ // color: "white",
956
+ // backgroundColor: "#7A5AF8",
957
+ // "&.Mui-disabled": {
958
+ // backgroundColor: "#d7cefd",
959
+ // color: "rgba(255, 255, 255, 0.7)",
960
+ // },
961
+ // }}
962
+ // onClick={() => {
963
+ // setSavedFilterModalOpen && setSavedFilterModalOpen(true);
964
+ // }}
965
+ // >
966
+ // Save Filter
967
+ // </Button>
968
+ // )}
1125
969
 
1126
- {/* Custom buttons from props */}
1127
- {customButtons?.map((btn, idx) => (
1128
- <Button
1129
- key={idx}
1130
- fullWidth
1131
- variant={btn?.variant ?? "outlined"}
1132
- sx={btn?.sx}
1133
- {...btn}
1134
- >
1135
- {btn?.label}
1136
- </Button>
1137
- ))}
1138
- </Box>
1139
- )}
1140
- </form>
1141
- );
1142
- };
970
+ // {/* Custom buttons from props */}
971
+ // {customButtons?.map((btn, idx) => (
972
+ // <Button
973
+ // key={idx}
974
+ // fullWidth
975
+ // variant={btn?.variant ?? "outlined"}
976
+ // sx={btn?.sx}
977
+ // {...btn}
978
+ // >
979
+ // {btn?.label}
980
+ // </Button>
981
+ // ))}
982
+ // </Box>
983
+ // )}
984
+ // </form>
985
+ // );
986
+ // };
1143
987
 
1144
- export default FilterForm;
988
+ // export default FilterForm;