diff --git a/frontend/src/pages/AddRecipe.tsx b/frontend/src/pages/AddRecipe.tsx index 2618fda..00337cb 100644 --- a/frontend/src/pages/AddRecipe.tsx +++ b/frontend/src/pages/AddRecipe.tsx @@ -21,6 +21,7 @@ import { TextField, Button, Box, + FormGroup, MenuItem, Select, FormControl, @@ -43,6 +44,9 @@ const AddRecipe: React.FC = () => { const navigate = useNavigate(); + // 何人分かを格納する + const [numOfPeaple, setNumOfPeaple] = useState(1); + const [openNumOfPeapleDialog, setOpenNumOfPeapleDialog] = useState(false); // 料理名,説明 const [recipeName, setRecipeName] = useState(''); const [recipeSummary, setRecipeSummary] = useState(''); @@ -71,17 +75,20 @@ const AddRecipe: React.FC = () => { const handleSaveRecipe = async () => { - if (!recipeName) { - alert('レシピ名が入力されていません!') - return false; - } + // if (!recipeName) { + // alert('レシピ名が入力されていません!') + // console.log("yes1"); + // return false; + // } - if (!items.length) { - alert('材料が追加されていません!') - return false; - } + // if (!items.length) { + // alert('材料が追加されていません!') + // console.log("yes2"); + // return false; + // } if (!recipeId) { + console.log("yes3"); // 新規追加 const response = await recipeApi.addRecipe({ recipeName, @@ -97,10 +104,25 @@ const AddRecipe: React.FC = () => { summary: recipeSummary, stuffAndAmountArray: items, }) - + console.log("yes4"); return recipeId; } + const checkRecipeAndItems = async () => { + + if (!recipeName) { + alert('レシピ名が入力されていません!') + console.log("yes1"); + return false; + } + + if (!items.length) { + alert('材料が追加されていません!') + console.log("yes2"); + return false; + } + } + const handleSubmit = async () => { const recipeId = await handleSaveRecipe(); // alert('レシピが保存されました!'); @@ -109,13 +131,27 @@ const AddRecipe: React.FC = () => { } const handleSubmitAndAddToBuy = async () => { + console.log(recipeName); const recipeId = await handleSaveRecipe(); + console.log("before"); if (!recipeId) return false; + console.log("ds"); await toBuyApi.addByRecipe(recipeId); // alert('レシピが保存されて買うものリストに追加されました!'); navigate('/tasks'); } + const openNumOfPeopleDialog = async () => { + await checkRecipeAndItems(); + setOpenNumOfPeapleDialog(true); + } + + const cancelNumOfPeopleDialog = async () => { + const recipeId = await handleSaveRecipe(); + if (!recipeId) return false; + setOpenNumOfPeapleDialog(false); + } + // コンポーネントマウント時にタスク一覧を取得 useEffect(() => { loadRecipe(); @@ -138,7 +174,7 @@ const AddRecipe: React.FC = () => { value={recipeSummary} onChange={(e) => setRecipeSummary(e.target.value)} /> -

+

材料リスト

{/* すべての材料情報を表示 */} @@ -190,6 +226,7 @@ const AddRecipe: React.FC = () => { ))})} +
@@ -205,7 +242,7 @@ const AddRecipe: React.FC = () => { レシピを保存 - @@ -228,6 +265,44 @@ const AddRecipe: React.FC = () => { setOpenAmountDialog(false); }} /> + setOpenNumOfPeapleDialog(false)} disableScrollLock={true} + style={{ width : '100%', position : 'fixed', left: '50%', transform: 'translateX(-50%)' }} + > + + 何人前かを入力 + + +
+ {/* 人数入力フィールド */} + { + const value = e.target.value; + const parsedValue = parseInt(value, 10); // 数値に変換 + if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外 + setNumOfPeaple(parsedValue); // number型で保存 + } + }} + sx={{ minWidth: "8px", width: "100%" }} + type="number" + inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 + + /> +
+
+ + + + +
); };