Merge pull request #132 from u-hossy/feature/add-csv

Feature/add csv

Author: BruCandy

frontend/src/lib/downloadCsv.ts

@@ -0,0 +1,12 @@
+function downloadCsv(csv: string, filename = "result.csv") {
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+export { downloadCsv };

frontend/src/lib/generateCsv.ts

@@ -0,0 +1,37 @@
+import type { Member } from "@/types/member";
+import type { Result } from "@/types/result";
+
+function generateCsv(members: Member[], results: Result[]): string {
+  const idToName = Object.fromEntries(members.map((m) => [m.id, m.name]));
+
+  const people = Array.from(
+    new Set(
+      results
+        .map((r) => idToName[r.paidBy])
+        .concat(results.map((r) => idToName[r.paidFor])),
+    ),
+  );
+
+  const matrix: Record<string, Record<string, number>> = {};
+  people.forEach((from) => {
+    matrix[from] = {};
+    people.forEach((to) => (matrix[from][to] = 0));
+  });
+
+  results.forEach((r) => {
+    const from = idToName[r.paidBy];
+    const to = idToName[r.paidFor];
+    matrix[from][to] += r.amount;
+  });
+
+  const header = ["支払う\\受け取る", ...people].join(",");
+
+  const rows = people.map((from) => {
+    const amounts = people.map((to) => matrix[from][to]);
+    return [from, ...amounts].join(",");
+  });
+
+  return [header, ...rows].join("\n");
+}
+
+export { generateCsv };

frontend/src/pages/AlgorithmAndResultPage.tsx

@@ -3,7 +3,9 @@ import { useNavigate, useParams } from "react-router-dom";
 import NetworkGraph from "@/components/NetworkGraph";
 import SelectAlgorithm from "@/components/SelectAlgorithm";
 import { deleteResult } from "@/lib/deleteResult";
+import { downloadCsv } from "@/lib/downloadCsv";
 import { fetchResult } from "@/lib/fetchResult";
+import { generateCsv } from "@/lib/generateCsv";
 import { getResult } from "@/lib/getResult";
 import { saveResult } from "@/lib/saveResult";
 import type { Payment } from "@/types/payment";
@@ -52,6 +54,11 @@ export default function AlgorithmAndResultPage({ payments, members }: Props) {
     }
   };
 
+  const handleCsvExport = () => {
+    const csv = generateCsv(members, results);
+    downloadCsv(csv);
+  };
+
   useEffect(() => {
     const loadSavedResults = async () => {
       if (!eventId) return;
@@ -111,6 +118,9 @@ export default function AlgorithmAndResultPage({ payments, members }: Props) {
           >
             戻る
           </Button>
+          <Button onClick={handleCsvExport} size="lg">
+            CSV出力
+          </Button>
         </div>
       </CardWrapper>