rez-table-listing-mui 0.0.27 → 1.0.27
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.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -2
- package/src/App.tsx +4 -9
- package/src/components/filter/components/forms/components/Attributes-select.tsx +26 -16
- package/src/components/index-table.tsx +55 -57
- package/src/libs/hooks/useEntityTableAPI.tsx +7 -5
- package/src/libs/utils/apiColumn.ts +4 -4
- package/src/types/filter.ts +1 -9
package/src/App.tsx
CHANGED
|
@@ -49,11 +49,6 @@ function App() {
|
|
|
49
49
|
//API FOR UPDATE FILTER
|
|
50
50
|
const { updateMutation } = useUpdateFilterAPI();
|
|
51
51
|
|
|
52
|
-
// const { dropdownData } = useCommonDropdownAPI(
|
|
53
|
-
// metaQuery.data,
|
|
54
|
-
// tableStates.filterMaster?.attributes?.selected
|
|
55
|
-
// );
|
|
56
|
-
|
|
57
52
|
const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
|
|
58
53
|
|
|
59
54
|
useEffect(() => {
|
|
@@ -79,7 +74,7 @@ function App() {
|
|
|
79
74
|
|
|
80
75
|
const enableServerSideSorting = false;
|
|
81
76
|
|
|
82
|
-
const { tableData } = useEntityTableAPI({
|
|
77
|
+
const { tableData, isTableDataPending } = useEntityTableAPI({
|
|
83
78
|
page: 0,
|
|
84
79
|
size: 50,
|
|
85
80
|
entity_type: "UPR",
|
|
@@ -224,8 +219,8 @@ function App() {
|
|
|
224
219
|
enableServerSideSorting: enableServerSideSorting,
|
|
225
220
|
}}
|
|
226
221
|
loadingOptions={{
|
|
227
|
-
isLoading:
|
|
228
|
-
loaderText: "Loading, Please wait...",
|
|
222
|
+
isLoading: isTableDataPending || detailsQuery.isPending,
|
|
223
|
+
// loaderText: "Loading, Please wait...",
|
|
229
224
|
}}
|
|
230
225
|
topbarOptions={{
|
|
231
226
|
tableStates,
|
|
@@ -244,9 +239,9 @@ function App() {
|
|
|
244
239
|
showFilterToggle: true,
|
|
245
240
|
filterOptions: {
|
|
246
241
|
tableStates: tableStates,
|
|
242
|
+
tableData: tableData,
|
|
247
243
|
columnsData: metaQuery.data || [],
|
|
248
244
|
defaultFilters: detailsQuery.data || [],
|
|
249
|
-
tableData: tableData,
|
|
250
245
|
dropdownData: dropdownData || [],
|
|
251
246
|
onDeleteFilter: handleRemoveFilter,
|
|
252
247
|
onSaveFilter: handleSaveFilter,
|
|
@@ -27,6 +27,23 @@ const SelectAttribute = ({
|
|
|
27
27
|
|
|
28
28
|
const selectedAttribute = filterMaster?.attributes?.selected;
|
|
29
29
|
|
|
30
|
+
// Get the current filter value to set radio button state
|
|
31
|
+
const currentFilterValue = useMemo(() => {
|
|
32
|
+
if (!selectedAttribute) return "";
|
|
33
|
+
|
|
34
|
+
const matchingColumn = columnsData.column_list.find(
|
|
35
|
+
(column) => column.datasource_list === selectedAttribute
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
if (!matchingColumn) return "";
|
|
39
|
+
|
|
40
|
+
const existingFilter = filters.find(
|
|
41
|
+
(filter) => filter.filter_attribute === matchingColumn.attribute_key
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
return existingFilter?.filter_value || "";
|
|
45
|
+
}, [selectedAttribute, filters, columnsData]);
|
|
46
|
+
|
|
30
47
|
const handleSelectChange = (event: SelectChangeEvent) => {
|
|
31
48
|
const attributeKey = event.target.value as string;
|
|
32
49
|
|
|
@@ -37,6 +54,7 @@ const SelectAttribute = ({
|
|
|
37
54
|
attributes: {
|
|
38
55
|
...prev?.attributes,
|
|
39
56
|
selected: attributeKey,
|
|
57
|
+
radio: "", // Reset radio selection when changing attribute
|
|
40
58
|
},
|
|
41
59
|
} as FilterMasterStateProps)
|
|
42
60
|
);
|
|
@@ -44,8 +62,9 @@ const SelectAttribute = ({
|
|
|
44
62
|
|
|
45
63
|
const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
46
64
|
event.preventDefault();
|
|
47
|
-
|
|
65
|
+
|
|
48
66
|
const selectedValue = event.target.value;
|
|
67
|
+
|
|
49
68
|
setFilterMaster(
|
|
50
69
|
(prev) =>
|
|
51
70
|
({
|
|
@@ -73,19 +92,7 @@ const SelectAttribute = ({
|
|
|
73
92
|
filter_value: selectedValue,
|
|
74
93
|
};
|
|
75
94
|
|
|
76
|
-
|
|
77
|
-
(filter) => filter.filter_attribute === matchingColumn.attribute_key
|
|
78
|
-
);
|
|
79
|
-
|
|
80
|
-
let updatedFilters;
|
|
81
|
-
if (existingFilterIndex !== -1) {
|
|
82
|
-
updatedFilters = [...filters];
|
|
83
|
-
updatedFilters[existingFilterIndex] = newFilter;
|
|
84
|
-
} else {
|
|
85
|
-
updatedFilters = [...filters, newFilter];
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
setFilters(updatedFilters);
|
|
95
|
+
setFilters([newFilter]);
|
|
89
96
|
}
|
|
90
97
|
}
|
|
91
98
|
};
|
|
@@ -104,7 +111,7 @@ const SelectAttribute = ({
|
|
|
104
111
|
<Select
|
|
105
112
|
value={selectedAttribute || ""}
|
|
106
113
|
onChange={handleSelectChange}
|
|
107
|
-
displayEmpty
|
|
114
|
+
displayEmpty
|
|
108
115
|
renderValue={(selected) => {
|
|
109
116
|
if (!selected) {
|
|
110
117
|
return <span>Select Attribute</span>;
|
|
@@ -154,7 +161,10 @@ const SelectAttribute = ({
|
|
|
154
161
|
{dropdownData && (
|
|
155
162
|
<Box sx={{ mt: 2 }}>
|
|
156
163
|
<FormControl>
|
|
157
|
-
<RadioGroup
|
|
164
|
+
<RadioGroup
|
|
165
|
+
onChange={handleRadioChange}
|
|
166
|
+
value={currentFilterValue} // Set the value from current filter
|
|
167
|
+
>
|
|
158
168
|
{selectedAttributeOptions
|
|
159
169
|
?.filter((option) => {
|
|
160
170
|
if (!searchTerm) return true;
|
|
@@ -243,6 +243,30 @@ function TableWrapper<T>({
|
|
|
243
243
|
|
|
244
244
|
return (
|
|
245
245
|
<div className="ts__table__container" ref={tableRef}>
|
|
246
|
+
{enableTopbar && (
|
|
247
|
+
<Topbar
|
|
248
|
+
table={table}
|
|
249
|
+
topbarOptions={craftTopbarOptions}
|
|
250
|
+
isCompactTable={isCompactTable}
|
|
251
|
+
setIsCompactTable={setIsCompactTable}
|
|
252
|
+
isFullscreen={isFullscreen}
|
|
253
|
+
fullscreenToggle={handleFullscreenToggle}
|
|
254
|
+
paginationComponent={
|
|
255
|
+
craftPaginationOptions?.showPagination === true &&
|
|
256
|
+
craftPaginationOptions?.paginationPosition === "top" ? (
|
|
257
|
+
<DefaultPagination
|
|
258
|
+
table={table}
|
|
259
|
+
rowsPerPageArray={rowsPerPageArray}
|
|
260
|
+
paginationOptions={craftPaginationOptions}
|
|
261
|
+
/>
|
|
262
|
+
) : null
|
|
263
|
+
}
|
|
264
|
+
// searchValue={searchValue} // 👈 new
|
|
265
|
+
// onSearchChange={onSearchChange}
|
|
266
|
+
tableStates={tableStates}
|
|
267
|
+
/>
|
|
268
|
+
)}
|
|
269
|
+
|
|
246
270
|
{isLoading ? (
|
|
247
271
|
loadingComponent ?? (
|
|
248
272
|
<div className="ts__loader">
|
|
@@ -251,70 +275,44 @@ function TableWrapper<T>({
|
|
|
251
275
|
</div>
|
|
252
276
|
)
|
|
253
277
|
) : (
|
|
254
|
-
|
|
255
|
-
{
|
|
256
|
-
|
|
278
|
+
<div
|
|
279
|
+
// {...tableWrapperProps}
|
|
280
|
+
className={`ts__table__wrapper ${
|
|
281
|
+
isFullscreen ? "is-fullscreen" : ""
|
|
282
|
+
}`}
|
|
283
|
+
>
|
|
284
|
+
{enableColumnReordering ? (
|
|
285
|
+
<TableDND
|
|
257
286
|
table={table}
|
|
258
|
-
|
|
287
|
+
columnOrder={columnOrder}
|
|
288
|
+
featureOptions={craftFeatureOptions}
|
|
289
|
+
NestedComponent={nestedComponent}
|
|
290
|
+
setColumnOrder={setColumnOrder}
|
|
259
291
|
isCompactTable={isCompactTable}
|
|
260
|
-
setIsCompactTable={setIsCompactTable}
|
|
261
|
-
isFullscreen={isFullscreen}
|
|
262
|
-
fullscreenToggle={handleFullscreenToggle}
|
|
263
|
-
paginationComponent={
|
|
264
|
-
craftPaginationOptions?.showPagination === true &&
|
|
265
|
-
craftPaginationOptions?.paginationPosition === "top" ? (
|
|
266
|
-
<DefaultPagination
|
|
267
|
-
table={table}
|
|
268
|
-
rowsPerPageArray={rowsPerPageArray}
|
|
269
|
-
paginationOptions={craftPaginationOptions}
|
|
270
|
-
/>
|
|
271
|
-
) : null
|
|
272
|
-
}
|
|
273
|
-
// searchValue={searchValue} // 👈 new
|
|
274
|
-
// onSearchChange={onSearchChange}
|
|
275
292
|
tableStates={tableStates}
|
|
276
293
|
/>
|
|
277
|
-
)
|
|
278
|
-
|
|
279
|
-
<div
|
|
280
|
-
// {...tableWrapperProps}
|
|
281
|
-
className={`ts__table__wrapper ${
|
|
282
|
-
isFullscreen ? "is-fullscreen" : ""
|
|
283
|
-
}`}
|
|
284
|
-
>
|
|
285
|
-
{enableColumnReordering ? (
|
|
286
|
-
<TableDND
|
|
287
|
-
table={table}
|
|
288
|
-
columnOrder={columnOrder}
|
|
289
|
-
featureOptions={craftFeatureOptions}
|
|
290
|
-
NestedComponent={nestedComponent}
|
|
291
|
-
setColumnOrder={setColumnOrder}
|
|
292
|
-
isCompactTable={isCompactTable}
|
|
293
|
-
tableStates={tableStates}
|
|
294
|
-
/>
|
|
295
|
-
) : (
|
|
296
|
-
<Table
|
|
297
|
-
table={table}
|
|
298
|
-
featureOptions={craftFeatureOptions}
|
|
299
|
-
NestedComponent={nestedComponent}
|
|
300
|
-
columnOrder={columnOrder}
|
|
301
|
-
setColumnOrder={setColumnOrder}
|
|
302
|
-
isCompactTable={isCompactTable}
|
|
303
|
-
tableStates={tableStates}
|
|
304
|
-
/>
|
|
305
|
-
)}
|
|
306
|
-
</div>
|
|
307
|
-
|
|
308
|
-
{craftPaginationOptions?.showPagination === true &&
|
|
309
|
-
craftPaginationOptions?.paginationPosition === "bottom" ? (
|
|
310
|
-
<DefaultPagination
|
|
294
|
+
) : (
|
|
295
|
+
<Table
|
|
311
296
|
table={table}
|
|
312
|
-
|
|
313
|
-
|
|
297
|
+
featureOptions={craftFeatureOptions}
|
|
298
|
+
NestedComponent={nestedComponent}
|
|
299
|
+
columnOrder={columnOrder}
|
|
300
|
+
setColumnOrder={setColumnOrder}
|
|
301
|
+
isCompactTable={isCompactTable}
|
|
302
|
+
tableStates={tableStates}
|
|
314
303
|
/>
|
|
315
|
-
)
|
|
316
|
-
|
|
304
|
+
)}
|
|
305
|
+
</div>
|
|
317
306
|
)}
|
|
307
|
+
|
|
308
|
+
{craftPaginationOptions?.showPagination === true &&
|
|
309
|
+
craftPaginationOptions?.paginationPosition === "bottom" ? (
|
|
310
|
+
<DefaultPagination
|
|
311
|
+
table={table}
|
|
312
|
+
rowsPerPageArray={rowsPerPageArray}
|
|
313
|
+
paginationOptions={craftPaginationOptions}
|
|
314
|
+
/>
|
|
315
|
+
) : null}
|
|
318
316
|
</div>
|
|
319
317
|
);
|
|
320
318
|
}
|
|
@@ -166,11 +166,13 @@ export const useCommonDropdownAPI = (
|
|
|
166
166
|
|
|
167
167
|
// Step 2: Use useQueries to fetch them all in parallel
|
|
168
168
|
const dropdownResults = useQueries({
|
|
169
|
-
queries: dropdownConfigs.map((cfg) =>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
169
|
+
queries: dropdownConfigs.map((cfg) => {
|
|
170
|
+
return {
|
|
171
|
+
queryKey: ["commonDropdown", cfg.dataSourceType],
|
|
172
|
+
queryFn: () => commonGetDropdownDataAPI(cfg.dataSourceType, null),
|
|
173
|
+
enabled: !!cfg.dataSourceType,
|
|
174
|
+
};
|
|
175
|
+
}),
|
|
174
176
|
});
|
|
175
177
|
|
|
176
178
|
// Step 3: Map results to keys
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { api } from "./common";
|
|
2
2
|
import {
|
|
3
|
-
|
|
3
|
+
createSavedFilterPayload,
|
|
4
4
|
deleteSavedFilterPayload,
|
|
5
5
|
updateSavedFilterPayload,
|
|
6
6
|
} from "../../types/filter";
|
|
@@ -52,13 +52,13 @@ export const fetchDetailsByFilterId = async (filterId: string) => {
|
|
|
52
52
|
|
|
53
53
|
export const commonGetDropdownDataAPI = async (
|
|
54
54
|
entity_type: string,
|
|
55
|
-
organization_id?: string | null,
|
|
55
|
+
// organization_id?: string | null,
|
|
56
56
|
data?: any
|
|
57
57
|
) => {
|
|
58
58
|
try {
|
|
59
59
|
const requestBody = {
|
|
60
60
|
status: "ACTIVE",
|
|
61
|
-
organization_id:
|
|
61
|
+
organization_id: 1,
|
|
62
62
|
...data,
|
|
63
63
|
};
|
|
64
64
|
|
|
@@ -76,7 +76,7 @@ export const commonGetDropdownDataAPI = async (
|
|
|
76
76
|
|
|
77
77
|
export const createSavedFilter = async (
|
|
78
78
|
entity_type: string,
|
|
79
|
-
payload:
|
|
79
|
+
payload: createSavedFilterPayload
|
|
80
80
|
) => {
|
|
81
81
|
try {
|
|
82
82
|
const response = await api.post(
|
package/src/types/filter.ts
CHANGED
|
@@ -124,7 +124,7 @@ interface FilterDetail {
|
|
|
124
124
|
filter_value: string | string[];
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
export interface
|
|
127
|
+
export interface createSavedFilterPayload {
|
|
128
128
|
name: string;
|
|
129
129
|
organization_id?: number;
|
|
130
130
|
enterprise_id?: number;
|
|
@@ -155,14 +155,6 @@ export interface updateSavedFilterPayload {
|
|
|
155
155
|
filterDetails: FilterDetail[];
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
-
export interface deleteSavedFilterPayload {
|
|
159
|
-
name: string;
|
|
160
|
-
is_default: boolean;
|
|
161
|
-
id: string | number;
|
|
162
|
-
status?: string;
|
|
163
|
-
entity_type: string;
|
|
164
|
-
mapped_entity_type: string;
|
|
165
|
-
}
|
|
166
158
|
interface FilterDetail {
|
|
167
159
|
filter_attribute: string;
|
|
168
160
|
filter_operator: string;
|