Merge remote-tracking branch 'origin/feature_frontend_dishList_ui' into feature-frontend-design-fix

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 (
+        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}>
+            <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+
+                買うものリストへ追加
+                <CloseIcon
+                    onClick={() => setOpenDialog(false)}
+                    sx={{
+                        cursor: 'pointer',
+                        color: (theme) => theme.palette.grey[500],
+                    }}
+                />
+            </DialogTitle>
+            <DialogContent dividers sx={{ padding: 2 }}>
+                <div>
+                    <strong>レシピ名:</strong> {recipe.recipeName}
+                </div>
+                <div>
+                    ({recipe.maxservings})
+                </div>
+                <div>
+                    <strong>材料:</strong>
+                    <ul>
+                        {recipe.stuffNameAndAmountList.map((item, index) => (
+                            <li key={index}>
+                                {item.stuffName} - {item.amount}個
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                
+                {/* レシピを追加する人数分を入力 */}
+
+                <div>
+                    <strong>材料を買うものリストに追加します。</strong>
+                </div>
+            </DialogContent>
+
+            <DialogActions>
+                <button onClick={() => setOpenDialog(false)}>閉じる</button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export default AddByRecipeDialog;

frontend/src/pages/AddRecipe.tsx

@@ -193,9 +193,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)
+    // }))
   }
 
   // コンポーネントマウント時にタスク一覧を取得

frontend/src/pages/RecipeList.tsx

@@ -28,10 +28,11 @@ import {
 } from '@mui/material';
 import '../App.css';
 import {
-  Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
-  SoupKitchen as SoupKitchenIcon
+  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';
+import AddByRecipeDialog from '../components/AddByRecipeDialog';
 import { useMessage } from '../components/MessageContext';
 import { RECIPE_ERRORS } from '../constants/errorMessages';
 
@@ -41,8 +42,18 @@ const RecipeList: React.FC = () => {
 
   const { showErrorMessage } = useMessage();
 
+  const EMPTY_RECIPEWITHID = {
+    recipeName: '',// レシピ名
+    summary: '',// レシピ概要
+    recipeId: 0, // レシピID
+    maxServings: 0 // 最大調理可能数
+  }
   // すべての料理リスト
-  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>();
+  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>([EMPTY_RECIPEWITHID, EMPTY_RECIPEWITHID]);
+
+  const [openAddByRecipeDialog, setOpenAddByRecipeDialog] = useState(false);
+
+  const [addByRecipeId, setAddByRecipeId] = useState(0);
 
   const openRecipeById = (recipeId: number) => {
     navigate('/addRecipe/' + recipeId);
@@ -52,6 +63,8 @@ const RecipeList: React.FC = () => {
     try {
       const recipes = await recipeApi.getAllRecipes();
       setAllRecipes(recipes);
+      console.log("マックス");
+      console.log(allRecipes.map(recipe => recipe.maxServings))
     } catch (error) {
       showErrorMessage(RECIPE_ERRORS.FETCH_FAILED);
       // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
@@ -64,45 +77,72 @@ const RecipeList: React.FC = () => {
   }, []);
 
   return (
-    <div className="mainContainer">
-      <div className="mainTitle">
-        <SoupKitchenIcon sx={{ mr: "0.5em" }} />
-        レシピリスト
-      </div>
-      <div className="listWrapper">
-        <List>
-          {/* 料理一覧をマップして各タスクをリストアイテムとして表示 */}
-          {!allRecipes
-            ? <p>読み込み中...</p>
-            : allRecipes.map((recipe, index) => (
-              <ListItem
-                key={recipe.recipeId}
-                sx={{
-                  color: 'primary',
-                  bgcolor: 'background.paper',
-                  mb: 1,
-                  borderRadius: 1,
-                  boxShadow: 1,
-                  fontSize: '1.5rem'
-                }}
-                onClick={() => openRecipeById(recipe.recipeId)}
-              >
-                {recipe.recipeName}
-              </ListItem>
-            ))}
-        </List>
-      </div>
-
-      <Box className="plusButtonWrapper">
-        <Fab color="primary" onClick={() => navigate('/addRecipe')} className="plusButton">
-          <AddIcon />
-        </Fab>
-        {/* <Typography className="plusButtonLabel">
-          新しいレシピの追加
-        </Typography> */}
-      </Box>
+    <>
+      <div className="mainContainer">
+        <div className="mainTitle">
+          <SoupKitchenIcon sx={{ mr: "0.5em" }} />
+          レシピリスト
+        </div>
+        <div className="listWrapper">
+          <List>
+            {/* 料理一覧をマップして各タスクをリストアイテムとして表示 */}
+            {!allRecipes
+              ? <p>読み込み中...</p>
+              : allRecipes.map((recipe, index) => (
+                <ListItem
+                  key={recipe.recipeId}
+                  sx={{
+                    color: 'primary',
+                    bgcolor: 'background.paper',
+                    mb: 1,
+                    borderRadius: 1,
+                    boxShadow: 1,
+                    fontSize: '1.5rem'
+                  }}
+                  onClick={() => {
+                    setAddByRecipeId(recipe.recipeId)
+                    setOpenAddByRecipeDialog(true)
+                  }
+                  }
+                >
+                  {recipe.recipeName}
+                  {recipe.maxServings === 0 ?
+                    <FormGroup row>
+                      <CloseIcon sx={{ fontSize: "3vw", position: "absolute", right: '10%', transform: 'translateY(-50%)', color: "tomato" }} />
+                    </FormGroup> :
+                    <FormGroup row>
+                      <text style={{
+                        fontSize: "2vw", position: "absolute", right: '18%', transform: 'translateY(-52%)', color: "mediumaquamarine"
+                      }}>
+                        {recipe.maxServings}人分
+                      </text>
+                      <TaskAltIcon style={{
+                        fontSize: "3vw", position: "absolute", right: '10%', transform: 'translateY(-50%)', color: "mediumaquamarine"
+                      }}
+                      />
 
-    </div>
+                      <Tooltip title="編集">
+                        <IconButton sx={{ position: "absolute", right: '3%', transform: 'translateY(-50%)' }} edge="end" aria-label="編集"
+                          onClick={() => {
+                            navigate('/addRecipe/' + recipe.recipeId);
+                          }}
+                        >
+                          <EditIcon style={{ fontSize: "2.5vw" }} />
+                        </IconButton>
+                      </Tooltip>
+                    </FormGroup>
+                  }
+                </ListItem>
+              ))}
+          </List>
+        </div>
+      </div>
+      {/* 買うものリストへ追加ダイアログ */}
+      {/*
+        <AddByRecipeDialog openDialog={openAddByRecipeDialog} setOpenDialog={setOpenAddByRecipeDialog}
+          recipeId = { addByRecipeId}/>
+      */}
+    </>
   );
 };