From c490af748971b83bacbf6d15f7a2da8a9714f9a1 Mon Sep 17 00:00:00 2001 From: "masato.fujita" Date: Thu, 19 Jun 2025 09:51:34 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=82=BD=E3=83=BC?= =?UTF-8?q?=E3=83=ABundefined=E5=95=8F=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/AddRecipe.tsx | 10 +++++++--- frontend/src/pages/RecipeList.tsx | 5 ++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/AddRecipe.tsx b/frontend/src/pages/AddRecipe.tsx index ecff456..95f6b47 100644 --- a/frontend/src/pages/AddRecipe.tsx +++ b/frontend/src/pages/AddRecipe.tsx @@ -190,9 +190,13 @@ const AddRecipe: React.FC = () => { } const cancelNumOfPeopleDialog = async () => { - const recipeId = await handleSaveRecipe(); - if (!recipeId) return false; - setOpenNumOfPeapleDialog(false); + // const allRecipes = await recipeApi.getAllRecipes(); + // const allRecipesId = allRecipes.map(recipe => recipe.recipeId); + // const allStocks = await stockApi.getStocks(); + // const allStuffIdAndAmount = [allStocks.map(stock => stock.stuffId), allStocks.map(stock => stock.amount)]; + // Promise.all(allRecipesId.map(async recipe => { + // (await recipeApi.getById(recipe) + // })) } // コンポーネントマウント時にタスク一覧を取得 diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx index bcdce5a..08ec897 100644 --- a/frontend/src/pages/RecipeList.tsx +++ b/frontend/src/pages/RecipeList.tsx @@ -28,7 +28,7 @@ import { } from '@mui/material'; import { Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, - SoupKitchen as SoupKitchenIcon + SoupKitchen as SoupKitchenIcon, Close as CloseIcon, TaskAlt as TaskAltIcon } from '@mui/icons-material'; import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types'; import { useMessage } from '../components/MessageContext'; @@ -50,6 +50,8 @@ const RecipeList: React.FC = () => { try { const recipes = await recipeApi.getAllRecipes(); setAllRecipes(recipes); + console.log("マックス"); + console.log(recipes.map(recipe => recipe.maxServings)) } catch (error) { showErrorMessage("レシピの取得に失敗しました。"); // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); @@ -90,6 +92,7 @@ const RecipeList: React.FC = () => { onClick={() => openRecipeById(recipe.recipeId)} > {recipe.recipeName} + {recipe.maxServings === 0 && } // From cf5e7b3dddff5775ac18c49339d3f204ac02700a Mon Sep 17 00:00:00 2001 From: "masato.fujita" Date: Thu, 19 Jun 2025 11:54:56 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E6=96=B0=E3=81=97=E3=81=84=E6=96=99?= =?UTF-8?q?=E7=90=86=E3=82=92=E8=BF=BD=E5=8A=A0=E3=83=9C=E3=82=BF=E3=83=B3?= =?UTF-8?q?=E3=81=AEUI=E5=A4=89=E6=9B=B4=E3=80=81=E7=94=A8=E6=84=8F?= =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E4=BA=BA=E6=95=B0=E3=81=AB=E3=82=88?= =?UTF-8?q?=E3=81=A3=E3=81=A6=E8=A1=A8=E7=A4=BA=E5=86=85=E5=AE=B9=E3=82=92?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/RecipeList.tsx | 62 ++++++++++++++++++++++++++++--- 1 file changed, 56 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx index 08ec897..89ec4cc 100644 --- a/frontend/src/pages/RecipeList.tsx +++ b/frontend/src/pages/RecipeList.tsx @@ -27,7 +27,7 @@ import { InputLabel } from '@mui/material'; import { - Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, + Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon, ShoppingBasket as ShoppingBasketIcon, SoupKitchen as SoupKitchenIcon, Close as CloseIcon, TaskAlt as TaskAltIcon } from '@mui/icons-material'; import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types'; @@ -39,8 +39,14 @@ const RecipeList: React.FC = () => { const { showErrorMessage } = useMessage(); + const EMPTY_RECIPEWITHID = { + recipeName: '',// レシピ名 + summary: '',// レシピ概要 + recipeId: 0, // レシピID + maxServings: 0 // 最大調理可能数 + } // すべての料理リスト - const [allRecipes, setAllRecipes] = useState(); + const [allRecipes, setAllRecipes] = useState([EMPTY_RECIPEWITHID, EMPTY_RECIPEWITHID]); const openRecipeById = (recipeId: number) => { navigate('/addRecipe/' + recipeId); @@ -51,7 +57,7 @@ const RecipeList: React.FC = () => { const recipes = await recipeApi.getAllRecipes(); setAllRecipes(recipes); console.log("マックス"); - console.log(recipes.map(recipe => recipe.maxServings)) + console.log(allRecipes.map(recipe => recipe.maxServings)) } catch (error) { showErrorMessage("レシピの取得に失敗しました。"); // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); @@ -92,7 +98,39 @@ const RecipeList: React.FC = () => { onClick={() => openRecipeById(recipe.recipeId)} > {recipe.recipeName} - {recipe.maxServings === 0 && } + {recipe.maxServings === 0 && + + { + navigate('/addRecipe/' + recipe.recipeId); + }} + > + + + + } + {recipe.maxServings !== 0 && + + {recipe.maxServings}人分 + + + {/* 買い物リスト：数量変更ボタン */} + + { + navigate('/addRecipe/' + recipe.recipeId); + }} + > + + + + + } // @@ -100,7 +138,19 @@ const RecipeList: React.FC = () => { {/* */}
- + */}
From dbd86b5a297535bd8fd2fc2e95dbfec100e4cc2b Mon Sep 17 00:00:00 2001 From: Amagasu Date: Thu, 19 Jun 2025 13:22:58 +0900 Subject: [PATCH 3/3] wip AddByRecipeDialog --- frontend/src/components/AddByRecipeDialog.tsx | 72 +++++++++++++++++++ frontend/src/pages/RecipeList.tsx | 22 +++++- 2 files changed, 91 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/AddByRecipeDialog.tsx diff --git a/frontend/src/components/AddByRecipeDialog.tsx b/frontend/src/components/AddByRecipeDialog.tsx new file mode 100644 index 0000000..86c9c6f --- /dev/null +++ b/frontend/src/components/AddByRecipeDialog.tsx @@ -0,0 +1,72 @@ +import React, { useState } from 'react'; +import { + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Button, + Box, +} from '@mui/material'; + +import { recipeApi } from '../services/api'; + +import CloseIcon from '@mui/icons-material/Close'; +import { StuffNameAndAmount } from '../types/types'; + +const AddByRecipeDialog = async ({ + openDialog, + setOpenDialog, + recipeId +}: { + openDialog: boolean, + setOpenDialog: (open: boolean) => void, + recipeId: number, +}) => { + const recipe = await recipeApi.getById(recipeId); + + return ( + setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}> + + + 買うものリストへ追加 + setOpenDialog(false)} + sx={{ + cursor: 'pointer', + color: (theme) => theme.palette.grey[500], + }} + /> + + +
+ レシピ名: {recipe.recipeName} +
+
+ ({recipe.maxservings}) +
+
+ 材料: +
    + {recipe.stuffNameAndAmountList.map((item, index) => ( +
  • + {item.stuffName} - {item.amount}個 +
    • + ))} +
