rez-table-listing-mui 1.3.22 → 1.3.23

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 (8) 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/index.tsx +1052 -911
  8. package/src/listing/components/login/index.tsx +3 -2
package/src/listing/components/filter/components/forms/index.tsx CHANGED
@@ -1,988 +1,1129 @@
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
+ // 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;
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
- );
352
-
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
- );
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>
362
309
 
363
- handleRemoveFilter(filter.filter_attribute);
364
- }}
365
- size="small"
366
- >
367
- <CloseIcon />
368
- </IconButton>
369
- </Box>
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
+ // );
370
352
 
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;
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
+ // );
378
362
 
379
- const operator = fieldValue?.operator;
363
+ // handleRemoveFilter(filter.filter_attribute);
364
+ // }}
365
+ // size="small"
366
+ // >
367
+ // <CloseIcon />
368
+ // </IconButton>
369
+ // </Box>
380
370
 
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>
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>
398
398
 
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([]);
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([]);
414
414
 
415
- const filterMaster = {
416
- ...tableStates.filterMaster,
417
- activeFilterTabIndex: -1,
418
- };
415
+ // const filterMaster = {
416
+ // ...tableStates.filterMaster,
417
+ // activeFilterTabIndex: -1,
418
+ // };
419
419
 
420
- const newState = {
421
- filterMaster: filterMaster,
422
- filters: [],
423
- };
420
+ // const newState = {
421
+ // filterMaster: filterMaster,
422
+ // filters: [],
423
+ // };
424
424
 
425
- onChangeFunction && onChangeFunction(newState);
426
- }}
427
- >
428
- Clear All
429
- </Button>
430
- )}
425
+ // onChangeFunction && onChangeFunction(newState);
426
+ // }}
427
+ // >
428
+ // Clear All
429
+ // </Button>
430
+ // )}
431
431
 
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
- )}
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
+ // )}
451
451
 
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
- };
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
+ // };
469
469
 
470
- export default FilterForm;
470
+ // export default FilterForm;
471
471
 
472
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";
501
-
502
- // interface FormValues {
503
- // filterName: string;
504
- // [key: string]:
505
- // | {
506
- // value: string | string[];
507
- // operator: string;
508
- // }
509
- // | string;
510
- // }
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";
511
501
 
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;
502
+ interface FormValues {
503
+ filterName: string;
504
+ [key: string]:
505
+ | {
506
+ value: string | string[];
507
+ operator: string;
508
+ }
509
+ | string;
510
+ }
542
511
 
543
- // const showSaveButton =
544
- // filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
545
- // const showClearAllButton =
546
- // filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
547
- // const customButtons =
548
- // filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
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;
549
542
 
550
- // const filterName = filterMaster?.saved_filters?.selectedName || "";
543
+ const showSaveButton =
544
+ filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
545
+ const showClearAllButton =
546
+ filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
547
+ const customButtons =
548
+ filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
551
549
 
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 }>);
550
+ const filterName = filterMaster?.saved_filters?.selectedName || "";
563
551
 
564
- // return {
565
- // filterName: filterName ?? "",
566
- // dummyChange: "",
567
- // ...filterValues,
568
- // };
569
- // }, [filters, filterName]);
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 }>);
570
563
 
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
- // });
564
+ return {
565
+ filterName: filterName ?? "",
566
+ dummyChange: "",
567
+ ...filterValues,
568
+ };
569
+ }, [filters, filterName]);
581
570
 
582
- // const formValues = watch();
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
+ });
583
581
 
584
- // useEffect(() => {
585
- // reset(defaultValues);
586
- // }, [filters]);
582
+ const formValues = watch();
587
583
 
588
- // const debouncedUpdateFilters = useCallback(
589
- // customDebounce((updatedFilters: FilterStateProps[]) => {
590
- // setFilters(updatedFilters);
584
+ useEffect(() => {
585
+ reset(defaultValues);
586
+ }, [filters]);
591
587
 
