From 0e5e22675596626ca727862deb21aa4030771b97 Mon Sep 17 00:00:00 2001 From: "Masaharu.Kato" Date: Thu, 19 Jun 2025 15:59:03 +0900 Subject: [PATCH] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=8F=E3=83=B3?= =?UTF-8?q?=E3=83=89=E3=83=AA=E3=83=B3=E3=82=B0=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/AddByRecipeDialog.tsx | 16 +++++++------ frontend/src/components/Layout.tsx | 1 + .../src/components/StuffHistoryDialog.tsx | 4 ++-- frontend/src/constants/normalMessages.ts | 7 ++++++ frontend/src/pages/RecipeList.tsx | 2 +- frontend/src/pages/StockPage.tsx | 24 +++++++++++++------ frontend/src/pages/TaskListPage.tsx | 2 ++ 7 files changed, 39 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/AddByRecipeDialog.tsx b/frontend/src/components/AddByRecipeDialog.tsx index 35ee033..174914e 100644 --- a/frontend/src/components/AddByRecipeDialog.tsx +++ b/frontend/src/components/AddByRecipeDialog.tsx @@ -37,8 +37,8 @@ const AddByRecipeDialog = ({ openDialog: boolean, setOpenDialog: (open: boolean) => void, recipeId: number, - numOfPeople: number, - setNumOfPeaple: (num: number) => void, + numOfPeople: string, + setNumOfPeaple: (num: string) => void, checked: boolean, setChecked: (checked: boolean) => void }) => { @@ -109,14 +109,15 @@ const AddByRecipeDialog = ({ margin="dense" label="何人前" fullWidth - // min={1} defaultValue={1} value={numOfPeople} onChange={(e) => { - setNumOfPeaple(parseInt(e.target.value, 10)); + // const num = parseInt(e.target.value, 10); + // setNumOfPeaple(!isNaN(num) ? num : ''); + setNumOfPeaple(e.target.value); }} sx={{ minWidth: "8px", width: "100%" }} - inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 + inputProps={{ inputMode: "numeric", min: 1, pattern: "[0-9]*" }} // ここで整数のみ許可 /> @@ -131,11 +132,12 @@ const AddByRecipeDialog = ({ variant="contained" color="primary" onClick={async () => { - if (!numOfPeople || isNaN(numOfPeople)) { + const num = parseInt(numOfPeople, 10); + if (!num || isNaN(num)) { showErrorMessage('人数が正しく入力されていません。'); return; } - const finalAddResult = await toBuyApi.addByRecipe(recipe.recipeId, numOfPeople, checked); + const finalAddResult = await toBuyApi.addByRecipe(recipe.recipeId, num, checked); setOpenDialog(false); if (finalAddResult.data.length === 0) { showInfoMessage('必要な食材が在庫にあったのでリストには追加されませんでした！'); diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 74872cb..f984793 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -101,6 +101,7 @@ const Layout: React.FC = () => { const [msgType, setMsgType] = useState('info'); const showMessage = (msg: string, sev: AlertColor) => { + console.log('ShowMessage:', msg, sev); setMsgText(msg); setMsgType(sev); setMsgOpen(true); diff --git a/frontend/src/components/StuffHistoryDialog.tsx b/frontend/src/components/StuffHistoryDialog.tsx index db70a56..d36d15e 100644 --- a/frontend/src/components/StuffHistoryDialog.tsx +++ b/frontend/src/components/StuffHistoryDialog.tsx @@ -32,7 +32,7 @@ const StuffHistoryDialog = ({ }) => { return ( - setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}> + setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '90vw', maxHeight: '80vh' } }}> 購入履歴: {stuffName} 購入日 {/* 「購入店舗」ヘッダーも nowrap にし、minWidth でスクロールを考慮 */} - 購入店舗 + 購入店舗 購入数量 購入価格 diff --git a/frontend/src/constants/normalMessages.ts b/frontend/src/constants/normalMessages.ts index 32bd867..da9d72e 100644 --- a/frontend/src/constants/normalMessages.ts +++ b/frontend/src/constants/normalMessages.ts @@ -14,3 +14,10 @@ export const RECIPE_MESSAGES = { SAVED_AND_ADDED: 'レシピが保存されて買うものリストに追加されました！', NO_ADDITIONALS: '必要な食材が在庫にあったのでリストには追加されませんでした。', } + +// 在庫リスト +export const STOCK_MESSAGES = { + CREATE_OK: '在庫リストに追加されました！', + UPDATE_OK: '在庫情報が編集されました！', + DELETE_OK: '在庫リストから削除されました！', +}; \ No newline at end of file diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx index a44bdf2..a0eb54c 100644 --- a/frontend/src/pages/RecipeList.tsx +++ b/frontend/src/pages/RecipeList.tsx @@ -54,7 +54,7 @@ const RecipeList: React.FC = () => { const [openAddByRecipeDialog, setOpenAddByRecipeDialog] = useState(false); const [addByRecipeId, setAddByRecipeId] = useState(0); - const [numOfPeople, setNumOfPeople] = useState(1); + const [numOfPeople, setNumOfPeople] = useState('1'); const [checked, setChecked] = useState(false); const openRecipeById = (recipeId: number) => { diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index db2fbd1..b76f493 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -35,6 +35,7 @@ import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールを import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/ import { useMessage } from '../components/MessageContext'; import BuyExpDateSelect from '../components/BuyExpDateSelect'; +import { STOCK_MESSAGES } from '../constants/normalMessages'; /*// 日付をyyyy-MM-dd形式で返す関数 const formatDateLocal = (date: Date) => { @@ -80,7 +81,7 @@ const StockPage: React.FC = () => { // 在庫の編集状態 const [editStock, setEditStock] = useState(null); - const { showErrorMessage, showWarningMessage } = useMessage(); + const { showErrorMessage, showWarningMessage, showSuccessMessage } = useMessage(); // カテゴリ名一覧 const CATEGORY_NAMES = [ @@ -174,6 +175,7 @@ const StockPage: React.FC = () => { console.log("送信するデータ:", updatedStock); // 送信前のデータを確認 await stockApi.addStock(updatedStock); // 修正したオブジェクトを API に送信 + showSuccessMessage(STOCK_MESSAGES.CREATE_OK); // await stockApi.addStock(newStock); setIsAddOpen(false); // ダイアログを閉じる @@ -192,10 +194,12 @@ const StockPage: React.FC = () => { try { await stockApi.updateStock(request); fetchStocks(); // 削除後の買うもの一覧を再取得 + // showSuccessMessage(STOCK_MESSAGES.UPDATE_OK); } catch (error) { console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error); - showErrorMessage(STOCK_ERRORS.UPDATE_FAILED); + // showErrorMessage(STOCK_ERRORS.UPDATE_FAILED); } + }; /** @@ -205,6 +209,9 @@ const StockPage: React.FC = () => { const handleDeleteStock = async (stockId: number) => { try { await stockApi.deleteStock(stockId); + + showSuccessMessage(STOCK_MESSAGES.DELETE_OK); + fetchStocks(); // 削除後の買うもの一覧を再取得 } catch (error) { console.error(`${STOCK_ERRORS.DELETE_FAILED}:`, error); @@ -288,14 +295,14 @@ const StockPage: React.FC = () => { setIsDeleteOpen(true); // 削除ダイアログを開く return; } - if (!numericAmount || !numericBuyAmount) { + if (!numericAmount /* || !numericBuyAmount */) { showErrorMessage(GENERAL_ERRORS.INVALID_AMOUNT); return; } - if (!numericPrice) { - showErrorMessage(GENERAL_ERRORS.INVALID_PRICE); - return; - } + // if (!numericPrice) { + // showErrorMessage(GENERAL_ERRORS.INVALID_PRICE); + // return; + // } const lastUpdate = new Date().toISOString().substring(0, 10); @@ -314,6 +321,9 @@ const StockPage: React.FC = () => { await handleUpdateStock(updateRequest); + console.log(STOCK_MESSAGES.UPDATE_OK) + showSuccessMessage(STOCK_MESSAGES.UPDATE_OK); + setSelectedRow(editStock); // 更新後に選択行を反映 fetchStocks(); // 最新データを取得 setSelectedRow(null); // 選択解除 diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx index 386265f..0217179 100644 --- a/frontend/src/pages/TaskListPage.tsx +++ b/frontend/src/pages/TaskListPage.tsx @@ -33,6 +33,7 @@ import AddStuffAmountDialog from '../components/AddStuffAmountDialog'; import BuyDialog from '../components/BuyDialog'; import { useNavigate } from 'react-router-dom'; import DatePicker from 'react-datepicker'; +import MessageAlert from '../components/MessageAlert'; import { useMessage } from '../components/MessageContext'; import StuffHistoryDialog from '../components/StuffHistoryDialog'; @@ -172,6 +173,7 @@ const TaskListPage: React.FC = () => { console.log(newToBuy) await toBuyApi.addToBuy(newToBuy); setOpenAddToBuyDialog(false); // ダイアログを閉じる + // alert(TOBUY_MESSAGES.CREATE_OK); showSuccessMessage(TOBUY_MESSAGES.CREATE_OK); setNewToBuy(EMPTY_TOBUY); // 入力内容をリセット fetchTasks(); // 作成後のタスク一覧を再取得