@pagamio/frontend-commons-lib 0.8.356 → 0.8.357

package/lib/pagamio-table/data-table/ExportButton.d.ts

@@ -51,7 +51,7 @@ type ExportDropdownProps<T extends Record<string, any>> = {
     xlsxOptions?: XlsxExportOptions;
     csvOptions?: CsvExportOptions;
     exportAll?: boolean;
-    fetchData?: (params?: Record<string, string>) => Promise<T[]>;
+    fetchData?: (params?: Record<string, string>, onProgress?: (fetched: number, total: number) => void) => Promise<T[]>;
     enableEmailExport?: boolean;
     emailExportApiUrl?: string;
     onEmailExportSuccess?: (message: string) => void;

package/lib/pagamio-table/data-table/ExportButton.js

@@ -9,6 +9,7 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
     const [exportType, setExportType] = useState(null);
     const [excludedColumns, setExcludedColumns] = useState(['action']);
     const [isExporting, setIsExporting] = useState(false);
+    const [exportProgress, setExportProgress] = useState(null);
     const [exportAllData, setExportAllData] = useState(false);
     const [selectOpen, setSelectOpen] = useState(false);
     const [emailAddress, setEmailAddress] = useState('');
@@ -116,8 +117,11 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
     const handleContinue = async () => {
         const includedColumns = getIncludedColumns();
         setIsExporting(true);
+        setExportProgress(null);
         try {
-            const exportData = exportAllData && fetchData ? await fetchData({ exportAll: 'true' }) : data;
+            const exportData = exportAllData && fetchData
+                ? await fetchData({ exportAll: 'true' }, (fetched, total) => setExportProgress({ fetched, total }))
+                : data;
             if (isEmailExport) {
                 // Store data, format and show email modal
                 setPendingExportData({ data: exportData, columns: includedColumns });
@@ -138,6 +142,7 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
         }
         finally {
             setIsExporting(false);
+            setExportProgress(null);
         }
     };
     const handleExportChange = (type) => {
@@ -164,7 +169,11 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
                         }) }), _jsx(Button, { variant: "primary", className: `w-full mt-4 px-4 py-2 rounded-md text-white flex items-center justify-center
               ${getIncludedColumns().length === 0 || isExporting
                             ? 'bg-gray-300 cursor-not-allowed'
-                            : '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" })] }), isEmailExport ? 'Preparing...' : '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: {
+                            : '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
+                                    ? `Fetching ${exportProgress.fetched}/${exportProgress.total}...`
+                                    : isEmailExport
+                                        ? 'Preparing...'
+                                        : '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: {
                     label: 'Send Email',
                     onClick: () => {
                         handleEmailModalSubmit().catch((error) => {

package/lib/pagamio-table/data-table/types.d.ts

@@ -82,7 +82,14 @@ export interface ExportConfig<T extends Record<string, any>> {
     xlsx?: XlsxExportOptions;
     csv?: CsvExportOptions;
     extraOptions?: ExtraOption[];
-    fetchAllData?: (params?: Record<string, string>) => Promise<T[]>;
+    /**
+     * Fetch the full dataset for "Export all data" (not just the current page).
+     * `onProgress(fetched, total)` is invoked after each page so the UI can show
+     * progress on long, multi-request exports. `usePagamioTable` auto-wires this
+     * for server-paginated tables; a consumer may override (e.g. a dedicated
+     * export endpoint).
+     */
+    fetchAllData?: (params?: Record<string, string>, onProgress?: (fetched: number, total: number) => void) => Promise<T[]>;
     email?: {
         apiUrl: string;
         onSuccess?: (message: string) => void;

package/lib/shared/hooks/usePagamioTable.js

@@ -274,9 +274,10 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
     // Pages through the same `queryFn` at the backend's max `limit`, preserving
     // the user's current sort/filters/search so the export matches what they see.
     // Returns the full flattened dataset for the client-side export utils.
-    const fetchAllPages = useCallback(async () => {
+    const fetchAllPages = useCallback(async (_params, onProgress) => {
         if (!isServerMode || !queryFn) {
             // Client-mode tables already hold the whole filtered/sorted set.
+            onProgress?.(processedData.length, processedData.length);
             return processedData;
         }
         const buildPageParams = (page) => buildQueryParams(queryParamConfig, { mode: paginationConfig.mode, page, size: MAX_EXPORT_PAGE_SIZE }, { mode: sortingConfig.mode, sortConfig }, { mode: filteringConfig.mode, searchMode, filters: appliedFilters });
@@ -288,6 +289,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         const all = [...first.data];
         const total = first.total || serverTotal;
         const totalPages = Math.max(1, Math.ceil(total / MAX_EXPORT_PAGE_SIZE));
+        onProgress?.(all.length, total);
         // Pages are zero/one-based per the consumer's `queryParamConfig.transform`;
         // `buildQueryParams` already applies that transform, so we just feed it the
         // hook's internal zero-based index and let the config bump it.
@@ -297,6 +299,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
             if (pageData.length === 0)
                 break; // defensive: stop if a page comes back empty
             all.push(...pageData);
+            onProgress?.(all.length, total);
         }
         return all;
     }, [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.356",
+  "version": "0.8.357",
   "publishConfig": {
     "access": "public",
     "provenance": false