592
- // const newState = {
593
- // filterMaster: filterMaster,
594
- // filters: updatedFilters,
595
- // };
588
+ const debouncedUpdateFilters = useCallback(
589
+ customDebounce((updatedFilters: FilterStateProps[]) => {
590
+ setFilters(updatedFilters);
596
591
 
597
- // onChangeFunction && onChangeFunction(newState);
598
- // }, 1000),
599
- // [setFilters]
600
- // );
592
+ const newState = {
593
+ filterMaster: filterMaster,
594
+ filters: updatedFilters,
595
+ };
601
596
 
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
- // };
597
+ onChangeFunction && onChangeFunction(newState);
598
+ }, 1000),
599
+ [setFilters]
600
+ );
612
601
 
613
- // return {
614
- // ...filter,
615
- // filter_value: filterValue.value,
616
- // filter_operator: filterValue.operator,
617
- // };
618
- // }
619
- // return filter;
620
- // });
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
+ };
621
612
 
622
- // setPagination((prev) => ({ ...prev, pageIndex: 0 }));
623
- // debouncedUpdateFilters(updatedFilters);
624
- // }, [formValues, filters, debouncedUpdateFilters]);
613
+ return {
614
+ ...filter,
615
+ filter_value: filterValue.value,
616
+ filter_operator: filterValue.operator,
617
+ };
618
+ }
619
+ return filter;
620
+ });
625
621
 
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
- // }, []);
622
+ setPagination((prev) => ({ ...prev, pageIndex: 0 }));
623
+ debouncedUpdateFilters(updatedFilters);
624
+ }, [formValues, filters, debouncedUpdateFilters]);
636
625
 
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]);
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
+ }, []);
647
636
 
648
- // const handleRemoveEntityType = (entityType: string) => {
649
- // const remainingFilters = filters?.filter(
650
- // (f) => f.filter_entity_name !== entityType
651
- // );
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]);
652
647
 
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
- // });
648
+ const handleRemoveEntityType = (entityType: string) => {
649
+ const remainingFilters = filters?.filter(
650
+ (f) => f.filter_entity_name !== entityType
651
+ );
660
652
 
661
- // setFilters(remainingFilters);
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
+ });
662
660
 
663
- // const newState = {
664
- // filterMaster,
665
- // filters: remainingFilters,
666
- // };
661
+ setFilters(remainingFilters);
667
662
 
668
- // onChangeFunction && onChangeFunction(newState);
669
- // };
663
+ const newState = {
664
+ filterMaster,
665
+ filters: remainingFilters,
666
+ };
670
667
 
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,
668
+ onChangeFunction && onChangeFunction(newState);
669
+ };
722
670
 
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
- // )}
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,
748
722
 
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
- // />
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
+ )}
759
748
 
760
- // {!editMode && (
761
- // <CustomSearch value={searchTerm} onChange={setSearchTerm} />
762
- // )}
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
+ />
763
759
 
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>
760
+ {!editMode && (
761
+ <CustomSearch value={searchTerm} onChange={setSearchTerm} />
762
+ )}
763
+
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>
790
+
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
+ );
790
833
 
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
- // );
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
+ );
833
843
 
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
- // );
844
+ handleRemoveFilter(filter.filter_attribute);
845
+ }}
846
+ size="small"
847
+ >
848
+ <CloseIcon />
849
+ </IconButton>
850
+ </Box>
843
851
 
