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();
+    // const allRecipes = await recipeApi.getAllRecipes();
-    if (!recipeId) return false;
+    // const allRecipesId = allRecipes.map(recipe => recipe.recipeId);
-    setOpenNumOfPeapleDialog(false);
+    // 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,
+  Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon, 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 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,6 +77,7 @@ const RecipeList: React.FC = () => {
   }, []);
 
   return (
+    <>
       <div className="mainContainer">
         <div className="mainTitle">
           <SoupKitchenIcon sx={{ mr: "0.5em" }} />
@@ -85,24 +99,50 @@ const RecipeList: React.FC = () => {
                     boxShadow: 1,
                     fontSize: '1.5rem'
                   }}
-                onClick={() => openRecipeById(recipe.recipeId)}
+                  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"
+                      }}
+                      />
+
+                      <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>
-
-      <Box className="plusButtonWrapper">
-        <Fab color="primary" onClick={() => navigate('/addRecipe')} className="plusButton">
-          <AddIcon />
-        </Fab>
-        {/* <Typography className="plusButtonLabel">
-          新しいレシピの追加
-        </Typography> */}
-      </Box>
-
       </div>
+      {/* 買うものリストへ追加ダイアログ */}
+      {/*
+        <AddByRecipeDialog openDialog={openAddByRecipeDialog} setOpenDialog={setOpenAddByRecipeDialog}
+          recipeId = { addByRecipeId}/>
+      */}
+    </>
   );
 };