+
+ + {/* レシピを追加する人数分を入力 */} + +
+ 材料を買うものリストに追加します。 +
+ + + + + + + ); +} + +export default AddByRecipeDialog; \ No newline at end of file diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx index 89ec4cc..ccf78cb 100644 --- a/frontend/src/pages/RecipeList.tsx +++ b/frontend/src/pages/RecipeList.tsx @@ -31,6 +31,7 @@ import { SoupKitchen as SoupKitchenIcon, Close as CloseIcon, TaskAlt as TaskAltIcon } from '@mui/icons-material'; import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types'; +import AddByRecipeDialog from '../components/AddByRecipeDialog'; import { useMessage } from '../components/MessageContext'; const RecipeList: React.FC = () => { @@ -48,6 +49,10 @@ const RecipeList: React.FC = () => { // すべての料理リスト const [allRecipes, setAllRecipes] = useState([EMPTY_RECIPEWITHID, EMPTY_RECIPEWITHID]); + const [openAddByRecipeDialog, setOpenAddByRecipeDialog] = useState(false); + + const [addByRecipeId, setAddByRecipeId] = useState(0); + const openRecipeById = (recipeId: number) => { navigate('/addRecipe/' + recipeId); } @@ -70,6 +75,7 @@ const RecipeList: React.FC = () => { }, []); return ( + <>
@@ -95,8 +101,11 @@ const RecipeList: React.FC = () => { boxShadow: 1, fontSize: '40px' }} - onClick={() => openRecipeById(recipe.recipeId)} - > + onClick = {() => + {setAddByRecipeId(recipe.recipeId) + setOpenAddByRecipeDialog(true)} + } + > {recipe.recipeName} {recipe.maxServings === 0 && { */}
- + + + {/* 買うものリストへ追加ダイアログ */} + { + + } + ); };