Merge remote-tracking branch 'origin/feature-frontend-stock' into feature-backend-stock-fix

frontend/src/pages/StockPage.tsx

@@ -31,6 +31,8 @@ const StockPage: React.FC = () => {
     const [isEditOpen, setIsEditOpen] = useState(false);
     // 削除メッセージダイアログの表示状態
     const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+    // 在庫の編集状態
+    const [editStock, setEditStock] = useState<Stock | null>(null);
 
     // コンポーネントマウント時にタスク一覧を取得
     useEffect(() => {
@@ -51,6 +53,19 @@ const StockPage: React.FC = () => {
         }
     };
 
+    /**
+     * 在庫リストを編集するハンドラー
+     */
+    const handleUpdateStock = async (stockId: number, amount: number, price: number, buyDate: string, expDate: string) => {
+        try {
+            const today = new Date().toISOString().substring(0, 10);
+            await stockApi.updateStock({ stockId, amount, price, lastUpdate: today, buyDate, expDate });
+            fetchStocks(); // 削除後の買うもの一覧を再取得
+        } catch (error) {
+            console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error);
+        }
+    };
+
     /**
        * 在庫を削除するハンドラー
        * 指定されたIDのタスクをAPIを通じて削除
@@ -91,13 +106,59 @@ const StockPage: React.FC = () => {
     };
 
     /** 編集ボタンを押したときにダイアログを開く */
+    // const handleOpenEdit = () => {
+    //     if (selectedRow) {
+    //         setIsEditOpen(true);
+    //     } else {
+    //         alert("編集する食材を選択してください。");
+    //     }
+    // };
+    // ダイアログを開く際に `selectedRow` の値を `editStock` にセット
     const handleOpenEdit = () => {
         if (selectedRow) {
+            setEditStock({ ...selectedRow });
             setIsEditOpen(true);
         } else {
             alert("編集する食材を選択してください。");
         }
     };
+    // 変更を適用
+    const handleApplyChanges = async () => {
+        if (editStock) {
+            try {
+                await handleUpdateStock(
+                    editStock.stockId,
+                    Number(editStock.amount),
+                    Number(editStock.price),
+                    editStock.buyDate,
+                    editStock.expDate
+                );
+
+                setSelectedRow(editStock); // `selectedRow` を更新して変更を即時反映
+                fetchStocks(); // 最新データを取得してテーブルに反映
+            } catch (error) {
+                console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error);
+            }
+        }
+        setIsEditOpen(false); // ダイアログを閉じる
+    };
+
+
+    // ダイアログを開く際に `selectedRow` の値を `editStock` にコピー
+    useEffect(() => {
+        if (selectedRow) {
+            setEditStock({ ...selectedRow });
+        }
+    }, [selectedRow]); // `selectedRow` が変更されたら `editStock` に反映
+    // テキストフィールドの変更を検知
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (editStock) {
+            setEditStock({
+                ...editStock,
+                [event.target.name]: event.target.value,
+            });
+        }
+    };
     /** 編集ダイアログを閉じる */
     const handleCloseEdit = () => {
         setIsEditOpen(false);
@@ -157,24 +218,68 @@ const StockPage: React.FC = () => {
                 <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
                     <DialogTitle>在庫の編集</DialogTitle>
                     <DialogContent>
-                        {selectedRow && (
+                        {editStock && (
                             <>
                                 <Typography variant="body1">選択した食材の在庫を編集します</Typography>
-                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuffName} />
-                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
-                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
-                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.expDate} />
-                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buyDate} />
+                                <TextField
+                                    label="食材名"
+                                    fullWidth
+                                    margin="normal"
+                                    name="stuffName"
+                                    value={editStock.stuffName}
+                                    onChange={handleChange}
+                                />
+                                <TextField
+                                    label="数量"
+                                    fullWidth
+                                    margin="normal"
+                                    name="amount"
+                                    type="number"
+                                    value={editStock.amount}
+                                    onChange={handleChange}
+                                />
+                                <TextField
+                                    label="購入価格"
+                                    fullWidth
+                                    margin="normal"
+                                    name="price"
+                                    type="number"
+                                    value={editStock.price}
+                                    onChange={handleChange}
+                                />
+                                <TextField
+                                    label="賞味・消費期限"
+                                    fullWidth
+                                    margin="normal"
+                                    name="expDate"
+                                    value={editStock.expDate}
+                                    onChange={handleChange}
+                                />
+                                <TextField
+                                    label="購入日"
+                                    fullWidth
+                                    margin="normal"
+                                    name="buyDate"
+                                    value={editStock.buyDate}
+                                    onChange={handleChange}
+                                />
+
                                 <Button onClick={() => setIsEditOpen(false)} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
-                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: "68%" }}>
+                                <Button
+                                    variant="contained"
+                                    color="success"
+                                    onClick={handleApplyChanges}
+                                    sx={{ mt: 3, mb: 2, left: "68%" }}
+                                >
                                     変更を適用
                                 </Button>
+
                             </>
                         )}
                     </DialogContent>
                 </Dialog>
 
-                {/* タスク削除ダイアログ */}
+                {/* 削除ダイアログ */}
                 <Dialog open={isDeleteOpen}
                     onClose={handleCloseDelete}
                     fullWidth
@@ -188,9 +293,9 @@ const StockPage: React.FC = () => {
                                 <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
                                 <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
                                 <Button onClick={() => setIsDeleteOpen(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
-                                {/* <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button> */}
                                 <Button variant="contained" color="error" onClick={() => {
                                     handleDeleteStock(selectedRow.stockId);
+                                    setIsDeleteOpen(false); // 削除処理後にダイアログを閉じる
                                 }}
                                     style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
                             </>

frontend/src/services/api.ts

@@ -249,9 +249,13 @@ export const stockApi = {
   /** 
    * 在庫リストの編集 
    */
-  updateStock: async (req: {stockId: number, amount: number, price: number, lastUpdate: string, buyDate: string, expDate: string}): Promise<{ result: boolean; message: string }> => {
+  updateStock: async (req: { stockId: number, amount: number, price: number, lastUpdate: string, buyDate: string, expDate: string }): Promise<{ result: boolean; message: string }> => {
+    // console.log('req: ', req)
 
-    
+    req.buyDate = makeDateObject(req.buyDate)?.toISOString()?.substring(0, 10) || ''
+    req.expDate = makeDateObject(req.expDate)?.toISOString()?.substring(0, 10) || ''
+
+     console.log('req: ', req)
 
     const response = await fetch(`${API_BASE_URL}/api/stocks/update`, {
       method: 'PUT',
@@ -299,27 +303,6 @@ export const stockApi = {
 
 }
 
-const deleteStock = async (stockId: number): Promise<{ result: boolean; message: string }> => {
-  console.log("API の deleteStock メソッドが呼ばれました。stockId:", stockId);
-
-  const response = await fetch(`${API_BASE_URL}/api/stocks/delete`, {
-    method: "DELETE",
-    headers: getHeaders(),
-    body: JSON.stringify({ stockId }),
-  });
-
-  console.log("API レスポンスステータス:", response.status);
-  console.log("API レスポンス本文:", await response.text());
-
-  if (!response.ok) {
-    return { result: false, message: "削除に失敗しました。" };
-  }
-
-  // API のレスポンスから result と message を取得
-  const data = await response.json();
-  return { result: data.result, message: data.message };
-};
-
 
 function makeDateObject(dateStr: String) {
   // 例: '2025/06/15' または '2025-06-15' を '2025-06-15' に変換