Merge pull request #136 from u-hossy/feature/add-memo

frontend:メモ機能の追加

Author: BruCandy

frontend/public/notebook-text.svg

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/select";
 import type { Member } from "@/types/member";
 import type { Payment } from "@/types/payment";
+import { DialogMemo } from "./DialogMemo";
 import { Button } from "./ui/button";
 
 interface BillingDetailCardProps {
@@ -27,8 +28,8 @@ export default function BillingDetailCard({
   setPayments,
 }: BillingDetailCardProps) {
   const [details, setDetails] = useState<
-    Array<{ id: number; paidFor: number; amount: number | "" }>
-  >([{ id: -1, paidFor: -1, amount: "" }]);
+    Array<{ id: number; paidFor: number; amount: number | ""; memo: string }>
+  >([{ id: -1, paidFor: -1, amount: "", memo: "" }]);
   const { eventId } = useParams();
 
   // payerに関連するpaymentsをdetailsに反映
@@ -40,8 +41,9 @@ export default function BillingDetailCard({
         id: p.id,
         paidFor: p.paidFor,
         amount: p.amount,
+        memo: p.memo,
       })),
-      { id: -1, paidFor: -1, amount: "" as number | "" },
+      { id: -1, paidFor: -1, amount: "" as number | "", memo: "" },
     ];
 
     setDetails(newDetails);
