買うものリストの削除確認ダイアログの作成

feature-frontend-dishedit-kato
Haru.Kusano 4 months ago
parent 82b0465556
commit 9dea195615
  1. 85
      frontend/src/pages/TaskListPage.tsx

@ -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>
);

Loading…
Cancel
Save