From 7cd77eb209577099fff00e13f72f7cc85f41991f Mon Sep 17 00:00:00 2001 From: KathleenX7 Date: Sat, 28 Sep 2024 11:35:03 -0400 Subject: [PATCH 1/2] Add export component --- .../src/components/common/ExportToCSV.tsx | 110 ++++++++++++++++++ frontend/src/theme/buttons.ts | 5 +- 2 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/common/ExportToCSV.tsx diff --git a/frontend/src/components/common/ExportToCSV.tsx b/frontend/src/components/common/ExportToCSV.tsx new file mode 100644 index 00000000..44e78997 --- /dev/null +++ b/frontend/src/components/common/ExportToCSV.tsx @@ -0,0 +1,110 @@ +import React from "react"; +import { Button } from "@chakra-ui/react"; +import DownloadIcon from "@mui/icons-material/Download"; +import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined"; + +type ExportProps = { + exportData: any; +}; + +const ExportToCSV = ({ exportData }: ExportProps): React.ReactElement => { + // + const sampleData = [ + { + numOfIds: 1, + productId: null, + askOrgId: "Yes", + orderId: 11608501, + orgSelectionType: "FLOWER", + batchCode: "B-E7BE5602-2F9B-E3", + IDType: "OPEN", + batchId: 413, + creationDate: "2022-06-29", + isOnline: "Yes", + productName: null, + batchProductArray: [ + { + ID: 663255, + TYPE: "PRODUCT", + NAME: "SOME NAME", + }, + ], + numOfUsedIDs: 0, + redemptionMethod: "ID", + askSSN: "No", + askEmployeeId: "Yes", + batchStatus: "Active", + productType: null, + expirationDate: "2023-06-29", + }, + { + numOfIds: 1, + productId: null, + askOrgId: "No", + orderId: 11608502, + orgSelectionType: "LEAF", + batchCode: "B-480A8929-57D5-97", + IDType: "OPEN", + batchId: 414, + creationDate: "2022-06-29", + isOnline: "Yes", + productName: null, + batchProductArray: [ + { + ID: 663255, + TYPE: "PRODUCT", + NAME: "Other Name", + }, + ], + numOfUsedIDs: 0, + redemptionMethod: "ID", + askSSN: "No", + askEmployeeId: "No", + batchStatus: "Active", + productType: null, + expirationDate: "2023-06-29", + }, + ]; + + const jsonToCSV = (jsonData: any) => { + let csv = ""; + const headers = Object.keys(jsonData[0]); + csv += `${headers.join(",")}\n`; + // Add the data + jsonData.forEach((row: any) => { + const data = headers + .map((header) => JSON.stringify(row[header])) + .join(","); + csv += `${data}\n`; + }); + return csv; + }; + + const downloadJsonAsCSV = () => { + const csvData = jsonToCSV(exportData || sampleData); // Add .items.data + // Create a CSV file and allow the user to download it + const blob = new Blob([csvData], { type: "text/csv" }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = "data.csv"; + document.body.appendChild(a); + a.click(); + }; + + return ( + <> + + + ); +}; + +export default ExportToCSV; diff --git a/frontend/src/theme/buttons.ts b/frontend/src/theme/buttons.ts index 4f267518..6c11a5bc 100644 --- a/frontend/src/theme/buttons.ts +++ b/frontend/src/theme/buttons.ts @@ -14,10 +14,11 @@ const secondary = defineStyle({ height: "34px", borderRadius: "8px", padding: "4px 16px", - border: "0", + border: "2px solid", + borderColor: "purple.main", bg: "purple.100", color: "purple.main", - _hover: { bg: "gray.200" }, + _hover: { bg: "purple.main", color: "white" }, }); const cancel = defineStyle({ From 472c90928d1203b95a35389be3f39a63059b270c Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Thu, 3 Oct 2024 17:07:52 -0400 Subject: [PATCH 2/2] Fix: added types & removed sample data --- .../src/components/common/ExportToCSV.tsx | 70 ++----------------- 1 file changed, 6 insertions(+), 64 deletions(-) diff --git a/frontend/src/components/common/ExportToCSV.tsx b/frontend/src/components/common/ExportToCSV.tsx index 44e78997..b004e669 100644 --- a/frontend/src/components/common/ExportToCSV.tsx +++ b/frontend/src/components/common/ExportToCSV.tsx @@ -1,77 +1,20 @@ import React from "react"; import { Button } from "@chakra-ui/react"; -import DownloadIcon from "@mui/icons-material/Download"; import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined"; +import { TableData } from "./CommonTable"; type ExportProps = { - exportData: any; + exportData: TableData[]; }; +// set exportData to be the list of objects needed to be exported const ExportToCSV = ({ exportData }: ExportProps): React.ReactElement => { - // - const sampleData = [ - { - numOfIds: 1, - productId: null, - askOrgId: "Yes", - orderId: 11608501, - orgSelectionType: "FLOWER", - batchCode: "B-E7BE5602-2F9B-E3", - IDType: "OPEN", - batchId: 413, - creationDate: "2022-06-29", - isOnline: "Yes", - productName: null, - batchProductArray: [ - { - ID: 663255, - TYPE: "PRODUCT", - NAME: "SOME NAME", - }, - ], - numOfUsedIDs: 0, - redemptionMethod: "ID", - askSSN: "No", - askEmployeeId: "Yes", - batchStatus: "Active", - productType: null, - expirationDate: "2023-06-29", - }, - { - numOfIds: 1, - productId: null, - askOrgId: "No", - orderId: 11608502, - orgSelectionType: "LEAF", - batchCode: "B-480A8929-57D5-97", - IDType: "OPEN", - batchId: 414, - creationDate: "2022-06-29", - isOnline: "Yes", - productName: null, - batchProductArray: [ - { - ID: 663255, - TYPE: "PRODUCT", - NAME: "Other Name", - }, - ], - numOfUsedIDs: 0, - redemptionMethod: "ID", - askSSN: "No", - askEmployeeId: "No", - batchStatus: "Active", - productType: null, - expirationDate: "2023-06-29", - }, - ]; - - const jsonToCSV = (jsonData: any) => { + const jsonToCSV = (jsonData: Array) => { let csv = ""; const headers = Object.keys(jsonData[0]); csv += `${headers.join(",")}\n`; // Add the data - jsonData.forEach((row: any) => { + jsonData.forEach((row: TableData) => { const data = headers .map((header) => JSON.stringify(row[header])) .join(","); @@ -81,7 +24,7 @@ const ExportToCSV = ({ exportData }: ExportProps): React.ReactElement => { }; const downloadJsonAsCSV = () => { - const csvData = jsonToCSV(exportData || sampleData); // Add .items.data + const csvData = jsonToCSV(exportData); // Create a CSV file and allow the user to download it const blob = new Blob([csvData], { type: "text/csv" }); const url = window.URL.createObjectURL(blob); @@ -96,7 +39,6 @@ const ExportToCSV = ({ exportData }: ExportProps): React.ReactElement => { <>