bolesa-apitables 0.1.0
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/README.md +114 -0
- package/dist/index.cjs +2361 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +329 -0
- package/dist/index.d.ts +329 -0
- package/dist/index.js +2308 -0
- package/dist/index.js.map +1 -0
- package/package.json +87 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,2361 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React4 = require('react');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var tailwindMerge = require('tailwind-merge');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
var reactRedux = require('react-redux');
|
|
8
|
+
var reactHookForm = require('react-hook-form');
|
|
9
|
+
var toolkit = require('@reduxjs/toolkit');
|
|
10
|
+
var io = require('react-icons/io');
|
|
11
|
+
var reactPhotoView = require('react-photo-view');
|
|
12
|
+
require('react-photo-view/dist/react-photo-view.css');
|
|
13
|
+
var pi = require('react-icons/pi');
|
|
14
|
+
var io5 = require('react-icons/io5');
|
|
15
|
+
var md = require('react-icons/md');
|
|
16
|
+
var im = require('react-icons/im');
|
|
17
|
+
var sonner = require('sonner');
|
|
18
|
+
var lucideReact = require('lucide-react');
|
|
19
|
+
var dateFns = require('date-fns');
|
|
20
|
+
var DataTable = require('react-data-table-component');
|
|
21
|
+
var hi2 = require('react-icons/hi2');
|
|
22
|
+
var fa = require('react-icons/fa');
|
|
23
|
+
var fi = require('react-icons/fi');
|
|
24
|
+
var ri = require('react-icons/ri');
|
|
25
|
+
var parse = require('html-react-parser');
|
|
26
|
+
var axios = require('axios');
|
|
27
|
+
|
|
28
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
29
|
+
|
|
30
|
+
var React4__default = /*#__PURE__*/_interopDefault(React4);
|
|
31
|
+
var DataTable__default = /*#__PURE__*/_interopDefault(DataTable);
|
|
32
|
+
var parse__default = /*#__PURE__*/_interopDefault(parse);
|
|
33
|
+
var axios__default = /*#__PURE__*/_interopDefault(axios);
|
|
34
|
+
|
|
35
|
+
var ApiTablesConfigContext = React4.createContext(null);
|
|
36
|
+
var runtimeConfig = null;
|
|
37
|
+
function getApiTablesRuntimeConfig() {
|
|
38
|
+
return runtimeConfig;
|
|
39
|
+
}
|
|
40
|
+
function ApiTablesHostProvider({ config, children }) {
|
|
41
|
+
const merged = {
|
|
42
|
+
cn: (...classes) => tailwindMerge.twMerge(clsx.clsx(classes)),
|
|
43
|
+
storage: {
|
|
44
|
+
get: (key) => {
|
|
45
|
+
try {
|
|
46
|
+
const raw = localStorage.getItem(key);
|
|
47
|
+
return raw ? JSON.parse(raw) : null;
|
|
48
|
+
} catch {
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
set: (key, value) => localStorage.setItem(key, JSON.stringify(value))
|
|
53
|
+
},
|
|
54
|
+
...config,
|
|
55
|
+
components: config.components
|
|
56
|
+
};
|
|
57
|
+
runtimeConfig = merged;
|
|
58
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ApiTablesConfigContext.Provider, { value: merged, children });
|
|
59
|
+
}
|
|
60
|
+
function useApiTablesConfig() {
|
|
61
|
+
const config = React4.useContext(ApiTablesConfigContext);
|
|
62
|
+
if (!config) {
|
|
63
|
+
throw new Error("useApiTablesConfig must be used within <ApiTablesHostProvider>");
|
|
64
|
+
}
|
|
65
|
+
return config;
|
|
66
|
+
}
|
|
67
|
+
function useApiTablesComponent(name) {
|
|
68
|
+
const { components } = useApiTablesConfig();
|
|
69
|
+
const component = components[name];
|
|
70
|
+
if (!component) {
|
|
71
|
+
throw new Error(
|
|
72
|
+
`ApiTablesConfig.components.${String(name)} is required but was not provided`
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
return component;
|
|
76
|
+
}
|
|
77
|
+
var initialState = {
|
|
78
|
+
tableColumns: [],
|
|
79
|
+
visibleColumns: [],
|
|
80
|
+
selectedRows: [],
|
|
81
|
+
selectedIds: [],
|
|
82
|
+
toggledClearRows: false,
|
|
83
|
+
rowSelectedModal: null
|
|
84
|
+
};
|
|
85
|
+
var tableColumnsSlice = toolkit.createSlice({
|
|
86
|
+
name: "tableColumns",
|
|
87
|
+
initialState,
|
|
88
|
+
reducers: {
|
|
89
|
+
_setSelectedRows: (state, action) => {
|
|
90
|
+
state.selectedRows = action?.payload;
|
|
91
|
+
state.selectedIds = action?.payload?.length > 0 ? action?.payload?.map((row) => row?.id) : [];
|
|
92
|
+
},
|
|
93
|
+
_setToggledClearRow: (state, action) => {
|
|
94
|
+
state.toggledClearRows = action?.payload;
|
|
95
|
+
},
|
|
96
|
+
_setVisibleColumns: (state, action) => {
|
|
97
|
+
state.visibleColumns = action?.payload;
|
|
98
|
+
state.tableColumns = state.tableColumns?.map((col) => ({
|
|
99
|
+
...col,
|
|
100
|
+
omit: action?.payload?.indexOf(col?.data_src) === -1
|
|
101
|
+
}));
|
|
102
|
+
},
|
|
103
|
+
_setRowSelectedModal: (state, action) => {
|
|
104
|
+
state.rowSelectedModal = action?.payload;
|
|
105
|
+
},
|
|
106
|
+
_setTableColumns: (state, action) => {
|
|
107
|
+
state.tableColumns = action?.payload?.update ? action?.payload?.cols : formatTableColumns(action?.payload?.cols, action?.payload?.tbData);
|
|
108
|
+
},
|
|
109
|
+
_resetTableColumns: (state) => {
|
|
110
|
+
state.tableColumns = [];
|
|
111
|
+
state.visibleColumns = [];
|
|
112
|
+
state.selectedRows = [];
|
|
113
|
+
state.selectedIds = [];
|
|
114
|
+
state.toggledClearRows = false;
|
|
115
|
+
state.rowSelectedModal = null;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
var { _setSelectedRows, _setToggledClearRow, _setVisibleColumns, _setRowSelectedModal, _setTableColumns, _resetTableColumns } = tableColumnsSlice.actions;
|
|
120
|
+
var tableColumnsSlice_default = tableColumnsSlice.reducer;
|
|
121
|
+
|
|
122
|
+
// src/shims/next-intl.ts
|
|
123
|
+
function useTranslations(namespace) {
|
|
124
|
+
const translate = getApiTablesRuntimeConfig()?.useTranslations?.(namespace);
|
|
125
|
+
return translate ?? ((key) => key);
|
|
126
|
+
}
|
|
127
|
+
function Link(props) {
|
|
128
|
+
const { Link: HostLink } = useApiTablesConfig();
|
|
129
|
+
if (!HostLink) {
|
|
130
|
+
throw new Error("ApiTablesConfig.Link is required for redirect row actions");
|
|
131
|
+
}
|
|
132
|
+
const Comp = HostLink;
|
|
133
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props });
|
|
134
|
+
}
|
|
135
|
+
function createHostComponent(name) {
|
|
136
|
+
const HostComponent = (props) => {
|
|
137
|
+
const { components } = useApiTablesConfig();
|
|
138
|
+
const Comp = components[name];
|
|
139
|
+
if (!Comp) {
|
|
140
|
+
throw new Error(`ApiTablesConfig.components.${name} is required`);
|
|
141
|
+
}
|
|
142
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props });
|
|
143
|
+
};
|
|
144
|
+
HostComponent.displayName = `ApiTablesHost(${name})`;
|
|
145
|
+
return HostComponent;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// src/shims/components.ts
|
|
149
|
+
var Button = createHostComponent("Button");
|
|
150
|
+
var Badge = createHostComponent("Badge");
|
|
151
|
+
createHostComponent("Card");
|
|
152
|
+
var Skeleton = createHostComponent("Skeleton");
|
|
153
|
+
var Switch = createHostComponent("Switch");
|
|
154
|
+
var Label = createHostComponent("Label");
|
|
155
|
+
var Input = createHostComponent("Input");
|
|
156
|
+
createHostComponent("InputWrapper");
|
|
157
|
+
var Checkbox = createHostComponent("Checkbox");
|
|
158
|
+
var Popover = createHostComponent("Popover");
|
|
159
|
+
var PopoverContent = createHostComponent("PopoverContent");
|
|
160
|
+
var PopoverTrigger = createHostComponent("PopoverTrigger");
|
|
161
|
+
var Select = createHostComponent("Select");
|
|
162
|
+
var SelectContent = createHostComponent("SelectContent");
|
|
163
|
+
var SelectGroup = createHostComponent("SelectGroup");
|
|
164
|
+
var SelectItem = createHostComponent("SelectItem");
|
|
165
|
+
var SelectTrigger = createHostComponent("SelectTrigger");
|
|
166
|
+
var SelectValue = createHostComponent("SelectValue");
|
|
167
|
+
var Tooltip = createHostComponent("Tooltip");
|
|
168
|
+
var TooltipContent = createHostComponent("TooltipContent");
|
|
169
|
+
var TooltipTrigger = createHostComponent("TooltipTrigger");
|
|
170
|
+
var Sheet = createHostComponent("Sheet");
|
|
171
|
+
var SheetContent = createHostComponent("SheetContent");
|
|
172
|
+
createHostComponent("SheetDescription");
|
|
173
|
+
var SheetHeader = createHostComponent("SheetHeader");
|
|
174
|
+
var SheetTitle = createHostComponent("SheetTitle");
|
|
175
|
+
var SheetTrigger = createHostComponent("SheetTrigger");
|
|
176
|
+
var DropdownMenu = createHostComponent("DropdownMenu");
|
|
177
|
+
var DropdownMenuContent = createHostComponent("DropdownMenuContent");
|
|
178
|
+
var DropdownMenuItem = createHostComponent("DropdownMenuItem");
|
|
179
|
+
var DropdownMenuTrigger = createHostComponent("DropdownMenuTrigger");
|
|
180
|
+
var Table = createHostComponent("Table");
|
|
181
|
+
var TableBody = createHostComponent("TableBody");
|
|
182
|
+
var TableCell = createHostComponent("TableCell");
|
|
183
|
+
createHostComponent("TableFooter");
|
|
184
|
+
var TableHead = createHostComponent("TableHead");
|
|
185
|
+
var TableHeader = createHostComponent("TableHeader");
|
|
186
|
+
var TableRow = createHostComponent("TableRow");
|
|
187
|
+
var MultiSelect = createHostComponent("MultiSelect");
|
|
188
|
+
var MultiSelectContent = createHostComponent("MultiSelectContent");
|
|
189
|
+
createHostComponent("MultiSelectGroup");
|
|
190
|
+
var MultiSelectItem = createHostComponent("MultiSelectItem");
|
|
191
|
+
var MultiSelectTrigger = createHostComponent("MultiSelectTrigger");
|
|
192
|
+
var MultiSelectValue = createHostComponent("MultiSelectValue");
|
|
193
|
+
var LoadingButton = createHostComponent("LoadingButton");
|
|
194
|
+
var AppCurrency = createHostComponent("AppCurrency");
|
|
195
|
+
var DatePicker = createHostComponent("DatePicker");
|
|
196
|
+
var TagsInput = createHostComponent("TagsInput");
|
|
197
|
+
var CustomPagination = createHostComponent("CustomPagination");
|
|
198
|
+
var Popup = createHostComponent("Popup");
|
|
199
|
+
createHostComponent("FullPageTableLoader");
|
|
200
|
+
function TextCell({ col, row }) {
|
|
201
|
+
return col?.values_formating && Object.keys(col?.values_formating)?.filter((key) => row[col?.data_src] === col?.values_formating[key]["showValue"])?.length > 0 ? Object.keys(col?.values_formating)?.filter((key) => row[col?.data_src] === col?.values_formating[key]["showValue"])?.map((key, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
202
|
+
"span",
|
|
203
|
+
{
|
|
204
|
+
className: `status text-capitalize ${col?.values_formating[key]["style"] === "success" ? "active" : col?.values_formating[key]["style"] === "danger" ? "in-active" : col?.values_formating[key]["style"] === "info" && "info"}`,
|
|
205
|
+
children: row[col?.data_src]
|
|
206
|
+
},
|
|
207
|
+
index
|
|
208
|
+
)) : row[col?.data_src] === "CR" || row[col?.data_src] === "approved" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "status active", children: row[col?.data_src] }) : row[col?.data_src] === "DR" || row[col?.data_src] === "pending" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "status in-active", children: row[col?.data_src] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0 text-wrap", children: row[col?.data_src] });
|
|
209
|
+
}
|
|
210
|
+
function LinkCell({ col, row }) {
|
|
211
|
+
const tApiTables = useTranslations("ApiTables");
|
|
212
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
213
|
+
col?.linkStyle === "text" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "text-[12px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
214
|
+
Link,
|
|
215
|
+
{
|
|
216
|
+
href: row[col?.data_src]?.value || row[col?.data_src],
|
|
217
|
+
className: `text-${col?.linkColor} ${row[col?.data_src] === "!#" || row[col?.data_src]?.value === "!#" || !row[col?.data_src] ? "disabled pointer-events-none" : ""}`,
|
|
218
|
+
target: "_blank",
|
|
219
|
+
children: row[col?.data_src]?.label || col?.linkText
|
|
220
|
+
}
|
|
221
|
+
) }) : col?.linkStyle === "button" && /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "text-[12px]", children: /* @__PURE__ */ jsxRuntime.jsx(Link, { color: "primary", href: row[col?.data_src]?.value || row[col?.data_src], target: "_blank", children: col?.linkText }) }),
|
|
222
|
+
col?.showCopyBtn && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", type: "button", size: "sm", className: "text-[12px]", onClick: () => copyToClipboard(row[col?.data_src]), children: tApiTables("copy_link") })
|
|
223
|
+
] });
|
|
224
|
+
}
|
|
225
|
+
function BooleanCell({ row, col }) {
|
|
226
|
+
if (row[col?.data_src] === true) {
|
|
227
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
228
|
+
Badge,
|
|
229
|
+
{
|
|
230
|
+
variant: "outline",
|
|
231
|
+
className: "inline-flex items-center border-green-500/5 px-3 py-[2px] text-green-800 dark:border-green-300/40 dark:text-green-100 bg-green-400/5 gap-1",
|
|
232
|
+
children: [
|
|
233
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-green-400" }),
|
|
234
|
+
col?.values_formating?.trueLabel
|
|
235
|
+
]
|
|
236
|
+
}
|
|
237
|
+
);
|
|
238
|
+
}
|
|
239
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
240
|
+
Badge,
|
|
241
|
+
{
|
|
242
|
+
variant: "outline",
|
|
243
|
+
className: "inline-flex items-center border-red-500/5 dark:border-red-300/40 px-3 py-[2px] text-red-800 dark:text-red-50 bg-red-400/5 gap-1",
|
|
244
|
+
children: [
|
|
245
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-red-400" }),
|
|
246
|
+
col?.values_formating?.falseLabel
|
|
247
|
+
]
|
|
248
|
+
}
|
|
249
|
+
);
|
|
250
|
+
}
|
|
251
|
+
function HTMLCell({ col, row }) {
|
|
252
|
+
const dispatch = reactRedux.useDispatch();
|
|
253
|
+
const tApiTables = useTranslations("ApiTables");
|
|
254
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
255
|
+
Button,
|
|
256
|
+
{
|
|
257
|
+
size: "sm",
|
|
258
|
+
variant: "outline",
|
|
259
|
+
onClick: () => {
|
|
260
|
+
dispatch(
|
|
261
|
+
_setRowSelectedModal({
|
|
262
|
+
label: col?.label,
|
|
263
|
+
value: row[col?.data_src]
|
|
264
|
+
})
|
|
265
|
+
);
|
|
266
|
+
},
|
|
267
|
+
children: tApiTables("show")
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
}
|
|
271
|
+
function DataListCell({ col, row }) {
|
|
272
|
+
const dispatch = reactRedux.useDispatch();
|
|
273
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
274
|
+
Button,
|
|
275
|
+
{
|
|
276
|
+
variant: "outline",
|
|
277
|
+
size: "sm",
|
|
278
|
+
onClick: () => {
|
|
279
|
+
dispatch(
|
|
280
|
+
_setRowSelectedModal({
|
|
281
|
+
label: col?.label,
|
|
282
|
+
value: row[col?.data_src]
|
|
283
|
+
})
|
|
284
|
+
);
|
|
285
|
+
},
|
|
286
|
+
children: [
|
|
287
|
+
/* @__PURE__ */ jsxRuntime.jsx(io.IoMdExpand, {}),
|
|
288
|
+
col?.linkText
|
|
289
|
+
]
|
|
290
|
+
}
|
|
291
|
+
);
|
|
292
|
+
}
|
|
293
|
+
function BarcodeCell({ col, row }) {
|
|
294
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(reactPhotoView.PhotoProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactPhotoView.PhotoView, { src: `data:image/png;base64,${row[col?.data_src]}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: `data:image/png;base64,${row[col?.data_src]}`, alt: "Barcode", className: "w-auto max-w-[50px] cursor-pointer" }) }) }) });
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
// src/table-utils/errorHandling.ts
|
|
298
|
+
function getToast() {
|
|
299
|
+
return getApiTablesRuntimeConfig()?.toast ?? null;
|
|
300
|
+
}
|
|
301
|
+
function handleResponseErrors(response, message, successCallback, errorCallback) {
|
|
302
|
+
const toast2 = getToast();
|
|
303
|
+
if (response?.data?.success) {
|
|
304
|
+
successCallback?.();
|
|
305
|
+
if (message && toast2) toast2.success(message);
|
|
306
|
+
}
|
|
307
|
+
if (!response?.data?.success && !response?.data?.errors && response?.data?.message) {
|
|
308
|
+
toast2?.error(response.data.message);
|
|
309
|
+
}
|
|
310
|
+
if (!response?.data?.success && response?.data?.errors) {
|
|
311
|
+
const errors = response.data.errors;
|
|
312
|
+
if (Array.isArray(errors) && errors.length > 0) {
|
|
313
|
+
errors.forEach((item) => toast2?.error(item));
|
|
314
|
+
} else if (typeof errors === "string" && errors.length > 0) {
|
|
315
|
+
toast2?.error(errors);
|
|
316
|
+
} else if (errors && typeof errors === "object") {
|
|
317
|
+
Object.keys(errors).forEach((key) => {
|
|
318
|
+
const value = errors[key];
|
|
319
|
+
if (Array.isArray(value)) toast2?.error(value.join(","));
|
|
320
|
+
});
|
|
321
|
+
}
|
|
322
|
+
} else if (!response?.data?.success && !response?.data?.errors) ;
|
|
323
|
+
}
|
|
324
|
+
async function handleNetworkErrors(err) {
|
|
325
|
+
console.log(err);
|
|
326
|
+
const config = getApiTablesRuntimeConfig();
|
|
327
|
+
const toast2 = config?.toast ?? null;
|
|
328
|
+
if (err?.response?.status === 401) {
|
|
329
|
+
try {
|
|
330
|
+
if (config?.onUnauthorized) {
|
|
331
|
+
await config.onUnauthorized();
|
|
332
|
+
} else if (config?.axiosAuth) {
|
|
333
|
+
const res = await config.axiosAuth.delete("/api/delete-auth");
|
|
334
|
+
if (res?.data?.success) {
|
|
335
|
+
window.location.href = "/login";
|
|
336
|
+
localStorage.removeItem("FCM_ERRIM");
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
} catch (error2) {
|
|
340
|
+
console.log(error2);
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
if (err?.code === "ERR_CANCELED") return;
|
|
344
|
+
const error = err?.response?.data?.error;
|
|
345
|
+
if (error && typeof error === "string" && error.length > 0) {
|
|
346
|
+
toast2?.error(error);
|
|
347
|
+
} else if (error && Array.isArray(error) && error.length > 0) {
|
|
348
|
+
toast2?.error(error.join(","));
|
|
349
|
+
} else {
|
|
350
|
+
toast2?.error(err?.message || "Something went wrong!");
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
var initialState2 = {
|
|
354
|
+
tableName: null,
|
|
355
|
+
structureColumns: null,
|
|
356
|
+
structureFilters: null,
|
|
357
|
+
customElement: null,
|
|
358
|
+
appliedFilters: [],
|
|
359
|
+
renderedFilters: [],
|
|
360
|
+
tableSorting: {},
|
|
361
|
+
tableData: [],
|
|
362
|
+
tableBindings: null,
|
|
363
|
+
currentPage: 1,
|
|
364
|
+
pageSize: 25,
|
|
365
|
+
tablePagination: null,
|
|
366
|
+
tableFetchingLoading: false,
|
|
367
|
+
tableRefresher: 0
|
|
368
|
+
};
|
|
369
|
+
var tableCoreSlice = toolkit.createSlice({
|
|
370
|
+
name: "tableCore",
|
|
371
|
+
initialState: initialState2,
|
|
372
|
+
reducers: {
|
|
373
|
+
_getTableComponents: (state, action) => {
|
|
374
|
+
state.tableName = action?.payload?.tableName;
|
|
375
|
+
state.structureColumns = action?.payload?.columns;
|
|
376
|
+
state.structureFilters = action?.payload?.filters;
|
|
377
|
+
state.customElement = action?.payload?.customElement ?? null;
|
|
378
|
+
},
|
|
379
|
+
_setAppliedFilters: (state, action) => {
|
|
380
|
+
state.appliedFilters = action?.payload?.reduce((acc, curr) => {
|
|
381
|
+
acc[curr.key] = curr;
|
|
382
|
+
return acc;
|
|
383
|
+
}, {});
|
|
384
|
+
},
|
|
385
|
+
_setRenderedFilters: (state, action) => {
|
|
386
|
+
state.renderedFilters = action?.payload;
|
|
387
|
+
},
|
|
388
|
+
_getTableData: (state, action) => {
|
|
389
|
+
state.tableData = action?.payload;
|
|
390
|
+
},
|
|
391
|
+
_getTablePagination: (state, action) => {
|
|
392
|
+
state.tablePagination = action?.payload;
|
|
393
|
+
},
|
|
394
|
+
_getTableBindings: (state, action) => {
|
|
395
|
+
state.tableBindings = action?.payload;
|
|
396
|
+
},
|
|
397
|
+
_setTableLoading: (state, action) => {
|
|
398
|
+
state.tableFetchingLoading = action?.payload;
|
|
399
|
+
},
|
|
400
|
+
_setCurrentPage: (state, action) => {
|
|
401
|
+
state.currentPage = action?.payload;
|
|
402
|
+
},
|
|
403
|
+
_setTableSorting: (state, action) => {
|
|
404
|
+
state.tableSorting = action?.payload;
|
|
405
|
+
},
|
|
406
|
+
_changePageSize: (state, action) => {
|
|
407
|
+
state.pageSize = action?.payload;
|
|
408
|
+
},
|
|
409
|
+
_triggerTableReload: (state) => {
|
|
410
|
+
state.tableRefresher = state.tableRefresher + 1;
|
|
411
|
+
},
|
|
412
|
+
_resetTableCore: (state) => {
|
|
413
|
+
state.tableName = null;
|
|
414
|
+
state.structureColumns = null;
|
|
415
|
+
state.structureFilters = null;
|
|
416
|
+
state.customElement = null;
|
|
417
|
+
state.appliedFilters = [];
|
|
418
|
+
state.renderedFilters = [];
|
|
419
|
+
state.tableSorting = {};
|
|
420
|
+
state.tableData = [];
|
|
421
|
+
state.tableBindings = null;
|
|
422
|
+
state.currentPage = 1;
|
|
423
|
+
state.pageSize = 25;
|
|
424
|
+
state.tablePagination = null;
|
|
425
|
+
state.tableFetchingLoading = false;
|
|
426
|
+
state.tableRefresher = 0;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
});
|
|
430
|
+
var {
|
|
431
|
+
_getTableComponents,
|
|
432
|
+
_setAppliedFilters,
|
|
433
|
+
_setRenderedFilters,
|
|
434
|
+
_getTableData,
|
|
435
|
+
_getTablePagination,
|
|
436
|
+
_getTableBindings,
|
|
437
|
+
_setTableLoading,
|
|
438
|
+
_setCurrentPage,
|
|
439
|
+
_setTableSorting,
|
|
440
|
+
_changePageSize,
|
|
441
|
+
_triggerTableReload,
|
|
442
|
+
_resetTableCore
|
|
443
|
+
} = tableCoreSlice.actions;
|
|
444
|
+
var tableCoreSlice_default = tableCoreSlice.reducer;
|
|
445
|
+
var initialState3 = {
|
|
446
|
+
bulkActions: [],
|
|
447
|
+
selectedBulkAction: null,
|
|
448
|
+
bulkActionPostLoading: false,
|
|
449
|
+
bulkActionPostResponse: null
|
|
450
|
+
};
|
|
451
|
+
var bulkActionsSlice = toolkit.createSlice({
|
|
452
|
+
name: "bulkActions",
|
|
453
|
+
initialState: initialState3,
|
|
454
|
+
reducers: {
|
|
455
|
+
_getStructureBulkActions: (state, action) => {
|
|
456
|
+
state.bulkActions = objectToArrayValue(action?.payload);
|
|
457
|
+
},
|
|
458
|
+
_getSelectedBulkAction: (state, action) => {
|
|
459
|
+
state.selectedBulkAction = action?.payload;
|
|
460
|
+
},
|
|
461
|
+
_bulkActionPostLoading: (state, action) => {
|
|
462
|
+
state.bulkActionPostLoading = action?.payload;
|
|
463
|
+
},
|
|
464
|
+
_bulkActionPostResponse: (state, action) => {
|
|
465
|
+
state.bulkActionPostResponse = action?.payload;
|
|
466
|
+
},
|
|
467
|
+
_resetTableBulkActions: (state) => {
|
|
468
|
+
state.bulkActions = [];
|
|
469
|
+
state.selectedBulkAction = null;
|
|
470
|
+
state.bulkActionPostLoading = false;
|
|
471
|
+
state.bulkActionPostResponse = null;
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
});
|
|
475
|
+
var { _getStructureBulkActions, _getSelectedBulkAction, _bulkActionPostLoading, _bulkActionPostResponse, _resetTableBulkActions } = bulkActionsSlice.actions;
|
|
476
|
+
var bulkActionsSlice_default = bulkActionsSlice.reducer;
|
|
477
|
+
var initialState4 = {
|
|
478
|
+
structureRowActions: [],
|
|
479
|
+
selectedRowActions: [],
|
|
480
|
+
clickedRowAction: null,
|
|
481
|
+
rowActionPostLoading: false,
|
|
482
|
+
clickedRowActionResponse: null,
|
|
483
|
+
customControlAction: null,
|
|
484
|
+
actionsInRegularCells: false,
|
|
485
|
+
clickedRowActionId: null
|
|
486
|
+
};
|
|
487
|
+
var rowActionsSlice = toolkit.createSlice({
|
|
488
|
+
name: "rowActions",
|
|
489
|
+
initialState: initialState4,
|
|
490
|
+
reducers: {
|
|
491
|
+
_getStructureRowActions: (state, action) => {
|
|
492
|
+
state.structureRowActions = objectToArrayValue(action?.payload);
|
|
493
|
+
},
|
|
494
|
+
_checkActionsInRegularCells: (state, action) => {
|
|
495
|
+
state.actionsInRegularCells = action.payload;
|
|
496
|
+
},
|
|
497
|
+
_getSelectedRowActions: (state, action) => {
|
|
498
|
+
state.selectedRowActions = objectToArrayValue(action?.payload)?.filter((action2) => action2?.applicableAsBulkAction);
|
|
499
|
+
},
|
|
500
|
+
_setRowActionPostLoading: (state, action) => {
|
|
501
|
+
state.rowActionPostLoading = action?.payload;
|
|
502
|
+
},
|
|
503
|
+
_getClickedRowAction: (state, action) => {
|
|
504
|
+
state.clickedRowAction = action?.payload;
|
|
505
|
+
},
|
|
506
|
+
_getClickedRowActionId: (state, action) => {
|
|
507
|
+
state.clickedRowActionId = action?.payload;
|
|
508
|
+
},
|
|
509
|
+
_getClickedRowActionResponse: (state, action) => {
|
|
510
|
+
state.clickedRowActionResponse = action?.payload;
|
|
511
|
+
},
|
|
512
|
+
_getCustomControlRequest: (state, action) => {
|
|
513
|
+
state.customControlAction = action?.payload;
|
|
514
|
+
},
|
|
515
|
+
_resetTableRowActions: (state) => {
|
|
516
|
+
state.structureRowActions = [];
|
|
517
|
+
state.selectedRowActions = [];
|
|
518
|
+
state.clickedRowAction = null;
|
|
519
|
+
state.rowActionPostLoading = false;
|
|
520
|
+
state.clickedRowActionResponse = null;
|
|
521
|
+
state.customControlAction = null;
|
|
522
|
+
state.actionsInRegularCells = false;
|
|
523
|
+
state.clickedRowActionId = null;
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
});
|
|
527
|
+
var {
|
|
528
|
+
_getStructureRowActions,
|
|
529
|
+
_checkActionsInRegularCells,
|
|
530
|
+
_getSelectedRowActions,
|
|
531
|
+
_setRowActionPostLoading,
|
|
532
|
+
_getClickedRowAction,
|
|
533
|
+
_getClickedRowActionId,
|
|
534
|
+
_getClickedRowActionResponse,
|
|
535
|
+
_getCustomControlRequest,
|
|
536
|
+
_resetTableRowActions
|
|
537
|
+
} = rowActionsSlice.actions;
|
|
538
|
+
var rowActionsSlice_default = rowActionsSlice.reducer;
|
|
539
|
+
|
|
540
|
+
// src/table-providers/useUtilsProvider.tsx
|
|
541
|
+
function useUtilsProvider() {
|
|
542
|
+
const dispatch = reactRedux.useDispatch();
|
|
543
|
+
const config = useApiTablesConfig();
|
|
544
|
+
const { axiosTable, usePathname, getExternalStore, onBulkActionSuccess, setMainLoader } = config;
|
|
545
|
+
const { downloadBlob, downloadPDF, generatePDF } = config;
|
|
546
|
+
const { tableData } = reactRedux.useSelector((state) => state.tableCore);
|
|
547
|
+
const { toggledClearRows } = reactRedux.useSelector((state) => state.tableColumns);
|
|
548
|
+
const pathname = usePathname?.() ?? "";
|
|
549
|
+
const externalStore = getExternalStore?.();
|
|
550
|
+
function triggerTableReload() {
|
|
551
|
+
dispatch(_triggerTableReload());
|
|
552
|
+
}
|
|
553
|
+
function handleBulkActionReponse(action, response, payload) {
|
|
554
|
+
onBulkActionSuccess?.(action, response, payload);
|
|
555
|
+
if (action?.onSuccess === "deleteRow" || action.onSuccess === "reload") {
|
|
556
|
+
triggerTableReload();
|
|
557
|
+
dispatch(_getSelectedBulkAction(null));
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
async function bulkActionsPostHandler(method, url, payload, loaderInfo, action) {
|
|
561
|
+
dispatch(_bulkActionPostLoading(true));
|
|
562
|
+
if (loaderInfo && setMainLoader) {
|
|
563
|
+
setMainLoader({ status: true, msg: loaderInfo?.msg, icon: loaderInfo?.icon ?? null });
|
|
564
|
+
}
|
|
565
|
+
try {
|
|
566
|
+
const response = await axiosTable({
|
|
567
|
+
method,
|
|
568
|
+
url,
|
|
569
|
+
data: { ...payload },
|
|
570
|
+
...action?.action_key === "export-excel-blob" && { responseType: "blob" }
|
|
571
|
+
});
|
|
572
|
+
if (action?.action_key === "export-excel-blob") {
|
|
573
|
+
downloadBlob?.(response?.data);
|
|
574
|
+
dispatch(_getSelectedBulkAction(null));
|
|
575
|
+
} else {
|
|
576
|
+
handleResponseErrors(
|
|
577
|
+
response,
|
|
578
|
+
response?.data?.message,
|
|
579
|
+
() => {
|
|
580
|
+
dispatch(_bulkActionPostResponse(response?.data));
|
|
581
|
+
handleBulkActionReponse(action, response?.data, payload);
|
|
582
|
+
},
|
|
583
|
+
void 0
|
|
584
|
+
);
|
|
585
|
+
}
|
|
586
|
+
} catch (err) {
|
|
587
|
+
console.log(err);
|
|
588
|
+
} finally {
|
|
589
|
+
dispatch(_bulkActionPostLoading(false));
|
|
590
|
+
dispatch(_getSelectedBulkAction(null));
|
|
591
|
+
if (setMainLoader) setMainLoader({ status: false, msg: "", icon: null });
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
function resetClickedRowAction() {
|
|
595
|
+
dispatch(_getClickedRowAction(null));
|
|
596
|
+
dispatch(_getClickedRowActionResponse(null));
|
|
597
|
+
dispatch(_getCustomControlRequest(null));
|
|
598
|
+
dispatch(_setToggledClearRow(!toggledClearRows));
|
|
599
|
+
dispatch(_setSelectedRows([]));
|
|
600
|
+
}
|
|
601
|
+
function handleCommonCases(type, response) {
|
|
602
|
+
if (pathname === "/packing/materials" && type === "reload" && externalStore) {
|
|
603
|
+
onBulkActionSuccess?.(
|
|
604
|
+
{ onSuccess: "reload" },
|
|
605
|
+
response,
|
|
606
|
+
void 0
|
|
607
|
+
);
|
|
608
|
+
}
|
|
609
|
+
if (type === "deleteRow" || type === "reload") {
|
|
610
|
+
triggerTableReload();
|
|
611
|
+
resetClickedRowAction();
|
|
612
|
+
} else if (type === "refetchData") {
|
|
613
|
+
dispatch(
|
|
614
|
+
_getTableData(
|
|
615
|
+
tableData?.map((item) => {
|
|
616
|
+
const matchingItem = response?.items?.find(
|
|
617
|
+
(entry) => entry.id === item?.id
|
|
618
|
+
);
|
|
619
|
+
return matchingItem ?? item;
|
|
620
|
+
})
|
|
621
|
+
)
|
|
622
|
+
);
|
|
623
|
+
resetClickedRowAction();
|
|
624
|
+
} else if (type === "refetchRow") {
|
|
625
|
+
dispatch(
|
|
626
|
+
_getTableData(
|
|
627
|
+
tableData?.map((item) => {
|
|
628
|
+
if (item?.id !== response?.data?.row?.id) return item;
|
|
629
|
+
return response?.data?.row;
|
|
630
|
+
})
|
|
631
|
+
)
|
|
632
|
+
);
|
|
633
|
+
resetClickedRowAction();
|
|
634
|
+
} else if (type === "downloadData") {
|
|
635
|
+
downloadURL(response?.data?.url ?? "", response?.data?.filename ?? "");
|
|
636
|
+
resetClickedRowAction();
|
|
637
|
+
} else if (type === "download_pdf") {
|
|
638
|
+
void downloadPDF?.(response?.data?.url ?? "", response?.data?.filename ?? "");
|
|
639
|
+
resetClickedRowAction();
|
|
640
|
+
} else if (type === "generatePdf" || type === "downloadPdf") {
|
|
641
|
+
void generatePDF?.(
|
|
642
|
+
response?.data ?? {},
|
|
643
|
+
"Invoice",
|
|
644
|
+
response?.data?.invoice_number ?? "invoice.pdf"
|
|
645
|
+
);
|
|
646
|
+
resetClickedRowAction();
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
function handleRowActionRepsonse(action, response) {
|
|
650
|
+
if (action?.isBulk) {
|
|
651
|
+
handleCommonCases(action?.onBulkSuccess || "", response);
|
|
652
|
+
} else {
|
|
653
|
+
handleCommonCases(action?.onSuccess || "", response);
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
async function rowActionsPostHandler(method, url, payload, action, customHeader) {
|
|
657
|
+
dispatch(_setRowActionPostLoading(true));
|
|
658
|
+
dispatch(_getClickedRowAction(action));
|
|
659
|
+
try {
|
|
660
|
+
const response = await axiosTable({
|
|
661
|
+
method,
|
|
662
|
+
url,
|
|
663
|
+
data: payload instanceof FormData ? payload : { ...payload },
|
|
664
|
+
...customHeader && { headers: { ...customHeader } },
|
|
665
|
+
...(action?.action_key === "export-excel-blob" || action?.action_key === "export_failed_excel") && {
|
|
666
|
+
responseType: "blob"
|
|
667
|
+
}
|
|
668
|
+
});
|
|
669
|
+
if (action?.action_key === "export-excel-blob" || action?.action_key === "export_failed_excel") {
|
|
670
|
+
downloadBlob?.(response?.data);
|
|
671
|
+
resetClickedRowAction();
|
|
672
|
+
} else {
|
|
673
|
+
handleResponseErrors(
|
|
674
|
+
response,
|
|
675
|
+
response?.data?.message,
|
|
676
|
+
() => {
|
|
677
|
+
if (action?.onSuccess !== "OpenModalForm") {
|
|
678
|
+
dispatch(_getClickedRowActionResponse(response?.data));
|
|
679
|
+
} else {
|
|
680
|
+
dispatch(_getCustomControlRequest(response?.data));
|
|
681
|
+
}
|
|
682
|
+
handleRowActionRepsonse(action, response?.data);
|
|
683
|
+
},
|
|
684
|
+
void 0
|
|
685
|
+
);
|
|
686
|
+
}
|
|
687
|
+
} catch (err) {
|
|
688
|
+
console.log(err);
|
|
689
|
+
resetClickedRowAction();
|
|
690
|
+
await handleNetworkErrors(err);
|
|
691
|
+
} finally {
|
|
692
|
+
dispatch(_setRowActionPostLoading(false));
|
|
693
|
+
dispatch(_getClickedRowActionId(null));
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
return { triggerTableReload, bulkActionsPostHandler, rowActionsPostHandler, resetClickedRowAction };
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
// src/shims/loading-button.ts
|
|
700
|
+
var loading_button_default = LoadingButton;
|
|
701
|
+
var requireModal = (action) => {
|
|
702
|
+
return action?.need_confirmation || action?.action_type === "custom_control";
|
|
703
|
+
};
|
|
704
|
+
var ToggleRowActionElement = ({ action, isBulk }) => {
|
|
705
|
+
const { rowActionsPostHandler } = useUtilsProvider();
|
|
706
|
+
const dispatch = reactRedux.useDispatch();
|
|
707
|
+
const { selectedIds } = reactRedux.useSelector((state) => state?.tableColumns);
|
|
708
|
+
const id = React4.useId();
|
|
709
|
+
function fireRowAction(action2) {
|
|
710
|
+
if (requireModal(action2)) {
|
|
711
|
+
dispatch(_getClickedRowAction({ ...action2, ...isBulk && { isBulk: false } }));
|
|
712
|
+
} else {
|
|
713
|
+
rowActionsPostHandler(
|
|
714
|
+
action2?.method,
|
|
715
|
+
isBulk ? action2?.action?.api?.replace("/api", "") : action2?.action.api?.replace("/api", ""),
|
|
716
|
+
{ selected_ids: selectedIds },
|
|
717
|
+
{ ...action2, ...isBulk && { isBulk: true } }
|
|
718
|
+
);
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
722
|
+
Label,
|
|
723
|
+
{
|
|
724
|
+
htmlFor: `tableRowSwitch_${id}`,
|
|
725
|
+
className: `cursor-pointer w-full flex items-center gap-2 px-4 py-2 rounded-lg border transition-colors
|
|
726
|
+
${action?.toggle_current_value ? "border-orange-500 dark:border-orange-700 text-orange-800 dark:text-orange-200 bg-orange-300/10 dark:bg-orange-300/5" : "border-muted-foreground/40"}
|
|
727
|
+
`,
|
|
728
|
+
children: [
|
|
729
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
730
|
+
Switch,
|
|
731
|
+
{
|
|
732
|
+
defaultChecked: action?.toggle_current_value || false,
|
|
733
|
+
id: `tableRowSwitch_${id}`,
|
|
734
|
+
checked: action?.toggle_current_value,
|
|
735
|
+
onCheckedChange: () => fireRowAction(action),
|
|
736
|
+
className: "cursor-pointer"
|
|
737
|
+
}
|
|
738
|
+
),
|
|
739
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: action?.button?.label })
|
|
740
|
+
]
|
|
741
|
+
}
|
|
742
|
+
) });
|
|
743
|
+
};
|
|
744
|
+
var RedirectRowActionElement = ({ action }) => {
|
|
745
|
+
const [fired, setFired] = React4.useState(false);
|
|
746
|
+
const handleLinkClick = (e) => {
|
|
747
|
+
if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button && e.button !== 0) {
|
|
748
|
+
return;
|
|
749
|
+
}
|
|
750
|
+
setFired(true);
|
|
751
|
+
};
|
|
752
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: fired, variant: "outline", className: "w-full p-0!", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
753
|
+
Link,
|
|
754
|
+
{
|
|
755
|
+
className: "flex items-center w-full justify-center gap-1 py-2 px-3!",
|
|
756
|
+
href: action?.redirect_routes?.api?.replace(/^\/api/, ""),
|
|
757
|
+
onClick: handleLinkClick,
|
|
758
|
+
children: [
|
|
759
|
+
fired ? /* @__PURE__ */ jsxRuntime.jsx(im.ImSpinner6, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(md.MdInsertLink, {}),
|
|
760
|
+
fired ? "Redirecting..." : action?.button?.label
|
|
761
|
+
]
|
|
762
|
+
}
|
|
763
|
+
) });
|
|
764
|
+
};
|
|
765
|
+
var ExternalRedirectRowActionElement = ({ action }) => {
|
|
766
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, variant: "default", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { target: "_blank", className: "inline-flex items-center gap-1 w-full", href: action?.redirect_routes?.api?.replace(/^\/api/, ""), children: [
|
|
767
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdInsertLink, {}),
|
|
768
|
+
action?.button?.label
|
|
769
|
+
] }) });
|
|
770
|
+
};
|
|
771
|
+
var CopyTextRowActionElement = ({ action }) => {
|
|
772
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
773
|
+
loading_button_default,
|
|
774
|
+
{
|
|
775
|
+
variant: "outline",
|
|
776
|
+
onClick: () => {
|
|
777
|
+
copyToClipboard(action?.copy_value);
|
|
778
|
+
},
|
|
779
|
+
children: [
|
|
780
|
+
/* @__PURE__ */ jsxRuntime.jsx(io5.IoCopy, {}),
|
|
781
|
+
action?.button?.label
|
|
782
|
+
]
|
|
783
|
+
}
|
|
784
|
+
);
|
|
785
|
+
};
|
|
786
|
+
var GeneralRowActionElement = ({ action, isBulk }) => {
|
|
787
|
+
const id = React4.useId();
|
|
788
|
+
const { rowActionsPostHandler } = useUtilsProvider();
|
|
789
|
+
const dispatch = reactRedux.useDispatch();
|
|
790
|
+
const { clickedRowAction, clickedRowActionId, rowActionPostLoading } = reactRedux.useSelector((state) => state?.rowActions);
|
|
791
|
+
const { selectedIds } = reactRedux.useSelector((state) => state?.tableColumns);
|
|
792
|
+
function fireRowAction(action2) {
|
|
793
|
+
dispatch(_getClickedRowActionId(id));
|
|
794
|
+
if (requireModal(action2)) {
|
|
795
|
+
dispatch(_getClickedRowAction({ ...action2, ...isBulk && { isBulk: false } }));
|
|
796
|
+
if (action2?.action_type === "custom_control") {
|
|
797
|
+
rowActionsPostHandler(
|
|
798
|
+
action2?.method,
|
|
799
|
+
isBulk ? action2?.action?.api?.replace(/^\/api/, "") : action2?.action.api?.replace(/^\/api/, ""),
|
|
800
|
+
{ selected_ids: selectedIds },
|
|
801
|
+
action2
|
|
802
|
+
);
|
|
803
|
+
}
|
|
804
|
+
} else {
|
|
805
|
+
rowActionsPostHandler(
|
|
806
|
+
action2?.method,
|
|
807
|
+
isBulk ? action2?.action?.api?.replace(/^\/api/, "") : action2?.action.api?.replace(/^\/api/, ""),
|
|
808
|
+
{ selected_ids: selectedIds },
|
|
809
|
+
{ ...action2, ...isBulk && { isBulk: true } }
|
|
810
|
+
);
|
|
811
|
+
}
|
|
812
|
+
}
|
|
813
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
814
|
+
loading_button_default,
|
|
815
|
+
{
|
|
816
|
+
variant: "secondary",
|
|
817
|
+
className: "w-full text-[13px] h-auto py-1.5 border",
|
|
818
|
+
onClick: () => {
|
|
819
|
+
fireRowAction(action);
|
|
820
|
+
},
|
|
821
|
+
isLoading: clickedRowAction?.action_key === action?.action_key && rowActionPostLoading && clickedRowActionId === id,
|
|
822
|
+
children: action?.button?.label
|
|
823
|
+
}
|
|
824
|
+
);
|
|
825
|
+
};
|
|
826
|
+
function TableRowActions({ row, col, isActionCol = false }) {
|
|
827
|
+
const { selectedRows } = reactRedux.useSelector((state) => state?.tableColumns);
|
|
828
|
+
const { actionsInRegularCells } = reactRedux.useSelector((state) => state?.rowActions);
|
|
829
|
+
const dispatch = reactRedux.useDispatch();
|
|
830
|
+
const rowActions = React4.useMemo(() => {
|
|
831
|
+
if (actionsInRegularCells) {
|
|
832
|
+
const filteredColActions = row?.actions[col?.name];
|
|
833
|
+
return objectToArrayValue(filteredColActions);
|
|
834
|
+
} else {
|
|
835
|
+
return objectToArrayValue(row?.actions);
|
|
836
|
+
}
|
|
837
|
+
}, [row, actionsInRegularCells, col]);
|
|
838
|
+
console.log("\u{1F680} actionsInRegularCells \u{1F449}", actionsInRegularCells, "\u2728");
|
|
839
|
+
React4.useEffect(() => {
|
|
840
|
+
if (selectedRows?.length > 0) {
|
|
841
|
+
dispatch(_getSelectedRowActions(objectToArrayValue(getIntersectedRowActions(selectedRows?.map((row2) => row2?.actions)))));
|
|
842
|
+
} else {
|
|
843
|
+
dispatch(_getSelectedRowActions([]));
|
|
844
|
+
}
|
|
845
|
+
}, [selectedRows]);
|
|
846
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
847
|
+
!col?.separated_action && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rowActions?.filter((action) => action)?.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
|
|
848
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(pi.PiDotsThreeOutlineVerticalBold, { className: "!w-3 !h-3" }) }) }),
|
|
849
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "end", className: "inline-flex min-w-[160px] p-2 z-100!", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full", children: rowActions?.filter((action) => action)?.map((action) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: action?.action_type === "toggle" ? /* @__PURE__ */ jsxRuntime.jsx(ToggleRowActionElement, { action }) : action?.action_type === "redirect" ? /* @__PURE__ */ jsxRuntime.jsx(RedirectRowActionElement, { action }) : action?.action_type === "external_redirect" ? /* @__PURE__ */ jsxRuntime.jsx(ExternalRedirectRowActionElement, { action }) : action?.action_type === "copy" ? /* @__PURE__ */ jsxRuntime.jsx(CopyTextRowActionElement, { action }) : /* @__PURE__ */ jsxRuntime.jsx(GeneralRowActionElement, { action }) }, action?.action_key)) }) })
|
|
850
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: "\u063A\u064A\u0631 \u0645\u0641\u0639\u0644" }) }),
|
|
851
|
+
col?.separated_action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full", children: rowActions?.filter((action) => action)?.map((action) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: action?.action_type === "toggle" ? /* @__PURE__ */ jsxRuntime.jsx(ToggleRowActionElement, { action }) : action?.action_type === "redirect" ? /* @__PURE__ */ jsxRuntime.jsx(RedirectRowActionElement, { action }) : action?.action_type === "external_redirect" ? /* @__PURE__ */ jsxRuntime.jsx(ExternalRedirectRowActionElement, { action }) : action?.action_type === "copy" ? /* @__PURE__ */ jsxRuntime.jsx(CopyTextRowActionElement, { action }) : /* @__PURE__ */ jsxRuntime.jsx(GeneralRowActionElement, { action }) }, action?.action_key)) })
|
|
852
|
+
] });
|
|
853
|
+
}
|
|
854
|
+
var TableRowActions_default = TableRowActions;
|
|
855
|
+
|
|
856
|
+
// src/host/storage.ts
|
|
857
|
+
function getHostStorage() {
|
|
858
|
+
const config = getApiTablesRuntimeConfig();
|
|
859
|
+
if (config?.useSecureLS) {
|
|
860
|
+
return config.useSecureLS();
|
|
861
|
+
}
|
|
862
|
+
return config?.storage ?? { get: () => null, set: () => void 0 };
|
|
863
|
+
}
|
|
864
|
+
var copyToClipboard = (value, noToast, msg) => {
|
|
865
|
+
navigator.clipboard.writeText(value).then(function() {
|
|
866
|
+
console.log("");
|
|
867
|
+
}).catch(function(err) {
|
|
868
|
+
console.error("Failed to copy text: ", err);
|
|
869
|
+
});
|
|
870
|
+
{
|
|
871
|
+
sonner.toast.success("\u062A\u0645 \u0627\u0644\u0646\u0633\u062E");
|
|
872
|
+
}
|
|
873
|
+
};
|
|
874
|
+
function truncateStart(fullStr, strLen, separator) {
|
|
875
|
+
if (fullStr?.length <= strLen) return fullStr;
|
|
876
|
+
separator = separator || "...";
|
|
877
|
+
let charsToShow = strLen, frontChars = Math.ceil(charsToShow);
|
|
878
|
+
return fullStr?.substr(0, frontChars) + separator;
|
|
879
|
+
}
|
|
880
|
+
function formatDateNoTime(timestamp) {
|
|
881
|
+
const date = new Date(timestamp);
|
|
882
|
+
const day = date.getDate().toString().padStart(2, "0");
|
|
883
|
+
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
|
884
|
+
const year = date.getFullYear();
|
|
885
|
+
return `${day}/${month}/${year}`;
|
|
886
|
+
}
|
|
887
|
+
function objectToArrayValue(obj) {
|
|
888
|
+
return obj ? Object.keys(obj).map((key) => obj[key]) : [];
|
|
889
|
+
}
|
|
890
|
+
function objectToArrayKey(obj) {
|
|
891
|
+
return obj ? Object.keys(obj).map((key) => key) : [];
|
|
892
|
+
}
|
|
893
|
+
function objectToArrayKeyVal(obj) {
|
|
894
|
+
return obj ? Object.keys(obj).map((key) => ({
|
|
895
|
+
key: obj[key],
|
|
896
|
+
value: key
|
|
897
|
+
})) : [];
|
|
898
|
+
}
|
|
899
|
+
function downloadURL(url, name) {
|
|
900
|
+
const link = document.createElement("a");
|
|
901
|
+
link.href = url;
|
|
902
|
+
link.download = `${name}`;
|
|
903
|
+
document.body.appendChild(link);
|
|
904
|
+
link.setAttribute("target", "_blank");
|
|
905
|
+
link.click();
|
|
906
|
+
URL.revokeObjectURL(url);
|
|
907
|
+
document.body.removeChild(link);
|
|
908
|
+
}
|
|
909
|
+
function getIntersectedRowActions(arrayOfObjects) {
|
|
910
|
+
if (arrayOfObjects.length === 0) return {};
|
|
911
|
+
const result = {};
|
|
912
|
+
for (const key in arrayOfObjects[0]) {
|
|
913
|
+
const actionKey = arrayOfObjects[0][key].action_key;
|
|
914
|
+
const isCommon = arrayOfObjects.every((obj) => obj[key] && obj[key].action_key === actionKey);
|
|
915
|
+
if (isCommon) {
|
|
916
|
+
result[key] = arrayOfObjects[0][key];
|
|
917
|
+
}
|
|
918
|
+
}
|
|
919
|
+
return result;
|
|
920
|
+
}
|
|
921
|
+
function restructureSelectedFilters(data, dirtyFields, structureFilters) {
|
|
922
|
+
const submittedData = objectToArrayKey(dirtyFields);
|
|
923
|
+
const filteredObject = Object.fromEntries(
|
|
924
|
+
Object.entries(data)?.filter(([key, value]) => {
|
|
925
|
+
if (typeof value === "string") {
|
|
926
|
+
const typedValue2 = value;
|
|
927
|
+
return submittedData?.includes(key) && typedValue2?.trim() !== "" && typedValue2;
|
|
928
|
+
}
|
|
929
|
+
const typedValue = value;
|
|
930
|
+
return submittedData?.includes(key) && typedValue?.fieldValue !== "" && typedValue?.fieldValue;
|
|
931
|
+
})
|
|
932
|
+
);
|
|
933
|
+
const renderedFilters = Object.keys(filteredObject)?.map((key) => {
|
|
934
|
+
const targetFilter = structureFilters?.find((filter) => filter?.filter_name === key);
|
|
935
|
+
const value = typeof filteredObject[key] === "string" ? filteredObject[key] : filteredObject[key].fieldValue;
|
|
936
|
+
return {
|
|
937
|
+
key,
|
|
938
|
+
value,
|
|
939
|
+
label: targetFilter?.label,
|
|
940
|
+
type: targetFilter?.type,
|
|
941
|
+
valueLable: targetFilter?.props?.select_options ? targetFilter?.props?.select_options[value] : value,
|
|
942
|
+
operator: targetFilter?.type === "date" ? targetFilter?.props?.operators?.[0] : filteredObject[key]?.operator,
|
|
943
|
+
props: targetFilter?.props
|
|
944
|
+
};
|
|
945
|
+
});
|
|
946
|
+
return renderedFilters;
|
|
947
|
+
}
|
|
948
|
+
var calculateMinWidth = (content, title, type) => {
|
|
949
|
+
const charWidth = 8;
|
|
950
|
+
const padding = 34;
|
|
951
|
+
const headPadding = 60;
|
|
952
|
+
const cellContent = content?.length * charWidth + padding;
|
|
953
|
+
const headContent = title?.length * charWidth + headPadding;
|
|
954
|
+
return type === "link" ? "200px" : `${Math.max(cellContent, headContent)}px`;
|
|
955
|
+
};
|
|
956
|
+
var rowWithLongestField = (data, field) => {
|
|
957
|
+
return data?.reduce((longest, current) => {
|
|
958
|
+
return current[field]?.length > longest?.length ? current[field] : longest;
|
|
959
|
+
}, "");
|
|
960
|
+
};
|
|
961
|
+
var calculateColMinWidth = (content, title) => {
|
|
962
|
+
const charWidth = 8;
|
|
963
|
+
const padding = 34;
|
|
964
|
+
const headPadding = 60;
|
|
965
|
+
const cellContent = content?.length * charWidth + padding;
|
|
966
|
+
const headContent = title?.length * charWidth + headPadding;
|
|
967
|
+
return Math.max(cellContent, headContent) <= 500 ? `${Math.max(cellContent, headContent) + 20}px` : "500px";
|
|
968
|
+
};
|
|
969
|
+
var tableRowWithLongestField = (data, field) => {
|
|
970
|
+
return data?.reduce((longest, current) => {
|
|
971
|
+
return current[field]?.length > longest?.length ? current[field] : longest;
|
|
972
|
+
}, "");
|
|
973
|
+
};
|
|
974
|
+
function formatTableColumns(cols, tbData) {
|
|
975
|
+
return cols?.filter((col) => col?.showable)?.map((col) => {
|
|
976
|
+
return {
|
|
977
|
+
name: col?.label,
|
|
978
|
+
sortable: col?.sortable,
|
|
979
|
+
colIdentifier: col?.data_src,
|
|
980
|
+
data_src: col?.data_src,
|
|
981
|
+
type: col?.type,
|
|
982
|
+
minWidth: col?.type !== "link" && col?.type !== "barcode" ? calculateColMinWidth(tableRowWithLongestField(tbData, col?.data_src), col?.label) : "250px",
|
|
983
|
+
selector: (row) => row[col?.data_src],
|
|
984
|
+
cell: (row) => {
|
|
985
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-row": JSON.stringify(row), className: "text-sm tabel-col-cell w-full", children: row[col?.data_src] === null ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0", children: "-" }) : row[col?.data_src] !== null && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: col?.type === "text" ? /* @__PURE__ */ jsxRuntime.jsx(TextCell, { col, row }) : col?.type === "text_truncate" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0 text-wrap", children: truncateStart(row[col?.data_src], 20, "...") }) : col?.type === "link" ? /* @__PURE__ */ jsxRuntime.jsx(LinkCell, { col, row }) : col?.type === "boolean" ? /* @__PURE__ */ jsxRuntime.jsx(BooleanCell, { col, row }) : col?.type === "html" ? /* @__PURE__ */ jsxRuntime.jsx(HTMLCell, { col, row }) : col?.type === "datalist" || col?.type === "dataList" ? /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { col, row }) : col?.type === "barcode" ? /* @__PURE__ */ jsxRuntime.jsx(BarcodeCell, { col, row }) : col?.type === "actions" && row?.actions && Object.keys(row?.actions)?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRowActions_default, { isActionCol: true, row, col }) }) });
|
|
986
|
+
}
|
|
987
|
+
};
|
|
988
|
+
});
|
|
989
|
+
}
|
|
990
|
+
function AppliedFilters({ setValue, resetField }) {
|
|
991
|
+
const t = useTranslations("ApiTables");
|
|
992
|
+
const { renderedFilters } = reactRedux.useSelector((state) => state.tableCore);
|
|
993
|
+
const dispatch = reactRedux.useDispatch();
|
|
994
|
+
function handleClearRenderedFilters(key, props, type) {
|
|
995
|
+
const filteredRenderedFilters = renderedFilters?.filter((filter) => filter?.key !== key);
|
|
996
|
+
if (type !== "date") {
|
|
997
|
+
setValue(`${key}.fieldValue`, "", { shouldDirty: true, shouldValidate: true });
|
|
998
|
+
setValue(`${key}.operator`, props?.operators[0], { shouldDirty: true, shouldValidate: true });
|
|
999
|
+
} else {
|
|
1000
|
+
resetField(`${key}.fieldValue`);
|
|
1001
|
+
}
|
|
1002
|
+
dispatch(_setRenderedFilters(filteredRenderedFilters));
|
|
1003
|
+
dispatch(_setAppliedFilters(filteredRenderedFilters));
|
|
1004
|
+
dispatch(_setCurrentPage(1));
|
|
1005
|
+
}
|
|
1006
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedFilters?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 p-0 mb-1 my-5", children: [
|
|
1007
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-bold me-2", children: t("filterBy") }),
|
|
1008
|
+
renderedFilters?.map((filter) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "ps-2 pe-0.5 rounded-full border !border-foreground/30 dark:border-foreground/10", children: [
|
|
1009
|
+
/* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "me-1", children: [
|
|
1010
|
+
filter?.label,
|
|
1011
|
+
":"
|
|
1012
|
+
] }),
|
|
1013
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: filter?.type !== "date" ? filter?.valueLable : formatDateNoTime(filter?.value) }),
|
|
1014
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1015
|
+
Button,
|
|
1016
|
+
{
|
|
1017
|
+
variant: "default",
|
|
1018
|
+
className: "p-0 ms-3 !px-0 h-5 w-5 max-w-5 rounded-full hover:bg-destructive/10 dark:hover:bg-destructive/10 hover:text-destructive bg-foreground dark:bg-foreground/10",
|
|
1019
|
+
onClick: () => handleClearRenderedFilters(filter?.key, filter?.props, filter?.type),
|
|
1020
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
|
|
1021
|
+
}
|
|
1022
|
+
)
|
|
1023
|
+
] }) }, toolkit.nanoid()))
|
|
1024
|
+
] }) });
|
|
1025
|
+
}
|
|
1026
|
+
var AppliedFilters_default = AppliedFilters;
|
|
1027
|
+
|
|
1028
|
+
// src/table-utils/useUtilTranslator.ts
|
|
1029
|
+
function useUtilTranslator() {
|
|
1030
|
+
const t = useTranslations("General");
|
|
1031
|
+
function getOperatorLabel(operator) {
|
|
1032
|
+
if (operator === "=") {
|
|
1033
|
+
return t("exact");
|
|
1034
|
+
}
|
|
1035
|
+
if (operator === "like") {
|
|
1036
|
+
return t("like");
|
|
1037
|
+
}
|
|
1038
|
+
if (operator === ">=") {
|
|
1039
|
+
return t("greaterOrEqual");
|
|
1040
|
+
}
|
|
1041
|
+
if (operator === "<=") {
|
|
1042
|
+
return t("lessOrEqual");
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
return { getOperatorLabel };
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
// src/shims/tags-input.ts
|
|
1049
|
+
var tags_input_default = TagsInput;
|
|
1050
|
+
function TableFilters({ showFilters, setShowFilters }) {
|
|
1051
|
+
const { tableName, structureFilters } = reactRedux.useSelector((state) => state.tableCore);
|
|
1052
|
+
const [expandedFilters, setExpandedFilters] = React4.useState(true);
|
|
1053
|
+
const [isSubmitEnabled, setIsSubmitEnabled] = React4.useState(false);
|
|
1054
|
+
const dispatch = reactRedux.useDispatch();
|
|
1055
|
+
const t = useTranslations("General");
|
|
1056
|
+
const tApiTables = useTranslations("ApiTables");
|
|
1057
|
+
const {
|
|
1058
|
+
handleSubmit,
|
|
1059
|
+
control,
|
|
1060
|
+
setValue,
|
|
1061
|
+
resetField,
|
|
1062
|
+
watch,
|
|
1063
|
+
formState: { dirtyFields }
|
|
1064
|
+
} = reactHookForm.useForm();
|
|
1065
|
+
const watchFields = watch();
|
|
1066
|
+
const { getOperatorLabel } = useUtilTranslator();
|
|
1067
|
+
React4.useEffect(() => {
|
|
1068
|
+
const isAnyFieldFilled = Object.values(watchFields).some((field) => {
|
|
1069
|
+
const v = field?.fieldValue;
|
|
1070
|
+
if (typeof v === "string") return v?.trim() !== "";
|
|
1071
|
+
if (v && typeof v === "object" && "from" in v) return !!v.from;
|
|
1072
|
+
if (v instanceof Date) return true;
|
|
1073
|
+
if (Array.isArray(v)) return v.length > 0;
|
|
1074
|
+
return false;
|
|
1075
|
+
});
|
|
1076
|
+
setIsSubmitEnabled(isAnyFieldFilled);
|
|
1077
|
+
}, [watchFields]);
|
|
1078
|
+
const getOperators = (filter) => {
|
|
1079
|
+
return filter?.props?.operators;
|
|
1080
|
+
};
|
|
1081
|
+
const renderOperator = (filter) => {
|
|
1082
|
+
return filter?.props?.operators?.length > 1;
|
|
1083
|
+
};
|
|
1084
|
+
const DATE_FORMAT = "dd-MM-yyyy";
|
|
1085
|
+
function formatSingleDate(date) {
|
|
1086
|
+
if (!date || !dateFns.isValid(date)) return null;
|
|
1087
|
+
const formatted = dateFns.format(date, DATE_FORMAT);
|
|
1088
|
+
return { label: formatted, value: formatted };
|
|
1089
|
+
}
|
|
1090
|
+
function formatDateRangeFromCalendar(range) {
|
|
1091
|
+
if (!range?.from || !dateFns.isValid(range.from)) return null;
|
|
1092
|
+
const fromStr = dateFns.format(range.from, DATE_FORMAT);
|
|
1093
|
+
const toDate = range.to && dateFns.isValid(range.to) ? range.to : range.from;
|
|
1094
|
+
const toStr = dateFns.format(toDate, DATE_FORMAT);
|
|
1095
|
+
const label = `${fromStr} - ${toStr}`;
|
|
1096
|
+
return { label, value: [fromStr, toStr] };
|
|
1097
|
+
}
|
|
1098
|
+
function submitFiltersHandler(data) {
|
|
1099
|
+
const updatedForTags = Object.fromEntries(
|
|
1100
|
+
Object.entries(data).map(([key, value]) => {
|
|
1101
|
+
if (typeof value.fieldValue === "string" && value.operator === "in") {
|
|
1102
|
+
return [key, { ...value, fieldValue: value.fieldValue.split(",")?.filter((el) => el !== "") }];
|
|
1103
|
+
}
|
|
1104
|
+
if (value.fieldValue instanceof Date) {
|
|
1105
|
+
const formatted = formatSingleDate(value.fieldValue);
|
|
1106
|
+
if (formatted) return [key, { ...value, fieldValue: formatted.value }];
|
|
1107
|
+
}
|
|
1108
|
+
if (value.operator === "between" && value.fieldValue && typeof value.fieldValue === "object" && "from" in value.fieldValue) {
|
|
1109
|
+
const formatted = formatDateRangeFromCalendar(value.fieldValue);
|
|
1110
|
+
if (formatted) return [key, { ...value, fieldValue: formatted.value }];
|
|
1111
|
+
}
|
|
1112
|
+
return [key, value];
|
|
1113
|
+
})
|
|
1114
|
+
);
|
|
1115
|
+
const updatedForDate = Object.fromEntries(
|
|
1116
|
+
Object.entries(data).map(([key, value]) => {
|
|
1117
|
+
if (value.fieldValue instanceof Date) {
|
|
1118
|
+
const formatted = formatSingleDate(value.fieldValue);
|
|
1119
|
+
if (formatted) return [key, { ...value, fieldValue: formatted.label }];
|
|
1120
|
+
}
|
|
1121
|
+
if (value.operator === "between" && value.fieldValue && typeof value.fieldValue === "object" && "from" in value.fieldValue) {
|
|
1122
|
+
const formatted = formatDateRangeFromCalendar(value.fieldValue);
|
|
1123
|
+
if (formatted) return [key, { ...value, fieldValue: formatted.label }];
|
|
1124
|
+
}
|
|
1125
|
+
return [key, value];
|
|
1126
|
+
})
|
|
1127
|
+
);
|
|
1128
|
+
dispatch(_setAppliedFilters(restructureSelectedFilters(updatedForTags, dirtyFields, structureFilters)));
|
|
1129
|
+
dispatch(_setRenderedFilters(restructureSelectedFilters(updatedForDate, dirtyFields, structureFilters)));
|
|
1130
|
+
dispatch(_setCurrentPage(1));
|
|
1131
|
+
setShowFilters(false);
|
|
1132
|
+
}
|
|
1133
|
+
return (
|
|
1134
|
+
// <div className="z-[200]">
|
|
1135
|
+
// <div className="flex mb-5 justify-start">
|
|
1136
|
+
// <Button variant="outline" onClick={() => setExpandedFilters((prev) => !prev)}>
|
|
1137
|
+
// {expandedFilters ? <GoChevronUp className="ms-auto" /> : <GoChevronDown className="ms-auto" />}
|
|
1138
|
+
// {expandedFilters ? tApiTables("hide_filters") : tApiTables("show_filters")}
|
|
1139
|
+
// </Button>
|
|
1140
|
+
// </div>
|
|
1141
|
+
// <div className={`${expandedFilters ? "block" : "hidden"}`}>
|
|
1142
|
+
// <form
|
|
1143
|
+
// noValidate
|
|
1144
|
+
// className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 items-end"
|
|
1145
|
+
// onSubmit={handleSubmit(submitFiltersHandler)}
|
|
1146
|
+
// >
|
|
1147
|
+
// {/* ... Date Type Filters */}
|
|
1148
|
+
// {structureFilters
|
|
1149
|
+
// ?.filter((filter) => filter?.type === "date")
|
|
1150
|
+
// ?.map(
|
|
1151
|
+
// (filter) =>
|
|
1152
|
+
// filter?.pair_with && (
|
|
1153
|
+
// <div className="m-0 w-full" key={filter.filter_name}>
|
|
1154
|
+
// <Controller
|
|
1155
|
+
// name={`${filter?.filter_name}.fieldValue`}
|
|
1156
|
+
// control={control}
|
|
1157
|
+
// defaultValue={undefined}
|
|
1158
|
+
// render={({ field }) => (
|
|
1159
|
+
// <Popover>
|
|
1160
|
+
// <PopoverTrigger asChild>
|
|
1161
|
+
// <Button
|
|
1162
|
+
// id="date"
|
|
1163
|
+
// variant="outline"
|
|
1164
|
+
// className={cn(
|
|
1165
|
+
// "w-[300px] justify-start text-left font-normal bg-background",
|
|
1166
|
+
// !field.value && "text-muted-foreground"
|
|
1167
|
+
// )}
|
|
1168
|
+
// >
|
|
1169
|
+
// <CalendarIcon className="mr-2 h-4 w-4" />
|
|
1170
|
+
// {field.value?.from ? (
|
|
1171
|
+
// field.value.to ? (
|
|
1172
|
+
// <>
|
|
1173
|
+
// {format(field.value.from, "LLL dd, y")} -{" "}
|
|
1174
|
+
// {format(field.value.to, "LLL dd, y")}
|
|
1175
|
+
// </>
|
|
1176
|
+
// ) : (
|
|
1177
|
+
// format(field.value.from, "LLL dd, y")
|
|
1178
|
+
// )
|
|
1179
|
+
// ) : (
|
|
1180
|
+
// <span>Pick a date</span>
|
|
1181
|
+
// )}
|
|
1182
|
+
// </Button>
|
|
1183
|
+
// </PopoverTrigger>
|
|
1184
|
+
// <PopoverContent className="w-auto p-0" align="start">
|
|
1185
|
+
// <Calendar
|
|
1186
|
+
// autoFocus
|
|
1187
|
+
// mode="range"
|
|
1188
|
+
// defaultMonth={field.value?.from}
|
|
1189
|
+
// selected={field.value}
|
|
1190
|
+
// onSelect={(dates) => field.onChange(dates)}
|
|
1191
|
+
// numberOfMonths={1}
|
|
1192
|
+
// />
|
|
1193
|
+
// </PopoverContent>
|
|
1194
|
+
// </Popover>
|
|
1195
|
+
// )}
|
|
1196
|
+
// />
|
|
1197
|
+
// </div>
|
|
1198
|
+
// )
|
|
1199
|
+
// )}
|
|
1200
|
+
// {true &&
|
|
1201
|
+
// structureFilters
|
|
1202
|
+
// ?.filter((filter) => filter?.type !== "range" && filter?.type !== "date")
|
|
1203
|
+
// ?.map((filter) => (
|
|
1204
|
+
// <div className="space-y-2" key={filter?.filter_name}>
|
|
1205
|
+
// <Label>{filter?.label}</Label>
|
|
1206
|
+
// <div className={`${renderOperator(filter) ? "relative" : ""}`}>
|
|
1207
|
+
// <div className={`flex items-stretch`}>
|
|
1208
|
+
// <div className="m-0 w-full">
|
|
1209
|
+
// {filter?.type === "text" && (
|
|
1210
|
+
// <Controller
|
|
1211
|
+
// name={`${filter?.filter_name}.fieldValue`}
|
|
1212
|
+
// control={control}
|
|
1213
|
+
// defaultValue=""
|
|
1214
|
+
// render={({ field }) => (
|
|
1215
|
+
// <Input
|
|
1216
|
+
// className={`!focus-visible:ring-0 !focus-visible:shadow-none bg-background ${
|
|
1217
|
+
// renderOperator(filter) ? "border-ee-0 rounded-e-nonee" : ""
|
|
1218
|
+
// }`}
|
|
1219
|
+
// aria-label={`${filter?.filter_name}`}
|
|
1220
|
+
// {...field}
|
|
1221
|
+
// type={filter?.type}
|
|
1222
|
+
// placeholder={filter?.label}
|
|
1223
|
+
// />
|
|
1224
|
+
// )}
|
|
1225
|
+
// />
|
|
1226
|
+
// )}
|
|
1227
|
+
// {(filter?.type === "select" || filter?.type === "boolean" || filter?.type === "null") && (
|
|
1228
|
+
// <Controller
|
|
1229
|
+
// name={`${filter?.filter_name}.fieldValue`}
|
|
1230
|
+
// control={control}
|
|
1231
|
+
// defaultValue={undefined}
|
|
1232
|
+
// render={({ field }) => (
|
|
1233
|
+
// <Select
|
|
1234
|
+
// {...field}
|
|
1235
|
+
// onValueChange={field.onChange}
|
|
1236
|
+
// defaultValue={field.value}
|
|
1237
|
+
// aria-label={`${filter?.filter_name}`}
|
|
1238
|
+
// >
|
|
1239
|
+
// <SelectTrigger
|
|
1240
|
+
// className={`w-full cursor-pointer bg-background
|
|
1241
|
+
// ${renderOperator(filter) ? "border-ee-0 rounded-e-nonee" : ""} `}
|
|
1242
|
+
// >
|
|
1243
|
+
// <SelectValue placeholder={filter?.label} />
|
|
1244
|
+
// </SelectTrigger>
|
|
1245
|
+
// <SelectContent>
|
|
1246
|
+
// {objectToArrayKeyVal(filter?.props?.select_options || {})
|
|
1247
|
+
// ?.sort((a, b) => (a.value === "" ? -1 : b.value === "" ? 1 : 0))
|
|
1248
|
+
// ?.map((opt) => (
|
|
1249
|
+
// <SelectItem value={opt?.value} key={opt?.value}>
|
|
1250
|
+
// {opt?.key}
|
|
1251
|
+
// </SelectItem>
|
|
1252
|
+
// ))}
|
|
1253
|
+
// </SelectContent>
|
|
1254
|
+
// </Select>
|
|
1255
|
+
// )}
|
|
1256
|
+
// />
|
|
1257
|
+
// )}
|
|
1258
|
+
// {filter?.type === "number" && (
|
|
1259
|
+
// <Controller
|
|
1260
|
+
// name={`${filter?.filter_name}.fieldValue`}
|
|
1261
|
+
// control={control}
|
|
1262
|
+
// defaultValue=""
|
|
1263
|
+
// render={({ field }) => (
|
|
1264
|
+
// <Input
|
|
1265
|
+
// className={`bg-background ${
|
|
1266
|
+
// renderOperator(filter) ? "border-ee-0 rounded-e-nonee" : ""
|
|
1267
|
+
// }`}
|
|
1268
|
+
// {...field}
|
|
1269
|
+
// aria-label={`${filter?.filter_name}`}
|
|
1270
|
+
// type="text"
|
|
1271
|
+
// onKeyDown={(e) => {
|
|
1272
|
+
// // Allow: backspace, delete, tab, escape, enter, decimal point
|
|
1273
|
+
// if (
|
|
1274
|
+
// [46, 8, 9, 27, 13, 190, 110].indexOf(e.keyCode) !== -1 ||
|
|
1275
|
+
// // Allow: Ctrl+A
|
|
1276
|
+
// (e.keyCode === 65 && e.ctrlKey === true) ||
|
|
1277
|
+
// // Allow: home, end, left, right
|
|
1278
|
+
// (e.keyCode >= 35 && e.keyCode <= 39)
|
|
1279
|
+
// ) {
|
|
1280
|
+
// return;
|
|
1281
|
+
// }
|
|
1282
|
+
// // Ensure that it is a number and stop the keypress if not
|
|
1283
|
+
// if (
|
|
1284
|
+
// (e.shiftKey || e.keyCode < 48 || e.keyCode > 57) &&
|
|
1285
|
+
// (e.keyCode < 96 || e.keyCode > 105)
|
|
1286
|
+
// ) {
|
|
1287
|
+
// e.preventDefault();
|
|
1288
|
+
// }
|
|
1289
|
+
// }}
|
|
1290
|
+
// onChange={(e) => {
|
|
1291
|
+
// // Only allow numbers and one decimal point
|
|
1292
|
+
// const value = e.target.value.replace(/[^\d.]/g, "");
|
|
1293
|
+
// // Prevent multiple decimal points
|
|
1294
|
+
// const parts = value.split(".");
|
|
1295
|
+
// if (parts.length > 2) {
|
|
1296
|
+
// return;
|
|
1297
|
+
// }
|
|
1298
|
+
// field.onChange(value);
|
|
1299
|
+
// }}
|
|
1300
|
+
// placeholder={filter?.label}
|
|
1301
|
+
// />
|
|
1302
|
+
// )}
|
|
1303
|
+
// />
|
|
1304
|
+
// )}
|
|
1305
|
+
// {filter?.type === "multi_select" && !filter?.props?.options && <></>}
|
|
1306
|
+
// {filter?.type === "multi_select" && filter?.props?.options && <></>}
|
|
1307
|
+
// </div>
|
|
1308
|
+
// <Controller
|
|
1309
|
+
// name={`${filter.filter_name}.operator`}
|
|
1310
|
+
// control={control}
|
|
1311
|
+
// defaultValue={getOperators(filter)[0]}
|
|
1312
|
+
// render={({ field }) => (
|
|
1313
|
+
// <Select
|
|
1314
|
+
// {...field}
|
|
1315
|
+
// onValueChange={field.onChange}
|
|
1316
|
+
// value={field.value || getOperators(filter)[0]}
|
|
1317
|
+
// aria-label={`${filter?.filter_name}`}
|
|
1318
|
+
// >
|
|
1319
|
+
// <Tooltip>
|
|
1320
|
+
// <TooltipTrigger asChild>
|
|
1321
|
+
// <SelectTrigger
|
|
1322
|
+
// className={`bg-muted-foreground/10 absolute top-[3px] end-[3px] min-w-[80px] max-w-[80px] border-none !h-[32px] !cursor-pointer shadow-none ${
|
|
1323
|
+
// renderOperator(filter) ? "" : "hidden"
|
|
1324
|
+
// }`}
|
|
1325
|
+
// >
|
|
1326
|
+
// <SelectValue />
|
|
1327
|
+
// </SelectTrigger>
|
|
1328
|
+
// </TooltipTrigger>
|
|
1329
|
+
// <TooltipContent className="dark:text-background">
|
|
1330
|
+
// {getOperatorLabel(watch(`${filter.filter_name}.operator`)) ||
|
|
1331
|
+
// getOperatorLabel(getOperators(filter)?.[0])}
|
|
1332
|
+
// </TooltipContent>
|
|
1333
|
+
// </Tooltip>
|
|
1334
|
+
// <SelectContent align={"end"}>
|
|
1335
|
+
// {getOperators(filter)?.map((operator: string) => (
|
|
1336
|
+
// <SelectItem key={operator} value={operator}>
|
|
1337
|
+
// {operator}
|
|
1338
|
+
// </SelectItem>
|
|
1339
|
+
// ))}
|
|
1340
|
+
// </SelectContent>
|
|
1341
|
+
// </Select>
|
|
1342
|
+
// )}
|
|
1343
|
+
// />
|
|
1344
|
+
// </div>
|
|
1345
|
+
// </div>
|
|
1346
|
+
// </div>
|
|
1347
|
+
// ))}
|
|
1348
|
+
// {/* Filters Submission */}
|
|
1349
|
+
// <div className="col">
|
|
1350
|
+
// <Button type="submit" variant="primary-opac" className="px-5" disabled={!isSubmitEnabled}>
|
|
1351
|
+
// {t("apply")}
|
|
1352
|
+
// </Button>
|
|
1353
|
+
// </div>
|
|
1354
|
+
// </form>
|
|
1355
|
+
// </div>
|
|
1356
|
+
// <AppliedFilters setValue={setValue} resetField={resetField} />
|
|
1357
|
+
// </div>
|
|
1358
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1359
|
+
structureFilters?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: showFilters, onOpenChange: setShowFilters, children: [
|
|
1360
|
+
/* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "hidden" }) }),
|
|
1361
|
+
/* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "z-[999] rounded-xl overflow-hidden! pb-5", children: [
|
|
1362
|
+
/* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: tApiTables("filters") }) }),
|
|
1363
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1364
|
+
"form",
|
|
1365
|
+
{
|
|
1366
|
+
noValidate: true,
|
|
1367
|
+
id: "tb_filters_form",
|
|
1368
|
+
className: "flex flex-col h-full overflow-y-auto gap-4 px-4 pb-20 relative",
|
|
1369
|
+
onSubmit: handleSubmit(submitFiltersHandler),
|
|
1370
|
+
children: [
|
|
1371
|
+
structureFilters?.filter((filter) => filter?.type === "date")?.map(
|
|
1372
|
+
(filter) => filter?.pair_with && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "m-0 w-full space-y-2", children: [
|
|
1373
|
+
/* @__PURE__ */ jsxRuntime.jsx(Label, { children: filter?.label }),
|
|
1374
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1375
|
+
reactHookForm.Controller,
|
|
1376
|
+
{
|
|
1377
|
+
name: `${filter?.filter_name}.fieldValue`,
|
|
1378
|
+
control,
|
|
1379
|
+
defaultValue: void 0,
|
|
1380
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1381
|
+
DatePicker,
|
|
1382
|
+
{
|
|
1383
|
+
date: field.value instanceof Date ? field.value : void 0,
|
|
1384
|
+
setDate: field.onChange,
|
|
1385
|
+
placeholder: filter?.label
|
|
1386
|
+
}
|
|
1387
|
+
)
|
|
1388
|
+
}
|
|
1389
|
+
)
|
|
1390
|
+
] }, filter.filter_name)
|
|
1391
|
+
),
|
|
1392
|
+
structureFilters?.filter((filter) => filter?.type !== "range" && filter?.type !== "date")?.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
|
|
1393
|
+
/* @__PURE__ */ jsxRuntime.jsx(Label, { children: filter?.label }),
|
|
1394
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${renderOperator(filter) ? "relative" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-stretch`, children: [
|
|
1395
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "m-0 w-full", children: [
|
|
1396
|
+
filter?.type === "text" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1397
|
+
reactHookForm.Controller,
|
|
1398
|
+
{
|
|
1399
|
+
name: `${filter?.filter_name}.fieldValue`,
|
|
1400
|
+
control,
|
|
1401
|
+
defaultValue: "",
|
|
1402
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1403
|
+
Input,
|
|
1404
|
+
{
|
|
1405
|
+
className: `!focus-visible:ring-0 !focus-visible:shadow-none bg-background ${renderOperator(filter) ? "border-ee-0 rounded-e-nonee" : ""}`,
|
|
1406
|
+
"aria-label": `${filter?.filter_name}`,
|
|
1407
|
+
...field,
|
|
1408
|
+
type: filter?.type,
|
|
1409
|
+
placeholder: filter?.label
|
|
1410
|
+
}
|
|
1411
|
+
)
|
|
1412
|
+
}
|
|
1413
|
+
),
|
|
1414
|
+
(filter?.type === "select" || filter?.type === "boolean" || filter?.type === "null") && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1415
|
+
reactHookForm.Controller,
|
|
1416
|
+
{
|
|
1417
|
+
name: `${filter?.filter_name}.fieldValue`,
|
|
1418
|
+
control,
|
|
1419
|
+
defaultValue: void 0,
|
|
1420
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1421
|
+
Select,
|
|
1422
|
+
{
|
|
1423
|
+
...field,
|
|
1424
|
+
onValueChange: field.onChange,
|
|
1425
|
+
defaultValue: field.value,
|
|
1426
|
+
"aria-label": `${filter?.filter_name}`,
|
|
1427
|
+
children: [
|
|
1428
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1429
|
+
SelectTrigger,
|
|
1430
|
+
{
|
|
1431
|
+
className: `w-full cursor-pointer bg-background
|
|
1432
|
+
${renderOperator(filter) ? "border-ee-0 rounded-e-nonee" : ""} `,
|
|
1433
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: filter?.label })
|
|
1434
|
+
}
|
|
1435
|
+
),
|
|
1436
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: objectToArrayKeyVal(filter?.props?.select_options || {})?.sort((a, b) => a.value === "" ? -1 : b.value === "" ? 1 : 0)?.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt?.value, children: opt?.key }, opt?.value)) })
|
|
1437
|
+
]
|
|
1438
|
+
}
|
|
1439
|
+
)
|
|
1440
|
+
}
|
|
1441
|
+
),
|
|
1442
|
+
filter?.type === "number" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1443
|
+
reactHookForm.Controller,
|
|
1444
|
+
{
|
|
1445
|
+
name: `${filter?.filter_name}.fieldValue`,
|
|
1446
|
+
control,
|
|
1447
|
+
defaultValue: "",
|
|
1448
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1449
|
+
Input,
|
|
1450
|
+
{
|
|
1451
|
+
className: `bg-background ${renderOperator(filter) ? "border-ee-0 rounded-e-nonee" : ""}`,
|
|
1452
|
+
...field,
|
|
1453
|
+
"aria-label": `${filter?.filter_name}`,
|
|
1454
|
+
type: "text",
|
|
1455
|
+
onKeyDown: (e) => {
|
|
1456
|
+
if ([46, 8, 9, 27, 13, 190, 110].indexOf(e.keyCode) !== -1 || // Allow: Ctrl+A
|
|
1457
|
+
e.keyCode === 65 && e.ctrlKey === true || // Allow: home, end, left, right
|
|
1458
|
+
e.keyCode >= 35 && e.keyCode <= 39) {
|
|
1459
|
+
return;
|
|
1460
|
+
}
|
|
1461
|
+
if ((e.shiftKey || e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
|
|
1462
|
+
e.preventDefault();
|
|
1463
|
+
}
|
|
1464
|
+
},
|
|
1465
|
+
onChange: (e) => {
|
|
1466
|
+
const value = e.target.value.replace(/[^\d.]/g, "");
|
|
1467
|
+
const parts = value.split(".");
|
|
1468
|
+
if (parts.length > 2) {
|
|
1469
|
+
return;
|
|
1470
|
+
}
|
|
1471
|
+
field.onChange(value);
|
|
1472
|
+
},
|
|
1473
|
+
placeholder: filter?.label
|
|
1474
|
+
}
|
|
1475
|
+
)
|
|
1476
|
+
}
|
|
1477
|
+
),
|
|
1478
|
+
filter?.type === "multi_select" && filter?.props?.selectOptions && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1479
|
+
reactHookForm.Controller,
|
|
1480
|
+
{
|
|
1481
|
+
name: `${filter?.filter_name}.fieldValue`,
|
|
1482
|
+
control,
|
|
1483
|
+
defaultValue: void 0,
|
|
1484
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1485
|
+
MultiSelect,
|
|
1486
|
+
{
|
|
1487
|
+
...field,
|
|
1488
|
+
onValuesChange: (values) => field.onChange(values),
|
|
1489
|
+
defaultValues: field.value || [],
|
|
1490
|
+
"aria-label": `${filter?.filter_name}`,
|
|
1491
|
+
children: [
|
|
1492
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1493
|
+
MultiSelectTrigger,
|
|
1494
|
+
{
|
|
1495
|
+
className: `w-full cursor-pointer bg-background
|
|
1496
|
+
${renderOperator(filter) ? "border-ee-0 rounded-e-nonee" : ""} `,
|
|
1497
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectValue, { placeholder: filter?.label })
|
|
1498
|
+
}
|
|
1499
|
+
),
|
|
1500
|
+
/* @__PURE__ */ jsxRuntime.jsx(MultiSelectContent, { children: objectToArrayKeyVal(filter?.props?.selectOptions || {})?.sort((a, b) => a.value === "" ? -1 : b.value === "" ? 1 : 0)?.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(MultiSelectItem, { value: opt?.value, children: opt?.key }, opt?.value)) })
|
|
1501
|
+
]
|
|
1502
|
+
}
|
|
1503
|
+
)
|
|
1504
|
+
}
|
|
1505
|
+
) }),
|
|
1506
|
+
filter?.type === "multi_select" && !filter?.props?.selectOptions && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1507
|
+
reactHookForm.Controller,
|
|
1508
|
+
{
|
|
1509
|
+
name: `${filter?.filter_name}.fieldValue`,
|
|
1510
|
+
control,
|
|
1511
|
+
defaultValue: "",
|
|
1512
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1513
|
+
tags_input_default,
|
|
1514
|
+
{
|
|
1515
|
+
value: field.value || [],
|
|
1516
|
+
onChange: (values) => field.onChange(values),
|
|
1517
|
+
placeholder: filter?.label
|
|
1518
|
+
}
|
|
1519
|
+
)
|
|
1520
|
+
}
|
|
1521
|
+
) })
|
|
1522
|
+
] }),
|
|
1523
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1524
|
+
reactHookForm.Controller,
|
|
1525
|
+
{
|
|
1526
|
+
name: `${filter.filter_name}.operator`,
|
|
1527
|
+
control,
|
|
1528
|
+
defaultValue: getOperators(filter)[0],
|
|
1529
|
+
render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1530
|
+
Select,
|
|
1531
|
+
{
|
|
1532
|
+
...field,
|
|
1533
|
+
onValueChange: field.onChange,
|
|
1534
|
+
value: field.value || getOperators(filter)[0],
|
|
1535
|
+
"aria-label": `${filter?.filter_name}`,
|
|
1536
|
+
children: [
|
|
1537
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
|
|
1538
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1539
|
+
SelectTrigger,
|
|
1540
|
+
{
|
|
1541
|
+
className: `bg-muted-foreground/10 absolute top-[3px] end-[3px] bottom-[3px] min-w-[80px] max-w-[80px] border-none !h-[30px] !cursor-pointer shadow-none ${renderOperator(filter) ? "" : "hidden"}`,
|
|
1542
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {})
|
|
1543
|
+
}
|
|
1544
|
+
) }),
|
|
1545
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "dark:text-background", children: getOperatorLabel(watch(`${filter.filter_name}.operator`)) || getOperatorLabel(getOperators(filter)?.[0]) })
|
|
1546
|
+
] }),
|
|
1547
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectContent, { align: "end", children: getOperators(filter)?.map((operator) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: operator, children: operator }, operator)) })
|
|
1548
|
+
]
|
|
1549
|
+
}
|
|
1550
|
+
)
|
|
1551
|
+
}
|
|
1552
|
+
)
|
|
1553
|
+
] }) })
|
|
1554
|
+
] }, filter?.filter_name))
|
|
1555
|
+
]
|
|
1556
|
+
}
|
|
1557
|
+
),
|
|
1558
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col absolute bottom-0 p-3 bg-background dark:bg-neutral-800 left-0 right-0", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { form: "tb_filters_form", type: "submit", variant: "primary-opac", className: "px-5 w-full", disabled: !isSubmitEnabled, children: t("apply") }) })
|
|
1559
|
+
] })
|
|
1560
|
+
] }),
|
|
1561
|
+
/* @__PURE__ */ jsxRuntime.jsx(AppliedFilters_default, { setValue, resetField })
|
|
1562
|
+
] })
|
|
1563
|
+
);
|
|
1564
|
+
}
|
|
1565
|
+
var TableFilters_default = TableFilters;
|
|
1566
|
+
var Checkbox2 = React4__default.default.forwardRef(({ onClick, onChange, checked, ...rest }, ref) => {
|
|
1567
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { ref, onCheckedChange: onClick, checked, ...rest });
|
|
1568
|
+
});
|
|
1569
|
+
function TableLoader({ count }) {
|
|
1570
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full P-4 bg-neutral-100 dark:bg-neutral-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0 flex flex-col gap-1 p-2", children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[50px] dark:bg-neutral-800 bg-neutral-200 w-full rounded-md" }, index)) }) });
|
|
1571
|
+
}
|
|
1572
|
+
function ExpandedRow({ data }) {
|
|
1573
|
+
const { tableColumns } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1574
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-neutral-100 dark:bg-neutral-800 dark:text-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: "500px" }, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid items-center grid-cols-1 lg:grid-cols-12 gap-3 text-end g-4 py-4", children: tableColumns?.map((col, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${col?.type === "actions" ? "lg:col-span-9" : "lg:col-span-6"}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex px-3 gap-2 items-start", children: [
|
|
1575
|
+
/* @__PURE__ */ jsxRuntime.jsx(fa.FaCircle, { size: 4, className: "mt-[5px] text-primary flex-shrink-0" }),
|
|
1576
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
|
|
1577
|
+
/* @__PURE__ */ jsxRuntime.jsx("h6", { className: "text-[12px] text-start font-semibold mb-1", children: col?.name }),
|
|
1578
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-start", children: col?.cell(data) })
|
|
1579
|
+
] })
|
|
1580
|
+
] }) }, index)) }) }) });
|
|
1581
|
+
}
|
|
1582
|
+
var ExpandedRow_default = ExpandedRow;
|
|
1583
|
+
|
|
1584
|
+
// src/shims/useSecureLS.ts
|
|
1585
|
+
function useSecureLS() {
|
|
1586
|
+
return getHostStorage();
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
// src/shims/app-currency.ts
|
|
1590
|
+
var app_currency_default = AppCurrency;
|
|
1591
|
+
function CalculateWithdrawalAmount({ selectedRows }) {
|
|
1592
|
+
const t = useTranslations("ApiTables");
|
|
1593
|
+
reactRedux.useDispatch();
|
|
1594
|
+
const { bulkActions } = reactRedux.useSelector((state) => state.bulkActions ?? { bulkActions: [] });
|
|
1595
|
+
const totalAmountSelected = React4.useMemo(() => {
|
|
1596
|
+
return selectedRows?.reduce((total, row) => total + Number(row?.dues), 0) ?? 0;
|
|
1597
|
+
}, [selectedRows]);
|
|
1598
|
+
React4.useMemo(
|
|
1599
|
+
() => bulkActions?.find((a) => a?.action_key === "create_withdrawal_bulk"),
|
|
1600
|
+
[bulkActions]
|
|
1601
|
+
);
|
|
1602
|
+
return totalAmountSelected > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-2 mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("h6", { className: "text-3xl mb-0 lh-1", style: { lineHeight: "1 !important" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-[400] flex items-center gap-1", children: [
|
|
1603
|
+
totalAmountSelected?.toFixed(2),
|
|
1604
|
+
" ",
|
|
1605
|
+
/* @__PURE__ */ jsxRuntime.jsx(app_currency_default, { t, className: "text-sm font-[400]" })
|
|
1606
|
+
] }) }) });
|
|
1607
|
+
}
|
|
1608
|
+
function TableBody2() {
|
|
1609
|
+
const { bulkActions } = reactRedux.useSelector((state) => state.bulkActions);
|
|
1610
|
+
const { structureRowActions, actionsInRegularCells } = reactRedux.useSelector((state) => state.rowActions);
|
|
1611
|
+
const { tableColumns, toggledClearRows, selectedRows } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1612
|
+
const { tableData, tableFetchingLoading, pageSize, structureColumns, tableName, customElement } = reactRedux.useSelector((state) => state.tableCore);
|
|
1613
|
+
const dispatch = reactRedux.useDispatch();
|
|
1614
|
+
const tApiTables = useTranslations("ApiTables");
|
|
1615
|
+
const { get } = useSecureLS();
|
|
1616
|
+
function sortingTableHandler(column, sortDirection) {
|
|
1617
|
+
dispatch(_setTableSorting({ label: column?.name, direction: sortDirection, [column?.colIdentifier]: sortDirection }));
|
|
1618
|
+
}
|
|
1619
|
+
React4.useEffect(() => {
|
|
1620
|
+
dispatch(_setTableColumns({ cols: structureColumns?.filter((col) => col?.showable), tbData: tableData }));
|
|
1621
|
+
if (!get(`${tableName}_tb`)) {
|
|
1622
|
+
dispatch(_setVisibleColumns(structureColumns?.map((col) => col?.data_src)));
|
|
1623
|
+
} else {
|
|
1624
|
+
dispatch(_setVisibleColumns(JSON.parse(get(`${tableName}_tb`))));
|
|
1625
|
+
}
|
|
1626
|
+
}, [structureColumns, tableData]);
|
|
1627
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1628
|
+
customElement === "withdrawal_requests" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(CalculateWithdrawalAmount, { selectedRows: selectedRows ?? [] }) }),
|
|
1629
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdt-table-holder static", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `table-scrollable-holder text-nowrap static`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1630
|
+
DataTable__default.default,
|
|
1631
|
+
{
|
|
1632
|
+
className: "text-nowrap",
|
|
1633
|
+
columns: tableColumns,
|
|
1634
|
+
data: tableData,
|
|
1635
|
+
expandableRows: true,
|
|
1636
|
+
expandableRowsComponent: ExpandedRow_default,
|
|
1637
|
+
responsive: true,
|
|
1638
|
+
progressPending: tableFetchingLoading,
|
|
1639
|
+
progressComponent: /* @__PURE__ */ jsxRuntime.jsx(TableLoader, { count: Number(pageSize) }),
|
|
1640
|
+
sortIcon: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiChevronUpDown, { className: "me-1" }),
|
|
1641
|
+
selectableRowsComponent: Checkbox2,
|
|
1642
|
+
sortServer: true,
|
|
1643
|
+
onSort: sortingTableHandler,
|
|
1644
|
+
noDataComponent: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-foreground bg-neutral-100 dark:bg-neutral-800 px-4 w-full text-start lg:text-center", children: tApiTables("no_results") }),
|
|
1645
|
+
persistTableHead: true,
|
|
1646
|
+
selectableRows: !tableFetchingLoading && (bulkActions.length > 0 || structureRowActions?.filter((action) => action?.applicableAsBulkAction)?.length > 0) ? true : false,
|
|
1647
|
+
onSelectedRowsChange: ({ selectedRows: selectedRows2 }) => dispatch(_setSelectedRows(selectedRows2)),
|
|
1648
|
+
clearSelectedRows: !toggledClearRows
|
|
1649
|
+
}
|
|
1650
|
+
) }) })
|
|
1651
|
+
] });
|
|
1652
|
+
}
|
|
1653
|
+
var TableBody_default = TableBody2;
|
|
1654
|
+
|
|
1655
|
+
// src/shims/custom-pagination.ts
|
|
1656
|
+
var custom_pagination_default = CustomPagination;
|
|
1657
|
+
function TablePagination() {
|
|
1658
|
+
const { tablePagination, currentPage } = reactRedux.useSelector((state) => state.tableCore);
|
|
1659
|
+
const dispatch = reactRedux.useDispatch();
|
|
1660
|
+
const tApiTables = useTranslations("ApiTables");
|
|
1661
|
+
function setCurrentPageHandler(link) {
|
|
1662
|
+
dispatch(_setCurrentPage(Number(link)));
|
|
1663
|
+
}
|
|
1664
|
+
const currentPageNumber = tablePagination?.current_page ?? currentPage;
|
|
1665
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2 mt-5 text-center lg:text-end", children: [
|
|
1666
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col", children: tablePagination && tablePagination.total > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1667
|
+
custom_pagination_default,
|
|
1668
|
+
{
|
|
1669
|
+
currentPage: currentPageNumber,
|
|
1670
|
+
totalPages: tablePagination.last_page,
|
|
1671
|
+
onPageChange: (page) => {
|
|
1672
|
+
setCurrentPageHandler(page);
|
|
1673
|
+
}
|
|
1674
|
+
}
|
|
1675
|
+
) }),
|
|
1676
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground text-center lg:text-end text-sm", children: [
|
|
1677
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
1678
|
+
" ",
|
|
1679
|
+
tApiTables("show_results"),
|
|
1680
|
+
" "
|
|
1681
|
+
] }),
|
|
1682
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "mx-1", children: tablePagination?.from ?? 0 }),
|
|
1683
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
1684
|
+
tApiTables("to_results"),
|
|
1685
|
+
" "
|
|
1686
|
+
] }),
|
|
1687
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "mx-1", children: tablePagination?.to ?? 0 }),
|
|
1688
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
1689
|
+
" ",
|
|
1690
|
+
tApiTables("from_results")
|
|
1691
|
+
] }),
|
|
1692
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "mx-1", children: tablePagination?.total ?? 0 }),
|
|
1693
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
1694
|
+
" ",
|
|
1695
|
+
tApiTables("results")
|
|
1696
|
+
] })
|
|
1697
|
+
] })
|
|
1698
|
+
] });
|
|
1699
|
+
}
|
|
1700
|
+
var TablePagination_default = TablePagination;
|
|
1701
|
+
function TableSorting() {
|
|
1702
|
+
const { tableSorting } = reactRedux.useSelector((state) => state?.tableCore);
|
|
1703
|
+
const dispatch = reactRedux.useDispatch();
|
|
1704
|
+
function resetTableSorting() {
|
|
1705
|
+
dispatch(_setTableSorting({}));
|
|
1706
|
+
}
|
|
1707
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(tableSorting)?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1 p-0 mb-1 pt-3", children: [
|
|
1708
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-bold me-2", children: "Sorted By " }),
|
|
1709
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "ps-4 pe-0.5 rounded-full border !border-foreground/30 dark:border-foreground/10", children: [
|
|
1710
|
+
tableSorting?.label,
|
|
1711
|
+
": ",
|
|
1712
|
+
tableSorting?.direction,
|
|
1713
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1714
|
+
Button,
|
|
1715
|
+
{
|
|
1716
|
+
variant: "default",
|
|
1717
|
+
className: "p-0 ms-3 h-6 w-6 rounded-full hover:bg-destructive/10 dark:hover:bg-destructive/10 hover:text-destructive bg-foreground dark:bg-foreground/10",
|
|
1718
|
+
onClick: resetTableSorting,
|
|
1719
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
|
|
1720
|
+
}
|
|
1721
|
+
)
|
|
1722
|
+
] })
|
|
1723
|
+
] }) }) });
|
|
1724
|
+
}
|
|
1725
|
+
var TableSorting_default = TableSorting;
|
|
1726
|
+
var API_TABLES_PAGE_SIZE_KEY = "api_tables_page_size";
|
|
1727
|
+
function TablePageSize() {
|
|
1728
|
+
const { pageSize } = reactRedux.useSelector((state) => state.tableCore);
|
|
1729
|
+
const dispatch = reactRedux.useDispatch();
|
|
1730
|
+
const { set: setStored } = useSecureLS();
|
|
1731
|
+
function changePageSize(value) {
|
|
1732
|
+
setStored(API_TABLES_PAGE_SIZE_KEY, String(value));
|
|
1733
|
+
dispatch(_changePageSize(value));
|
|
1734
|
+
dispatch(_setCurrentPage(1));
|
|
1735
|
+
}
|
|
1736
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:w-[90px]", children: /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: (value) => changePageSize(Number(value)), value: `${pageSize}`, children: [
|
|
1737
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Page Size" }) }),
|
|
1738
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(SelectGroup, { children: [
|
|
1739
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "10", children: "10" }),
|
|
1740
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "25", children: "25" }),
|
|
1741
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "50", children: "50" }),
|
|
1742
|
+
/* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "100", children: "100" })
|
|
1743
|
+
] }) })
|
|
1744
|
+
] }) });
|
|
1745
|
+
}
|
|
1746
|
+
var TablePageSize_default = TablePageSize;
|
|
1747
|
+
function ColumnsVisibility() {
|
|
1748
|
+
const { tableName } = reactRedux.useSelector((state) => state.tableCore);
|
|
1749
|
+
const { tableColumns, visibleColumns } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1750
|
+
const dispatch = reactRedux.useDispatch();
|
|
1751
|
+
const tApiTables = useTranslations("ApiTables");
|
|
1752
|
+
const { set } = useSecureLS();
|
|
1753
|
+
function toggleColumnVisibility(value, data_src, tableName2) {
|
|
1754
|
+
let columns = [...visibleColumns];
|
|
1755
|
+
if (value === true) {
|
|
1756
|
+
columns = [...visibleColumns, data_src];
|
|
1757
|
+
} else {
|
|
1758
|
+
columns = columns.filter((col) => col !== data_src);
|
|
1759
|
+
}
|
|
1760
|
+
dispatch(_setVisibleColumns(columns));
|
|
1761
|
+
set(`${tableName2}_tb`, JSON.stringify(columns));
|
|
1762
|
+
}
|
|
1763
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
|
|
1764
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full sm:w-auto", variant: "outline", children: [
|
|
1765
|
+
/* @__PURE__ */ jsxRuntime.jsx(ri.RiEyeCloseFill, {}),
|
|
1766
|
+
tApiTables("columns"),
|
|
1767
|
+
/* @__PURE__ */ jsxRuntime.jsx(fi.FiChevronDown, { className: "ms-auto" })
|
|
1768
|
+
] }) }),
|
|
1769
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "p-4 flex flex-col gap-1 max-h-[min(90vh,400px)] overflow-y-auto w-auto min-w-[--radix-popover-trigger-width]", children: tableColumns?.map((col, index) => {
|
|
1770
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1771
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1772
|
+
Checkbox,
|
|
1773
|
+
{
|
|
1774
|
+
className: "cursor-pointer",
|
|
1775
|
+
checked: visibleColumns?.indexOf(col.data_src) !== -1,
|
|
1776
|
+
onCheckedChange: (checked) => toggleColumnVisibility(checked, col.data_src, tableName),
|
|
1777
|
+
id: col.data_src
|
|
1778
|
+
}
|
|
1779
|
+
),
|
|
1780
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: col.data_src, className: "text-sm cursor-pointer", children: col.name })
|
|
1781
|
+
] }, index);
|
|
1782
|
+
}) })
|
|
1783
|
+
] });
|
|
1784
|
+
}
|
|
1785
|
+
var ColumnsVisibility_default = ColumnsVisibility;
|
|
1786
|
+
function ActionsOfSelections() {
|
|
1787
|
+
const { selectedRows, selectedIds } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1788
|
+
const { appliedFilters } = reactRedux.useSelector((state) => state.tableCore);
|
|
1789
|
+
const { bulkActions } = reactRedux.useSelector((state) => state.bulkActions);
|
|
1790
|
+
const { selectedRowActions } = reactRedux.useSelector((state) => state.rowActions);
|
|
1791
|
+
const { bulkActionsPostHandler } = useUtilsProvider();
|
|
1792
|
+
reactRedux.useDispatch();
|
|
1793
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedRows?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-2 mb-4", children: selectedRowActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-grow-1 md:flex-grow-0 items-center", children: action.action_type === "toggle" ? /* @__PURE__ */ jsxRuntime.jsx(ToggleRowActionElement, { action, isBulk: true }) : action.action_type === "redirect" ? /* @__PURE__ */ jsxRuntime.jsx(RedirectRowActionElement, { action, isBulk: true }) : action.action_type === "external_redirect" ? /* @__PURE__ */ jsxRuntime.jsx(ExternalRedirectRowActionElement, { action, isBulk: true }) : /* @__PURE__ */ jsxRuntime.jsx(GeneralRowActionElement, { action, isBulk: true }) }, action.action_key)) }) });
|
|
1794
|
+
}
|
|
1795
|
+
var ActionsOfSelection_default = ActionsOfSelections;
|
|
1796
|
+
|
|
1797
|
+
// src/shims/popup.ts
|
|
1798
|
+
var popup_default = Popup;
|
|
1799
|
+
function DatalistModal({ closeModal }) {
|
|
1800
|
+
const { rowSelectedModal } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1801
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1802
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "font-bold", children: rowSelectedModal?.label }) }),
|
|
1803
|
+
/* @__PURE__ */ jsxRuntime.jsx("ol", { className: "mb-4 overflow-hidden", children: Array.isArray(rowSelectedModal?.value?.value) && rowSelectedModal?.value?.value?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "p-3 text-wrap whitespace-normal bg-neutral-100 dark:bg-neutral-800 text-sm rounded-md mb-2", children: item }, index)) }),
|
|
1804
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "w-full", onClick: closeModal, children: "Dismiss" })
|
|
1805
|
+
] });
|
|
1806
|
+
}
|
|
1807
|
+
function DatalistObjModal({ closeModal }) {
|
|
1808
|
+
const { rowSelectedModal } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1809
|
+
const obj = rowSelectedModal?.value?.value;
|
|
1810
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1811
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("h5", { children: rowSelectedModal?.label }) }),
|
|
1812
|
+
/* @__PURE__ */ jsxRuntime.jsx("ol", { className: "mb-4", children: obj && Object.keys(obj)?.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-2", children: [
|
|
1813
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "py-2 px-3 bg-neutral-100 dark:bg-neutral-800 w-full rounded-md", children: key }),
|
|
1814
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "py-2 px-3 bg-neutral-100 dark:bg-neutral-800 w-full rounded-md", children: obj[key]?.join(" - ") })
|
|
1815
|
+
] }, index)) }),
|
|
1816
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "w-full", onClick: closeModal, children: "Dismiss" })
|
|
1817
|
+
] });
|
|
1818
|
+
}
|
|
1819
|
+
function HTMLParsedModal() {
|
|
1820
|
+
const { rowSelectedModal } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1821
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1822
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h5", { children: rowSelectedModal?.label }) }),
|
|
1823
|
+
rowSelectedModal?.value?.value && typeof rowSelectedModal?.value?.value === "string" && parse__default.default(rowSelectedModal?.value?.value)
|
|
1824
|
+
] });
|
|
1825
|
+
}
|
|
1826
|
+
function ViewRowData({ data }) {
|
|
1827
|
+
const modalData = React4.useMemo(() => {
|
|
1828
|
+
return data?.data;
|
|
1829
|
+
}, [data]);
|
|
1830
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 xl:grid-cols-12 items-stretch gap-1 pt-7", children: [
|
|
1831
|
+
modalData && modalData?.barcode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xl:col-span-12 flex flex-col items-center justify-center p-4", children: [
|
|
1832
|
+
/* @__PURE__ */ jsxRuntime.jsx("h6", { className: "mb-2 font-[400] text-md", children: modalData.barcode?.label || "Barcode" }),
|
|
1833
|
+
modalData.barcode && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1834
|
+
"img",
|
|
1835
|
+
{
|
|
1836
|
+
src: `data:image/png;base64,${modalData.barcode}`,
|
|
1837
|
+
alt: "Barcode",
|
|
1838
|
+
className: "max-w-full h-auto mb-2 border rounded bg-white",
|
|
1839
|
+
style: { maxHeight: "50vh" }
|
|
1840
|
+
}
|
|
1841
|
+
),
|
|
1842
|
+
modalData.barcode && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: () => copyToClipboard(String(modalData.barcodeValue)), className: "mt-2", children: [
|
|
1843
|
+
/* @__PURE__ */ jsxRuntime.jsx(io5.IoCopy, { size: 17 }),
|
|
1844
|
+
"Copy Barcode"
|
|
1845
|
+
] })
|
|
1846
|
+
] }),
|
|
1847
|
+
modalData && Array.isArray(modalData) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: "border", children: [
|
|
1848
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: Object.keys(modalData?.at(0) ?? {}).map((key, idx) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "px-3", children: modalData?.at(0)?.[key]?.label }, idx)) }) }),
|
|
1849
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: modalData?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: Object.keys(item)?.length > 2 ? index % 2 === 0 ? "" : "bg-muted/50" : "", children: Object.keys(item)?.map((key, idx) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-medium px-3", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item[key]?.value }) })) }, index)) })
|
|
1850
|
+
] }) }),
|
|
1851
|
+
modalData && !modalData?.barcode && !Array.isArray(modalData) && Object.keys(modalData)?.map((key, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "2xl:col-span-4 xl:col-span-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 h-full p-3 rounded-md", children: [
|
|
1852
|
+
/* @__PURE__ */ jsxRuntime.jsx("h6", { className: "mb-0 font-[400] text-[13px]", children: modalData[key]?.label }),
|
|
1853
|
+
modalData[key]?.type === "copy_value" ? modalData[key]?.value && modalData[key]?.value !== "#!" && modalData[key]?.value !== "!#" ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: () => copyToClipboard(String(modalData[key]?.value)), children: [
|
|
1854
|
+
/* @__PURE__ */ jsxRuntime.jsx(io5.IoCopy, { size: 17 }),
|
|
1855
|
+
"Copy Link"
|
|
1856
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0 text-muted-foreground text-wrap", children: "No share Link" }) : Array.isArray(modalData[key]?.value) ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mb-0 mt-3 pe-4 text-[13px]", children: modalData[key]?.value?.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: item }, index2)) }) : (typeof modalData[key]?.value === "string" || typeof modalData[key]?.value === "number") && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-wrap mb-0 text-[14px] mt-2", children: modalData[key]?.value || "----" })
|
|
1857
|
+
] }) }, index))
|
|
1858
|
+
] });
|
|
1859
|
+
}
|
|
1860
|
+
function ConfirmationModal({ closeModal, confirmationFor }) {
|
|
1861
|
+
const t = useTranslations("ApiTables");
|
|
1862
|
+
const { clickedRowAction, rowActionPostLoading } = reactRedux.useSelector((state) => state.rowActions);
|
|
1863
|
+
const { appliedFilters } = reactRedux.useSelector((state) => state.tableCore);
|
|
1864
|
+
const { bulkActionsPostHandler, selectedBulkAction, bulkActionPostLoading } = reactRedux.useSelector((state) => state.bulkActions);
|
|
1865
|
+
const { selectedIds } = reactRedux.useSelector((state) => state.tableColumns);
|
|
1866
|
+
const { rowActionsPostHandler } = useUtilsProvider();
|
|
1867
|
+
function fireRowAction() {
|
|
1868
|
+
if (confirmationFor === "rowAction")
|
|
1869
|
+
rowActionsPostHandler(
|
|
1870
|
+
clickedRowAction?.method,
|
|
1871
|
+
clickedRowAction?.isBulk ? clickedRowAction?.bulk_actions_url?.api ?? "" : clickedRowAction?.action?.api?.replace(/^\/api/, "") ?? "",
|
|
1872
|
+
{ selected_ids: selectedIds },
|
|
1873
|
+
clickedRowAction
|
|
1874
|
+
);
|
|
1875
|
+
if (confirmationFor === "bulkAction") {
|
|
1876
|
+
bulkActionsPostHandler(
|
|
1877
|
+
selectedBulkAction?.method,
|
|
1878
|
+
selectedBulkAction?.action.api,
|
|
1879
|
+
{ filters: appliedFilters, selected_ids: selectedIds },
|
|
1880
|
+
null,
|
|
1881
|
+
selectedBulkAction
|
|
1882
|
+
);
|
|
1883
|
+
}
|
|
1884
|
+
}
|
|
1885
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
|
|
1886
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-1 font-bold text-2xl", children: t("confirmActionTitle") }),
|
|
1887
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "h6 mb-4 text-sm pb-6", children: t("confirmActionMessage") }),
|
|
1888
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 ms-auto max-w-[200px] gap-2", children: [
|
|
1889
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1890
|
+
loading_button_default,
|
|
1891
|
+
{
|
|
1892
|
+
variant: "default",
|
|
1893
|
+
className: "w-full h-9!",
|
|
1894
|
+
onClick: fireRowAction,
|
|
1895
|
+
disabled: rowActionPostLoading || bulkActionPostLoading,
|
|
1896
|
+
isLoading: rowActionPostLoading || bulkActionPostLoading,
|
|
1897
|
+
children: t("confirm")
|
|
1898
|
+
}
|
|
1899
|
+
) }),
|
|
1900
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "w-full", onClick: closeModal, children: t("dismiss") }) })
|
|
1901
|
+
] })
|
|
1902
|
+
] });
|
|
1903
|
+
}
|
|
1904
|
+
function matchUrl(customControlAction, match) {
|
|
1905
|
+
const api = customControlAction?.url?.api ?? "";
|
|
1906
|
+
const web = customControlAction?.url?.web ?? "";
|
|
1907
|
+
const haystack = `${api} ${web}`;
|
|
1908
|
+
return typeof match === "string" ? haystack.includes(match) : match.test(haystack);
|
|
1909
|
+
}
|
|
1910
|
+
function ApiTablesModals() {
|
|
1911
|
+
const { selectedBulkAction } = reactRedux.useSelector((state) => state?.bulkActions ?? {});
|
|
1912
|
+
const { rowSelectedModal } = reactRedux.useSelector((state) => state?.tableColumns ?? {});
|
|
1913
|
+
const { clickedRowAction, clickedRowActionResponse, customControlAction } = reactRedux.useSelector(
|
|
1914
|
+
(state) => state?.rowActions ?? {}
|
|
1915
|
+
);
|
|
1916
|
+
const { customControls = [], bulkActionModals = [], rowActionModals = [] } = useApiTablesConfig();
|
|
1917
|
+
const dispatch = reactRedux.useDispatch();
|
|
1918
|
+
function handleCloseModal() {
|
|
1919
|
+
dispatch(_getClickedRowActionResponse(null));
|
|
1920
|
+
dispatch(_getSelectedBulkAction(null));
|
|
1921
|
+
dispatch(_getClickedRowAction(null));
|
|
1922
|
+
dispatch(_getCustomControlRequest(null));
|
|
1923
|
+
}
|
|
1924
|
+
function handleCloseStaticModals() {
|
|
1925
|
+
dispatch(_setRowSelectedModal(null));
|
|
1926
|
+
}
|
|
1927
|
+
const bulkActionKey = selectedBulkAction?.action_key;
|
|
1928
|
+
const bulkModal = bulkActionModals.find((entry) => entry.actionKey === bulkActionKey);
|
|
1929
|
+
const isCustomBulkModal = !!bulkModal;
|
|
1930
|
+
const showConfirmation = !!clickedRowAction?.need_confirmation || !!selectedBulkAction?.need_confirmation && !isCustomBulkModal;
|
|
1931
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1932
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1933
|
+
popup_default,
|
|
1934
|
+
{
|
|
1935
|
+
status: clickedRowActionResponse,
|
|
1936
|
+
closeModal: handleCloseModal,
|
|
1937
|
+
isVisible: !!clickedRowActionResponse,
|
|
1938
|
+
children: [
|
|
1939
|
+
clickedRowAction?.onSuccess === "DisplayOnModal" && /* @__PURE__ */ jsxRuntime.jsx(ViewRowData, { data: clickedRowActionResponse }),
|
|
1940
|
+
rowActionModals.map(({ match, component: RowModal }) => {
|
|
1941
|
+
const response = clickedRowActionResponse;
|
|
1942
|
+
const api = String(
|
|
1943
|
+
clickedRowAction?.action?.api ?? response?.url?.api ?? ""
|
|
1944
|
+
);
|
|
1945
|
+
const matched = typeof match === "string" ? api.includes(match) : match.test(api);
|
|
1946
|
+
return matched && response ? /* @__PURE__ */ jsxRuntime.jsx(RowModal, { data: response }, String(match)) : null;
|
|
1947
|
+
})
|
|
1948
|
+
]
|
|
1949
|
+
}
|
|
1950
|
+
),
|
|
1951
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1952
|
+
popup_default,
|
|
1953
|
+
{
|
|
1954
|
+
status: showConfirmation,
|
|
1955
|
+
closeModal: handleCloseModal,
|
|
1956
|
+
containerClass: "max-w-xl",
|
|
1957
|
+
isVisible: showConfirmation,
|
|
1958
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1959
|
+
ConfirmationModal,
|
|
1960
|
+
{
|
|
1961
|
+
closeModal: handleCloseModal,
|
|
1962
|
+
confirmationFor: clickedRowAction ? "rowAction" : selectedBulkAction ? "bulkAction" : "rowAction"
|
|
1963
|
+
}
|
|
1964
|
+
)
|
|
1965
|
+
}
|
|
1966
|
+
),
|
|
1967
|
+
bulkModal && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1968
|
+
popup_default,
|
|
1969
|
+
{
|
|
1970
|
+
status: bulkActionKey,
|
|
1971
|
+
closeModal: handleCloseModal,
|
|
1972
|
+
isVisible: !!selectedBulkAction,
|
|
1973
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(bulkModal.component, { closeModal: handleCloseModal, action: selectedBulkAction })
|
|
1974
|
+
}
|
|
1975
|
+
),
|
|
1976
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1977
|
+
popup_default,
|
|
1978
|
+
{
|
|
1979
|
+
status: rowSelectedModal,
|
|
1980
|
+
containerClass: "max-w-lg",
|
|
1981
|
+
closeModal: handleCloseStaticModals,
|
|
1982
|
+
isVisible: !!rowSelectedModal,
|
|
1983
|
+
children: Array.isArray(rowSelectedModal?.value?.value) ? /* @__PURE__ */ jsxRuntime.jsx(DatalistModal, { closeModal: handleCloseStaticModals }) : rowSelectedModal?.value?.value && Array.isArray(Object.keys(rowSelectedModal.value.value)) ? /* @__PURE__ */ jsxRuntime.jsx(DatalistObjModal, { closeModal: handleCloseStaticModals }) : /* @__PURE__ */ jsxRuntime.jsx(HTMLParsedModal, {})
|
|
1984
|
+
}
|
|
1985
|
+
),
|
|
1986
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1987
|
+
popup_default,
|
|
1988
|
+
{
|
|
1989
|
+
status: customControlAction,
|
|
1990
|
+
closeModal: handleCloseModal,
|
|
1991
|
+
containerClass: "lg:min-w-4xl",
|
|
1992
|
+
isVisible: !!customControlAction,
|
|
1993
|
+
children: customControls.map(
|
|
1994
|
+
({ match, component: Control }) => matchUrl(customControlAction, match) ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1995
|
+
Control,
|
|
1996
|
+
{
|
|
1997
|
+
action: customControlAction,
|
|
1998
|
+
closeModal: handleCloseModal
|
|
1999
|
+
},
|
|
2000
|
+
String(match)
|
|
2001
|
+
) : null
|
|
2002
|
+
)
|
|
2003
|
+
}
|
|
2004
|
+
)
|
|
2005
|
+
] });
|
|
2006
|
+
}
|
|
2007
|
+
var ApiTablesModals_default = ApiTablesModals;
|
|
2008
|
+
function TableBulkActions() {
|
|
2009
|
+
const { selectedIds } = reactRedux.useSelector((state) => state.tableColumns);
|
|
2010
|
+
const { bulkActions, bulkActionPostResponse } = reactRedux.useSelector((state) => state.bulkActions);
|
|
2011
|
+
const { tableData, tableFetchingLoading, appliedFilters, triggerTableReload } = reactRedux.useSelector((state) => state.tableCore);
|
|
2012
|
+
const { bulkActionsPostHandler } = useUtilsProvider();
|
|
2013
|
+
const dispatch = reactRedux.useDispatch();
|
|
2014
|
+
const tApiTables = useTranslations("ApiTables");
|
|
2015
|
+
const disableBulkActions = React4.useMemo(() => {
|
|
2016
|
+
return !tableData || tableData?.length === 0 || tableFetchingLoading;
|
|
2017
|
+
}, [tableData, tableFetchingLoading]);
|
|
2018
|
+
const requireModal2 = (action) => action?.action_key === "store_with_drawal_bulk" || action?.action_key === "create_withdrawal_bulk";
|
|
2019
|
+
React4.useEffect(() => {
|
|
2020
|
+
if (bulkActionPostResponse?.success && bulkActionPostResponse?.type === "stream") {
|
|
2021
|
+
downloadURL(bulkActionPostResponse?.data?.url, bulkActionPostResponse?.file_name);
|
|
2022
|
+
}
|
|
2023
|
+
if (bulkActionPostResponse?.success && bulkActionPostResponse?.onSuccess === "refetchData") {
|
|
2024
|
+
triggerTableReload();
|
|
2025
|
+
}
|
|
2026
|
+
if (bulkActionPostResponse?.success && bulkActionPostResponse?.onSuccess === "reload") {
|
|
2027
|
+
triggerTableReload();
|
|
2028
|
+
}
|
|
2029
|
+
dispatch(_bulkActionPostResponse(null));
|
|
2030
|
+
}, [bulkActionPostResponse]);
|
|
2031
|
+
function fireBulkAction(action) {
|
|
2032
|
+
if (requireModal2(action)) {
|
|
2033
|
+
dispatch(_getSelectedBulkAction(action));
|
|
2034
|
+
} else {
|
|
2035
|
+
bulkActionsPostHandler(
|
|
2036
|
+
action?.method,
|
|
2037
|
+
action?.action.api?.replace("/api", ""),
|
|
2038
|
+
{ filters: appliedFilters, selected_ids: selectedIds, ...action?.payload_keys && { ...action?.payload_keys } },
|
|
2039
|
+
{
|
|
2040
|
+
msg: action?.action_key === "export-excel-blob" ? tApiTables("exporting_excel") : tApiTables("processing_data"),
|
|
2041
|
+
icon: "excel"
|
|
2042
|
+
},
|
|
2043
|
+
action
|
|
2044
|
+
);
|
|
2045
|
+
}
|
|
2046
|
+
}
|
|
2047
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
|
|
2048
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full sm:w-auto", variant: "outline", children: [
|
|
2049
|
+
/* @__PURE__ */ jsxRuntime.jsx(pi.PiGearFill, {}),
|
|
2050
|
+
tApiTables("bulk_actions"),
|
|
2051
|
+
/* @__PURE__ */ jsxRuntime.jsx(fi.FiChevronDown, { className: "ms-auto" })
|
|
2052
|
+
] }) }),
|
|
2053
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { className: "min-w-[var(--radix-dropdown-menu-trigger-width)]", children: bulkActions?.map((action, index) => {
|
|
2054
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { disabled: disableBulkActions, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", className: "w-full text-[14px] cursor-pointer", onClick: () => fireBulkAction(action), children: action?.label }) }, index);
|
|
2055
|
+
}) })
|
|
2056
|
+
] }) });
|
|
2057
|
+
}
|
|
2058
|
+
var TableBulkActions_default = TableBulkActions;
|
|
2059
|
+
function FilterTrigger({ showFilters, setShowFilters }) {
|
|
2060
|
+
const tApiTables = useTranslations("ApiTables");
|
|
2061
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: () => setShowFilters(!showFilters), children: [
|
|
2062
|
+
/* @__PURE__ */ jsxRuntime.jsx(md.MdFilterListAlt, {}),
|
|
2063
|
+
tApiTables("show_filters")
|
|
2064
|
+
] }) });
|
|
2065
|
+
}
|
|
2066
|
+
function ApiTablesComponent({ customElement }) {
|
|
2067
|
+
const { bulkActions } = reactRedux.useSelector((state) => state?.bulkActions);
|
|
2068
|
+
const { structureFilters } = reactRedux.useSelector((state) => state?.tableCore);
|
|
2069
|
+
const { selectedRows } = reactRedux.useSelector((state) => state?.tableColumns);
|
|
2070
|
+
const [showFilters, setShowFilters] = React4.useState(false);
|
|
2071
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2072
|
+
structureFilters && structureFilters?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableFilters_default, { showFilters, setShowFilters }),
|
|
2073
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableSorting_default, {}),
|
|
2074
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex mb-4 items-end justify-center lg:justify-between pt-5", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex w-full flex-col sm:flex-row sm:justify-between items-center gap-3", children: [
|
|
2075
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full grid grid-cols-1 sm:grid-cols-3 gap-2 sm:w-auto", children: [
|
|
2076
|
+
bulkActions?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableBulkActions_default, {}),
|
|
2077
|
+
/* @__PURE__ */ jsxRuntime.jsx(ColumnsVisibility_default, {}),
|
|
2078
|
+
structureFilters?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FilterTrigger, { showFilters, setShowFilters })
|
|
2079
|
+
] }),
|
|
2080
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { className: "w-full sm:w-fit", children: /* @__PURE__ */ jsxRuntime.jsx(TablePageSize_default, {}) })
|
|
2081
|
+
] }) }),
|
|
2082
|
+
React4__default.default.isValidElement(customElement) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2", children: [
|
|
2083
|
+
" ",
|
|
2084
|
+
customElement,
|
|
2085
|
+
" "
|
|
2086
|
+
] }),
|
|
2087
|
+
selectedRows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm text-muted mb-1", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "fw-bold mx-1", children: selectedRows?.length }) }),
|
|
2088
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionsOfSelection_default, {}),
|
|
2089
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableBody_default, {}),
|
|
2090
|
+
/* @__PURE__ */ jsxRuntime.jsx(TablePagination_default, {}),
|
|
2091
|
+
/* @__PURE__ */ jsxRuntime.jsx(ApiTablesModals_default, {})
|
|
2092
|
+
] });
|
|
2093
|
+
}
|
|
2094
|
+
var ApiTablesComponent_default = ApiTablesComponent;
|
|
2095
|
+
var useTableFetcher = () => {
|
|
2096
|
+
const dispatch = reactRedux.useDispatch();
|
|
2097
|
+
const { axiosTable } = useApiTablesConfig();
|
|
2098
|
+
const { tableColumns, toggledClearRows } = reactRedux.useSelector((state) => state.tableColumns);
|
|
2099
|
+
async function tableFetchingHandler({
|
|
2100
|
+
tableName,
|
|
2101
|
+
signal,
|
|
2102
|
+
pageSize,
|
|
2103
|
+
currentPage,
|
|
2104
|
+
appliedFilters,
|
|
2105
|
+
tableSorting,
|
|
2106
|
+
params,
|
|
2107
|
+
tbData
|
|
2108
|
+
}) {
|
|
2109
|
+
dispatch(_setSelectedRows([]));
|
|
2110
|
+
dispatch(_setTableLoading(true));
|
|
2111
|
+
dispatch(_getTableData([]));
|
|
2112
|
+
dispatch(_setToggledClearRow(!toggledClearRows));
|
|
2113
|
+
try {
|
|
2114
|
+
const response = await axiosTable({
|
|
2115
|
+
method: "POST",
|
|
2116
|
+
url: `/api-table/control-tables/query-table/${tableName}`,
|
|
2117
|
+
data: {
|
|
2118
|
+
perPage: pageSize,
|
|
2119
|
+
page: currentPage,
|
|
2120
|
+
filters: appliedFilters,
|
|
2121
|
+
sorts: tableSorting,
|
|
2122
|
+
...params ? { params } : {}
|
|
2123
|
+
},
|
|
2124
|
+
signal
|
|
2125
|
+
});
|
|
2126
|
+
if (tableColumns) {
|
|
2127
|
+
dispatch(
|
|
2128
|
+
_setTableColumns({
|
|
2129
|
+
update: true,
|
|
2130
|
+
cols: tableColumns?.map((col) => ({
|
|
2131
|
+
...col,
|
|
2132
|
+
style: {
|
|
2133
|
+
width: calculateMinWidth(
|
|
2134
|
+
rowWithLongestField(response?.data?.items, col?.data_src),
|
|
2135
|
+
col?.name,
|
|
2136
|
+
col?.type
|
|
2137
|
+
)
|
|
2138
|
+
}
|
|
2139
|
+
})),
|
|
2140
|
+
tbData
|
|
2141
|
+
})
|
|
2142
|
+
);
|
|
2143
|
+
}
|
|
2144
|
+
dispatch(_getTableData(response?.data?.items));
|
|
2145
|
+
dispatch(_getTablePagination(response?.data?.pagination));
|
|
2146
|
+
dispatch(_getTableBindings(response?.data?.bindings));
|
|
2147
|
+
dispatch(_setTableLoading(false));
|
|
2148
|
+
} catch (err) {
|
|
2149
|
+
handleNetworkErrors(err);
|
|
2150
|
+
if (axios__default.default.isCancel(err)) {
|
|
2151
|
+
dispatch(_setTableLoading(true));
|
|
2152
|
+
} else {
|
|
2153
|
+
dispatch(_setTableLoading(false));
|
|
2154
|
+
}
|
|
2155
|
+
}
|
|
2156
|
+
}
|
|
2157
|
+
return { tableFetchingHandler };
|
|
2158
|
+
};
|
|
2159
|
+
var useTableFetcher_default = useTableFetcher;
|
|
2160
|
+
var createTableStore = () => {
|
|
2161
|
+
return toolkit.configureStore({
|
|
2162
|
+
reducer: {
|
|
2163
|
+
tableCore: tableCoreSlice_default,
|
|
2164
|
+
bulkActions: bulkActionsSlice_default,
|
|
2165
|
+
rowActions: rowActionsSlice_default,
|
|
2166
|
+
tableColumns: tableColumnsSlice_default
|
|
2167
|
+
},
|
|
2168
|
+
devTools: true,
|
|
2169
|
+
middleware: (getDefaultMiddleware) => getDefaultMiddleware({
|
|
2170
|
+
serializableCheck: false
|
|
2171
|
+
})
|
|
2172
|
+
});
|
|
2173
|
+
};
|
|
2174
|
+
var externalStoreGetter = null;
|
|
2175
|
+
function setExternalStoreGetter(getter) {
|
|
2176
|
+
externalStoreGetter = getter;
|
|
2177
|
+
}
|
|
2178
|
+
var getExternalState = () => {
|
|
2179
|
+
if (!externalStoreGetter) {
|
|
2180
|
+
return {};
|
|
2181
|
+
}
|
|
2182
|
+
return externalStoreGetter().getState();
|
|
2183
|
+
};
|
|
2184
|
+
var API_TABLES_PAGE_SIZE_KEY2 = "api_tables_page_size";
|
|
2185
|
+
var DEFAULT_PAGE_SIZE = 25;
|
|
2186
|
+
var VALID_PAGE_SIZES = [10, 25, 50, 100];
|
|
2187
|
+
function flattenMultiCellsActions(rowActions) {
|
|
2188
|
+
if (rowActions && Object.keys(rowActions)?.filter((key) => key === "general_actions")?.length > 0) {
|
|
2189
|
+
return Object.values(rowActions)?.map((object) => Object.values(object))?.reduce((acc, val) => acc?.concat(val), []);
|
|
2190
|
+
}
|
|
2191
|
+
return rowActions;
|
|
2192
|
+
}
|
|
2193
|
+
function checkActionsInRegularCells(rowActions) {
|
|
2194
|
+
return rowActions && Object.keys(rowActions)?.filter((key) => key === "general_actions")?.length > 0;
|
|
2195
|
+
}
|
|
2196
|
+
function ApiTablesController({
|
|
2197
|
+
table,
|
|
2198
|
+
params,
|
|
2199
|
+
customElement
|
|
2200
|
+
}) {
|
|
2201
|
+
const dispatch = reactRedux.useDispatch();
|
|
2202
|
+
const { get: getStored } = getHostStorage();
|
|
2203
|
+
getExternalState();
|
|
2204
|
+
const { usePathname } = useApiTablesConfig();
|
|
2205
|
+
const pathname = usePathname?.() ?? "";
|
|
2206
|
+
const { appliedFilters, currentPage, tableSorting, pageSize, tableName, tableData, tableRefresher } = reactRedux.useSelector((state) => state?.tableCore);
|
|
2207
|
+
const { tableFetchingHandler } = useTableFetcher_default();
|
|
2208
|
+
React4.useEffect(() => {
|
|
2209
|
+
dispatch(
|
|
2210
|
+
_getTableComponents({
|
|
2211
|
+
...table,
|
|
2212
|
+
...typeof customElement === "string" && { customElement }
|
|
2213
|
+
})
|
|
2214
|
+
);
|
|
2215
|
+
dispatch(_getStructureBulkActions(table?.bulkActions));
|
|
2216
|
+
dispatch(_getStructureRowActions(flattenMultiCellsActions(table?.rowActions)));
|
|
2217
|
+
if (checkActionsInRegularCells(table?.rowActions)) {
|
|
2218
|
+
dispatch(_checkActionsInRegularCells(true));
|
|
2219
|
+
}
|
|
2220
|
+
return () => {
|
|
2221
|
+
dispatch(_resetTableBulkActions());
|
|
2222
|
+
dispatch(_resetTableColumns());
|
|
2223
|
+
dispatch(_resetTableCore());
|
|
2224
|
+
dispatch(_resetTableRowActions());
|
|
2225
|
+
};
|
|
2226
|
+
}, [table, customElement, dispatch]);
|
|
2227
|
+
React4.useEffect(() => {
|
|
2228
|
+
const stored = getStored(API_TABLES_PAGE_SIZE_KEY2);
|
|
2229
|
+
const parsed = stored != null ? Number(stored) : NaN;
|
|
2230
|
+
const size = VALID_PAGE_SIZES.includes(parsed) ? parsed : DEFAULT_PAGE_SIZE;
|
|
2231
|
+
dispatch(_changePageSize(size));
|
|
2232
|
+
}, [dispatch, getStored]);
|
|
2233
|
+
React4.useEffect(() => {
|
|
2234
|
+
const controller = new AbortController();
|
|
2235
|
+
if (tableName) {
|
|
2236
|
+
tableFetchingHandler({
|
|
2237
|
+
tableName,
|
|
2238
|
+
currentPage,
|
|
2239
|
+
pageSize,
|
|
2240
|
+
appliedFilters,
|
|
2241
|
+
tableSorting,
|
|
2242
|
+
signal: controller.signal,
|
|
2243
|
+
params,
|
|
2244
|
+
tbData: tableData
|
|
2245
|
+
});
|
|
2246
|
+
}
|
|
2247
|
+
return () => controller.abort();
|
|
2248
|
+
}, [tableName, currentPage, pageSize, appliedFilters, tableSorting, tableRefresher, pathname, params, tableData, tableFetchingHandler]);
|
|
2249
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ApiTablesComponent_default, { customElement });
|
|
2250
|
+
}
|
|
2251
|
+
var ApiTablesController_default = ApiTablesController;
|
|
2252
|
+
function ApiTablesProvider({ children }) {
|
|
2253
|
+
const { useOutScopeRefresher } = useApiTablesConfig();
|
|
2254
|
+
const refresher = useOutScopeRefresher?.() ?? 0;
|
|
2255
|
+
const tableStore = React4.useMemo(() => createTableStore(), []);
|
|
2256
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(reactRedux.Provider, { store: tableStore, children }) }, String(refresher));
|
|
2257
|
+
}
|
|
2258
|
+
function ReactApiTable({
|
|
2259
|
+
table,
|
|
2260
|
+
controller,
|
|
2261
|
+
children,
|
|
2262
|
+
params,
|
|
2263
|
+
tableStructureLoading,
|
|
2264
|
+
customElement
|
|
2265
|
+
}) {
|
|
2266
|
+
const { components } = useApiTablesConfig();
|
|
2267
|
+
const Card2 = components.Card;
|
|
2268
|
+
const FullPageTableLoader2 = components.FullPageTableLoader;
|
|
2269
|
+
if (!Card2 || !FullPageTableLoader2) {
|
|
2270
|
+
throw new Error(
|
|
2271
|
+
"ApiTablesConfig.components.Card and FullPageTableLoader are required"
|
|
2272
|
+
);
|
|
2273
|
+
}
|
|
2274
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ApiTablesProvider, { children: [
|
|
2275
|
+
children,
|
|
2276
|
+
tableStructureLoading ? /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "p-5 dark:bg-none", children: /* @__PURE__ */ jsxRuntime.jsx(FullPageTableLoader2, { count: 20 }) }) : controller || /* @__PURE__ */ jsxRuntime.jsx(
|
|
2277
|
+
ApiTablesController_default,
|
|
2278
|
+
{
|
|
2279
|
+
table,
|
|
2280
|
+
params,
|
|
2281
|
+
customElement: customElement ?? null
|
|
2282
|
+
}
|
|
2283
|
+
)
|
|
2284
|
+
] });
|
|
2285
|
+
}
|
|
2286
|
+
var ReactApiTable_default = ReactApiTable;
|
|
2287
|
+
function useTableStructure() {
|
|
2288
|
+
const [tableStructure, setTableStructure] = React4.useState(null);
|
|
2289
|
+
const [tableStructureLoading, setTableStructureLoading] = React4.useState(true);
|
|
2290
|
+
const { axiosTable, useLocale: useLocale2 } = useApiTablesConfig();
|
|
2291
|
+
const locale = useLocale2?.();
|
|
2292
|
+
const dispatch = reactRedux.useDispatch();
|
|
2293
|
+
const getTableStructure = React4.useCallback(
|
|
2294
|
+
async ({ table }) => {
|
|
2295
|
+
setTableStructureLoading(true);
|
|
2296
|
+
dispatch(_getTableData([]));
|
|
2297
|
+
try {
|
|
2298
|
+
const response = await axiosTable.get(table, {
|
|
2299
|
+
headers: {
|
|
2300
|
+
...locale && { ln: locale }
|
|
2301
|
+
}
|
|
2302
|
+
});
|
|
2303
|
+
setTableStructure(response?.data);
|
|
2304
|
+
} catch (err) {
|
|
2305
|
+
console.log(err);
|
|
2306
|
+
} finally {
|
|
2307
|
+
setTableStructureLoading(false);
|
|
2308
|
+
}
|
|
2309
|
+
},
|
|
2310
|
+
[axiosTable, dispatch, locale]
|
|
2311
|
+
);
|
|
2312
|
+
return { getTableStructure, tableStructure, tableStructureLoading };
|
|
2313
|
+
}
|
|
2314
|
+
|
|
2315
|
+
exports.ApiTablesComponent = ApiTablesComponent_default;
|
|
2316
|
+
exports.ApiTablesController = ApiTablesController_default;
|
|
2317
|
+
exports.ApiTablesHostProvider = ApiTablesHostProvider;
|
|
2318
|
+
exports.ApiTablesProvider = ApiTablesProvider;
|
|
2319
|
+
exports.ReactApiTable = ReactApiTable_default;
|
|
2320
|
+
exports._bulkActionPostLoading = _bulkActionPostLoading;
|
|
2321
|
+
exports._bulkActionPostResponse = _bulkActionPostResponse;
|
|
2322
|
+
exports._changePageSize = _changePageSize;
|
|
2323
|
+
exports._checkActionsInRegularCells = _checkActionsInRegularCells;
|
|
2324
|
+
exports._getClickedRowAction = _getClickedRowAction;
|
|
2325
|
+
exports._getClickedRowActionId = _getClickedRowActionId;
|
|
2326
|
+
exports._getClickedRowActionResponse = _getClickedRowActionResponse;
|
|
2327
|
+
exports._getCustomControlRequest = _getCustomControlRequest;
|
|
2328
|
+
exports._getSelectedBulkAction = _getSelectedBulkAction;
|
|
2329
|
+
exports._getSelectedRowActions = _getSelectedRowActions;
|
|
2330
|
+
exports._getStructureBulkActions = _getStructureBulkActions;
|
|
2331
|
+
exports._getStructureRowActions = _getStructureRowActions;
|
|
2332
|
+
exports._getTableBindings = _getTableBindings;
|
|
2333
|
+
exports._getTableComponents = _getTableComponents;
|
|
2334
|
+
exports._getTableData = _getTableData;
|
|
2335
|
+
exports._getTablePagination = _getTablePagination;
|
|
2336
|
+
exports._resetTableBulkActions = _resetTableBulkActions;
|
|
2337
|
+
exports._resetTableColumns = _resetTableColumns;
|
|
2338
|
+
exports._resetTableCore = _resetTableCore;
|
|
2339
|
+
exports._resetTableRowActions = _resetTableRowActions;
|
|
2340
|
+
exports._setAppliedFilters = _setAppliedFilters;
|
|
2341
|
+
exports._setCurrentPage = _setCurrentPage;
|
|
2342
|
+
exports._setRenderedFilters = _setRenderedFilters;
|
|
2343
|
+
exports._setRowActionPostLoading = _setRowActionPostLoading;
|
|
2344
|
+
exports._setRowSelectedModal = _setRowSelectedModal;
|
|
2345
|
+
exports._setSelectedRows = _setSelectedRows;
|
|
2346
|
+
exports._setTableColumns = _setTableColumns;
|
|
2347
|
+
exports._setTableLoading = _setTableLoading;
|
|
2348
|
+
exports._setTableSorting = _setTableSorting;
|
|
2349
|
+
exports._setToggledClearRow = _setToggledClearRow;
|
|
2350
|
+
exports._setVisibleColumns = _setVisibleColumns;
|
|
2351
|
+
exports._triggerTableReload = _triggerTableReload;
|
|
2352
|
+
exports.createTableStore = createTableStore;
|
|
2353
|
+
exports.getExternalState = getExternalState;
|
|
2354
|
+
exports.setExternalStoreGetter = setExternalStoreGetter;
|
|
2355
|
+
exports.useApiTablesComponent = useApiTablesComponent;
|
|
2356
|
+
exports.useApiTablesConfig = useApiTablesConfig;
|
|
2357
|
+
exports.useTableFetcher = useTableFetcher_default;
|
|
2358
|
+
exports.useTableStructure = useTableStructure;
|
|
2359
|
+
exports.useUtilsProvider = useUtilsProvider;
|
|
2360
|
+
//# sourceMappingURL=index.cjs.map
|
|
2361
|
+
//# sourceMappingURL=index.cjs.map
|