@pagamio/frontend-commons-lib 0.8.193 → 0.8.195
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,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Grid } from '@mantine/core';
|
|
3
3
|
import { Card } from 'flowbite-react';
|
|
4
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
4
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
5
5
|
import { useApi } from '../api';
|
|
6
6
|
import { FilterComponent, Tab } from '../components';
|
|
7
7
|
import { useMediaQueries } from '../shared';
|
|
@@ -32,10 +32,19 @@ const renderFilterComponent = ({ isLoading, error, filters, filterOptions, selec
|
|
|
32
32
|
if (error) {
|
|
33
33
|
return (_jsx(Card, { className: "mb-5", children: _jsx(ErrorState, { error: error, onRetry: handleRetry }) }));
|
|
34
34
|
}
|
|
35
|
+
const resolveFilterType = (filter) => {
|
|
36
|
+
if (filter.type === 'date')
|
|
37
|
+
return 'date';
|
|
38
|
+
if (filter.type === 'multi-select')
|
|
39
|
+
return 'multi-select';
|
|
40
|
+
if (filter.type === 'select')
|
|
41
|
+
return 'select';
|
|
42
|
+
return filter.multi ? 'multi-select' : 'select';
|
|
43
|
+
};
|
|
35
44
|
return (_jsx(FilterComponent, { filters: filters.map((filter) => ({
|
|
36
45
|
name: filter.name,
|
|
37
46
|
placeholder: filter.placeholder ?? `Select ${filter.name}`,
|
|
38
|
-
type: filter
|
|
47
|
+
type: resolveFilterType(filter),
|
|
39
48
|
options: filterOptions[filter.name] || filter.options,
|
|
40
49
|
})), showClearFilters: true, selectedFilters: selectedFilters, handleFilterChange: handleFilterChange, handleApplyFilters: handleApplyFilters, resetFilters: resetFilters, isNarrow: isNarrow }));
|
|
41
50
|
};
|
|
@@ -114,11 +123,33 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
|
|
|
114
123
|
isNarrow: isSm,
|
|
115
124
|
});
|
|
116
125
|
};
|
|
126
|
+
const dashboardFilters = useMemo(() => {
|
|
127
|
+
const baseFilters = [...config.filters];
|
|
128
|
+
const dateRangeValue = typeof selectedFilters?.dateRange === 'string' ? selectedFilters.dateRange.toUpperCase() : '';
|
|
129
|
+
if (dateRangeValue === 'CUSTOM_RANGE') {
|
|
130
|
+
baseFilters.push({
|
|
131
|
+
name: 'startDate',
|
|
132
|
+
label: 'Start Date',
|
|
133
|
+
placeholder: 'Select start date',
|
|
134
|
+
type: 'date',
|
|
135
|
+
options: [],
|
|
136
|
+
multi: false,
|
|
137
|
+
}, {
|
|
138
|
+
name: 'endDate',
|
|
139
|
+
label: 'End Date',
|
|
140
|
+
placeholder: 'Select end date',
|
|
141
|
+
type: 'date',
|
|
142
|
+
options: [],
|
|
143
|
+
multi: false,
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
return baseFilters;
|
|
147
|
+
}, [config.filters, selectedFilters?.dateRange]);
|
|
117
148
|
const renderContent = () => {
|
|
118
149
|
return renderFilterComponent({
|
|
119
150
|
isLoading: loading,
|
|
120
151
|
error,
|
|
121
|
-
filters:
|
|
152
|
+
filters: dashboardFilters,
|
|
122
153
|
filterOptions,
|
|
123
154
|
selectedFilters,
|
|
124
155
|
handleFilterChange,
|
|
@@ -5,16 +5,16 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
5
5
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
|
|
6
6
|
import { exportToCsv, exportToPdf, exportToXlsx } from './exportUtils';
|
|
7
7
|
const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, }) => {
|
|
8
|
-
const [popoverOpened, setPopoverOpened] = useState(false);
|
|
9
8
|
const [exportType, setExportType] = useState(null);
|
|
10
9
|
const [excludedColumns, setExcludedColumns] = useState(['action']);
|
|
11
10
|
const [isExporting, setIsExporting] = useState(false);
|
|
12
11
|
const [exportAllData, setExportAllData] = useState(false);
|
|
12
|
+
const [selectOpen, setSelectOpen] = useState(false);
|
|
13
13
|
const popoverRef = useRef(null);
|
|
14
14
|
useEffect(() => {
|
|
15
15
|
const handleClickOutside = (event) => {
|
|
16
16
|
if (popoverRef.current && !popoverRef.current.contains(event.target)) {
|
|
17
|
-
|
|
17
|
+
setExportType(null);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
20
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -63,28 +63,26 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
|
|
|
63
63
|
}
|
|
64
64
|
finally {
|
|
65
65
|
setIsExporting(false);
|
|
66
|
-
setPopoverOpened(false);
|
|
67
66
|
setExportType(null);
|
|
68
67
|
}
|
|
69
68
|
};
|
|
70
69
|
const handleExportChange = (type) => {
|
|
71
70
|
if (!type || type === 'none') {
|
|
72
71
|
setExportType(null);
|
|
73
|
-
setPopoverOpened(false);
|
|
74
72
|
return;
|
|
75
73
|
}
|
|
76
74
|
// Check if type is an extraOption
|
|
77
75
|
const extra = extraOptions.find((opt) => opt.value === type);
|
|
78
76
|
if (extra) {
|
|
79
77
|
extra.onClick();
|
|
80
|
-
setPopoverOpened(false);
|
|
81
78
|
setExportType(null);
|
|
82
79
|
return;
|
|
83
80
|
}
|
|
84
81
|
setExportType(type);
|
|
85
|
-
setPopoverOpened(type !== exportType);
|
|
86
82
|
};
|
|
87
|
-
|
|
83
|
+
// Show popover when exportType is set and Select is closed
|
|
84
|
+
const popoverOpened = exportType !== null && !selectOpen;
|
|
85
|
+
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-gray-500", 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"), popoverOpened && (_jsxs("div", { ref: popoverRef, className: "mt-2 bg-white rounded-md shadow-lg p-4 z-50 absolute w-45", children: [_jsx("div", { className: "text-sm text-gray-500 pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-gray-50 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-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-1 ml-6", children: "This will fetch all records for the table" })] }), _jsx(Stack, { children: columns.map((col) => {
|
|
88
86
|
if (col.accessorKey !== 'action') {
|
|
89
87
|
return (_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: col.header, checked: !excludedColumns.includes(col.accessorKey), onChange: (event) => handleCheckboxChange(col.accessorKey, !event.currentTarget.checked), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: "rememberMe", children: col.header })] }, col.accessorKey));
|
|
90
88
|
}
|
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.195",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|