diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index 9b1765e..42d317a 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/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(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) => { + if (editStock) { + setEditStock({ + ...editStock, + [event.target.name]: event.target.value, + }); + } + }; /** 編集ダイアログを閉じる */ const handleCloseEdit = () => { setIsEditOpen(false); @@ -157,24 +218,68 @@ const StockPage: React.FC = () => { 在庫の編集 - {selectedRow && ( + {editStock && ( <> 選択した食材の在庫を編集します - - - - - + + + + + + - + )} - {/* タスク削除ダイアログ */} + {/* 削除ダイアログ */} { この操作は取り消せません。本当に削除しますか? ⚠️ 注意: 削除すると復元できません。 - {/* */} diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index 07c122a..59951bf 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -249,7 +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', @@ -297,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' に変換