From 7a0bc34eb0832111eb06ab08cb802625ba766267 Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Mon, 9 Jun 2025 15:17:24 +0900
Subject: [PATCH] =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=83=80=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=81=A8=E5=89=8A=E9=99=A4=E3=83=80=E3=82=A4?=
 =?UTF-8?q?=E3=82=A2=E3=83=AD=E3=82=B0=E3=82=92=E4=BD=9C=E6=88=90=E3=81=97?=
 =?UTF-8?q?=E3=81=BE=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/StockPage.tsx | 392 +++++++++++++++----------------
 1 file changed, 191 insertions(+), 201 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index a634342..ef8f92f 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -25,16 +25,12 @@ import { TASK_ERRORS } from '../constants/errorMessages';
 const StockPage: React.FC = () => {
 
     const [stocks, setStocks] = useState<Stock[]>([]);
+    // セル選択の表示状態
+    const [selectedRow, setSelectedRow] = useState<Stock | null>(null);
     // 編集ダイアロボックスの表示状態
     const [isEditOpen, setIsEditOpen] = useState(false);
-    const handleOpenEdit = () => setIsEditOpen(true);
-    const handleCloseEdit = () => setIsEditOpen(false);
     // 削除メッセージダイアログの表示状態
     const [isDeleteOpen, setIsDeleteOpen] = useState(false);
-    const handleOpenDelete = () => setIsDeleteOpen(true);
-    const handleCloseDelete = () => setIsDeleteOpen(false);
-    // セル選択の表示状態
-    const [selectedRow, setSelectedRow] = useState<number | null>(null);
 
     // コンポーネントマウント時にタスク一覧を取得
     useEffect(() => {
@@ -74,10 +70,74 @@ const StockPage: React.FC = () => {
     */
 
     /**
-     * セルを選択する関数
+     * セルを選択する関数. 再度クリックで選択解除
      */
-    const handleRowClick = (id: number) => {
-        setSelectedRow(prevSelected => (prevSelected === id ? null : id)); // クリックで選択・解除を切り替え
+    const handleRowClick = (stock: Stock) => {
+        setSelectedRow(prev => (prev?.stock_id === stock.stock_id ? null : stock));
+    };
+
+    /** 編集ボタンを押したときにダイアログを開く */
+    const handleOpenEdit = () => {
+        if (selectedRow) {
+            setIsEditOpen(true);
+        } else {
+            alert("編集する食材を選択してください。");
+        }
+    };
+    /** 編集ダイアログを閉じる */
+    const handleCloseEdit = () => {
+        setIsEditOpen(false);
+    };
+
+    /** 削除ボタンを押したときにダイアログを開く */
+    const handleOpenDelete = () => {
+        if (selectedRow) {
+            setIsDeleteOpen(true);
+        } else {
+            alert("削除する食材を選択してください。");
+        }
+    };
+    /** 編集ダイアログを閉じる */
+    const handleCloseDelete = () => {
+        setIsDeleteOpen(false);
+    };
+
+    /** テーブルを表示する関数 */
+    const StockTable = (stocks: Stock[], categories: string[]) => {
+        const filteredStocks = stocks.filter(stock => categories.includes(stock.category));
+
+        if (filteredStocks.length === 0) return null;
+
+        return (
+            <TableContainer component={Paper}>
+                <Table>
+                    <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
+                        <TableRow>
+                            <TableCell>食材名</TableCell>
+                            <TableCell>数量</TableCell>
+                            <TableCell>購入価格</TableCell>
+                            <TableCell>賞味・消費期限</TableCell>
+                            <TableCell>購入日</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {filteredStocks.map(stock => (
+                            <TableRow
+                                key={stock.stock_id}
+                                onClick={() => handleRowClick(stock)}
+                                style={{ backgroundColor: selectedRow?.stock_id === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}
+                            >
+                                <TableCell>{stock.stuff_name}</TableCell>
+                                <TableCell>{stock.amount}</TableCell>
+                                <TableCell>{stock.price}</TableCell>
+                                <TableCell>{formatDate(stock.exp_date)}</TableCell>
+                                <TableCell>{formatDate(stock.buy_date)}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        );
     };
 
 
@@ -87,22 +147,10 @@ const StockPage: React.FC = () => {
                 在庫一覧
             </Typography>
 
-            {/* タスク編集ボタン */}
-            {/* <Button color="success"
-                type="submit"
-                variant="contained"
-                sx={{ mt: 3, mb: 2, left: '80%' }}
-            >
-                編集
-            </Button> */}
-             <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '82%'}}>編集</Button>
-            <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
-                <DialogTitle>在庫の編集</DialogTitle>
-                <DialogContent>
-                    <Typography variant="body1">選択した食材の在庫を編集します</Typography>
-                    <Button variant="contained" color="success" onClick={handleCloseEdit} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '75%' }}>変更を適用</Button>
-                </DialogContent>
-            </Dialog>
+            {/* タスク編集ボタン（全テーブル共通） */}
+                <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '80%' }}>
+                    編集
+                </Button>
 
             {/* タスク削除ボタン */}
             <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
@@ -115,198 +163,140 @@ const StockPage: React.FC = () => {
                 </DialogContent>
             </Dialog>
 
-            <Typography variant="h4" component="h1" gutterBottom>
-                乳製品
-            </Typography>
-            {/* 乳製品一覧表示エリア - 青い背景のコンテナ */}
+            {/* 在庫一覧リスト */}
+            {/* 乳製品 */}
+            <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+                {StockTable(stocks, ["乳製品"])}
+
+                {/* 編集ダイアログ */}
+                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+                    <DialogTitle>在庫の編集</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
+                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
+                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
+                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
+                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
+                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
+                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
+                                    変更を適用
+                                </Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
 
-                {/* 要素が無かったら表示しない */}
-                {stocks.filter(stock => stock.category === "乳製品").length === 0 ? null : (
-                    <TableContainer component={Paper}>
-                        <Table>
-                            <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
-                                <TableRow>
-                                    <TableCell>食材名</TableCell>
-                                    <TableCell>数量</TableCell>
-                                    <TableCell>購入価格</TableCell>
-                                    <TableCell>賞味・消費期限</TableCell>
-                                    <TableCell>購入日</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {stocks
-                                    .filter(stock => stock.category == "乳製品") // 乳製品だけ抽出
-                                    .map(stock => (
-                                        <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>
-                                            <TableCell>{formatDate(stock.exp_date)}</TableCell>
-                                            <TableCell>{formatDate(stock.buy_date)}</TableCell>
-                                        </TableRow>
-                                    ))}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
-                )}
             </div>
 
-            <Typography variant="h4" component="h1" gutterBottom>
-                肉・魚
-            </Typography>
-            {/* 肉・魚一覧表示エリア - 青い背景のコンテナ */}
+            {/* 肉・魚 */}
+            <Typography variant="h4" component="h1" gutterBottom>肉・魚</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+                {StockTable(stocks, ["肉", "魚"])}      
 
-                {stocks.filter(stock => stock.category == "肉" || stock.category == "魚").length === 0 ? null : (
-                    <TableContainer component={Paper}>
-                        <Table>
-                            <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
-                                <TableRow>
-                                    <TableCell>食材名</TableCell>
-                                    <TableCell>数量</TableCell>
-                                    <TableCell>購入価格</TableCell>
-                                    <TableCell>賞味・消費期限</TableCell>
-                                    <TableCell>購入日</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {stocks
-                                    .filter(stock => stock.category == "肉" || stock.category == "魚") // 肉と魚だけ抽出
-                                    .map(stock => (
-                                        <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>
-                                            <TableCell>{formatDate(stock.exp_date)}</TableCell>
-                                            <TableCell>{formatDate(stock.buy_date)}</TableCell>
-                                        </TableRow>
-                                    ))}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
-                )}
+                {/* 編集ダイアログ */}
+                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+                    <DialogTitle>在庫の編集</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
+                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
+                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
+                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
+                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
+                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
+                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%'}}>
+                                    変更を適用
+                                </Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
 
             </div>
 
-            <Typography variant="h4" component="h1" gutterBottom>
-                野菜
-            </Typography>
-            {/* 野菜一覧表示エリア - 青い背景のコンテナ */}
+            {/* 野菜 */}
+            <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-                {stocks.filter(stock => stock.category === "野菜").length === 0 ? null : (
-                    <TableContainer component={Paper}>
-                        <Table>
-                            <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
-                                <TableRow>
-                                    <TableCell>食材名</TableCell>
-                                    <TableCell>数量</TableCell>
-                                    <TableCell>購入価格</TableCell>
-                                    <TableCell>賞味・消費期限</TableCell>
-                                    <TableCell>購入日</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {stocks
-                                    .filter(stock => stock.category == "野菜") // 野菜だけ抽出
-                                    .map(stock => (
-                                        <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>
-                                            <TableCell>{formatDate(stock.exp_date)}</TableCell>
-                                            <TableCell>{formatDate(stock.buy_date)}</TableCell>
-                                        </TableRow>
-                                    ))}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
-                )}
+                {StockTable(stocks, ["野菜"])}
+
+                {/* 編集ダイアログ */}
+                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+                    <DialogTitle>在庫の編集</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
+                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
+                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
+                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
+                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
+                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
+                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
+                                    変更を適用
+                                </Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
+
             </div>
 
-            <Typography variant="h4" component="h1" gutterBottom>
-                調味料
-            </Typography>
-            {/* 調味料一覧表示エリア - 青い背景のコンテナ */}
+            {/* 調味料 */}
+            <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-                {stocks.filter(stock => stock.category === "調味料").length === 0 ? null : (
-                    <TableContainer component={Paper}>
-                        <Table>
-                            <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
-                                <TableRow>
-                                    <TableCell>食材名</TableCell>
-                                    <TableCell>数量</TableCell>
-                                    <TableCell>購入価格</TableCell>
-                                    <TableCell>賞味・消費期限</TableCell>
-                                    <TableCell>購入日</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {stocks
-                                    .filter(stock => stock.category == "調味料") // 調味料だけ抽出
-                                    .map(stock => (
-                                        <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>
-                                            <TableCell>{formatDate(stock.exp_date)}</TableCell>
-                                            <TableCell>{formatDate(stock.buy_date)}</TableCell>
-                                        </TableRow>
-                                    ))}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
-                )}
+                {StockTable(stocks, ["調味料"])}
+
+                {/* 編集ダイアログ */}
+                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+                    <DialogTitle>在庫の編集</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
+                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
+                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
+                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
+                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
+                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
+                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
+                                    変更を適用
+                                </Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
+
             </div>
 
-            <Typography variant="h4" component="h1" gutterBottom>
-                その他
-            </Typography>
-            {/* その他一覧表示エリア - 青い背景のコンテナ */}
+            {/* その他 */}
+            <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-                {stocks.filter(stock => stock.category === "その他").length === 0 ? null : (
-                    <TableContainer component={Paper}>
-                        <Table>
-                            <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
-                                <TableRow>
-                                    <TableCell>食材名</TableCell>
-                                    <TableCell>数量</TableCell>
-                                    <TableCell>購入価格</TableCell>
-                                    <TableCell>賞味・消費期限</TableCell>
-                                    <TableCell>購入日</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {stocks
-                                    .filter(stock => stock.category == "その他") // その他だけ抽出
-                                    .map(stock => (
-                                        <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>
-                                            <TableCell>{formatDate(stock.exp_date)}</TableCell>
-                                            <TableCell>{formatDate(stock.buy_date)}</TableCell>
-                                        </TableRow>
-                                    ))}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
-                )}
+                {StockTable(stocks, ["その他"])}
+
+                {/* 編集ダイアログ */}
+                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+                    <DialogTitle>在庫の編集</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
+                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
+                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
+                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
+                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
+                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
+                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
+                                    変更を適用
+                                </Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
+
             </div>
         </Container>
     );