@@ -66,6 +68,7 @@ export default function BillingDetailCard({
         paidBy: paidBy.id,
         paidFor: newValue,
         amount: "",
+        memo: "",
       };
       setPayments((prev) => [...prev, newPayment]);
 
@@ -103,7 +106,7 @@ export default function BillingDetailCard({
 
       const last = updated[updated.length - 1];
       if (last.amount !== "" && last.paidFor !== -1) {
-        updated.push({ id: -1, paidFor: -1, amount: "" });
+        updated.push({ id: -1, paidFor: -1, amount: "", memo: "" });
       }
 
       return updated;
@@ -137,7 +140,10 @@ export default function BillingDetailCard({
       index === details.length - 1 &&
       (detail.paidFor !== -1 || detail.amount !== "")
     ) {
-      setDetails((prev) => [...prev, { id: -1, paidFor: -1, amount: "" }]);
+      setDetails((prev) => [
+        ...prev,
+        { id: -1, paidFor: -1, amount: "", memo: "" },
+      ]);
     }
   };
 
@@ -210,6 +216,13 @@ export default function BillingDetailCard({
                     onBlur={() => handleBlur(index)}
                   />
                   <span>円もらう</span>
+                  <DialogMemo
+                    index={index}
+                    disabled={!isSelectable}
+                    details={details}
+                    setDetails={setDetails}
+                    setPayments={setPayments}
+                  />
                   <Button
                     variant="destructive"
                     onClick={() => handleDeleteBilling(index)}

frontend/src/components/BillingDetailCard.tsx

@@ -0,0 +1,121 @@
+import { DialogDescription } from "@radix-ui/react-dialog";
+import { useParams } from "react-router-dom";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import type { Payment } from "@/types/payment";
+
+interface DialogMemoProps {
+  index: number;
+  disabled: boolean;
+  details: Array<{
+    id: number;
+    paidFor: number;
+    amount: number | "";
+    memo: string;
+  }>;
+  setDetails: React.Dispatch<
+    React.SetStateAction<
+      Array<{ id: number; paidFor: number; amount: number | ""; memo: string }>
+    >
+  >;
+  setPayments: React.Dispatch<React.SetStateAction<Payment[]>>;
+}
+
+export function DialogMemo({
+  index,
+  disabled,
+  details,
+  setDetails,
+  setPayments,
+}: DialogMemoProps) {
+  const { eventId } = useParams();
+  const handleMemoChange = (index: number, v: string) => {
+    setDetails((prev) => {
+      const updated = [...prev];
+      updated[index].memo = v;
+
+      const last = updated[updated.length - 1];
+      if (last.amount !== "" && last.paidFor !== -1) {
+        updated.push({ id: -1, paidFor: -1, amount: "", memo: "" });
+      }
+
+      return updated;
+    });
+  };
+
+  const handleMemoBlur = async (index: number) => {
+    const detail = details[index];
+
+    if (detail.id !== -1) {
+      // 既存を更新
+      setPayments((prev) =>
+        prev.map((p) =>
+          p.id === detail.id
+            ? { ...p, amount: Number(detail.amount) || 0, memo: detail.memo }
+            : p,
+        ),
+      );
+    }
+
+    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,
+        note: detail.memo,
+      }),
+    });
+
+    if (
+      index === details.length - 1 &&
+      (detail.paidFor !== -1 || detail.amount !== "")
+    ) {
+      setDetails((prev) => [
+        ...prev,
+        { id: -1, paidFor: -1, amount: "", memo: "" },
+      ]);
+    }
+  };
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <div
+          className={`cursor-pointer select-none rounded-full p-2 transition ${disabled ? "pointer-events-none opacity-40" : "hover:bg-gray-200"}
+          `}
+        >
+          <img
+            src="/notebook-text.svg"
+            alt="ノートアイコン"
+            className="mr-2 ml-2 h-9 w-9"
+          />
+        </div>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>メモ</DialogTitle>
+          <DialogDescription>
+            入力後に閉じると自動で保存されます。
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-2">
+          <div className="grid flex-1 gap-2">
+            <Input
+              type="string"
+              placeholder=""
+              value={details[index].memo}
+              onChange={(e) => handleMemoChange(index, e.target.value)}
+              onBlur={() => handleMemoBlur(index)}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/DialogMemo.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/select";
 import { sampleMembers, samplePayments } from "@/data/sampleData";
 import type { Member } from "@/types/member";
+import { ExampleDialogMemo } from "./ExampleDialogMemo";
 import { Button } from "./ui/button";
 
 interface ExampleBillingDetailCardProps {
@@ -36,7 +37,9 @@ export default function ExampleBillingDetailCard({
               <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
                 <div className="flex items-center gap-2">
                   <Select
-                    value={detail.paidFor === -1 ? "" : String(detail.paidFor)}
+                    defaultValue={
+                      detail.paidFor === -1 ? "" : String(detail.paidFor)
+                    }
                   >
                     <SelectTrigger className="w-32">
                       <SelectValue placeholder="請求先" />
@@ -59,9 +62,10 @@ export default function ExampleBillingDetailCard({
                     disabled={!isSelectable}
                     placeholder="金額"
                     className="w-24"
-                    value={detail.amount}
+                    defaultValue={detail.amount}
                   />
                   <span>円もらう</span>
+                  <ExampleDialogMemo />{" "}
                   <Button variant="destructive" className="cursor-pointer">
                     削除
                   </Button>

frontend/src/components/ExampleBillingDetailCard.tsx

@@ -0,0 +1,44 @@
+import { DialogDescription } from "@radix-ui/react-dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+
+export function ExampleDialogMemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <div
+          className={`cursor-pointer select-none rounded-full p-2 transition`}
+        >
+          <img
+            src="/notebook-text.svg"
+            alt="ノートアイコン"
+            className="mr-2 ml-2 h-9 w-9"
+          />
+        </div>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>メモ</DialogTitle>
+          <DialogDescription>
+            入力後に閉じると自動で保存されます。
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-2">
+          <div className="grid flex-1 gap-2">
+            <Input
+              type="string"
+              placeholder=""
+              defaultValue="請求に関する簡単なメモを残すことができます。"
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/ExampleDialogMemo.tsx

@@ -23,6 +23,7 @@ interface PaymentResponse {
   paid_by: number;
   paid_for: number;
   amount: number;
+  note: string;
 }
 
 export default function BillingPage({
@@ -44,6 +45,7 @@ export default function BillingPage({
             paidBy: p.paid_by,
             paidFor: p.paid_for,
             amount: p.amount,
+            memo: p.note,
           })),
         ),
       );

frontend/src/pages/BillingPage.tsx

@@ -45,7 +45,7 @@ export default function TopPage() {
                     <Input
                       //各inputを登録
                       type="text"
-                      value={member.name}
+                      defaultValue={member.name}
                       placeholder={`メンバー${index + 1}`}
                       className="rounded-md border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-400"
                     />
@@ -116,7 +116,7 @@ export default function TopPage() {
                 </div>
               </CardHeader>
               <CardContent>
-                各メンバーに請求したい金額を入力してください。「次へ」を押すと計算結果画面に、「戻る」を押すとメンバー追加画面に移動します。
+                各メンバーに請求したい金額を入力してください。ノートアイコンを押すことで請求に関する簡単なメモを残すことができます。「次へ」を押すと計算結果画面に、「戻る」を押すとメンバー追加画面に移動します。
               </CardContent>
             </Card>
           </div>
@@ -132,7 +132,7 @@ export default function TopPage() {
                   <label htmlFor={useId()} className="font-medium text-sm">
                     計算アルゴリズム
                   </label>
-                  <Select value={""}>
+                  <Select>
                     <SelectTrigger id={useId()}>
                       <SelectValue placeholder="アルゴリズムを選択してください" />
                     </SelectTrigger>

frontend/src/pages/TopPage.tsx

@@ -5,6 +5,7 @@ interface Payment {
   amount: number | "";
   paidBy: MemberId;
   paidFor: MemberId;
+  memo: string;
 }
 
 export type { Payment };

frontend/src/types/payment.ts

@@ -9,13 +9,15 @@ test("convert snake case object to camel case object", () => {
     amount: 8000,
     paid_by: 0,
     paid_for: 1,
+    memo: "",
   };
 
   const after: Payment = {
     id: 0,
     amount: 8000,
     paidBy: 0,
     paidFor: 1,
+    memo: "",
   };
 
   expect(toCamelCaseObject(before)).toStrictEqual(after);