Compare commits
6 Commits
c490af7489
...
c3594a7575
Author | SHA1 | Date |
---|---|---|
|
c3594a7575 | 4 months ago |
|
21bdbace3c | 4 months ago |
|
dbd86b5a29 | 4 months ago |
|
cf5e7b3ddd | 4 months ago |
|
fa5cdd5056 | 4 months ago |
|
0a31b9c6fe | 4 months ago |
@ -0,0 +1,124 @@ |
|||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
import { |
||||||
|
Dialog, |
||||||
|
DialogTitle, |
||||||
|
DialogContent, |
||||||
|
DialogActions, |
||||||
|
Button, |
||||||
|
Box, |
||||||
|
} from '@mui/material'; |
||||||
|
|
||||||
|
import { toBuyApi } from '../services/api'; |
||||||
|
import { recipeApi } from '../services/api'; |
||||||
|
|
||||||
|
import CloseIcon from '@mui/icons-material/Close'; |
||||||
|
import { RecipeDetailWithId, StuffNameAndAmount } from '../types/types'; |
||||||
|
|
||||||
|
const AddByRecipeDialog = ({ |
||||||
|
openDialog, |
||||||
|
setOpenDialog, |
||||||
|
recipeId, |
||||||
|
numOfPeople, |
||||||
|
setNumOfPeaple, |
||||||
|
checked, |
||||||
|
setChecked |
||||||
|
}: { |
||||||
|
openDialog: boolean, |
||||||
|
setOpenDialog: (open: boolean) => void, |
||||||
|
recipeId: number, |
||||||
|
numOfPeople: number, |
||||||
|
setNumOfPeaple: (num: number) => void, |
||||||
|
checked: boolean, |
||||||
|
setChecked: (checked: boolean) => void |
||||||
|
}) => { |
||||||
|
const [recipe, setRecipe] = useState<RecipeDetailWithId>(); |
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
console.log("called AddByRecipeDialog useEffect recipeId: ", recipeId); |
||||||
|
if (recipeId) { |
||||||
|
const fetchRecipe = async () => { |
||||||
|
console.log("Fetching recipe with ID:", recipeId); |
||||||
|
setRecipe(await recipeApi.getById(recipeId)); |
||||||
|
}; |
||||||
|
fetchRecipe(); |
||||||
|
} |
||||||
|
}, [recipeId]); |
||||||
|
|
||||||
|
return ( |
||||||
|
recipe ?
|
||||||
|
<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>材料(1人前):</strong> |
||||||
|
<ul> |
||||||
|
{recipe.stuffAndAmountArray.map((item, index) => ( |
||||||
|
<li key={index}> |
||||||
|
{item.stuffName} - {item.amount}個 |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* 在庫との差分を取るかのチェックボックス */} |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input |
||||||
|
type="checkbox" |
||||||
|
checked={checked} |
||||||
|
onChange={(e) => setChecked(e.target.checked)} |
||||||
|
/> |
||||||
|
在庫との差分を取る |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* レシピを追加する人数分を入力 */} |
||||||
|
<div> |
||||||
|
<strong>人数:</strong> |
||||||
|
<input |
||||||
|
type="number" |
||||||
|
min="1" |
||||||
|
defaultValue={1} |
||||||
|
onChange={(e) => { |
||||||
|
setNumOfPeaple(parseInt(e.target.value, 10)); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* 買うものリストに追加するボタン */} |
||||||
|
<Box sx={{ mt: 2 }}> |
||||||
|
<Button |
||||||
|
variant="contained" |
||||||
|
color="primary" |
||||||
|
onClick={() => { |
||||||
|
toBuyApi.addByRecipe(recipe.recipeId, numOfPeople, checked); |
||||||
|
setOpenDialog(false); |
||||||
|
}} |
||||||
|
> |
||||||
|
</Button> |
||||||
|
</Box> |
||||||
|
</DialogContent> |
||||||
|
|
||||||
|
</Dialog> |
||||||
|
: <></> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default AddByRecipeDialog; |
Loading…
Reference in new issue