844
- // handleRemoveFilter(filter.filter_attribute);
845
- // }}
846
- // size="small"
847
- // >
848
- // <CloseIcon />
849
- // </IconButton>
850
- // </Box>
852
+ <Box>
853
+ {(() => {
854
+ const fieldValue = formValues[
855
+ filter?.filter_attribute_name as keyof FormValues
856
+ ] as
857
+ | { value: string | string[]; operator: string }
858
+ | undefined;
851
859
 
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>
860
+ const operator = fieldValue?.operator;
916
861
 
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([]);
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
+ // Should the date picker be shown?
879
+ const showDatePicker =
880
+ filter?.filter_attribute_data_type === "date" &&
881
+ operator &&
882
+ dateAllowedOperators.includes(operator);
883
+
884
+ // Should textfield shown instead for date?
885
+ const showTextInsteadOfDate =
886
+ filter?.filter_attribute_data_type === "date" &&
887
+ (!operator ||
888
+ !dateAllowedOperators.includes(operator));
889
+
890
+ // Now render exactly same logic except date override
891
+ if (
892
+ filter?.filter_attribute_data_type === "text" ||
893
+ filter?.filter_attribute_data_type === "number"
894
+ ) {
895
+ return (
896
+ <FormTextfield
897
+ filter={filter}
898
+ control={control}
899
+ onValueChange={updateFiltersFromForm}
900
+ />
901
+ );
902
+ }
903
+
904
+ if (filter?.filter_attribute_data_type === "year") {
905
+ return (
906
+ <FormDatePicker
907
+ filter={filter}
908
+ control={control}
909
+ views={["year"]}
910
+ onValueChange={updateFiltersFromForm}
911
+ />
912
+ );
913
+ }
914
+
915
+ // ⬇️ NEW DATE LOGIC
916
+ if (showDatePicker) {
917
+ return (
918
+ <FormDatePicker
919
+ filter={filter}
920
+ control={control}
921
+ onValueChange={updateFiltersFromForm}
922
+ />
923
+ );
924
+ }
925
+
926
+ if (showTextInsteadOfDate) {
927
+ return (
928
+ <FormTextfield
929
+ filter={filter}
930
+ control={control}
931
+ onValueChange={updateFiltersFromForm}
932
+ />
933
+ );
934
+ }
935
+
936
+ if (
937
+ filter?.filter_attribute_data_type === "select"
938
+ ) {
939
+ return (
940
+ <FormMultiSelect
941
+ filter={filter}
942
+ control={control}
943
+ dropdownData={dropdownData}
944
+ onValueChange={updateFiltersFromForm}
945
+ />
946
+ );
947
+ }
948
+
949
+ if (
950
+ filter?.filter_attribute_data_type ===
951
+ "multiselect"
952
+ ) {
953
+ return (
954
+ <FormMultiSelect
955
+ filter={filter}
956
+ control={control}
957
+ dropdownData={dropdownData}
958
+ onValueChange={updateFiltersFromForm}
959
+ />
960
+ );
961
+ }
962
+
963
+ // if (
964
+ // filter?.filter_attribute_data_type === "radio"
965
+ // ) {
966
+ // return (
967
+ // <FormMultiSelect
968
+ // filter={filter}
969
+ // control={control}
970
+ // dropdownData={dropdownData}
971
+ // onValueChange={updateFiltersFromForm}
972
+ // />
973
+ // );
974
+ // }
975
+
976
+ // if (
977
+ // filter?.filter_attribute_data_type === "checkbox"
978
+ // ) {
979
+ // return (
980
+ // <FormMultiSelect
981
+ // filter={filter}
982
+ // control={control}
983
+ // dropdownData={dropdownData}
984
+ // onValueChange={updateFiltersFromForm}
985
+ // />
986
+ // );
987
+ // }
988
+
989
+ return <FormControl fullWidth size="small" />;
990
+ })()}
991
+ </Box>
932
992
 
