@pagamio/frontend-commons-lib 0.8.355 → 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

@@ -138,6 +138,12 @@ function buildQueryParams(config, pagination, sorting, filtering) {
     }
     return params;
 }
+// Backend caps `limit` at 200 (PaginationDto `@Max(200)`, anti-DoS). Export-all
+// pages through at this max so the whole dataset reaches the client in the
+// fewest round-trips the contract allows. Driven through the hook's own param
+// builder — never a hardcoded `limit` in a consumer `queryFn` (see backend
+// pagination convention).
+const MAX_EXPORT_PAGE_SIZE = 200;
 function clientFilter(items, filters) {
     return items.filter((item) => Object.entries(filters).every(([key, value]) => key === 'search' || !value || value === 'all' || item[key]?.toString() === value));
 }
@@ -264,6 +270,52 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
             queryClient.invalidateQueries({ queryKey });
         }
     }, [isServerMode, queryKey, queryClient]);
+    // ── Export-all: fetch every server row, not just the current page ──
+    // 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 (_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 });
+        // Always start from the first page (index 0) regardless of where the user
+        // is paged to. The first response also gives us the true total, so we
+        // derive the page count from it rather than the possibly-stale live view.
+        const firstRaw = await queryFn(buildPageParams(0));
+        const first = processResponse(firstRaw, responseMapping);
+        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.
+        for (let page = 1; page < totalPages; page++) {
+            const raw = await queryFn(buildPageParams(page));
+            const { data: pageData } = processResponse(raw, responseMapping);
+            if (pageData.length === 0)
+                break; // defensive: stop if a page comes back empty
+            all.push(...pageData);
+            onProgress?.(all.length, total);
+        }
+        return all;
+    }, [
+        isServerMode,
+        queryFn,
+        processedData,
+        queryParamConfig,
+        paginationConfig.mode,
+        sortingConfig.mode,
+        sortConfig,
+        filteringConfig.mode,
+        searchMode,
+        appliedFilters,
+        responseMapping,
+        serverTotal,
+    ]);
     // ── Search handler (for <input> onChange) ────────────────────────
     const handleSearchChange = useCallback((e) => {
         setSearchQuery(e.target.value);
@@ -307,6 +359,18 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
                 ...toolbar,
                 onClearFilters: clearFilters,
                 showClearFilters: toolbar.showClearFilters ?? true,
+                // Auto-wire export-all for server-paginated tables. Providing
+                // `fetchAllData` makes PagamioTable surface the "Export all data"
+                // checkbox; checking it pages through the full dataset. A consumer
+                // can still override with its own `fetchAllData` (e.g. a dedicated
+                // export endpoint).
+                ...(toolbar.export?.enabled &&
+                    isServerMode && {
+                    export: {
+                        ...toolbar.export,
+                        fetchAllData: toolbar.export.fetchAllData ?? fetchAllPages,
+                    },
+                }),
             },
         }),
         ...(onRowClick && { onRowClick }),
@@ -336,6 +400,8 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         searchPlaceholder,
         toolbar,
         clearFilters,
+        isServerMode,
+        fetchAllPages,
         onRowClick,
         rowClassName,
         expandable,

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.355",
+  "version": "0.8.357",
   "publishConfig": {
     "access": "public",
     "provenance": false