rez-table-listing-mui 1.3.32 → 1.3.34
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.
- package/dist/index.d.ts +6 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/listing/components/common/saved-filter-modal/index.tsx +54 -16
- package/src/listing/components/filter/components/forms/components/Date.tsx +1 -1
- package/src/listing/components/filter/components/forms/components/Dropdown.tsx +2 -135
- package/src/listing/components/filter/components/forms/components/Textfield.tsx +4 -1
- package/src/listing/components/filter/components/forms/index.tsx +107 -59
- package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx +24 -48
- package/src/listing/components/filter/components/saved-filter.tsx +742 -63
- package/src/listing/components/filter/index.tsx +7 -0
- package/src/listing/libs/utils/common.ts +1 -0
- package/src/listing/types/filter.ts +8 -0
- package/src/view/FIlterWrapper.tsx +5 -0
- package/src/view/ListingView.tsx +1 -1
|
@@ -1,3 +1,607 @@
|
|
|
1
|
+
// import { useEffect, useState } from "react";
|
|
2
|
+
// import {
|
|
3
|
+
// FilterFormComponentProps,
|
|
4
|
+
// FilterMasterStateProps,
|
|
5
|
+
// FilterOperationListProps,
|
|
6
|
+
// } from "../../../types/filter";
|
|
7
|
+
// import {
|
|
8
|
+
// Box,
|
|
9
|
+
// IconButton,
|
|
10
|
+
// List,
|
|
11
|
+
// ListItem,
|
|
12
|
+
// ListItemText,
|
|
13
|
+
// Typography,
|
|
14
|
+
// } from "@mui/material";
|
|
15
|
+
// import CustomSearch from "./search";
|
|
16
|
+
// import { DeleteIcon, EditIcon } from "../../../../assets/svg";
|
|
17
|
+
// import SavedFilterEditComponent from "./saved-edit-filter";
|
|
18
|
+
// import { filterStyles } from "../style";
|
|
19
|
+
// import { CheckBox } from "../../../../assets/svg";
|
|
20
|
+
|
|
21
|
+
// const SavedFilter = ({
|
|
22
|
+
// columnsData,
|
|
23
|
+
// dropdownData,
|
|
24
|
+
// tableStates,
|
|
25
|
+
// editMode,
|
|
26
|
+
// setEditMode,
|
|
27
|
+
// setDeleteFilterModalOpen,
|
|
28
|
+
// setSavedFilterModalOpen,
|
|
29
|
+
// tabValue,
|
|
30
|
+
// onChangeFunction,
|
|
31
|
+
// filterComponentOptions,
|
|
32
|
+
// }: FilterFormComponentProps) => {
|
|
33
|
+
// const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
|
|
34
|
+
// tableStates;
|
|
35
|
+
// const [searchTerm, setSearchTerm] = useState<string>("");
|
|
36
|
+
|
|
37
|
+
// // reset savedFilterEditValue when component unmounts
|
|
38
|
+
// useEffect(() => {
|
|
39
|
+
// return () => {
|
|
40
|
+
// const editModeFromTabOptions =
|
|
41
|
+
// filterComponentOptions?.tabOptions?.savedFilter?.editMode;
|
|
42
|
+
// if (!editModeFromTabOptions) {
|
|
43
|
+
// setEditMode && setEditMode(false);
|
|
44
|
+
// setFilterMaster(
|
|
45
|
+
// (prev) =>
|
|
46
|
+
// ({
|
|
47
|
+
// ...prev,
|
|
48
|
+
// saved_filters: {
|
|
49
|
+
// ...prev?.attributes,
|
|
50
|
+
// selectedId: "",
|
|
51
|
+
// selectedName: "",
|
|
52
|
+
// selectedCode: "",
|
|
53
|
+
// },
|
|
54
|
+
// } as FilterMasterStateProps)
|
|
55
|
+
// );
|
|
56
|
+
// }
|
|
57
|
+
// };
|
|
58
|
+
// }, []);
|
|
59
|
+
|
|
60
|
+
// const handleListItemClick = (filter: FilterOperationListProps) => {
|
|
61
|
+
// const newFilterMasterState = {
|
|
62
|
+
// ...filterMaster,
|
|
63
|
+
// saved_filters: {
|
|
64
|
+
// ...filterMaster?.attributes,
|
|
65
|
+
// selectedId: filter?.value,
|
|
66
|
+
// selectedName: filter?.label,
|
|
67
|
+
// selectedCode: filter?.code,
|
|
68
|
+
// },
|
|
69
|
+
// attributes: {
|
|
70
|
+
// ...filterMaster?.attributes,
|
|
71
|
+
// radio: [],
|
|
72
|
+
// },
|
|
73
|
+
// activeFilterTabIndex: tabValue,
|
|
74
|
+
// } as FilterMasterStateProps;
|
|
75
|
+
|
|
76
|
+
// setFilterMaster(newFilterMasterState);
|
|
77
|
+
|
|
78
|
+
// const newState = {
|
|
79
|
+
// filterMaster: newFilterMasterState,
|
|
80
|
+
// filters: filters,
|
|
81
|
+
// };
|
|
82
|
+
|
|
83
|
+
// onChangeFunction && onChangeFunction(newState);
|
|
84
|
+
|
|
85
|
+
// // setEditfilter state on edit icon click
|
|
86
|
+
// setEditMode && setEditMode(true);
|
|
87
|
+
// setFilterToDelete(filter);
|
|
88
|
+
// };
|
|
89
|
+
|
|
90
|
+
// const handleAppyFilter = (filter: FilterOperationListProps) => {
|
|
91
|
+
// const newFilterMasterState = {
|
|
92
|
+
// ...filterMaster,
|
|
93
|
+
// saved_filters: {
|
|
94
|
+
// ...filterMaster?.attributes,
|
|
95
|
+
// selectedId: filter?.value,
|
|
96
|
+
// selectedName: filter?.label,
|
|
97
|
+
// selectedCode: filter?.code,
|
|
98
|
+
// },
|
|
99
|
+
// attributes: {
|
|
100
|
+
// ...filterMaster?.attributes,
|
|
101
|
+
// radio: [],
|
|
102
|
+
// },
|
|
103
|
+
// activeFilterTabIndex: tabValue,
|
|
104
|
+
// } as FilterMasterStateProps;
|
|
105
|
+
|
|
106
|
+
// setFilterMaster(newFilterMasterState);
|
|
107
|
+
|
|
108
|
+
// const newState = {
|
|
109
|
+
// filterMaster: newFilterMasterState,
|
|
110
|
+
// filters: filters,
|
|
111
|
+
// };
|
|
112
|
+
|
|
113
|
+
// onChangeFunction && onChangeFunction(newState);
|
|
114
|
+
// };
|
|
115
|
+
|
|
116
|
+
// const renderList = () => (
|
|
117
|
+
// <>
|
|
118
|
+
// <CustomSearch
|
|
119
|
+
// value={searchTerm}
|
|
120
|
+
// onChange={setSearchTerm}
|
|
121
|
+
// className="search-input"
|
|
122
|
+
// />
|
|
123
|
+
|
|
124
|
+
// {columnsData?.saved_filter?.length === 0 ? (
|
|
125
|
+
// <Typography sx={{ mt: 2 }}>No saved filters yet.</Typography>
|
|
126
|
+
// ) : (
|
|
127
|
+
// <List
|
|
128
|
+
// sx={{
|
|
129
|
+
// display: "flex",
|
|
130
|
+
// flexDirection: "column",
|
|
131
|
+
// gap: 1,
|
|
132
|
+
// mt: 2,
|
|
133
|
+
// }}
|
|
134
|
+
// >
|
|
135
|
+
// {columnsData?.saved_filter
|
|
136
|
+
// ?.filter((filter) =>
|
|
137
|
+
// filter.label?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
138
|
+
// )
|
|
139
|
+
// ?.map((filter) => (
|
|
140
|
+
// <ListItem
|
|
141
|
+
// key={filter?.value}
|
|
142
|
+
// sx={{
|
|
143
|
+
// cursor: "pointer",
|
|
144
|
+
// border:
|
|
145
|
+
// filter?.value ===
|
|
146
|
+
// tableStates?.filterMaster?.saved_filters?.selectedId
|
|
147
|
+
// ? `3px solid #7a5af8`
|
|
148
|
+
// : "1px solid #C5C5C5",
|
|
149
|
+
// borderRadius: "8px",
|
|
150
|
+
// display: "flex",
|
|
151
|
+
// justifyContent: "space-between",
|
|
152
|
+
// gap: 1,
|
|
153
|
+
// alignItems: "center",
|
|
154
|
+
// "&:hover .action-icons": {
|
|
155
|
+
// opacity: 1,
|
|
156
|
+
// visibility: "visible",
|
|
157
|
+
// },
|
|
158
|
+
// }}
|
|
159
|
+
// onClick={() => handleAppyFilter(filter)}
|
|
160
|
+
// >
|
|
161
|
+
// {filter?.value ===
|
|
162
|
+
// tableStates?.filterMaster?.saved_filters?.selectedId && (
|
|
163
|
+
// <Box
|
|
164
|
+
// sx={{
|
|
165
|
+
// display: "flex",
|
|
166
|
+
// alignItems: "center",
|
|
167
|
+
// cursor: "pointer",
|
|
168
|
+
// color: "green",
|
|
169
|
+
// rounded: "full",
|
|
170
|
+
// }}
|
|
171
|
+
// >
|
|
172
|
+
// <CheckBox />
|
|
173
|
+
// </Box>
|
|
174
|
+
// )}
|
|
175
|
+
// <ListItemText primary={filter?.label} />
|
|
176
|
+
|
|
177
|
+
// <Box
|
|
178
|
+
// onClick={(e) => e.stopPropagation()}
|
|
179
|
+
// className="action-icons"
|
|
180
|
+
// sx={{
|
|
181
|
+
// display: "flex",
|
|
182
|
+
// gap: 1,
|
|
183
|
+
// opacity: 0,
|
|
184
|
+
// visibility: "hidden",
|
|
185
|
+
// transition: "opacity 0.2s ease, visibility 0.2s ease",
|
|
186
|
+
// }}
|
|
187
|
+
// >
|
|
188
|
+
// <IconButton
|
|
189
|
+
// size="large"
|
|
190
|
+
// onClick={() => handleListItemClick(filter)}
|
|
191
|
+
// >
|
|
192
|
+
// <EditIcon />
|
|
193
|
+
// </IconButton>
|
|
194
|
+
|
|
195
|
+
// <IconButton
|
|
196
|
+
// size="small"
|
|
197
|
+
// onClick={() => {
|
|
198
|
+
// setFilterToDelete(filter);
|
|
199
|
+
// setDeleteFilterModalOpen?.(true);
|
|
200
|
+
// }}
|
|
201
|
+
// >
|
|
202
|
+
// <DeleteIcon />
|
|
203
|
+
// </IconButton>
|
|
204
|
+
// </Box>
|
|
205
|
+
// </ListItem>
|
|
206
|
+
// ))}
|
|
207
|
+
// </List>
|
|
208
|
+
// )}
|
|
209
|
+
// </>
|
|
210
|
+
// );
|
|
211
|
+
|
|
212
|
+
// const mainBoxStyles = {
|
|
213
|
+
// ...filterStyles.filterMainComponentWrapper,
|
|
214
|
+
// ...filterStyles.scrollbarCustom,
|
|
215
|
+
// };
|
|
216
|
+
|
|
217
|
+
// return (
|
|
218
|
+
// <Box sx={mainBoxStyles} className="saved-filter-component-wrapper">
|
|
219
|
+
// {/* Render search input and list */}
|
|
220
|
+
// {!editMode && renderList()}
|
|
221
|
+
|
|
222
|
+
// {editMode && (
|
|
223
|
+
// <SavedFilterEditComponent
|
|
224
|
+
// columnsData={columnsData}
|
|
225
|
+
// dropdownData={dropdownData}
|
|
226
|
+
// tableStates={tableStates}
|
|
227
|
+
// editMode={editMode}
|
|
228
|
+
// setEditMode={setEditMode}
|
|
229
|
+
// searchTerm={searchTerm}
|
|
230
|
+
// setSearchTerm={setSearchTerm}
|
|
231
|
+
// setSavedFilterModalOpen={setSavedFilterModalOpen}
|
|
232
|
+
// setDeleteFilterModalOpen={setDeleteFilterModalOpen}
|
|
233
|
+
// onChangeFunction={onChangeFunction}
|
|
234
|
+
// filterComponentOptions={filterComponentOptions}
|
|
235
|
+
// />
|
|
236
|
+
// )}
|
|
237
|
+
// </Box>
|
|
238
|
+
// );
|
|
239
|
+
// };
|
|
240
|
+
|
|
241
|
+
// export default SavedFilter;
|
|
242
|
+
|
|
243
|
+
// do not delete this logic rework this
|
|
244
|
+
// ----------------------------------------------------------------------------------------------------------------------------
|
|
245
|
+
|
|
246
|
+
// import { useEffect, useState } from "react";
|
|
247
|
+
// import {
|
|
248
|
+
// FilterFormComponentProps,
|
|
249
|
+
// FilterMasterStateProps,
|
|
250
|
+
// FilterOperationListProps,
|
|
251
|
+
// } from "../../../types/filter";
|
|
252
|
+
// import {
|
|
253
|
+
// Accordion,
|
|
254
|
+
// AccordionDetails,
|
|
255
|
+
// AccordionSummary,
|
|
256
|
+
// Box,
|
|
257
|
+
// Divider,
|
|
258
|
+
// IconButton,
|
|
259
|
+
// List,
|
|
260
|
+
// ListItem,
|
|
261
|
+
// ListItemText,
|
|
262
|
+
// Typography,
|
|
263
|
+
// } from "@mui/material";
|
|
264
|
+
// import CustomSearch from "./search";
|
|
265
|
+
// import { DeleteIcon, EditIcon } from "../../../../assets/svg";
|
|
266
|
+
// import SavedFilterEditComponent from "./saved-edit-filter";
|
|
267
|
+
// // import { filterStyles } from "../style";
|
|
268
|
+
// import { CheckBox } from "../../../../assets/svg";
|
|
269
|
+
// import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
270
|
+
|
|
271
|
+
// const SavedFilter = ({
|
|
272
|
+
// columnsData,
|
|
273
|
+
// dropdownData,
|
|
274
|
+
// tableStates,
|
|
275
|
+
// editMode,
|
|
276
|
+
// setEditMode,
|
|
277
|
+
// setDeleteFilterModalOpen,
|
|
278
|
+
// onSaveFilterButtonClick,
|
|
279
|
+
// tabValue,
|
|
280
|
+
// onChangeFunction,
|
|
281
|
+
// filterComponentOptions,
|
|
282
|
+
// }: FilterFormComponentProps) => {
|
|
283
|
+
// const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
|
|
284
|
+
// tableStates;
|
|
285
|
+
|
|
286
|
+
// const [searchTerm, setSearchTerm] = useState<string>("");
|
|
287
|
+
|
|
288
|
+
// const normalizeFilter = (f: any): FilterOperationListProps => {
|
|
289
|
+
// const prefs =
|
|
290
|
+
// f.sharedPreferences || f.preferences || f.meta || f.shared_meta || {};
|
|
291
|
+
|
|
292
|
+
// return {
|
|
293
|
+
// label: f.name || f.label || "Unnamed Filter",
|
|
294
|
+
// value: f.id || f.value,
|
|
295
|
+
// code: f.code ?? "",
|
|
296
|
+
// is_shared: f.is_shared ?? prefs.is_shared ?? false,
|
|
297
|
+
// created_by: f.created_by || "shared_filter",
|
|
298
|
+
// description: f.description || "",
|
|
299
|
+
// is_owner: f.is_owner === true || prefs.is_owner === "true",
|
|
300
|
+
|
|
301
|
+
// is_editable:
|
|
302
|
+
// f.is_editable === true ||
|
|
303
|
+
// f.is_editable === "true" ||
|
|
304
|
+
// prefs.is_editable === true ||
|
|
305
|
+
// prefs.is_editable === "true",
|
|
306
|
+
// };
|
|
307
|
+
// };
|
|
308
|
+
|
|
309
|
+
// const mappedSavedFilter: FilterOperationListProps[] =
|
|
310
|
+
// columnsData?.saved_filter?.map(normalizeFilter) ?? [];
|
|
311
|
+
// // console.log("mappedSavedFilter", mappedSavedFilter);
|
|
312
|
+
|
|
313
|
+
// const mappedSharedFilter: FilterOperationListProps[] =
|
|
314
|
+
// columnsData?.shared_filter?.map(normalizeFilter) ?? [];
|
|
315
|
+
// // console.log("mappedSharedFilter", mappedSharedFilter);
|
|
316
|
+
|
|
317
|
+
// // Reset on unmount
|
|
318
|
+
// useEffect(() => {
|
|
319
|
+
// return () => {
|
|
320
|
+
// const editModeFromTab =
|
|
321
|
+
// filterComponentOptions?.tabOptions?.savedFilter?.editMode;
|
|
322
|
+
|
|
323
|
+
// if (!editModeFromTab) {
|
|
324
|
+
// setEditMode && setEditMode(false);
|
|
325
|
+
// setFilterMaster(
|
|
326
|
+
// (prev) =>
|
|
327
|
+
// ({
|
|
328
|
+
// ...prev,
|
|
329
|
+
// saved_filters: {
|
|
330
|
+
// ...(prev?.saved_filters ?? {}),
|
|
331
|
+
// selectedId: "",
|
|
332
|
+
// selectedName: "",
|
|
333
|
+
// description: "",
|
|
334
|
+
// selectedCode: "",
|
|
335
|
+
// shareWithTeam: undefined,
|
|
336
|
+
// allowTeamEdit: undefined,
|
|
337
|
+
// },
|
|
338
|
+
// } as FilterMasterStateProps)
|
|
339
|
+
// );
|
|
340
|
+
// }
|
|
341
|
+
// };
|
|
342
|
+
// }, []);
|
|
343
|
+
|
|
344
|
+
// const applyFilterStates = (filter: FilterOperationListProps) => {
|
|
345
|
+
// const newFilterMaster = {
|
|
346
|
+
// ...filterMaster,
|
|
347
|
+
// saved_filters: {
|
|
348
|
+
// ...(filterMaster?.saved_filters ?? {}),
|
|
349
|
+
// selectedId: filter.value,
|
|
350
|
+
// selectedName: filter.label,
|
|
351
|
+
// description: filter.description,
|
|
352
|
+
// selectedCode: filter.code,
|
|
353
|
+
// shareWithTeam: filter.is_shared,
|
|
354
|
+
// allowTeamEdit: filter.is_editable,
|
|
355
|
+
// },
|
|
356
|
+
// attributes: {
|
|
357
|
+
// ...filterMaster?.attributes,
|
|
358
|
+
// radio: [],
|
|
359
|
+
// },
|
|
360
|
+
// activeFilterTabIndex: tabValue,
|
|
361
|
+
// } as FilterMasterStateProps;
|
|
362
|
+
|
|
363
|
+
// setFilterMaster(newFilterMaster);
|
|
364
|
+
|
|
365
|
+
// onChangeFunction &&
|
|
366
|
+
// onChangeFunction({
|
|
367
|
+
// filterMaster: newFilterMaster,
|
|
368
|
+
// filters,
|
|
369
|
+
// });
|
|
370
|
+
// };
|
|
371
|
+
|
|
372
|
+
// const handleListItemClick = (filter: FilterOperationListProps) => {
|
|
373
|
+
// applyFilterStates(filter);
|
|
374
|
+
// setEditMode && setEditMode(true);
|
|
375
|
+
// setFilterToDelete(filter);
|
|
376
|
+
// };
|
|
377
|
+
|
|
378
|
+
// const handleApplyFilter = (filter: FilterOperationListProps) => {
|
|
379
|
+
// applyFilterStates(filter);
|
|
380
|
+
// };
|
|
381
|
+
// const [openAccordion, setOpenAccordion] = useState<"my" | "shared">("my");
|
|
382
|
+
|
|
383
|
+
// /**
|
|
384
|
+
// * renderList
|
|
385
|
+
// * @param source - list to render
|
|
386
|
+
// * @param isSharedList - true when rendering Shared Filters (default false)
|
|
387
|
+
// *
|
|
388
|
+
// * Behavior:
|
|
389
|
+
// * - If isSharedList === true -> show Edit icon ONLY when filter.is_editable === true
|
|
390
|
+
// * - If isSharedList === false -> show Edit icon always (or as per filter.is_editable if you prefer)
|
|
391
|
+
// */
|
|
392
|
+
// const renderList = (
|
|
393
|
+
// source: FilterOperationListProps[],
|
|
394
|
+
// isSharedList: boolean = false,
|
|
395
|
+
// { emptyMessage = "No filters yet." } = {}
|
|
396
|
+
// ) =>
|
|
397
|
+
// source.length === 0 ? (
|
|
398
|
+
// <Typography>{emptyMessage}</Typography>
|
|
399
|
+
// ) : (
|
|
400
|
+
// <List
|
|
401
|
+
// sx={{
|
|
402
|
+
// display: "flex",
|
|
403
|
+
// flexDirection: "column",
|
|
404
|
+
// gap: 1,
|
|
405
|
+
// }}
|
|
406
|
+
// >
|
|
407
|
+
// {source
|
|
408
|
+
// .filter((f) =>
|
|
409
|
+
// f.label?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
410
|
+
// )
|
|
411
|
+
// .map((filter) => (
|
|
412
|
+
// <ListItem
|
|
413
|
+
// key={filter.value}
|
|
414
|
+
// sx={{
|
|
415
|
+
// cursor: "pointer",
|
|
416
|
+
// // border:
|
|
417
|
+
// // filter.value ===
|
|
418
|
+
// // tableStates?.filterMaster?.saved_filters?.selectedId
|
|
419
|
+
// // ? `3px solid #7a5af8`
|
|
420
|
+
// // : "1px solid #C5C5C5",
|
|
421
|
+
// borderRadius: "8px",
|
|
422
|
+
// bgcolor: "#f2f6f8ff",
|
|
423
|
+
// display: "flex",
|
|
424
|
+
// justifyContent: "space-between",
|
|
425
|
+
// gap: 1,
|
|
426
|
+
// alignItems: "center",
|
|
427
|
+
// "&:hover .action-icons": {
|
|
428
|
+
// opacity: 1,
|
|
429
|
+
// visibility: "visible",
|
|
430
|
+
// },
|
|
431
|
+
// }}
|
|
432
|
+
// onClick={() => handleApplyFilter(filter)}
|
|
433
|
+
// >
|
|
434
|
+
// {filter.value ===
|
|
435
|
+
// tableStates?.filterMaster?.saved_filters?.selectedId && (
|
|
436
|
+
// <Box sx={{ display: "flex", alignItems: "center" }}>
|
|
437
|
+
// <CheckBox />
|
|
438
|
+
// </Box>
|
|
439
|
+
// )}
|
|
440
|
+
|
|
441
|
+
// <ListItemText primary={filter.label} />
|
|
442
|
+
|
|
443
|
+
// <Box
|
|
444
|
+
// onClick={(e) => e.stopPropagation()}
|
|
445
|
+
// className="action-icons"
|
|
446
|
+
// sx={{
|
|
447
|
+
// display: "flex",
|
|
448
|
+
// gap: 1,
|
|
449
|
+
// opacity: 0,
|
|
450
|
+
// visibility: "hidden",
|
|
451
|
+
// transition: "opacity 0.2s ease, visibility 0.2s ease",
|
|
452
|
+
// }}
|
|
453
|
+
// >
|
|
454
|
+
// {((!isSharedList && filter.is_editable === true) ||
|
|
455
|
+
// filter.is_owner === true) && (
|
|
456
|
+
// // ||
|
|
457
|
+
// // String(filter.created_by) !== String(filter.user_id))
|
|
458
|
+
// <IconButton
|
|
459
|
+
// size="large"
|
|
460
|
+
// onClick={() => handleListItemClick(filter)}
|
|
461
|
+
// >
|
|
462
|
+
// <EditIcon />
|
|
463
|
+
// </IconButton>
|
|
464
|
+
// )}
|
|
465
|
+
// {filter?.is_owner === true && (
|
|
466
|
+
// <IconButton
|
|
467
|
+
// size="small"
|
|
468
|
+
// onClick={() => {
|
|
469
|
+
// setFilterToDelete(filter);
|
|
470
|
+
// setDeleteFilterModalOpen?.(true);
|
|
471
|
+
// }}
|
|
472
|
+
// >
|
|
473
|
+
// <DeleteIcon />
|
|
474
|
+
// </IconButton>
|
|
475
|
+
// )}
|
|
476
|
+
// </Box>
|
|
477
|
+
// </ListItem>
|
|
478
|
+
// ))}
|
|
479
|
+
// </List>
|
|
480
|
+
// );
|
|
481
|
+
|
|
482
|
+
// return (
|
|
483
|
+
// <Box
|
|
484
|
+
// // sx={{
|
|
485
|
+
// // ...filterStyles.filterMainComponentWrapper,
|
|
486
|
+
// // ...filterStyles.scrollbarCustom,
|
|
487
|
+
// // }}
|
|
488
|
+
// className="saved-filter-component-wrapper"
|
|
489
|
+
// >
|
|
490
|
+
// {!editMode && (
|
|
491
|
+
// <>
|
|
492
|
+
// {/* Search Box */}
|
|
493
|
+
// <Box sx={{ mb: 2 }}>
|
|
494
|
+
// <CustomSearch
|
|
495
|
+
// value={searchTerm}
|
|
496
|
+
// onChange={setSearchTerm}
|
|
497
|
+
// className="search-input"
|
|
498
|
+
// />
|
|
499
|
+
// </Box>
|
|
500
|
+
|
|
501
|
+
// {/* ---- My Filters Section ---- */}
|
|
502
|
+
// <Box
|
|
503
|
+
// sx={{
|
|
504
|
+
// background: "#fff",
|
|
505
|
+
// borderRadius: "12px",
|
|
506
|
+
// border: "1px solid #eee",
|
|
507
|
+
// mb: 2,
|
|
508
|
+
// overflow: "hidden",
|
|
509
|
+
// }}
|
|
510
|
+
// >
|
|
511
|
+
// <Accordion
|
|
512
|
+
// // defaultExpanded
|
|
513
|
+
// disableGutters
|
|
514
|
+
// elevation={0}
|
|
515
|
+
// expanded={openAccordion === "my"}
|
|
516
|
+
// onChange={() =>
|
|
517
|
+
// setOpenAccordion(openAccordion === "my" ? "shared" : "my")
|
|
518
|
+
// }
|
|
519
|
+
// >
|
|
520
|
+
// <AccordionSummary
|
|
521
|
+
// expandIcon={<ExpandMoreIcon fontSize="small" />}
|
|
522
|
+
// >
|
|
523
|
+
// <Typography fontWeight={600}>My Filters</Typography>
|
|
524
|
+
// </AccordionSummary>
|
|
525
|
+
// <Divider sx={{ width: "100%" }} />
|
|
526
|
+
// <AccordionDetails
|
|
527
|
+
// sx={{
|
|
528
|
+
// p: "9px",
|
|
529
|
+
// maxHeight: "320px",
|
|
530
|
+
// overflowY: "auto",
|
|
531
|
+
// scrollbarWidth: "thin",
|
|
532
|
+
// }}
|
|
533
|
+
// >
|
|
534
|
+
// {renderList(mappedSavedFilter) || (
|
|
535
|
+
// <Typography>No My Filters</Typography>
|
|
536
|
+
// )}
|
|
537
|
+
// </AccordionDetails>
|
|
538
|
+
// </Accordion>
|
|
539
|
+
// </Box>
|
|
540
|
+
|
|
541
|
+
// {/* ---- Shared Filters Section ---- */}
|
|
542
|
+
// <Box
|
|
543
|
+
// sx={{
|
|
544
|
+
// background: "#fff",
|
|
545
|
+
// borderRadius: "12px",
|
|
546
|
+
// border: "1px solid #eee",
|
|
547
|
+
// mb: 2,
|
|
548
|
+
// overflow: "hidden",
|
|
549
|
+
// }}
|
|
550
|
+
// >
|
|
551
|
+
// <Accordion
|
|
552
|
+
// disableGutters
|
|
553
|
+
// elevation={0}
|
|
554
|
+
// expanded={openAccordion === "shared"}
|
|
555
|
+
// onChange={() =>
|
|
556
|
+
// setOpenAccordion(openAccordion === "shared" ? "my" : "shared")
|
|
557
|
+
// }
|
|
558
|
+
// >
|
|
559
|
+
// <AccordionSummary
|
|
560
|
+
// expandIcon={<ExpandMoreIcon fontSize="small" />}
|
|
561
|
+
// >
|
|
562
|
+
// <Typography fontWeight={600}>Shared Filters</Typography>
|
|
563
|
+
// </AccordionSummary>
|
|
564
|
+
// <Divider sx={{ width: "100%" }} />
|
|
565
|
+
|
|
566
|
+
// <AccordionDetails
|
|
567
|
+
// sx={{
|
|
568
|
+
// p: "9px",
|
|
569
|
+
// maxHeight: "320px",
|
|
570
|
+
// overflowY: "auto",
|
|
571
|
+
// scrollbarWidth: "thin",
|
|
572
|
+
// }}
|
|
573
|
+
// >
|
|
574
|
+
// {renderList(mappedSharedFilter) || (
|
|
575
|
+
// <Typography>No Shared Filters</Typography>
|
|
576
|
+
// )}
|
|
577
|
+
// </AccordionDetails>
|
|
578
|
+
// </Accordion>
|
|
579
|
+
// </Box>
|
|
580
|
+
// </>
|
|
581
|
+
// )}
|
|
582
|
+
|
|
583
|
+
// {/* Edit Component */}
|
|
584
|
+
// {editMode && (
|
|
585
|
+
// <SavedFilterEditComponent
|
|
586
|
+
// columnsData={columnsData}
|
|
587
|
+
// dropdownData={dropdownData}
|
|
588
|
+
// tableStates={tableStates}
|
|
589
|
+
// editMode={editMode}
|
|
590
|
+
// setEditMode={setEditMode}
|
|
591
|
+
// searchTerm={searchTerm}
|
|
592
|
+
// setSearchTerm={setSearchTerm}
|
|
593
|
+
// onSaveFilterButtonClick={onSaveFilterButtonClick}
|
|
594
|
+
// setDeleteFilterModalOpen={setDeleteFilterModalOpen}
|
|
595
|
+
// onChangeFunction={onChangeFunction}
|
|
596
|
+
// filterComponentOptions={filterComponentOptions}
|
|
597
|
+
// />
|
|
598
|
+
// )}
|
|
599
|
+
// </Box>
|
|
600
|
+
// );
|
|
601
|
+
// };
|
|
602
|
+
|
|
603
|
+
// export default SavedFilter;
|
|
604
|
+
|
|
1
605
|
import { useEffect, useState } from "react";
|
|
2
606
|
import {
|
|
3
607
|
FilterFormComponentProps,
|
|
@@ -19,7 +623,6 @@ import {
|
|
|
19
623
|
import CustomSearch from "./search";
|
|
20
624
|
import { DeleteIcon, EditIcon } from "../../../../assets/svg";
|
|
21
625
|
import SavedFilterEditComponent from "./saved-edit-filter";
|
|
22
|
-
// import { filterStyles } from "../style";
|
|
23
626
|
import { CheckBox } from "../../../../assets/svg";
|
|
24
627
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
25
628
|
|
|
@@ -40,7 +643,20 @@ const SavedFilter = ({
|
|
|
40
643
|
|
|
41
644
|
const [searchTerm, setSearchTerm] = useState<string>("");
|
|
42
645
|
|
|
43
|
-
const
|
|
646
|
+
const MyFilter = (f: any): FilterOperationListProps => {
|
|
647
|
+
return {
|
|
648
|
+
label: f.name || f.label || "Unnamed Filter",
|
|
649
|
+
value: f.id || f.value,
|
|
650
|
+
code: f.code ?? "",
|
|
651
|
+
is_shared: false,
|
|
652
|
+
created_by: f.created_by || "",
|
|
653
|
+
description: f.description || "",
|
|
654
|
+
is_owner: true, // My filter = always owner
|
|
655
|
+
is_editable: f.is_editable === true || f.is_editable === "true",
|
|
656
|
+
};
|
|
657
|
+
};
|
|
658
|
+
|
|
659
|
+
const SharedFilter = (f: any): FilterOperationListProps => {
|
|
44
660
|
const prefs =
|
|
45
661
|
f.sharedPreferences || f.preferences || f.meta || f.shared_meta || {};
|
|
46
662
|
|
|
@@ -48,9 +664,10 @@ const SavedFilter = ({
|
|
|
48
664
|
label: f.name || f.label || "Unnamed Filter",
|
|
49
665
|
value: f.id || f.value,
|
|
50
666
|
code: f.code ?? "",
|
|
51
|
-
is_shared: f.is_shared ?? prefs.is_shared ??
|
|
52
|
-
|
|
53
|
-
|
|
667
|
+
is_shared: f.is_shared ?? prefs.is_shared ?? true,
|
|
668
|
+
created_by: f.created_by || "shared_filter",
|
|
669
|
+
description: f.description || "",
|
|
670
|
+
is_owner: f.is_owner === true || prefs.is_owner === "true",
|
|
54
671
|
is_editable:
|
|
55
672
|
f.is_editable === true ||
|
|
56
673
|
f.is_editable === "true" ||
|
|
@@ -59,11 +676,13 @@ const SavedFilter = ({
|
|
|
59
676
|
};
|
|
60
677
|
};
|
|
61
678
|
|
|
62
|
-
|
|
63
|
-
|
|
679
|
+
// SEPARATE DATA MAPPINGS
|
|
680
|
+
|
|
681
|
+
const myFilters: FilterOperationListProps[] =
|
|
682
|
+
columnsData?.saved_filter?.map(MyFilter) ?? [];
|
|
64
683
|
|
|
65
|
-
const
|
|
66
|
-
columnsData?.shared_filter?.map(
|
|
684
|
+
const sharedFilters: FilterOperationListProps[] =
|
|
685
|
+
columnsData?.shared_filter?.map(SharedFilter) ?? [];
|
|
67
686
|
|
|
68
687
|
// Reset on unmount
|
|
69
688
|
useEffect(() => {
|
|
@@ -81,6 +700,7 @@ const SavedFilter = ({
|
|
|
81
700
|
...(prev?.saved_filters ?? {}),
|
|
82
701
|
selectedId: "",
|
|
83
702
|
selectedName: "",
|
|
703
|
+
description: "",
|
|
84
704
|
selectedCode: "",
|
|
85
705
|
shareWithTeam: undefined,
|
|
86
706
|
allowTeamEdit: undefined,
|
|
@@ -91,6 +711,8 @@ const SavedFilter = ({
|
|
|
91
711
|
};
|
|
92
712
|
}, []);
|
|
93
713
|
|
|
714
|
+
// APPLY FILTER
|
|
715
|
+
|
|
94
716
|
const applyFilterStates = (filter: FilterOperationListProps) => {
|
|
95
717
|
const newFilterMaster = {
|
|
96
718
|
...filterMaster,
|
|
@@ -98,6 +720,7 @@ const SavedFilter = ({
|
|
|
98
720
|
...(filterMaster?.saved_filters ?? {}),
|
|
99
721
|
selectedId: filter.value,
|
|
100
722
|
selectedName: filter.label,
|
|
723
|
+
description: filter.description,
|
|
101
724
|
selectedCode: filter.code,
|
|
102
725
|
shareWithTeam: filter.is_shared,
|
|
103
726
|
allowTeamEdit: filter.is_editable,
|
|
@@ -128,30 +751,86 @@ const SavedFilter = ({
|
|
|
128
751
|
applyFilterStates(filter);
|
|
129
752
|
};
|
|
130
753
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
754
|
+
const [openAccordion, setOpenAccordion] = useState<"my" | "shared">("my");
|
|
755
|
+
|
|
756
|
+
// RENDER: MY FILTERS
|
|
757
|
+
|
|
758
|
+
const renderMyFilters = (source: FilterOperationListProps[]) =>
|
|
759
|
+
source.length === 0 ? (
|
|
760
|
+
<Typography>No My Filters</Typography>
|
|
761
|
+
) : (
|
|
762
|
+
<List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
|
763
|
+
{source
|
|
764
|
+
.filter((f) =>
|
|
765
|
+
f.label?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
766
|
+
)
|
|
767
|
+
.map((filter) => (
|
|
768
|
+
<ListItem
|
|
769
|
+
key={filter.value}
|
|
770
|
+
sx={{
|
|
771
|
+
cursor: "pointer",
|
|
772
|
+
borderRadius: "8px",
|
|
773
|
+
bgcolor: "#f2f6f8ff",
|
|
774
|
+
display: "flex",
|
|
775
|
+
justifyContent: "space-between",
|
|
776
|
+
gap: 1,
|
|
777
|
+
alignItems: "center",
|
|
778
|
+
"&:hover .action-icons": {
|
|
779
|
+
opacity: 1,
|
|
780
|
+
visibility: "visible",
|
|
781
|
+
},
|
|
782
|
+
}}
|
|
783
|
+
onClick={() => handleApplyFilter(filter)}
|
|
784
|
+
>
|
|
785
|
+
{filter.value === filterMaster?.saved_filters?.selectedId && (
|
|
786
|
+
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
787
|
+
<CheckBox />
|
|
788
|
+
</Box>
|
|
789
|
+
)}
|
|
790
|
+
|
|
791
|
+
<ListItemText primary={filter.label} />
|
|
792
|
+
|
|
793
|
+
<Box
|
|
794
|
+
onClick={(e) => e.stopPropagation()}
|
|
795
|
+
className="action-icons"
|
|
796
|
+
sx={{
|
|
797
|
+
display: "flex",
|
|
798
|
+
gap: 1,
|
|
799
|
+
opacity: 0,
|
|
800
|
+
visibility: "hidden",
|
|
801
|
+
transition: "opacity 0.2s ease, visibility 0.2s ease",
|
|
802
|
+
}}
|
|
803
|
+
>
|
|
804
|
+
<IconButton
|
|
805
|
+
size="large"
|
|
806
|
+
onClick={() => handleListItemClick(filter)}
|
|
807
|
+
>
|
|
808
|
+
<EditIcon />
|
|
809
|
+
</IconButton>
|
|
810
|
+
|
|
811
|
+
<IconButton
|
|
812
|
+
size="small"
|
|
813
|
+
onClick={() => {
|
|
814
|
+
setFilterToDelete(filter);
|
|
815
|
+
setDeleteFilterModalOpen?.(true);
|
|
816
|
+
}}
|
|
817
|
+
>
|
|
818
|
+
<DeleteIcon />
|
|
819
|
+
</IconButton>
|
|
820
|
+
</Box>
|
|
821
|
+
</ListItem>
|
|
822
|
+
))}
|
|
823
|
+
</List>
|
|
824
|
+
);
|
|
825
|
+
|
|
826
|
+
// ----------------------------------------
|
|
827
|
+
// RENDER: SHARED FILTERS
|
|
828
|
+
// ----------------------------------------
|
|
829
|
+
const renderSharedFilters = (source: FilterOperationListProps[]) =>
|
|
145
830
|
source.length === 0 ? (
|
|
146
|
-
<Typography>
|
|
831
|
+
<Typography>No Shared Filters</Typography>
|
|
147
832
|
) : (
|
|
148
|
-
<List
|
|
149
|
-
sx={{
|
|
150
|
-
display: "flex",
|
|
151
|
-
flexDirection: "column",
|
|
152
|
-
gap: 1,
|
|
153
|
-
}}
|
|
154
|
-
>
|
|
833
|
+
<List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
|
155
834
|
{source
|
|
156
835
|
.filter((f) =>
|
|
157
836
|
f.label?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
@@ -161,11 +840,6 @@ const SavedFilter = ({
|
|
|
161
840
|
key={filter.value}
|
|
162
841
|
sx={{
|
|
163
842
|
cursor: "pointer",
|
|
164
|
-
// border:
|
|
165
|
-
// filter.value ===
|
|
166
|
-
// tableStates?.filterMaster?.saved_filters?.selectedId
|
|
167
|
-
// ? `3px solid #7a5af8`
|
|
168
|
-
// : "1px solid #C5C5C5",
|
|
169
843
|
borderRadius: "8px",
|
|
170
844
|
bgcolor: "#f2f6f8ff",
|
|
171
845
|
display: "flex",
|
|
@@ -179,8 +853,7 @@ const SavedFilter = ({
|
|
|
179
853
|
}}
|
|
180
854
|
onClick={() => handleApplyFilter(filter)}
|
|
181
855
|
>
|
|
182
|
-
{filter.value ===
|
|
183
|
-
tableStates?.filterMaster?.saved_filters?.selectedId && (
|
|
856
|
+
{filter.value === filterMaster?.saved_filters?.selectedId && (
|
|
184
857
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
185
858
|
<CheckBox />
|
|
186
859
|
</Box>
|
|
@@ -196,14 +869,10 @@ const SavedFilter = ({
|
|
|
196
869
|
gap: 1,
|
|
197
870
|
opacity: 0,
|
|
198
871
|
visibility: "hidden",
|
|
199
|
-
transition: "
|
|
872
|
+
transition: "opacity 0.2s ease, visibility 0.2s ease",
|
|
200
873
|
}}
|
|
201
874
|
>
|
|
202
|
-
{
|
|
203
|
-
* - For shared lists: only if filter.is_editable === true
|
|
204
|
-
* - For non-shared lists: show (keeps previous behavior)
|
|
205
|
-
*/}
|
|
206
|
-
{(!isSharedList || filter.is_editable === true) && (
|
|
875
|
+
{(filter.is_editable || filter.is_owner) && (
|
|
207
876
|
<IconButton
|
|
208
877
|
size="large"
|
|
209
878
|
onClick={() => handleListItemClick(filter)}
|
|
@@ -211,7 +880,7 @@ const SavedFilter = ({
|
|
|
211
880
|
<EditIcon />
|
|
212
881
|
</IconButton>
|
|
213
882
|
)}
|
|
214
|
-
{
|
|
883
|
+
{filter.is_owner && (
|
|
215
884
|
<IconButton
|
|
216
885
|
size="small"
|
|
217
886
|
onClick={() => {
|
|
@@ -228,17 +897,14 @@ const SavedFilter = ({
|
|
|
228
897
|
</List>
|
|
229
898
|
);
|
|
230
899
|
|
|
900
|
+
// ----------------------------------------
|
|
901
|
+
// RENDER MAIN COMPONENT
|
|
902
|
+
// ----------------------------------------
|
|
231
903
|
return (
|
|
232
|
-
<Box
|
|
233
|
-
// sx={{
|
|
234
|
-
// ...filterStyles.filterMainComponentWrapper,
|
|
235
|
-
// ...filterStyles.scrollbarCustom,
|
|
236
|
-
// }}
|
|
237
|
-
className="saved-filter-component-wrapper"
|
|
238
|
-
>
|
|
904
|
+
<Box className="saved-filter-component-wrapper">
|
|
239
905
|
{!editMode && (
|
|
240
906
|
<>
|
|
241
|
-
{/* Search
|
|
907
|
+
{/* Search */}
|
|
242
908
|
<Box sx={{ mb: 2 }}>
|
|
243
909
|
<CustomSearch
|
|
244
910
|
value={searchTerm}
|
|
@@ -247,7 +913,7 @@ const SavedFilter = ({
|
|
|
247
913
|
/>
|
|
248
914
|
</Box>
|
|
249
915
|
|
|
250
|
-
{/* ---- My Filters
|
|
916
|
+
{/* ---- My Filters ---- */}
|
|
251
917
|
<Box
|
|
252
918
|
sx={{
|
|
253
919
|
background: "#fff",
|
|
@@ -257,7 +923,14 @@ const SavedFilter = ({
|
|
|
257
923
|
overflow: "hidden",
|
|
258
924
|
}}
|
|
259
925
|
>
|
|
260
|
-
<Accordion
|
|
926
|
+
<Accordion
|
|
927
|
+
disableGutters
|
|
928
|
+
elevation={0}
|
|
929
|
+
expanded={openAccordion === "my"}
|
|
930
|
+
onChange={() =>
|
|
931
|
+
setOpenAccordion(openAccordion === "my" ? "shared" : "my")
|
|
932
|
+
}
|
|
933
|
+
>
|
|
261
934
|
<AccordionSummary
|
|
262
935
|
expandIcon={<ExpandMoreIcon fontSize="small" />}
|
|
263
936
|
>
|
|
@@ -272,29 +945,35 @@ const SavedFilter = ({
|
|
|
272
945
|
scrollbarWidth: "thin",
|
|
273
946
|
}}
|
|
274
947
|
>
|
|
275
|
-
{
|
|
948
|
+
{renderMyFilters(myFilters)}
|
|
276
949
|
</AccordionDetails>
|
|
277
950
|
</Accordion>
|
|
278
951
|
</Box>
|
|
279
952
|
|
|
280
|
-
{/* ---- Shared Filters
|
|
953
|
+
{/* ---- Shared Filters ---- */}
|
|
281
954
|
<Box
|
|
282
955
|
sx={{
|
|
283
956
|
background: "#fff",
|
|
284
957
|
borderRadius: "12px",
|
|
285
|
-
border: "1px solid #eee",
|
|
286
|
-
mb: 2,
|
|
287
|
-
overflow: "hidden",
|
|
958
|
+
// border: "1px solid "#eee",
|
|
959
|
+
// mb: 2,
|
|
960
|
+
// overflow: "hidden",
|
|
288
961
|
}}
|
|
289
962
|
>
|
|
290
|
-
<Accordion
|
|
963
|
+
<Accordion
|
|
964
|
+
disableGutters
|
|
965
|
+
elevation={0}
|
|
966
|
+
expanded={openAccordion === "shared"}
|
|
967
|
+
onChange={() =>
|
|
968
|
+
setOpenAccordion(openAccordion === "shared" ? "my" : "shared")
|
|
969
|
+
}
|
|
970
|
+
>
|
|
291
971
|
<AccordionSummary
|
|
292
972
|
expandIcon={<ExpandMoreIcon fontSize="small" />}
|
|
293
973
|
>
|
|
294
974
|
<Typography fontWeight={600}>Shared Filters</Typography>
|
|
295
975
|
</AccordionSummary>
|
|
296
976
|
<Divider sx={{ width: "100%" }} />
|
|
297
|
-
|
|
298
977
|
<AccordionDetails
|
|
299
978
|
sx={{
|
|
300
979
|
p: "9px",
|
|
@@ -303,7 +982,7 @@ const SavedFilter = ({
|
|
|
303
982
|
scrollbarWidth: "thin",
|
|
304
983
|
}}
|
|
305
984
|
>
|
|
306
|
-
{
|
|
985
|
+
{renderSharedFilters(sharedFilters)}
|
|
307
986
|
</AccordionDetails>
|
|
308
987
|
</Accordion>
|
|
309
988
|
</Box>
|