From 21344b23c6c03892746e98a510f5d41f64f80ee3 Mon Sep 17 00:00:00 2001 From: "Yuna.Suzuki" Date: Tue, 17 Jun 2025 13:17:40 +0900 Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E9=9D=A2=E8=A8=AD=E8=A8=88=E3=82=92?= =?UTF-8?q?=E5=A4=89=E6=9B=B4=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F=E3=80=82?= =?UTF-8?q?=20=E3=83=BB=E3=83=86=E3=83=BC=E3=83=96=E3=83=AB=E3=81=AE?= =?UTF-8?q?=E8=A1=8C=E3=82=92=E9=81=B8=E6=8A=9E=E3=81=97=E3=81=9F=E3=82=89?= =?UTF-8?q?=E8=A9=B3=E7=B4=B0=E3=83=BB=E7=B7=A8=E9=9B=86=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E3=81=AB=E9=81=B7=E7=A7=BB=20=E3=83=BB=E8=A9=B3=E7=B4=B0?= =?UTF-8?q?=E3=83=BB=E7=B7=A8=E9=9B=86=E7=94=BB=E9=9D=A2=E3=81=AB=E5=89=8A?= =?UTF-8?q?=E9=99=A4=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/StockPage.tsx | 143 +++++++++++++++++++++++-------- 1 file changed, 109 insertions(+), 34 deletions(-) diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index 76f9352..93e5d9b 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -26,6 +26,7 @@ import { Select, MenuItem, } from '@mui/material'; +import { Add as AddIcon } from '@mui/icons-material'; import { STOCK_ERRORS } from '../constants/errorMessages'; import DatePicker, { registerLocale } from 'react-datepicker'; import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート @@ -103,6 +104,26 @@ const StockPage: React.FC = () => { if (isNaN(newStock.price)) return; console.log(newStock) + + // 購入日と消費・賞味期限の整合性チェック + const buy = new Date(newStock.buyDate); + const exp = new Date(newStock.expDate); + // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得 + const buyDateOnly = new Date(buy); + buyDateOnly.setHours(0, 0, 0, 0); + const expDateOnly = new Date(exp); + expDateOnly.setHours(0, 0, 0, 0); + + console.log("新規作成buy:", buy); + console.log("新規作成exp:", exp); + console.log("新規作成buyDateOnly:", buyDateOnly); + console.log("新規作成expDateOnly:", expDateOnly); + + if (buyDateOnly.getTime() > expDateOnly.getTime()) { + alert("購入日は消費・賞味期限より前の日付を設定してください。"); + return; + } + const today = new Date().toISOString().substring(0, 10); const updatedStock = { ...newStock, lastUpdate: today }; // lastUpdate に today を設定 @@ -183,17 +204,18 @@ const StockPage: React.FC = () => { }; /** - * セルを選択する関数. 再度クリックで選択解除 → 行選択ではなくチェックボックスにしたため不要 + * セルを選択する関数. 再度クリックで選択解除 → 修正 */ // const handleRowClick = (stock: Stock) => { // setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock)); // }; - // チェックボックス切り替え - const handleCheckboxChange = (stock: Stock) => { - setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock)); + // セルを選択して編集画面 + const handleRowClick = (stock: Stock) => { + setSelectedRow(stock); // 行選択 + setEditStock({ ...stock }); // 編集対象にセット + setIsEditOpen(true); // 編集ダイアログを開く }; - /** 編集ボタンを押したときにダイアログを開く */ // ダイアログを開く際に `selectedRow` の値を `editStock` にセット const handleOpenEdit = () => { @@ -208,10 +230,28 @@ const StockPage: React.FC = () => { const handleApplyChanges = async () => { if (!editStock) return; + // 購入日が消費・賞味期限より未来の場合はエラー表示 + const buy = new Date(editStock.buyDate); + const exp = new Date(editStock.expDate); + // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得 + const buyDateOnly = new Date(buy); + buyDateOnly.setHours(0, 0, 0, 0); + const expDateOnly = new Date(exp); + expDateOnly.setHours(0, 0, 0, 0); + console.log("編集buy:", buy); + console.log("編集exp:", exp); + console.log("編集buyDateOnly:", buyDateOnly); + console.log("編集expDateOnly:", expDateOnly); + + if (buy > exp) { + alert("購入日は消費・賞味期限より前の日付を設定してください。"); + return; + } + try { if (Number(editStock.amount) === 0) { // 数量が 0 の場合は削除処理へ誘導 - setIsEditOpen(false); // 編集ダイアログを閉じる + // setIsEditOpen(false); // 編集ダイアログを閉じる setSelectedRow(editStock); // 削除対象をセット setIsDeleteOpen(true); // 削除ダイアログを開く return; @@ -292,7 +332,6 @@ const StockPage: React.FC = () => { - 食材名 数量 消費・賞味期限 @@ -300,26 +339,28 @@ 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(); + // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得 + const todayDateOnly = new Date(today); + todayDateOnly.setHours(0, 0, 0, 0); + const expDateOnly = new Date(expDate); + expDateOnly.setHours(0, 0, 0, 0); + const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime(); const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); + console.log("テーブルtoday:", today); + console.log("テーブルexp:", expDate); + console.log("テーブルtodayDateOnly:", todayDateOnly); + console.log("テーブルexpDateOnly:", expDateOnly); + console.log("日数差:", daysLeft); + return ( handleRowClick(stock)} + style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }} > - - handleCheckboxChange(stock)} - /> - {stock.stuffName} {stock.amount} { {/* 編集ダイアログ */} - 在庫の編集 + + + 在庫の編集 + + {editStock && ( <> - {editStock.stuffName} + 【{editStock.stuffName}】 { - + )} @@ -441,7 +487,11 @@ const StockPage: React.FC = () => { maxWidth="sm" sx={{ overflow: "hidden" }} > - 食材の削除 + + + 食材の削除 + + {selectedRow && ( <> @@ -451,7 +501,7 @@ const StockPage: React.FC = () => { @@ -462,6 +512,7 @@ const StockPage: React.FC = () => { handleDeleteStock(selectedRow.stockId); setIsDeleteOpen(false); setSelectedRow(null); + setIsEditOpen(false); }} > 削除 @@ -475,11 +526,10 @@ const StockPage: React.FC = () => { ); }; - return ( - - 在庫一覧 + + 在庫リスト {/* */} @@ -499,14 +549,39 @@ const StockPage: React.FC = () => { > {/* 在庫の食材追加ボタン */} - */} + {/* + */} + {/* + 食材の追加 + + + + */} + + + 食材の追加 + + + + + + {/* 新規タスク作成ダイアログ */} - 在庫に食材を追加 + + + 在庫に食材を追加 + + } @@ -644,15 +719,15 @@ const StockPage: React.FC = () => { - {/* 在庫の食材編集ボタン（全テーブル共通） */} + {/* 在庫の食材編集ボタン（全テーブル共通） + */} - {/* 在庫の食材削除ボタン （全テーブル共通） */} - + {/* 在庫の食材削除ボタン （全テーブル共通） + */}