933
- // const filterMaster = {
934
- // ...tableStates.filterMaster,
935
- // activeFilterTabIndex: -1,
936
- // };
993
+ {/* <Box>
994
+ {filter?.filter_attribute_data_type === "text" ||
995
+ filter?.filter_attribute_data_type === "number" ? (
996
+ <FormTextfield
997
+ filter={filter}
998
+ control={control}
999
+ onValueChange={updateFiltersFromForm}
1000
+ />
1001
+ ) : filter?.filter_attribute_data_type === "year" ? (
1002
+ <FormDatePicker
1003
+ filter={filter}
1004
+ control={control}
1005
+ views={["year"]}
1006
+ onValueChange={updateFiltersFromForm}
1007
+ />
1008
+ ) : filter?.filter_attribute_data_type === "date" ? (
1009
+ <FormDatePicker
1010
+ filter={filter}
1011
+ control={control}
1012
+ onValueChange={updateFiltersFromForm}
1013
+ />
1014
+ ) : filter?.filter_attribute_data_type ===
1015
+ "select" ? (
1016
+ <FormMultiSelect
1017
+ filter={filter}
1018
+ control={control}
1019
+ dropdownData={dropdownData}
1020
+ onValueChange={updateFiltersFromForm}
1021
+ />
1022
+ ) : filter?.filter_attribute_data_type ===
1023
+ "multiselect" ? (
1024
+ <FormMultiSelect
1025
+ filter={filter}
1026
+ control={control}
1027
+ dropdownData={dropdownData}
1028
+ onValueChange={updateFiltersFromForm}
1029
+ />
1030
+ ) : filter?.filter_attribute_data_type === "radio" ? (
1031
+ <FormMultiSelect
1032
+ filter={filter}
1033
+ control={control}
1034
+ dropdownData={dropdownData}
1035
+ onValueChange={updateFiltersFromForm}
1036
+ />
1037
+ ) : filter?.filter_attribute_data_type ===
1038
+ "checkbox" ? (
1039
+ <FormMultiSelect
1040
+ filter={filter}
1041
+ control={control}
1042
+ dropdownData={dropdownData}
1043
+ onValueChange={updateFiltersFromForm}
1044
+ />
1045
+ ) : (
1046
+ <FormControl fullWidth size="small" />
1047
+ )}
1048
+ </Box> */}
1049
+ </Box>
1050
+ );
1051
+ })}
1052
+ </Box>
1053
+ ))}
1054
+ </Box>
1055
+ </Box>
1056
+ </Box>
937
1057
 
938
- // const newState = {
939
- // filterMaster: filterMaster,
940
- // filters: [],
941
- // };
1058
+ {filters?.length > 0 && (showClearAllButton || showSaveButton) && (
1059
+ <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
1060
+ {showClearAllButton && (
1061
+ <Button
1062
+ variant="outlined"
1063
+ sx={{
1064
+ color: "#7A5AF8",
1065
+ border: `1px solid #7A5AF8`,
1066
+ borderRadius: "6px",
1067
+ textTransform: "none",
1068
+ fontSize: "14px",
1069
+ }}
1070
+ fullWidth
1071
+ onClick={() => {
1072
+ setFilters([]);
942
1073
 
943
- // onChangeFunction && onChangeFunction(newState);
944
- // }}
945
- // >
946
- // Clear All
947
- // </Button>
948
- // )}
1074
+ const filterMaster = {
1075
+ ...tableStates.filterMaster,
1076
+ activeFilterTabIndex: -1,
1077
+ };
949
1078
 
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
- // )}
1079
+ const newState = {
1080
+ filterMaster: filterMaster,
1081
+ filters: [],
1082
+ };
969
1083
 
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
- // };
1084
+ onChangeFunction && onChangeFunction(newState);
1085
+ }}
1086
+ >
1087
+ Clear All
1088
+ </Button>
1089
+ )}
987
1090
 
988
- // export default FilterForm;
1091
+ {showSaveButton && (
1092
+ <Button
1093
+ variant="contained"
1094
+ fullWidth
1095
+ sx={{
1096
+ color: "white",
1097
+ backgroundColor: "#7A5AF8",
1098
+ "&.Mui-disabled": {
1099
+ backgroundColor: "#d7cefd",
1100
+ color: "rgba(255, 255, 255, 0.7)",
1101
+ },
1102
+ }}
1103
+ onClick={() => {
1104
+ setSavedFilterModalOpen && setSavedFilterModalOpen(true);
1105
+ }}
1106
+ >
1107
+ Save Filter
1108
+ </Button>
1109
+ )}
1110
+
1111
+ {/* Custom buttons from props */}
1112
+ {customButtons?.map((btn, idx) => (
1113
+ <Button
1114
+ key={idx}
1115
+ fullWidth
1116
+ variant={btn?.variant ?? "outlined"}
1117
+ sx={btn?.sx}
1118
+ {...btn}
1119
+ >
1120
+ {btn?.label}
1121
+ </Button>
1122
+ ))}
1123
+ </Box>
1124
+ )}
1125
+ </form>
1126
+ );
1127
+ };
1128
+
1129
+ export default FilterForm;