Merge pull request #134 from u-hossy/feature/payment-fetch-db

Feature/payment fetch db

Author: BruCandy

backend/app/views.py

@@ -119,6 +119,34 @@ def get_queryset(self):
         if event_code:
             qs = qs.filter(event_id=event_code)
         return qs
+    
+    @action(detail=False, methods=["delete"])
+    def delete_by_key(self, request):
+        event_id = request.query_params.get("event_id")
+        payment_id = request.query_params.get("payment_id")
+
+        deleted, _ = models.Payments.objects.filter(
+            event_id=event_id,
+            payment_id=payment_id
+        ).delete()
+
+        return Response({"status": "deleted"}, status=200)
+    
+    @action(detail=False, methods=["patch"])
+    def patch_by_key(self, request):
+        event_id = request.data.get("event_id")
+        payment_id = request.data.get("payment_id")
+
+        try:
+            obj = models.Payments.objects.get(event_id=event_id, payment_id=payment_id)
+        except models.Payments.DoesNotExist:
+            return Response({"error": "payment not found"}, status=404)
+
+        serializer = self.get_serializer(obj, data=request.data, partial=True)
+        serializer.is_valid(raise_exception=True)
+        serializer.save()
+
+        return Response(serializer.data, status=200)
 
 
 class ResultsViewSet(viewsets.ModelViewSet):

frontend/src/App.tsx

@@ -71,6 +71,7 @@ function App() {
               <BillingPage
                 members={members}
                 payments={payments}
+                setMembers={setMembers}
                 setPayments={setPayments}
               />
             }

