何人分かを入力するダイアログを表示(自分の画面では動かない)

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<number>(1);
+  const [openNumOfPeapleDialog, setOpenNumOfPeapleDialog] = useState(false);
   //  料理名，説明
   const [recipeName, setRecipeName] = useState<string>('');
   const [recipeSummary, setRecipeSummary] = useState<string>('');
@@ -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)}
           />
         </div>
-        <h2 style={{marginTop: "0.5em" }}>
+        <h2 style={{ marginTop: "0.5em" }}>
           材料リスト
         </h2>
         {/* すべての材料情報を表示 */}
@@ -190,6 +226,7 @@ const AddRecipe: React.FC = () => {
 
           ))}</List>)}
 
+        
 
         <div style={{ position: "fixed", left: "80%", transform: 'translateX(-50%)', bottom: "10%" }}>
           <Box sx={{ textAlign: 'center' }}>
@@ -205,7 +242,7 @@ const AddRecipe: React.FC = () => {
             <SaveIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} />
             レシピを保存
           </Button>
-          <Button variant='contained' color="primary" onClick={handleSubmitAndAddToBuy}>
+          <Button variant='contained' color="primary" onClick={openNumOfPeopleDialog}>
             <ListAltIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} />
             保存して買うものリストへ追加
           </Button>
@@ -228,6 +265,44 @@ const AddRecipe: React.FC = () => {
             setOpenAmountDialog(false);
           }} />
 
+        <Dialog open={openNumOfPeapleDialog} onClose={() => setOpenNumOfPeapleDialog(false)} disableScrollLock={true}
+          style={{ width : '100%', position : 'fixed', left: '50%', transform: 'translateX(-50%)' }}
+        >
+          <Box display="flex" alignItems="center"
+            >
+            <DialogTitle sx={{ flexGrow: 1 }}>何人前かを入力</DialogTitle>
+          </Box>
+          <DialogContent>
+          <div>
+          {/* 人数入力フィールド */}
+          <TextField
+            margin="dense"
+            label="何人前"
+            fullWidth
+            value={numOfPeaple}
+            onChange={(e) => {
+              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]*" }} // ここで整数のみ許可
+
+          />
+        </div>
+        </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpenNumOfPeapleDialog(false)}>前の画面に戻る</Button>
+            <Button onClick={() => handleSubmitAndAddToBuy} variant="contained"
+              style={{ width: '40%', fontSize: '1vw' }}
+            >
+              人数分の食材を買い物リストへ登録
+            </Button>
+          </DialogActions>
+        </Dialog>
       </Box>
   );
 };