From f653d21b4ca4d0b71bc78b7ffbfa26c94524a42b Mon Sep 17 00:00:00 2001 From: Andrey Date: Wed, 7 Dec 2022 14:12:36 +0200 Subject: [PATCH 1/5] branch init --- public/locales/bg/donations.json | 1 + public/locales/en/donations.json | 1 + src/components/donations/grid/Grid.tsx | 1 + src/components/donations/grid/GridAppbar.tsx | 30 +++++++++++++++++++- src/service/apiEndpoints.ts | 1 + src/service/donation.ts | 10 +++++++ 6 files changed, 43 insertions(+), 1 deletion(-) 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/components/donations/grid/Grid.tsx b/src/components/donations/grid/Grid.tsx index 33c59a5dd..d762e1a77 100644 --- a/src/components/donations/grid/Grid.tsx +++ b/src/components/donations/grid/Grid.tsx @@ -56,6 +56,7 @@ export default observer(function Grid() { const RenderVaultCell = ({ params }: RenderCellProps) => { return <>{params.row.targetVault.name} } + console.log(donations, 'donats') 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..7d36ba5cb 100644 --- a/src/components/donations/grid/GridAppbar.tsx +++ b/src/components/donations/grid/GridAppbar.tsx @@ -1,9 +1,12 @@ 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' const addIconStyles = { background: '#4ac3ff', @@ -16,6 +19,24 @@ const addIconStyles = { export default function GridAppbar() { const router = useRouter() const { t } = useTranslation() + //todo go to reusable component with the button with icon and everything + const exportToExcel = useMutation({ + mutationFn: useExportToExcel(), + onError: () => AlertStore.show(t('common:alerts.error'), 'error'), + onSuccess: ({ data }) => { + console.log(data, 'data') + + const url = window.URL.createObjectURL(data) + console.log(url, 'url') + const anchor = document.createElement('a') + console.log() + anchor.href = url + anchor.download = 'download.xls' + anchor.dispatchEvent(new MouseEvent('click')) + window.URL.revokeObjectURL(url) + AlertStore.show(t('common:alerts.message-sent'), 'success') + }, + }) return ( router.push(routes.admin.donations.create)} /> + + exportToExcel.mutate()} + /> + diff --git a/src/service/apiEndpoints.ts b/src/service/apiEndpoints.ts index c4c7dff35..572e9ba1e 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..9a2922106 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('donation/export-excel', { + ...authConfig(session?.accessToken), + responseType: 'blob', + }) + } +} From 3e509e7be603670a62c006277f1dfb12748dddc1 Mon Sep 17 00:00:00 2001 From: Andrey Date: Wed, 7 Dec 2022 20:42:40 +0200 Subject: [PATCH 2/5] add api endpoint for export donations add export to excel method in donation service --- src/service/apiEndpoints.ts | 2 +- src/service/donation.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/service/apiEndpoints.ts b/src/service/apiEndpoints.ts index 572e9ba1e..5e7b83293 100644 --- a/src/service/apiEndpoints.ts +++ b/src/service/apiEndpoints.ts @@ -72,7 +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' }, + 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 9a2922106..7a1cd3f74 100644 --- a/src/service/donation.ts +++ b/src/service/donation.ts @@ -95,7 +95,7 @@ export const useUploadBankTransactionsFiles = () => { export const useExportToExcel = () => { const { data: session } = useSession() return async () => { - return await apiClient('donation/export-excel', { + return await apiClient(endpoints.donation.exportToExcel.url, { ...authConfig(session?.accessToken), responseType: 'blob', }) From 17c68aa2c72144212f55769a0dcbce2a21671717 Mon Sep 17 00:00:00 2001 From: Andrey Date: Fri, 9 Dec 2022 12:21:46 +0200 Subject: [PATCH 3/5] clear console logs --- src/components/donations/grid/GridAppbar.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/donations/grid/GridAppbar.tsx b/src/components/donations/grid/GridAppbar.tsx index 7d36ba5cb..9aa7f2ce2 100644 --- a/src/components/donations/grid/GridAppbar.tsx +++ b/src/components/donations/grid/GridAppbar.tsx @@ -19,22 +19,17 @@ const addIconStyles = { export default function GridAppbar() { const router = useRouter() const { t } = useTranslation() - //todo go to reusable component with the button with icon and everything const exportToExcel = useMutation({ mutationFn: useExportToExcel(), onError: () => AlertStore.show(t('common:alerts.error'), 'error'), - onSuccess: ({ data }) => { - console.log(data, 'data') - - const url = window.URL.createObjectURL(data) - console.log(url, 'url') + onSuccess: (response) => { + const url = window.URL.createObjectURL(response.data) const anchor = document.createElement('a') - console.log() anchor.href = url - anchor.download = 'download.xls' + anchor.download = 'Donations.xls' anchor.dispatchEvent(new MouseEvent('click')) window.URL.revokeObjectURL(url) - AlertStore.show(t('common:alerts.message-sent'), 'success') + AlertStore.show(t('common:alerts.success'), 'success') }, }) From 3e79be462adf9aabba91bbd3d7d571eb6186a8cc Mon Sep 17 00:00:00 2001 From: Andrey Date: Fri, 9 Dec 2022 12:35:55 +0200 Subject: [PATCH 4/5] clear console log --- src/components/donations/grid/Grid.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/donations/grid/Grid.tsx b/src/components/donations/grid/Grid.tsx index d762e1a77..4cdd180fe 100644 --- a/src/components/donations/grid/Grid.tsx +++ b/src/components/donations/grid/Grid.tsx @@ -53,10 +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} } - console.log(donations, 'donats') + const RenderPersonCell = ({ params }: RenderCellProps) => { const { firstName, lastName } = params.row.person ? params.row.person From 7656c9d0d0231f8a64c35c783ff770dea2edeca5 Mon Sep 17 00:00:00 2001 From: Andrey Date: Fri, 9 Dec 2022 18:07:48 +0200 Subject: [PATCH 5/5] export downloadFile logic and use it --- src/common/util/downloadFile.ts | 8 ++++++++ src/components/donations/grid/GridAppbar.tsx | 10 +++------- 2 files changed, 11 insertions(+), 7 deletions(-) create mode 100644 src/common/util/downloadFile.ts 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/GridAppbar.tsx b/src/components/donations/grid/GridAppbar.tsx index 9aa7f2ce2..cd073e362 100644 --- a/src/components/donations/grid/GridAppbar.tsx +++ b/src/components/donations/grid/GridAppbar.tsx @@ -7,6 +7,7 @@ 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', @@ -22,13 +23,8 @@ export default function GridAppbar() { const exportToExcel = useMutation({ mutationFn: useExportToExcel(), onError: () => AlertStore.show(t('common:alerts.error'), 'error'), - onSuccess: (response) => { - const url = window.URL.createObjectURL(response.data) - const anchor = document.createElement('a') - anchor.href = url - anchor.download = 'Donations.xls' - anchor.dispatchEvent(new MouseEvent('click')) - window.URL.revokeObjectURL(url) + onSuccess: ({ data }) => { + downloadFile('Donations.xls', data) AlertStore.show(t('common:alerts.success'), 'success') }, })