From 1b7665585fba5a71578aa591fb57c4cba66ba85c Mon Sep 17 00:00:00 2001 From: "Yuna.Suzuki" Date: Mon, 16 Jun 2025 16:17:10 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=BB=E3=83=86=E3=83=BC=E3=83=96=E3=83=AB?= =?UTF-8?q?=E3=81=AE=E8=A1=8C=E9=81=B8=E6=8A=9E=E3=81=99=E3=82=8B=E3=81=A8?= =?UTF-8?q?=E3=81=8D=E3=81=AB=E3=83=81=E3=82=A7=E3=83=83=E3=82=AF=E3=83=9C?= =?UTF-8?q?=E3=83=83=E3=82=AF=E3=82=B9=E3=82=92=E6=8A=BC=E3=81=99=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F=20?= =?UTF-8?q?=E3=83=BB=E8=BF=BD=E5=8A=A0=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AA?= =?UTF-8?q?=E3=81=A9=E3=82=92=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB?= =?UTF-8?q?=E3=81=97=E3=81=A6=E3=82=82=E4=B8=8A=E5=9B=BA=E5=AE=9A=E3=81=AB?= =?UTF-8?q?=E3=81=AA=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=BE?= =?UTF-8?q?=E3=81=97=E3=81=9F=20=E3=83=BB=E7=B7=A8=E9=9B=86=E3=81=A7?= =?UTF-8?q?=E6=95=B0=E9=87=8F=E3=81=A8=E8=B3=BC=E5=85=A5=E9=87=91=E9=A1=8D?= =?UTF-8?q?=E3=81=AB=E8=B2=A0=E3=81=AE=E5=80=A4=E3=81=8C=E5=85=A5=E3=82=89?= =?UTF-8?q?=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=BE?= =?UTF-8?q?=E3=81=97=E3=81=9F=20=E3=83=BB=E7=B7=A8=E9=9B=86=E3=81=A7?= =?UTF-8?q?=E6=95=B0=E9=87=8F=E3=81=AB0=E3=82=92=E5=85=A5=E3=82=8C?= =?UTF-8?q?=E3=81=9F=E3=82=89=E5=89=8A=E9=99=A4=E3=83=80=E3=82=A4=E3=82=A2?= =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=81=AB=E9=A3=9B=E3=81=B6=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/StockPage.tsx | 129 ++++++++++++++++++------------- 1 file changed, 76 insertions(+), 53 deletions(-) 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 })} - /> - */} {/* 消費・賞味期限入力フィールド */} { {/* 在庫の食材編集ボタン（全テーブル共通） */}