From 9dea195615bda71c5c77080a903e713e09c27eed Mon Sep 17 00:00:00 2001
From: "Haru.Kusano" <haru.kusano@ivis.co.jp>
Date: Wed, 11 Jun 2025 14:56:34 +0900
Subject: [PATCH] =?UTF-8?q?=E8=B2=B7=E3=81=86=E3=82=82=E3=81=AE=E3=83=AA?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=81=AE=E5=89=8A=E9=99=A4=E7=A2=BA=E8=AA=8D?=
 =?UTF-8?q?=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=AE=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TaskListPage.tsx | 85 +++++++++++++++++++++--------
 1 file changed, 61 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index d8ac976..40d58fd 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/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>
 
   );