|
|
|
@ -29,15 +29,23 @@ import { |
|
|
|
} from '@mui/material'; |
|
|
|
} from '@mui/material'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, |
|
|
|
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, |
|
|
|
SoupKitchen as SoupKitchenIcon, Edit as EditIcon, ListAlt as ListAltIcon |
|
|
|
SoupKitchen as SoupKitchenIcon, Edit as EditIcon, Save as SaveIcon, ListAlt as ListAltIcon |
|
|
|
} from '@mui/icons-material'; |
|
|
|
} from '@mui/icons-material'; |
|
|
|
import AddStuffAmountDialog from '../components/AddStuffAmountDialog'; |
|
|
|
import AddStuffAmountDialog from '../components/AddStuffAmountDialog'; |
|
|
|
import { StuffAndCategoryAndAmount, StuffNameAndAmount } from '../types/types'; |
|
|
|
import { StuffAndCategoryAndAmount } from '../types/types'; |
|
|
|
import EditAmountDialog from '../components/EditAmountDialog'; |
|
|
|
import EditAmountDialog from '../components/EditAmountDialog'; |
|
|
|
|
|
|
|
import { recipeApi, toBuyApi } from '../services/api'; |
|
|
|
|
|
|
|
import { useNavigate, useParams } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
|
|
const AddDishes2: React.FC = () => { |
|
|
|
const AddRecipe: React.FC = () => { |
|
|
|
// 料理名
|
|
|
|
const { recipeId: recipeIdStr } = useParams(); |
|
|
|
|
|
|
|
const recipeId = recipeIdStr ? parseInt(recipeIdStr) : null |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const navigate = useNavigate(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 料理名，説明
|
|
|
|
const [recipeName, setRecipeName] = useState<string>(''); |
|
|
|
const [recipeName, setRecipeName] = useState<string>(''); |
|
|
|
|
|
|
|
const [recipeSummary, setRecipeSummary] = useState<string>(''); |
|
|
|
// 材料リスト
|
|
|
|
// 材料リスト
|
|
|
|
const [items, setItems] = useState<StuffAndCategoryAndAmount[]>([]); |
|
|
|
const [items, setItems] = useState<StuffAndCategoryAndAmount[]>([]); |
|
|
|
// 材料追加作成ダイアログの表示状態
|
|
|
|
// 材料追加作成ダイアログの表示状態
|
|
|
|
@ -51,105 +59,158 @@ const AddDishes2: React.FC = () => { |
|
|
|
const [editingItem, setEditingItem] = useState<StuffAndCategoryAndAmount>(emptyItem); |
|
|
|
const [editingItem, setEditingItem] = useState<StuffAndCategoryAndAmount>(emptyItem); |
|
|
|
const [editingItemIdx, setEditingItemIdx] = useState(0); |
|
|
|
const [editingItemIdx, setEditingItemIdx] = useState(0); |
|
|
|
|
|
|
|
|
|
|
|
const handleAddRecipeToBuy = () => { |
|
|
|
const loadRecipe = async () => { |
|
|
|
console.log('追加された材料:', items); |
|
|
|
if (recipeId && !recipeName) { |
|
|
|
|
|
|
|
const recipe = await recipeApi.getById(recipeId); |
|
|
|
|
|
|
|
console.log('loaded recipe=', recipe) |
|
|
|
|
|
|
|
setRecipeName(recipe.recipeName) |
|
|
|
|
|
|
|
setRecipeSummary(recipe.summary) |
|
|
|
|
|
|
|
setItems(recipe.stuffAndAmountArray) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
loadRecipe(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleSaveRecipe = async () => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!recipeId) { |
|
|
|
|
|
|
|
// 新規追加
|
|
|
|
|
|
|
|
const response = await recipeApi.addRecipe({ |
|
|
|
|
|
|
|
recipeName, |
|
|
|
|
|
|
|
summary: recipeSummary, |
|
|
|
|
|
|
|
stuffAndAmountArray: items, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
return response.recipeId; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const response = await recipeApi.updateRecipe({ |
|
|
|
|
|
|
|
recipeId, |
|
|
|
|
|
|
|
recipeName, |
|
|
|
|
|
|
|
summary: recipeSummary, |
|
|
|
|
|
|
|
stuffAndAmountArray: items, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return recipeId; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleSubmit = async () => { |
|
|
|
|
|
|
|
const recipeId = await handleSaveRecipe() |
|
|
|
|
|
|
|
alert('レシピが保存されました！') // 仮メッセージ
|
|
|
|
|
|
|
|
// navigate('/tasks');
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleSubmitAndAddToBuy = async () => { |
|
|
|
|
|
|
|
const recipeId = await handleSaveRecipe(); |
|
|
|
|
|
|
|
await toBuyApi.addByRecipe(recipeId) |
|
|
|
|
|
|
|
navigate('/tasks') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Box> |
|
|
|
(recipeId && !recipeName) |
|
|
|
<div> |
|
|
|
? <p>読み込み中...</p> |
|
|
|
<h1>料理の追加</h1> |
|
|
|
: |
|
|
|
<TextField autoFocus margin="dense" label="料理名" fullWidth |
|
|
|
<Box> |
|
|
|
value={recipeName} onChange={(e) => setRecipeName(e.target.value)} |
|
|
|
<div> |
|
|
|
/> |
|
|
|
<h1> |
|
|
|
</div> |
|
|
|
<SoupKitchenIcon sx={{ marginRight: "0.5em" }} /> |
|
|
|
<h2>材料リスト</h2> |
|
|
|
{!recipeId ? '料理の追加' : '料理の編集'} |
|
|
|
{/* すべての材料情報を表示 */} |
|
|
|
</h1> |
|
|
|
{!items.length |
|
|
|
<TextField autoFocus margin="dense" label="料理名" fullWidth |
|
|
|
? (<p>+ボタンで材料を追加してください</p>) |
|
|
|
value={recipeName} onChange={(e) => setRecipeName(e.target.value)} |
|
|
|
: (<List>{items.map((item, index) => ( |
|
|
|
/> |
|
|
|
|
|
|
|
<TextField autoFocus margin="dense" label="説明" fullWidth |
|
|
|
<ListItem |
|
|
|
value={recipeSummary} onChange={(e) => setRecipeSummary(e.target.value)} |
|
|
|
key={index} |
|
|
|
/> |
|
|
|
sx={{ |
|
|
|
</div> |
|
|
|
bgcolor: 'background.paper', |
|
|
|
<h2>材料リスト</h2> |
|
|
|
mb: 1, |
|
|
|
{/* すべての材料情報を表示 */} |
|
|
|
borderRadius: 1, |
|
|
|
{(!items || !items.length) |
|
|
|
boxShadow: 1, |
|
|
|
? (<p>+ボタンで材料を追加してください</p>) |
|
|
|
}} |
|
|
|
: (<List>{items.map((item, index) => ( |
|
|
|
> |
|
|
|
|
|
|
|
<ListItemText primary={item.stuffName} /> |
|
|
|
<ListItem |
|
|
|
{/* 買い物リスト：食材情報記入ボタン */} |
|
|
|
key={index} |
|
|
|
<ListItemSecondaryAction> |
|
|
|
sx={{ |
|
|
|
<Typography variant="body1" component="span" sx={{ marginRight: '1em' }}> |
|
|
|
bgcolor: 'background.paper', |
|
|
|
{`× ${item.amount}`} |
|
|
|
mb: 1, |
|
|
|
</Typography> |
|
|
|
borderRadius: 1, |
|
|
|
{/* 買い物リスト：数量変更ボタン */} |
|
|
|
boxShadow: 1, |
|
|
|
<Tooltip title="数量変更"> |
|
|
|
}} |
|
|
|
<IconButton sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="数量変更" |
|
|
|
> |
|
|
|
onClick={() => { |
|
|
|
<ListItemText primary={item.stuffName} /> |
|
|
|
setOpenAmountDialog(true) |
|
|
|
{/* 買い物リスト：食材情報記入ボタン */} |
|
|
|
setEditingItemIdx(index) |
|
|
|
<ListItemSecondaryAction> |
|
|
|
setEditingItem(item) |
|
|
|
<Typography variant="body1" component="span" sx={{ marginRight: '1em' }}> |
|
|
|
}} |
|
|
|
{`× ${item.amount}`} |
|
|
|
> |
|
|
|
</Typography> |
|
|
|
<EditIcon /> |
|
|
|
{/* 買い物リスト：数量変更ボタン */} |
|
|
|
</IconButton> |
|
|
|
<Tooltip title="数量変更"> |
|
|
|
</Tooltip> |
|
|
|
<IconButton sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="数量変更" |
|
|
|
{/* 買い物リスト：食材削除ボタン */} |
|
|
|
onClick={() => { |
|
|
|
<Tooltip title="項目を削除" |
|
|
|
setOpenAmountDialog(true) |
|
|
|
componentsProps={{ |
|
|
|
setEditingItemIdx(index) |
|
|
|
tooltip: { sx: { backgroundColor: "white", color: "red", fontSize: "0.8rem", padding: "6px", borderRadius: "6px" } }, |
|
|
|
setEditingItem(item) |
|
|
|
}}> |
|
|
|
}} |
|
|
|
<IconButton edge="end" sx={{ marginRight: 0, marginLeft: 0 }} aria-label="delete" |
|
|
|
> |
|
|
|
onClick={() => setItems([...items.slice(0, index), ...items.slice(index + 1)])}> |
|
|
|
<EditIcon /> |
|
|
|
<DeleteIcon /> |
|
|
|
</IconButton> |
|
|
|
</IconButton> |
|
|
|
</Tooltip> |
|
|
|
</Tooltip> |
|
|
|
{/* 買い物リスト：食材削除ボタン */} |
|
|
|
|
|
|
|
<Tooltip title="項目を削除" |
|
|
|
</ListItemSecondaryAction> |
|
|
|
componentsProps={{ |
|
|
|
|
|
|
|
tooltip: { sx: { backgroundColor: "white", color: "red", fontSize: "0.8rem", padding: "6px", borderRadius: "6px" } }, |
|
|
|
</ListItem> |
|
|
|
}}> |
|
|
|
|
|
|
|
<IconButton edge="end" sx={{ marginRight: 0, marginLeft: 0 }} aria-label="delete" |
|
|
|
))}</List>)} |
|
|
|
onClick={() => setItems([...items.slice(0, index), ...items.slice(index + 1)])}> |
|
|
|
|
|
|
|
<DeleteIcon /> |
|
|
|
|
|
|
|
</IconButton> |
|
|
|
<div style={{ position: "fixed", left: "80%", transform: 'translateX(-50%)', bottom: "10%" }}> |
|
|
|
</Tooltip> |
|
|
|
<Box sx={{ textAlign: 'center' }}> |
|
|
|
|
|
|
|
<Typography variant="caption">材料を追加</Typography> |
|
|
|
</ListItemSecondaryAction> |
|
|
|
</Box> |
|
|
|
|
|
|
|
<Fab color="primary" onClick={() => setOpenAddDialog(true)}> |
|
|
|
</ListItem> |
|
|
|
<AddIcon sx={{ fontSize: "1.5rem" }} /> |
|
|
|
|
|
|
|
</Fab> |
|
|
|
))}</List>)} |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "2%" }}> |
|
|
|
<div style={{ position: "fixed", left: "80%", transform: 'translateX(-50%)', bottom: "10%" }}> |
|
|
|
<Button variant='contained' sx={{ fontSize: "1.0rem" }} |
|
|
|
<Box sx={{ textAlign: 'center' }}> |
|
|
|
color="primary" onClick={handleAddRecipeToBuy}> |
|
|
|
<Typography variant="caption">材料を追加</Typography> |
|
|
|
<ListAltIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} /> |
|
|
|
</Box> |
|
|
|
料理リストへ追加 |
|
|
|
<Fab color="primary" onClick={() => setOpenAddDialog(true)}> |
|
|
|
</Button> |
|
|
|
<AddIcon sx={{ fontSize: "1.5rem" }} /> |
|
|
|
</div> |
|
|
|
</Fab> |
|
|
|
|
|
|
|
</div> |
|
|
|
{/* 新規材料追加ダイアログ */} |
|
|
|
|
|
|
|
<AddStuffAmountDialog openDialog={openAddDialog} setOpenDialog={setOpenAddDialog} newItem={newItem} setNewItem={setNewItem} |
|
|
|
<div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "2%" }}> |
|
|
|
onSubmit={() => { |
|
|
|
<Button variant='contained' color="primary" onClick={handleSubmit} sx={{ marginRight: "1rem" }}> |
|
|
|
console.log('newItem:', newItem); |
|
|
|
<SaveIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} /> |
|
|
|
setItems([...items, newItem]); |
|
|
|
レシピを保存 |
|
|
|
setOpenAddDialog(false); |
|
|
|
</Button> |
|
|
|
}} /> |
|
|
|
<Button variant='contained' color="primary" onClick={handleSubmitAndAddToBuy}> |
|
|
|
|
|
|
|
<ListAltIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} /> |
|
|
|
{/* 数量変更ダイアログ */} |
|
|
|
保存して買うものリストへ追加 |
|
|
|
<EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog} |
|
|
|
</Button> |
|
|
|
editingItem={editingItem} |
|
|
|
</div> |
|
|
|
setEditingItem={(v) => setEditingItem({ ...editingItem, ...v })} |
|
|
|
|
|
|
|
onSubmit={() => { |
|
|
|
{/* 新規材料追加ダイアログ */} |
|
|
|
setItems([...items.slice(0, editingItemIdx), editingItem, ...items.slice(editingItemIdx + 1)]) |
|
|
|
<AddStuffAmountDialog openDialog={openAddDialog} setOpenDialog={setOpenAddDialog} newItem={newItem} setNewItem={setNewItem} |
|
|
|
setOpenAmountDialog(false); |
|
|
|
onSubmit={() => { |
|
|
|
}} /> |
|
|
|
console.log('newItem:', newItem); |
|
|
|
|
|
|
|
setItems([...items, newItem]); |
|
|
|
</Box> |
|
|
|
setOpenAddDialog(false); |
|
|
|
|
|
|
|
}} /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 数量変更ダイアログ */} |
|
|
|
|
|
|
|
<EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog} |
|
|
|
|
|
|
|
editingItem={editingItem} |
|
|
|
|
|
|
|
setEditingItem={(v) => setEditingItem({ ...editingItem, ...v })} |
|
|
|
|
|
|
|
onSubmit={() => { |
|
|
|
|
|
|
|
setItems([...items.slice(0, editingItemIdx), editingItem, ...items.slice(editingItemIdx + 1)]) |
|
|
|
|
|
|
|
setOpenAmountDialog(false); |
|
|
|
|
|
|
|
}} /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Box> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default AddDishes2; |
|
|
|
export default AddRecipe; |
Masaharu.Kato
4 months ago