|
|
|
@ -64,7 +64,7 @@ const DishList: React.FC = () => { |
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// すべての料理リスト
|
|
|
|
|
const [allDish, setAllDish] = useState<Dish[]>(); |
|
|
|
|
const [allDish, setAllDish] = useState<Dish[]>(testdish); |
|
|
|
|
// 画面表示用の食材情報配列
|
|
|
|
|
const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish); |
|
|
|
|
// エラーメッセージの状態管理
|
|
|
|
@ -74,7 +74,9 @@ const DishList: React.FC = () => { |
|
|
|
|
// 料理リスト編集ダイアログの表示状態
|
|
|
|
|
const [openChangeDialog, setOpenChangeDialog] = useState(false); |
|
|
|
|
// 料理リストの食材の個数編集ダイアログの表示状態
|
|
|
|
|
const [openChangeItemDialog, setOpenChangeItemDialog] = useState(false); |
|
|
|
|
const [openChangeAmountDialog, setOpenChangeAmountDialog] = useState(false); |
|
|
|
|
// 編集する食材の状態
|
|
|
|
|
const [selectedEditingStuff, setSelectedEditingStuff] = useState<Dish>(); |
|
|
|
|
|
|
|
|
|
const changeDialog = () => { |
|
|
|
|
setOpenDialog(false); |
|
|
|
@ -86,6 +88,17 @@ const DishList: React.FC = () => { |
|
|
|
|
setOpenDialog(true); |
|
|
|
|
setOpenChangeDialog(false); |
|
|
|
|
}; |
|
|
|
|
// 選択された食材
|
|
|
|
|
let selectedItem : string = ''; |
|
|
|
|
// 選択された食材の個数
|
|
|
|
|
let selectedItemAmount : number = 0; |
|
|
|
|
// 選択された食材の個数を変更するダイアログを開く処理
|
|
|
|
|
const changeSelectedItemAmount = (dish : Dish, stuff_name : string, stuff_amount : number) => {
|
|
|
|
|
setOpenChangeAmountDialog(true) |
|
|
|
|
setSelectedEditingStuff(dish); |
|
|
|
|
selectedItem = stuff_name; |
|
|
|
|
selectedItemAmount = stuff_amount; |
|
|
|
|
}; |
|
|
|
|
/** |
|
|
|
|
* タスクを削除するハンドラー |
|
|
|
|
* 指定されたIDのタスクをAPIを通じて削除 |
|
|
|
@ -120,8 +133,8 @@ const DishList: React.FC = () => { |
|
|
|
|
|
|
|
|
|
const fetchTasks = async () => { |
|
|
|
|
try { |
|
|
|
|
const dishlistfirst = await recipeApi.getAllRecipes(); |
|
|
|
|
setAllDish(dishlistfirst); |
|
|
|
|
// const dishlistfirst = await recipeApi.getAllRecipes();
|
|
|
|
|
// setAllDish(dishlistfirst);
|
|
|
|
|
} catch (error) { |
|
|
|
|
alert("取得失敗"); |
|
|
|
|
// console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
|
|
|
|
@ -178,7 +191,7 @@ const DishList: React.FC = () => { |
|
|
|
|
</Button> |
|
|
|
|
</div> |
|
|
|
|
{/*新規料理追加ボタン - 画面下部に固定表示 */} |
|
|
|
|
<Tooltip title="料理から追加"> |
|
|
|
|
{/* <Tooltip title="料理から追加"> |
|
|
|
|
<Fab |
|
|
|
|
color="primary" |
|
|
|
|
sx={{ position: 'fixed', bottom: 106, left: '60%', transform: 'translateX(-50%)' }} |
|
|
|
@ -186,9 +199,9 @@ const DishList: React.FC = () => { |
|
|
|
|
> |
|
|
|
|
<SoupKitchenIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
</Tooltip> |
|
|
|
|
</Tooltip> */} |
|
|
|
|
</Box> |
|
|
|
|
{/* 新規タスク作成ダイアログ */} |
|
|
|
|
{/* 料理リストの詳細表示ダイアログ */} |
|
|
|
|
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} |
|
|
|
|
maxWidth="lg" |
|
|
|
|
fullWidth |
|
|
|
@ -234,13 +247,13 @@ const DishList: React.FC = () => { |
|
|
|
|
</Button> |
|
|
|
|
</DialogActions> |
|
|
|
|
</Dialog> |
|
|
|
|
{/* 食材の個数の編集ダイアログ */} |
|
|
|
|
{/* 食材編集ダイアログ */} |
|
|
|
|
<Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true} |
|
|
|
|
maxWidth="lg" |
|
|
|
|
fullWidth |
|
|
|
|
> |
|
|
|
|
<Box display="flex" alignItems="center"> |
|
|
|
|
<DialogTitle sx={{ flexGrow: 1 }}>食材名</DialogTitle> |
|
|
|
|
<DialogTitle sx={{ flexGrow: 1 }}>料理名</DialogTitle> |
|
|
|
|
</Box> |
|
|
|
|
<FormGroup> |
|
|
|
|
{/* <List> */} |
|
|
|
@ -277,11 +290,11 @@ const DishList: React.FC = () => { |
|
|
|
|
/> |
|
|
|
|
{/* 買い物リスト:食材情報記入ボタン */} |
|
|
|
|
<ListItemSecondaryAction> |
|
|
|
|
<Tooltip title="食材情報追加"> |
|
|
|
|
<Tooltip title="個数を編集"> |
|
|
|
|
<IconButton |
|
|
|
|
edge="end" |
|
|
|
|
aria-label="食材情報追加" |
|
|
|
|
//onClick={() => handleDeleteTask(task.id)}
|
|
|
|
|
aria-label="個数を編集" |
|
|
|
|
onClick={() => changeSelectedItemAmount(test, test.recipeName, test.summary)} |
|
|
|
|
> |
|
|
|
|
<ShoppingBasketIcon /> |
|
|
|
|
</IconButton> |
|
|
|
@ -346,115 +359,52 @@ const DishList: React.FC = () => { |
|
|
|
|
</Button> |
|
|
|
|
</DialogActions> |
|
|
|
|
</Dialog> |
|
|
|
|
{/* 食材編集ダイアログ */} |
|
|
|
|
<Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true} |
|
|
|
|
{/* 食材の個数の編集ダイアログ */} |
|
|
|
|
<Dialog open={openChangeAmountDialog} onClose={() => setOpenChangeAmountDialog(false)} disableScrollLock={true} |
|
|
|
|
maxWidth="lg" |
|
|
|
|
fullWidth |
|
|
|
|
> |
|
|
|
|
<Box display="flex" alignItems="center"> |
|
|
|
|
<DialogTitle sx={{ flexGrow: 1 }}>料理名</DialogTitle> |
|
|
|
|
<DialogTitle sx={{ flexGrow: 1 }}>数量の変更</DialogTitle> |
|
|
|
|
</Box> |
|
|
|
|
<FormGroup> |
|
|
|
|
{/* <List> */} |
|
|
|
|
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} |
|
|
|
|
{testDishArray.map((test, id) => ( |
|
|
|
|
<ListItem |
|
|
|
|
key={id} |
|
|
|
|
sx={{ |
|
|
|
|
bgcolor: 'background.paper', |
|
|
|
|
mb: 1, |
|
|
|
|
borderRadius: 1, |
|
|
|
|
boxShadow: 1, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{/* タスク完了状態を切り替えるチェックボックス |
|
|
|
|
<Checkbox |
|
|
|
|
checked={task.completed} |
|
|
|
|
onChange={() => handleToggleComplete(task.id)} |
|
|
|
|
/> */} |
|
|
|
|
{/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} |
|
|
|
|
<ListItemText |
|
|
|
|
primary={test.recipeName} |
|
|
|
|
// secondary={task.description}
|
|
|
|
|
sx={{width: '80%'}} |
|
|
|
|
/> |
|
|
|
|
{/* 食材の個数を表示 */} |
|
|
|
|
<ListItemText |
|
|
|
|
primary={<Typography style={{textAlign:"center"}}>個数<br /> |
|
|
|
|
{test.summary} |
|
|
|
|
</Typography> |
|
|
|
|
} |
|
|
|
|
// secondary={task.description}
|
|
|
|
|
sx={{ align: "right", fontSize: "20px" }} |
|
|
|
|
/> |
|
|
|
|
{/* 買い物リスト:食材情報記入ボタン */} |
|
|
|
|
<ListItemSecondaryAction> |
|
|
|
|
<Tooltip title="食材情報追加"> |
|
|
|
|
<IconButton |
|
|
|
|
edge="end" |
|
|
|
|
aria-label="食材情報追加" |
|
|
|
|
//onClick={() => handleDeleteTask(task.id)}
|
|
|
|
|
> |
|
|
|
|
<ShoppingBasketIcon /> |
|
|
|
|
</IconButton> |
|
|
|
|
</Tooltip> |
|
|
|
|
{/* 買い物リスト:食材削除ボタン */} |
|
|
|
|
<Tooltip title="項目を削除" |
|
|
|
|
componentsProps={{ |
|
|
|
|
tooltip: { |
|
|
|
|
sx: { |
|
|
|
|
backgroundColor: "white", |
|
|
|
|
color: "red", |
|
|
|
|
fontSize: "0.8rem", |
|
|
|
|
padding: "6px", |
|
|
|
|
borderRadius: "6px", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<IconButton |
|
|
|
|
edge="end" |
|
|
|
|
aria-label="delete" |
|
|
|
|
onClick={() => handleDeleteStuffTemp(id)} |
|
|
|
|
> |
|
|
|
|
<DeleteIcon /> |
|
|
|
|
</IconButton> |
|
|
|
|
</Tooltip> |
|
|
|
|
</ListItemSecondaryAction> |
|
|
|
|
|
|
|
|
|
</ListItem> |
|
|
|
|
// <Button onClick={() => setOpenDialog(true)} key = {index}>
|
|
|
|
|
// {test}
|
|
|
|
|
// </Button>
|
|
|
|
|
// <ListItem
|
|
|
|
|
// key={index}
|
|
|
|
|
// sx={{
|
|
|
|
|
// bgcolor: 'background.paper',
|
|
|
|
|
// mb: 1,
|
|
|
|
|
// borderRadius: 1,
|
|
|
|
|
// boxShadow: 2,
|
|
|
|
|
// }}
|
|
|
|
|
// >
|
|
|
|
|
// {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
|
|
|
|
|
// <ListItemText
|
|
|
|
|
// primary={test}
|
|
|
|
|
// //secondary={tobuy.amount}
|
|
|
|
|
// primaryTypographyProps={{ fontSize: '40px', margin: '10px' }}
|
|
|
|
|
// sx={{
|
|
|
|
|
// textDecoration: false ? 'line-through' : 'none',
|
|
|
|
|
// }}
|
|
|
|
|
// />
|
|
|
|
|
// </ListItem>
|
|
|
|
|
))} |
|
|
|
|
{/* </List> */} |
|
|
|
|
</FormGroup> |
|
|
|
|
<DialogContent> |
|
|
|
|
<Box sx={{ pt: 1 }}> |
|
|
|
|
|
|
|
|
|
{/* 材料名表示 */} |
|
|
|
|
<TextField |
|
|
|
|
autoFocus |
|
|
|
|
margin="dense" |
|
|
|
|
label="材料名" |
|
|
|
|
fullWidth |
|
|
|
|
value={selectedItem} |
|
|
|
|
disabled |
|
|
|
|
sx={{ marginBottom: 2 }} |
|
|
|
|
/> |
|
|
|
|
{/* 数量入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="数量" |
|
|
|
|
fullWidth |
|
|
|
|
value={selectedItemAmount} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
const value = e.target.value; |
|
|
|
|
const parsedValue = parseInt(value, 10); // 数値に変換
|
|
|
|
|
// if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外
|
|
|
|
|
// setSelectedEditingTask({ ...selectedEditingTask, amount: parsedValue }); // number型で保存
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}} |
|
|
|
|
sx={{ width: "20%" }} |
|
|
|
|
type="number" |
|
|
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
|
|
|
|
|
|
|
|
|
/> |
|
|
|
|
</Box> |
|
|
|
|
</DialogContent> |
|
|
|
|
<DialogActions> |
|
|
|
|
<Button onClick={() => cancelChange()}>変更をキャンセル</Button> |
|
|
|
|
<Button onClick={() => setOpenDialog(false)} variant="contained" |
|
|
|
|
style={{width: '40%', fontSize: '40px'}} |
|
|
|
|
> |
|
|
|
|
料理リストへ登録 |
|
|
|
|
<Button onClick={() => setOpenChangeAmountDialog(false)}>キャンセル</Button> |
|
|
|
|
<Button onClick={() => setOpenChangeAmountDialog(false)} variant="contained"> |
|
|
|
|
確定 |
|
|
|
|
</Button> |
|
|
|
|
</DialogActions> |
|
|
|
|
</Dialog> |
|
|
|
|