Admin panel - Export Donations to excel (#1245)

* branch init

* add api endpoint for export donations
add export to excel method in donation service

* clear console logs

* clear console log

* export downloadFile logic and use it

Co-authored-by: Andrey <andrey.goranov@mentormate.com>

public/locales/bg/donations.json

@@ -36,6 +36,7 @@
     "requiredError": "Полето е задължително."
   },
   "cta": {
+    "download": "Изтегли",
     "add": "Добави",
     "confirm": "Потвърди",
     "cancel": "Отказ",

public/locales/en/donations.json

@@ -36,6 +36,7 @@
     "requiredError": "Fields is required!"
   },
   "cta": {
+    "download": "Download",
     "add": "Add",
     "confirm": "Confirm",
     "cancel": "Cancel",

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)
+}

src/components/donations/grid/Grid.tsx

@@ -53,9 +53,11 @@ export default observer(function Grid() {
   }: UseQueryResult<CampaignDonationHistoryResponse> = useDonationsList(campaignId, page, pageSize)
 
   const { data }: UseQueryResult<PersonResponse[]> = usePersonList()
+
   const RenderVaultCell = ({ params }: RenderCellProps) => {
     return <>{params.row.targetVault.name}</>
   }
+
   const RenderPersonCell = ({ params }: RenderCellProps) => {
     const { firstName, lastName } = params.row.person
       ? params.row.person

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 (
     <Toolbar
@@ -45,6 +57,13 @@ export default function GridAppbar() {
               onClick={() => router.push(routes.admin.donations.create)}
             />
           </Tooltip>
+          <Tooltip title={t('donations:cta:download') || ''}>
+            <DownloadFileIcon
+              sx={addIconStyles}
+              fontSize="large"
+              onClick={() => exportToExcel.mutate()}
+            />
+          </Tooltip>
         </Box>
       </Box>
     </Toolbar>

src/service/apiEndpoints.ts

@@ -72,6 +72,7 @@ export const endpoints = {
     userDonations: <Endpoint>{ url: 'donation/user-donations', method: 'GET' },
     uploadBankTransactionsFile: (bankTransactionsFileId: string) =>
       <Endpoint>{ url: `/bank-transactions-file/${bankTransactionsFileId}`, method: 'POST' },
+    exportToExcel: <Endpoint>{ url: '/donation/export-excel', method: 'GET' },
   },
   documents: {
     documentsList: <Endpoint>{ url: '/document', method: 'GET' },

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',
+    })
+  }
+}