@pagamio/frontend-commons-lib 0.8.363 → 0.8.364
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.
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Stack } from '@mantine/core';
|
|
3
3
|
import { Checkbox, Label, TextInput } from 'flowbite-react';
|
|
4
4
|
import { HiMail } from 'react-icons/hi';
|
|
5
5
|
import { useEffect, useRef, useState } from 'react';
|
|
6
|
-
|
|
6
|
+
// (useEffect / useRef / popoverRef / handelClickOutside can all be removed
|
|
7
|
+
// Modal handles its own open/close + backdrop click)
|
|
8
|
+
import { Modal, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
|
|
7
9
|
import { exportToCsv, exportToPdf, exportToXlsx, generateExportAsFile, sendExportEmail } from './exportUtils';
|
|
8
10
|
const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, asyncExport, enableEmailExport = false, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }) => {
|
|
9
11
|
const [exportType, setExportType] = useState(null);
|
|
@@ -179,20 +181,30 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
|
|
|
179
181
|
};
|
|
180
182
|
// Show popover when exportType is set and Select is closed
|
|
181
183
|
const popoverOpened = exportType !== null && !selectOpen;
|
|
182
|
-
|
|
183
|
-
|
|
184
|
+
const continueLable = isExporting
|
|
185
|
+
? exportProgress && exportProgress.total > exportProgress.fetched
|
|
186
|
+
? `Fetching ${exportProgress.fetched}/${exportProgress.total}...`
|
|
187
|
+
: isEmailExport
|
|
188
|
+
? 'Preparing...'
|
|
189
|
+
: 'Exporting...'
|
|
190
|
+
: 'Continue';
|
|
191
|
+
return (_jsxs("div", { className: `w-40 ${containerClassName ?? ''}`, children: [_jsxs(Select, { value: exportType ?? 'none', open: selectOpen, onOpenChange: setSelectOpen, onValueChange: (value) => handleExportChange(value === 'none' ? null : value), children: [_jsx(SelectTrigger, { className: `w-full ${buttonClassName ?? ''}`, children: _jsx(SelectValue, { placeholder: "Export Data" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: _jsx("span", { className: "text-muted-foreground", children: "Export Data As" }) }, "reset"), exportOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))), extraOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] }, "export-dropdown"), _jsxs(Modal, { isOpen: popoverOpened, onClose: () => setExportType(null), title: "Export Data", size: "md", primaryButton: {
|
|
192
|
+
label: continueLable,
|
|
193
|
+
onClick: handleContinue,
|
|
194
|
+
disabled: getIncludedColumns().length === 0 || isExporting,
|
|
195
|
+
loading: isExporting,
|
|
196
|
+
}, secondaryButton: {
|
|
197
|
+
label: 'Cancel',
|
|
198
|
+
onClick: () => setExportType(null),
|
|
199
|
+
disabled: isExporting,
|
|
200
|
+
variant: 'outline'
|
|
201
|
+
}, children: [_jsx("div", { className: "text-sm text-muted-foreground pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-muted rounded-md", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: "export-all-data", checked: exportAllData, onChange: (event) => setExportAllData(event.currentTarget.checked), className: "checked:!bg-primary checked:!border-primary-50" }), _jsx("label", { htmlFor: 'export-all-data', className: 'text-sm font-medium', children: "Export all data" })] }), _jsx("p", { className: 'text-xs text-muted-foreground mt-1 ml-6', children: shouldQueueAsync
|
|
202
|
+
? 'This dataset is large - it will be prepared in the background and and appear in export history.'
|
|
184
203
|
: 'This will fetch all records for the table' })] }), _jsx(Stack, { children: columns.map((col) => {
|
|
185
204
|
if (col.accessorKey !== 'action') {
|
|
186
|
-
return (_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: col.
|
|
205
|
+
return (_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: col.accessorKey, checked: !excludedColumns.includes(col.accessorKey), onChange: (event) => handleCheckboxChange(col.accessorKey, !event.currentTarget.checked), className: "checked:!bg-primary checked:!border-primary" }), _jsx(Label, { htmlFor: col.accessorKey, children: col.header })] }, col.accessorKey));
|
|
187
206
|
}
|
|
188
|
-
}) }), _jsx(
|
|
189
|
-
${getIncludedColumns().length === 0 || isExporting
|
|
190
|
-
? 'bg-gray-300 cursor-not-allowed'
|
|
191
|
-
: 'bg-primary hover:bg-primary/90'}`, onClick: handleContinue, disabled: getIncludedColumns().length === 0 || isExporting, children: isExporting ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), exportProgress && exportProgress.total > exportProgress.fetched
|
|
192
|
-
? `Fetching ${exportProgress.fetched}/${exportProgress.total}...`
|
|
193
|
-
: isEmailExport
|
|
194
|
-
? 'Preparing...'
|
|
195
|
-
: 'Exporting...'] })) : ('Continue') })] })), _jsx(Modal, { isOpen: showEmailModal, onClose: handleEmailModalClose, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiMail, { className: "w-5 h-5 text-primary" }), _jsx("span", { children: "Send Export via Email" })] }), size: "md", primaryButton: {
|
|
207
|
+
}) })] }), _jsx(Modal, { isOpen: showEmailModal, onClose: handleEmailModalClose, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiMail, { className: "w-5 h-5 text-primary" }), _jsx("span", { children: "Send Export via Email" })] }), size: "md", primaryButton: {
|
|
196
208
|
label: 'Send Email',
|
|
197
209
|
onClick: () => {
|
|
198
210
|
handleEmailModalSubmit().catch((error) => {
|
package/lib/styles.css
CHANGED
|
@@ -971,9 +971,6 @@ video {
|
|
|
971
971
|
.-mb-px {
|
|
972
972
|
margin-bottom: -1px;
|
|
973
973
|
}
|
|
974
|
-
.-ml-1 {
|
|
975
|
-
margin-left: -0.25rem;
|
|
976
|
-
}
|
|
977
974
|
.-mt-2 {
|
|
978
975
|
margin-top: -0.5rem;
|
|
979
976
|
}
|
|
@@ -4257,6 +4254,10 @@ video {
|
|
|
4257
4254
|
.checked\:\!border-primary:checked {
|
|
4258
4255
|
border-color: hsl(var(--primary)) !important;
|
|
4259
4256
|
}
|
|
4257
|
+
.checked\:\!border-primary-50:checked {
|
|
4258
|
+
--tw-border-opacity: 1 !important;
|
|
4259
|
+
border-color: rgb(237 234 244 / var(--tw-border-opacity, 1)) !important;
|
|
4260
|
+
}
|
|
4260
4261
|
.checked\:border-transparent:checked {
|
|
4261
4262
|
border-color: transparent;
|
|
4262
4263
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagamio/frontend-commons-lib",
|
|
3
3
|
"description": "Pagamio library for Frontend reusable components like the form engine and table container",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.364",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|