feat: download report

cope2n-fe/src/components/report-detail/report-table.tsx

@@ -4,6 +4,7 @@ import { ReportDetail } from 'models';
 import { useReportList } from 'queries/report';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { downloadReport } from 'request/report';
 
 const ReportTable: React.FC = () => {
   const { isLoading, data: reportData } = useReportList({
@@ -17,6 +18,20 @@ const ReportTable: React.FC = () => {
     page_size: 10,
   }));
 
+  const handleDownloadReport = async (report_id: string) => {
+    const reportFile = await downloadReport(report_id);
+    const anchorElement = document.createElement('a');
+    anchorElement.href = URL.createObjectURL(reportFile);
+    anchorElement.download = `${report_id}.xlsx`; // Set the desired new filename
+
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+
+    // Clean up
+    document.body.removeChild(anchorElement);
+    URL.revokeObjectURL(anchorElement.href);
+  };
+
   const columns: TableColumnsType<ReportDetail> = [
     {
       title: 'ID',
@@ -38,6 +53,9 @@ const ReportTable: React.FC = () => {
       title: 'Status',
       dataIndex: 'status',
       key: 'status',
+      render: (_, record) => {
+        return <>{record.Status}</>;
+      },
     },
     {
       title: 'Purchase Date Acc',
@@ -117,7 +135,9 @@ const ReportTable: React.FC = () => {
             >
               Detail
             </Button>
-            <Button>Download</Button>
+            <Button onClick={() => handleDownloadReport(record.report_id)}>
+              Download
+            </Button>
           </div>
         );
       },

cope2n-fe/src/pages/reports/report_detail/index.tsx

@@ -7,6 +7,7 @@ import { ReportDetailList, ReportItemDetail } from 'models';
 import { useReportDetailList } from 'queries/report';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { downloadReport } from 'request/report';
 import styled from 'styled-components';
 
 export interface ReportFormValues {
@@ -248,6 +249,19 @@ const ReportDetail = () => {
     page: pagination.page,
   });
   const report_data = data as ReportDetailList;
+  const handleDownloadReport = async () => {
+    const reportFile = await downloadReport(id);
+    const anchorElement = document.createElement('a');
+    anchorElement.href = URL.createObjectURL(reportFile);
+    anchorElement.download = `${id}.xlsx`; // Set the desired new filename
+
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+
+    // Clean up
+    document.body.removeChild(anchorElement);
+    URL.revokeObjectURL(anchorElement.href);
+  };
 
   return (
     <>
@@ -259,7 +273,12 @@ const ReportDetail = () => {
           >{t`Report ${id.slice(0, 16)}...`}</Tooltip>
         }
         extra={
-          <Button size='large' type='primary' icon={<DownloadOutlined />}>
+          <Button
+            size='large'
+            type='primary'
+            icon={<DownloadOutlined />}
+            onClick={handleDownloadReport}
+          >
             {t`Download Report`}
           </Button>
         }

cope2n-fe/src/request/report.ts

@@ -74,3 +74,19 @@ export async function getOverViewReport(params?: ReportListParams) {
     console.log(error);
   }
 }
+
+export async function downloadReport(report_id: string) {
+  try {
+    const response = await API.get(`/ctel/get_report_file/${report_id}/`, {
+      responseType: 'blob', // Important
+    });
+    const file = new Blob([response.data], {
+      type: 'application/vnd.ms-excel',
+    });
+    // const fileURL = URL.createObjectURL(file);
+    // window.open(fileURL);
+    return file;
+  } catch (error) {
+    console.log(error);
+  }
+}