frontend/src/components/BillingDetailCard.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import {
@@ -28,6 +29,7 @@ export default function BillingDetailCard({
   const [details, setDetails] = useState<
     Array<{ id: number; paidFor: number; amount: number | "" }>
   >([{ id: -1, paidFor: -1, amount: "" }]);
+  const { eventId } = useParams();
 
   // payerに関連するpaymentsをdetailsに反映
   useEffect(() => {
@@ -45,7 +47,7 @@ export default function BillingDetailCard({
     setDetails(newDetails);
   }, [payments, paidBy.id]);
 
-  const handleReceiverChange = (index: number, value: string) => {
+  const handleReceiverChange = async (index: number, value: string) => {
     const newValue = value === "none" ? -1 : Number(value);
     setDetails((prev) => {
       const updated = [...prev];
@@ -67,6 +69,19 @@ export default function BillingDetailCard({
       };
       setPayments((prev) => [...prev, newPayment]);
 
+      await fetch("http://127.0.0.1:8000/api/v1/payments/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          event_id: eventId,
+          payment_id: newPayment.id,
+          paid_by: newPayment.paidBy,
+          paid_for: newPayment.paidFor,
+          amount: 0,
+          note: "",
+        }),
+      });
+
       // detailsのidも更新
       setDetails((prev) => {
         const updated = [...prev];
@@ -86,17 +101,6 @@ export default function BillingDetailCard({
       const updated = [...prev];
       updated[index].amount = v;
 
-      const detail = updated[index];
-
-      // 支払い情報が既存なら即時反映
-      if (detail.id !== -1 && v !== "") {
-        setPayments((prevPayments) =>
-          prevPayments.map((p) =>
-            p.id === detail.id ? { ...p, amount: Number(v) } : p,
-          ),
-        );
-      }
-
       const last = updated[updated.length - 1];
       if (last.amount !== "" && last.paidFor !== -1) {
         updated.push({ id: -1, paidFor: -1, amount: "" });
@@ -106,28 +110,10 @@ export default function BillingDetailCard({
     });
   };
 
-  const handleBlur = (index: number) => {
+  const handleBlur = async (index: number) => {
     const detail = details[index];
 
-    if (detail.id === -1 && detail.paidFor !== -1 && detail.amount !== "") {
-      // 新規作成
-      const newId =
-        payments.length > 0 ? Math.max(...payments.map((p) => p.id)) + 1 : 0;
-      const newPayment: Payment = {
-        id: newId,
-        paidBy: paidBy.id,
-        paidFor: detail.paidFor,
-        amount: Number(detail.amount),
-      };
-      setPayments((prev) => [...prev, newPayment]);
-
-      // detailsのidも更新
-      setDetails((prev) => {
-        const updated = [...prev];
-        updated[index].id = newId;
-        return updated;
-      });
-    } else if (detail.id !== -1) {
+    if (detail.id !== -1) {
       // 既存を更新
       setPayments((prev) =>
         prev.map((p) =>
@@ -136,6 +122,17 @@ export default function BillingDetailCard({
       );
     }
 
+    await fetch(`http://127.0.0.1:8000/api/v1/payments/patch_by_key/`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        event_id: eventId,
+        payment_id: detail.id,
+        amount: detail.amount,
+        note: "",
+      }),
+    });
+
     if (
       index === details.length - 1 &&
       (detail.paidFor !== -1 || detail.amount !== "")
@@ -144,13 +141,20 @@ export default function BillingDetailCard({
     }
   };
 
-  const handleDeleteBilling = (index: number) => {
+  const handleDeleteBilling = async (index: number) => {
     const target = details[index];
 
     if (!confirm("本当に削除しますか？")) return;
 
     if (target.id !== -1) {
       setPayments((prev) => prev.filter((p) => p.id !== target.id));
+
+      await fetch(
+        `http://127.0.0.1:8000/api/v1/payments/delete_by_key/?event_id=${eventId}&payment_id=${target.id}`,
+        {
+          method: "DELETE",
+        },
+      );
     }
 
     setDetails((prev) => prev.filter((_, i) => i !== index));

frontend/src/components/MemberList.tsx

@@ -12,11 +12,11 @@ interface MemberListProps {
   setPayments: React.Dispatch<React.SetStateAction<Payment[]>>;
 }
 
-type MemberResponse = {
+interface MemberResponse {
   member_id: number;
   name: string;
   id: number;
-};
+}
 
 export default function MemberList({
   members,

frontend/src/pages/BillingPage.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import BillingTabList from "../components/BillingTabList";
 import CardWrapper from "../components/CardWrapper";
@@ -8,17 +9,57 @@ import type { Payment } from "../types/payment";
 interface BillingPageProps {
   members: Member[];
   payments: Payment[];
+  setMembers: React.Dispatch<React.SetStateAction<Member[]>>;
   setPayments: React.Dispatch<React.SetStateAction<Payment[]>>;
 }
 
+interface MemberResponse {
+  member_id: number;
+  name: string;
+}
+
+interface PaymentResponse {
+  payment_id: number;
+  paid_by: number;
+  paid_for: number;
+  amount: number;
+}
+
 export default function BillingPage({
   members,
   payments,
+  setMembers,
   setPayments,
 }: BillingPageProps) {
   const navigate = useNavigate();
   const { eventId } = useParams();
 
+  useEffect(() => {
+    fetch(`http://127.0.0.1:8000/api/v1/payments/?event_id=${eventId}`)
+      .then((res) => res.json())
+      .then((data) =>
+        setPayments(
+          (data as PaymentResponse[]).map((p) => ({
+            id: p.payment_id,
+            paidBy: p.paid_by,
+            paidFor: p.paid_for,
+            amount: p.amount,
+          })),
+        ),
+      );
+
+    fetch(`http://127.0.0.1:8000/api/v1/members/?event_id=${eventId}`)
+      .then((res) => res.json())
+      .then((data) =>
+        setMembers(
+          (data as MemberResponse[]).map((p) => ({
+            id: p.member_id,
+            name: p.name,
+          })),
+        ),
+      );
+  }, [eventId, setMembers, setPayments]);
+
   return (
     <div className="mx-auto w-full max-w-3xl p-6">
       <CardWrapper