|
|
|
@ -97,7 +97,7 @@ const StockPage: React.FC = () => { |
|
|
|
|
alert("削除する食材を選択してください。"); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
/** 編集ダイアログを閉じる */ |
|
|
|
|
/** 削除ダイアログを閉じる */ |
|
|
|
|
const handleCloseDelete = () => { |
|
|
|
|
setIsDeleteOpen(false); |
|
|
|
|
}; |
|
|
|
@ -109,6 +109,7 @@ const StockPage: React.FC = () => { |
|
|
|
|
if (filteredStocks.length === 0) return null; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<TableContainer component={Paper}> |
|
|
|
|
<Table> |
|
|
|
|
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
|
|
|
@ -137,6 +138,28 @@ const StockPage: React.FC = () => { |
|
|
|
|
</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> |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -154,12 +177,18 @@ const StockPage: React.FC = () => { |
|
|
|
|
|
|
|
|
|
{/* タスク削除ボタン */} |
|
|
|
|
<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> |
|
|
|
|
<DialogContent> |
|
|
|
|
<Typography variant="body1">この操作は取り消せません。本当に削除しますか?</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> |
|
|
|
|
</Dialog> |
|
|
|
|
|
|
|
|
@ -168,135 +197,30 @@ const StockPage: React.FC = () => { |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 肉・魚 */} |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 野菜 */} |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 調味料 */} |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* その他 */} |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</Container> |
|
|
|
|
); |
|
|
|
|