|
|
|
@ -67,16 +67,26 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
//数量変更ダイアログの表示状態
|
|
|
|
|
const [openAmountDialog, setOpenAmountDialog] = useState(false); |
|
|
|
|
|
|
|
|
|
//削除確認ダイアログの表示状態
|
|
|
|
|
const [openDeleteDialog, setOpenDeleteDialog] = useState(false); |
|
|
|
|
|
|
|
|
|
const [selectedTask, setSelectedTask] = useState<ToBuy["tobuyId"]>(0); |
|
|
|
|
|
|
|
|
|
const [selectedEditingTask, setSelectedEditingTask] = useState<ToBuy>({ |
|
|
|
|
tobuyId: 0, |
|
|
|
|
stuffId: 0, |
|
|
|
|
stuffName: "", |
|
|
|
|
amount: 0, |
|
|
|
|
shop: undefined, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
tobuyId: 0, |
|
|
|
|
stuffId: 0, |
|
|
|
|
stuffName: "", |
|
|
|
|
amount: 0, |
|
|
|
|
shop: undefined, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const [selectedDeleteTask, setSelectedDeleteTask] = useState<ToBuy>({ |
|
|
|
|
tobuyId: 0, |
|
|
|
|
stuffId: 0, |
|
|
|
|
stuffName: "", |
|
|
|
|
amount: 0, |
|
|
|
|
shop: undefined, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const [newToBuy, setNewToBuy] = useState(EMPTY_TOBUY); |
|
|
|
|
|
|
|
|
@ -194,7 +204,7 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
* 入力されたタスク情報をAPIに送信して変更 |
|
|
|
|
* 作成後はダイアログを閉じ、入力内容をリセット |
|
|
|
|
*/ |
|
|
|
|
const handleUpdateTask = async () => { |
|
|
|
|
const handleUpdateTask = async () => { |
|
|
|
|
try { |
|
|
|
|
if (isNaN(selectedEditingTask.amount)) { |
|
|
|
|
console.log('数量が正しくありません.'); |
|
|
|
@ -211,19 +221,19 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// /**
|
|
|
|
|
// * クリックされたタスクの情報を取得するための関数
|
|
|
|
|
// * @param tobuyId
|
|
|
|
|
// * @returns tobuyIdが一致するtoBuy
|
|
|
|
|
// */
|
|
|
|
|
// const getToBuyDetails = (tobuyId: number): ToBuy => {
|
|
|
|
|
// console.log(tobuyId)
|
|
|
|
|
// const result = tobuys.find((toBuy) => toBuy.tobuyId === tobuyId);
|
|
|
|
|
// if(result === undefined){
|
|
|
|
|
// throw new Error(`tobuyId: ${tobuyId} に対応するデータが見つかりません`);
|
|
|
|
|
// }
|
|
|
|
|
// return result;
|
|
|
|
|
// };
|
|
|
|
|
// /**
|
|
|
|
|
// * クリックされたタスクの情報を取得するための関数
|
|
|
|
|
// * @param tobuyId
|
|
|
|
|
// * @returns tobuyIdが一致するtoBuy
|
|
|
|
|
// */
|
|
|
|
|
// const getToBuyDetails = (tobuyId: number): ToBuy => {
|
|
|
|
|
// console.log(tobuyId)
|
|
|
|
|
// const result = tobuys.find((toBuy) => toBuy.tobuyId === tobuyId);
|
|
|
|
|
// if(result === undefined){
|
|
|
|
|
// throw new Error(`tobuyId: ${tobuyId} に対応するデータが見つかりません`);
|
|
|
|
|
// }
|
|
|
|
|
// return result;
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
@ -256,7 +266,7 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
<ListItemText |
|
|
|
|
primary={tobuy.stuffName} |
|
|
|
|
/> |
|
|
|
|
{/* 買い物リスト:食材情報記入ボタン */} |
|
|
|
|
{/* 買い物リスト:食材情報記入ボタン */} |
|
|
|
|
<ListItemSecondaryAction> |
|
|
|
|
<Typography variant="body1" component="span" sx={{ marginRight: '1em' }}> |
|
|
|
|
{`× ${tobuy.amount}`} |
|
|
|
@ -311,7 +321,11 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
edge="end" |
|
|
|
|
sx={{ marginRight: 0, marginLeft: 0 }} |
|
|
|
|
aria-label="delete" |
|
|
|
|
onClick={() => handleDeleteTask(tobuy.tobuyId)} |
|
|
|
|
onClick={() => {//handleDeleteTask(tobuy.tobuyId)
|
|
|
|
|
setSelectedDeleteTask(tobuy) |
|
|
|
|
setOpenDeleteDialog(true) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<DeleteIcon /> |
|
|
|
|
</IconButton> |
|
|
|
@ -507,7 +521,7 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
</Box> |
|
|
|
|
<DialogContent> |
|
|
|
|
<Box sx={{ pt: 1 }}> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 材料名表示 */} |
|
|
|
|
<TextField |
|
|
|
|
autoFocus |
|
|
|
@ -545,6 +559,29 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
</Button> |
|
|
|
|
</DialogActions> |
|
|
|
|
</Dialog> |
|
|
|
|
|
|
|
|
|
{/* 削除ダイアログ */} |
|
|
|
|
<Dialog open={openDeleteDialog} onClose={() => setOpenDeleteDialog(false)} disableScrollLock={true} |
|
|
|
|
fullWidth |
|
|
|
|
maxWidth="sm" |
|
|
|
|
sx={{ overflow: "hidden" }} |
|
|
|
|
> |
|
|
|
|
<DialogTitle>食材の削除</DialogTitle> |
|
|
|
|
<DialogContent> |
|
|
|
|
{selectedDeleteTask && ( |
|
|
|
|
<> |
|
|
|
|
<Typography variant="h4">{selectedDeleteTask.stuffName}を削除します。</Typography> |
|
|
|
|
<Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography> |
|
|
|
|
<Button onClick={() => setOpenDeleteDialog(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button> |
|
|
|
|
<Button variant="contained" color="error" onClick={() => { |
|
|
|
|
handleDeleteTask(selectedDeleteTask.tobuyId); |
|
|
|
|
setOpenDeleteDialog(false); // 削除処理後にダイアログを閉じる
|
|
|
|
|
}} |
|
|
|
|
style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
</DialogContent> |
|
|
|
|
</Dialog> |
|
|
|
|
</Container> |
|
|
|
|
|
|
|
|
|
); |
|
|
|
|