expcman
/
joint_exc
mirror of https://ivis.backlog.com/git/TRAIN2025_GROUP_K/joint_exc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

stockpageを編集しました

Browse Source
feature-backend-add-springdocs
Yuna.Suzuki 5 months ago
parent 7a0bc34eb0
commit 978c0ad42b
1 changed files with 63 additions and 139 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 202
      frontend/src/pages/StockPage.tsx

202
frontend/src/pages/StockPage.tsx
Unescape View File

@ -97,7 +97,7 @@ const StockPage: React.FC = () => {
alert("削除する食材を選択してください。"); alert("削除する食材を選択してください。");
} }
}; };
/** 編集ダイアログを閉じる */ /** 削除ダイアログを閉じる */
const handleCloseDelete = () => { const handleCloseDelete = () => {
setIsDeleteOpen(false); setIsDeleteOpen(false);
}; };
@ -109,34 +109,57 @@ const StockPage: React.FC = () => {
if (filteredStocks.length === 0) return null; if (filteredStocks.length === 0) return null;
return ( return (
<TableContainer component={Paper}> <>
<Table> <TableContainer component={Paper}>
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> <Table>
<TableRow> <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
<TableCell>食材名</TableCell> <TableRow>
<TableCell>数量</TableCell> <TableCell>食材名</TableCell>
<TableCell>購入価格</TableCell> <TableCell>数量</TableCell>
<TableCell>賞味・消費期限</TableCell> <TableCell>購入価格</TableCell>
<TableCell>購入日</TableCell> <TableCell>賞味・消費期限</TableCell>
</TableRow> <TableCell>購入日</TableCell>
</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> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {filteredStocks.map(stock => (
</TableContainer> <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>
{/* 編集ダイアログ */}
<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 onClick={() => setIsEditOpen(false)} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
<Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: "68%" }}>
変更を適用
</Button>
</>
)}
</DialogContent>
</Dialog>
</>
); );
}; };
@ -148,18 +171,24 @@ const StockPage: React.FC = () => {
</Typography> </Typography>
{/* タスク編集ボタン（全テーブル共通） */} {/* タスク編集ボタン（全テーブル共通） */}
<Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '80%' }}> <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '80%' }}>
編集 編集
</Button> </Button>
{/* タスク削除ボタン */} {/* タスク削除ボタン */}
<Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button> <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
<Dialog open={isDeleteOpen} onClose={handleCloseDelete}> <Dialog open={isDeleteOpen}
onClose={handleCloseDelete}
fullWidth
maxWidth="sm"
sx={{ overflow: "hidden" }}
>
<DialogTitle>食材の削除</DialogTitle> <DialogTitle>食材の削除</DialogTitle>
<DialogContent> <DialogContent>
<Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography> <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
<Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography> <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
<Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '85%' }}>削除</Button> <Button onClick={() => setIsDeleteOpen(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
<Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@ -168,135 +197,30 @@ const StockPage: React.FC = () => {
<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" }}> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["乳製品"])} {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> </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" }}> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["肉", "魚"])} {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> </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" }}> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["野菜"])} {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> </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" }}> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["調味料"])} {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> </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" }}> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["その他"])} {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> </div>
</Container> </Container>
); );

Write Preview
Loading…
Cancel
Save