diff --git a/public/locales/bg/donations.json b/public/locales/bg/donations.json index 9b57eae78..95c02c82a 100644 --- a/public/locales/bg/donations.json +++ b/public/locales/bg/donations.json @@ -36,6 +36,7 @@ "requiredError": "Полето е задължително." }, "cta": { + "download": "Изтегли", "add": "Добави", "confirm": "Потвърди", "cancel": "Отказ", diff --git a/public/locales/en/donations.json b/public/locales/en/donations.json index 19c071502..b9cd42dea 100644 --- a/public/locales/en/donations.json +++ b/public/locales/en/donations.json @@ -36,6 +36,7 @@ "requiredError": "Fields is required!" }, "cta": { + "download": "Download", "add": "Add", "confirm": "Confirm", "cancel": "Cancel", diff --git a/src/common/util/downloadFile.ts b/src/common/util/downloadFile.ts new file mode 100644 index 000000000..39266db1e --- /dev/null +++ b/src/common/util/downloadFile.ts @@ -0,0 +1,8 @@ +export const downloadFile = (filename: string, data: Blob | MediaSource) => { + const url = window.URL.createObjectURL(data) + const anchor = document.createElement('a') + anchor.href = url + anchor.download = filename + anchor.dispatchEvent(new MouseEvent('click')) + window.URL.revokeObjectURL(url) +} diff --git a/src/components/donations/grid/Grid.tsx b/src/components/donations/grid/Grid.tsx index 33c59a5dd..4cdd180fe 100644 --- a/src/components/donations/grid/Grid.tsx +++ b/src/components/donations/grid/Grid.tsx @@ -53,9 +53,11 @@ export default observer(function Grid() { }: UseQueryResult = useDonationsList(campaignId, page, pageSize) const { data }: UseQueryResult = usePersonList() + const RenderVaultCell = ({ params }: RenderCellProps) => { return <>{params.row.targetVault.name} } + const RenderPersonCell = ({ params }: RenderCellProps) => { const { firstName, lastName } = params.row.person ? params.row.person diff --git a/src/components/donations/grid/GridAppbar.tsx b/src/components/donations/grid/GridAppbar.tsx index 68da9a8bf..cd073e362 100644 --- a/src/components/donations/grid/GridAppbar.tsx +++ b/src/components/donations/grid/GridAppbar.tsx @@ -1,9 +1,13 @@ import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' import { Box, Toolbar, Tooltip, Typography } from '@mui/material' -import { Add as AddIcon, Receipt } from '@mui/icons-material' +import { Add as AddIcon, Receipt, GetApp as DownloadFileIcon } from '@mui/icons-material' import { routes } from 'common/routes' +import { useMutation } from '@tanstack/react-query' +import { useExportToExcel } from 'service/donation' +import { AlertStore } from 'stores/AlertStore' +import { downloadFile } from './../../../common/util/downloadFile' const addIconStyles = { background: '#4ac3ff', @@ -16,6 +20,14 @@ const addIconStyles = { export default function GridAppbar() { const router = useRouter() const { t } = useTranslation() + const exportToExcel = useMutation({ + mutationFn: useExportToExcel(), + onError: () => AlertStore.show(t('common:alerts.error'), 'error'), + onSuccess: ({ data }) => { + downloadFile('Donations.xls', data) + AlertStore.show(t('common:alerts.success'), 'success') + }, + }) return ( router.push(routes.admin.donations.create)} /> + + exportToExcel.mutate()} + /> + diff --git a/src/service/apiEndpoints.ts b/src/service/apiEndpoints.ts index c4c7dff35..5e7b83293 100644 --- a/src/service/apiEndpoints.ts +++ b/src/service/apiEndpoints.ts @@ -72,6 +72,7 @@ export const endpoints = { userDonations: { url: 'donation/user-donations', method: 'GET' }, uploadBankTransactionsFile: (bankTransactionsFileId: string) => { url: `/bank-transactions-file/${bankTransactionsFileId}`, method: 'POST' }, + exportToExcel: { url: '/donation/export-excel', method: 'GET' }, }, documents: { documentsList: { url: '/document', method: 'GET' }, diff --git a/src/service/donation.ts b/src/service/donation.ts index dcaea1e78..7a1cd3f74 100644 --- a/src/service/donation.ts +++ b/src/service/donation.ts @@ -91,3 +91,13 @@ export const useUploadBankTransactionsFiles = () => { ) } } + +export const useExportToExcel = () => { + const { data: session } = useSession() + return async () => { + return await apiClient(endpoints.donation.exportToExcel.url, { + ...authConfig(session?.accessToken), + responseType: 'blob', + }) + } +}