Merge remote-tracking branch 'origin/release/sprint1' into backend-tobuy-stable

frontend/src/pages/StockPage.tsx

@@ -9,6 +9,8 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper
 import {
     Container,
     Typography,
+    Tooltip,
+    Fab,
     Dialog,
     DialogTitle,
     DialogContent,
@@ -23,8 +25,15 @@ import { TASK_ERRORS } from '../constants/errorMessages';
 const StockPage: React.FC = () => {
 
     const [stocks, setStocks] = useState<Stock[]>([]);
-    // 在庫編集ダイアログの表示状態
-    const [openDialog, setOpenDialog] = useState(false);
+    // 削除メッセージダイアログの表示状態
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+
+    // セル選択の表示状態
+    const [selectedRow, setSelectedRow] = useState<number | null>(null);
 
     // コンポーネントマウント時にタスク一覧を取得
     useEffect(() => {
@@ -63,6 +72,14 @@ const StockPage: React.FC = () => {
     };
     */
 
+    /**
+     * セルを選択する関数
+     */
+    const handleRowClick = (id: number) => {
+        setSelectedRow(prevSelected => (prevSelected === id ? null : id)); // クリックで選択・解除を切り替え
+    };
+
+
     return (
         <Container>
             <Typography variant="h4" component="h1" gutterBottom>
@@ -79,13 +96,24 @@ const StockPage: React.FC = () => {
             </Button>
 
             {/* タスク削除ボタン */}
-            <Button color="error"
+            {/* <Button color="error"
                 type="submit"
                 variant="contained"
                 sx={{ mt: 3, mb: 2, left: '82%' }}
+                onClick={() => setOpenDialog(true)}
             >
                 削除
-            </Button>
+            </Button> */}
+
+            <Button variant="contained" color="error" onClick={handleOpen} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
+            <Dialog open={open} onClose={handleClose}>
+                <DialogTitle>食材の削除</DialogTitle>
+                <DialogContent>
+                    <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
+                    <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
+                    <Button variant="contained" color="error" onClick={handleClose} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '85%' }}>削除</Button>
+                </DialogContent>
+            </Dialog>
 
             <Typography variant="h4" component="h1" gutterBottom>
                 乳製品
@@ -110,8 +138,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "乳製品") // 乳製品だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}
-                                        >
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -147,7 +177,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "肉" || stock.category == "魚") // 肉と魚だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -183,7 +216,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "野菜") // 野菜だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -218,7 +254,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "調味料") // 調味料だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -253,7 +292,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "その他") // その他だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>

frontend/src/pages/TaskListPage.tsx

@@ -57,9 +57,8 @@ const TaskListPage: React.FC = () => {
 
   //在庫登録ダイアログの表示状態
   const [openInfoDialog, setOpenInfoDialog] = useState(false);
-
-  const [selectedTask, setSelectedTask] = useState<ToBuy>();
-
+  
+  const [selectedTask, setSelectedTask] = useState<ToBuy["tobuy_id"]>(0);
 
   const [newToBuy, setNewToBuy] = useState(EMPTY_TASK);
 
@@ -167,8 +166,8 @@ const TaskListPage: React.FC = () => {
               */}
               {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
               <ListItemText
-                primary={tobuy.stuff_name}
-                secondary={tobuy.amount}
+                primary={`${tobuy.stuff_name} × ${tobuy.amount}`}
+                //secondary={tobuy.amount}
                 sx={{
                   textDecoration: false ? 'line-through' : 'none',
                 }}
@@ -179,8 +178,11 @@ const TaskListPage: React.FC = () => {
                   <IconButton
                     edge="end"
                     aria-label="食材情報追加"
-                    onClick={() => setOpenInfoDialog(true)}
-                  //onClick={() => handleDeleteTask(task.id)}
+                    onClick={() => {
+                      setOpenInfoDialog(true)
+                      setSelectedTask(tobuy.tobuy_id)
+                      handleDeleteTask(tobuy.tobuy_id)
+                    }}
                   >
                     <ShoppingBasketIcon />
                   </IconButton>
@@ -352,8 +354,9 @@ const TaskListPage: React.FC = () => {
           <Button onClick={() => setOpenInfoDialog(false)}>キャンセル</Button>
           <Button onClick={() => {
             if (selectedTask) {
-              handleDeleteTask(selectedTask.tobuy_id)
+              handleDeleteTask(selectedTask)
               setOpenInfoDialog(false)
+              setNewToBuy(EMPTY_TASK); // 入力内容をリセット
             }
           }}
             variant="contained">