diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index 48fffee..ca18564 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -177,18 +177,23 @@ const StockPage: React.FC = () => { const handleOpenAdd = () => { setIsAddOpen(true); }; - /** 削除ダイアログを閉じる */ + /** 追加ダイアログを閉じる */ const handleCloseAdd = () => { setIsAddOpen(false); }; /** - * セルを選択する関数. 再度クリックで選択解除 + * セルを選択する関数. 再度クリックで選択解除 → 行選択ではなくチェックボックスにしたため不要 */ - const handleRowClick = (stock: Stock) => { + // const handleRowClick = (stock: Stock) => { + // setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock)); + // }; + // チェックボックス切り替え + const handleCheckboxChange = (stock: Stock) => { setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock)); }; + /** 編集ボタンを押したときにダイアログを開く */ // ダイアログを開く際に `selectedRow` の値を `editStock` にセット const handleOpenEdit = () => { @@ -199,26 +204,35 @@ const StockPage: React.FC = () => { alert("編集する食材を選択してください。"); } }; - // 変更を適用 + // 変更を適用. 数量に0を入力したとき、削除ダイアログに飛ぶ機能を追加 const handleApplyChanges = async () => { - if (editStock) { - try { - await handleUpdateStock( - editStock.stockId, - Number(editStock.amount), - Number(editStock.price), - editStock.buyDate, - editStock.expDate - ); - - setSelectedRow(editStock); // `selectedRow` を更新して変更を即時反映 - fetchStocks(); // 最新データを取得してテーブルに反映 - setSelectedRow(null); // セルの選択を解除 - } catch (error) { - console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error); + if (!editStock) return; + + try { + if (Number(editStock.amount) === 0) { + // 数量が 0 の場合は削除処理へ誘導 + setIsEditOpen(false); // 編集ダイアログを閉じる + setSelectedRow(editStock); // 削除対象をセット + setIsDeleteOpen(true); // 削除ダイアログを開く + return; } + + await handleUpdateStock( + editStock.stockId, + Number(editStock.amount), + Number(editStock.price), + editStock.buyDate, + editStock.expDate + ); + + setSelectedRow(editStock); // 更新後に選択行を反映 + fetchStocks(); // 最新データを取得 + setSelectedRow(null); // 選択解除 + } catch (error) { + console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error); } - setIsEditOpen(false); // ダイアログを閉じる + + setIsEditOpen(false); // 編集ダイアログを閉じる }; // ダイアログを開く際に `selectedRow` の値を `editStock` にコピー @@ -229,15 +243,25 @@ const StockPage: React.FC = () => { }, [selectedRow]); // `selectedRow` が変更されたら `editStock` に反映 // テキストフィールドの変更を検知 + // 負の値を入力できないように書き換え const handleChange = (event: React.ChangeEvent) => { + const { name, value } = event.target; + + // 数値項目に対して負の値をブロック + const numericFields = ['amount', 'price']; + if (numericFields.includes(name) && Number(value) < 0) { + return; // 無視して更新しない + } + if (editStock) { setEditStock({ ...editStock, - [event.target.name]: event.target.value, + [name]: value, }); } }; + /** 編集ダイアログを閉じる */ const handleCloseEdit = () => { setIsEditOpen(false); @@ -268,6 +292,7 @@ const StockPage: React.FC = () => { + 食材名 数量 消費・賞味期限 @@ -275,6 +300,7 @@ const StockPage: React.FC = () => { {filteredStocks.map(stock => { + const isSelected = selectedRow?.stockId === stock.stockId; const today = new Date(); const expDate = new Date(stock.expDate); const timeDiff = expDate.getTime() - today.getTime(); @@ -283,9 +309,17 @@ const StockPage: React.FC = () => { return ( handleRowClick(stock)} - style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }} + sx={{ + backgroundColor: isSelected ? 'yellow' : 'white', + }} + > + + handleCheckboxChange(stock)} + /> + {stock.stuffName} {stock.amount} { isClearable /> - {/* 以前の書き方 - - */} {/* 新規タスク作成ダイアログ */} - setIsAddOpen(false)} disableScrollLock={true}> + 在庫に食材を追加 @@ -570,15 +601,6 @@ const StockPage: React.FC = () => { isClearable //withPortal // ← 他の文字との重なり対策 /> - {/* - setNewStock({ ...newStock, buyDate: e.target.value })} - /> - */} {/* 消費・賞味期限入力フィールド */} { {/* 在庫の食材編集ボタン(全テーブル共通) */}