diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index b8f3041..013cef6 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -231,7 +231,7 @@ const StockPage: React.FC = () => { const handleApplyChanges = async () => { if (!editStock) return; - const {stockId, amount, buyAmount, price, shop, buyDate, expDate, lastUpdate} = editStock; + const { stockId, amount, buyAmount, price, shop, buyDate, expDate, lastUpdate } = editStock; // 購入日が消費・賞味期限より未来の場合はエラー表示 const buy = new Date(buyDate); const exp = new Date(expDate); @@ -252,22 +252,27 @@ const StockPage: React.FC = () => { } try { - if (amount === 0) { + // Number型に変換した変数を用意 + const numericAmount = Number(amount); + const numericBuyAmount = Number(buyAmount); + const numericPrice = Number(price); + + if (numericAmount === 0) { // 数量が 0 の場合は削除処理へ誘導 // setIsEditOpen(false); // 編集ダイアログを閉じる setSelectedRow(editStock); // 削除対象をセット setIsDeleteOpen(true); // 削除ダイアログを開く return; } - if (!amount || !buyAmount) { + if (!numericAmount || !numericBuyAmount) { showErrorMessage(GENERAL_ERRORS.INVALID_AMOUNT); return; } - if (!price) { + if (!numericPrice) { showErrorMessage(GENERAL_ERRORS.INVALID_PRICE); return; } - + const lastUpdate = new Date().toISOString().substring(0, 10); const updateRequest = { @@ -327,6 +332,7 @@ const StockPage: React.FC = () => { /** 編集ダイアログを閉じる */ const handleCloseEdit = () => { setIsEditOpen(false); + setSelectedRow(null); }; /** 削除ボタンを押したときにダイアログを開く */ @@ -409,9 +415,10 @@ const StockPage: React.FC = () => { {editStock && ( <> - {/* 材料名 */} + {/* 材料の詳細 */} 【{editStock.stuffName}】 - + + {/* 現在の数量フィールド */} { }} /> + {/* 購入時数量フィールド */} { }} /> + {/* 購入価格フィールド */} { }} /> + {/* 購入店舗フィールド */} { {/* 購入日・消費期限を横並びに */} - {/* 購入日 */} + {/* 購入日フィールド */} { @@ -494,7 +504,7 @@ const StockPage: React.FC = () => { } isClearable /> - {/* 消費・賞味期限 */} + {/* 消費・賞味期限フィールド */} { @@ -604,7 +614,7 @@ const StockPage: React.FC = () => { {/* 在庫の食材追加ボタン */} 食材の追加 @@ -675,10 +685,10 @@ const StockPage: React.FC = () => { onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })} sx={{ marginBottom: 2 }} />} - {/* 数量入力フィールド */} + {/* 現在の数量入力フィールド */} { @@ -692,6 +702,23 @@ const StockPage: React.FC = () => { type="number" inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 /> + {/* 購入時数量入力フィールド */} + { + const value = e.target.value; + const parsedValue = parseInt(value, 10); // 数値に変換 + if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする,ただし空欄でない場合は1以上のみOK + setNewStock({ ...newStock, buyAmount: parsedValue }); // number型で保存 + } + }} + // sx={{ width: "50%" }} + type="number" + inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 + /> {/* 購入価格入力フィールド */} { type="number" inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 /> - + {/* 購入店舗入力フィールド */} + setNewStock({...newStock, shop: e.target.value})} + /> {/* 購入日・消費期限を横並びに */} {/* 購入日入力フィールド */}