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

編集ダイアログと削除ダイアログを作成しました

Browse Source
feature-backend-add-springdocs
Yuna.Suzuki 5 months ago
parent a4db8a5017
commit 7a0bc34eb0
1 changed files with 191 additions and 201 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. 392
      frontend/src/pages/StockPage.tsx

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

@ -25,16 +25,12 @@ import { TASK_ERRORS } from '../constants/errorMessages';
const StockPage: React.FC = () => { const StockPage: React.FC = () => {
const [stocks, setStocks] = useState<Stock[]>([]); const [stocks, setStocks] = useState<Stock[]>([]);
// セル選択の表示状態
const [selectedRow, setSelectedRow] = useState<Stock | null>(null);
// 編集ダイアロボックスの表示状態 // 編集ダイアロボックスの表示状態
const [isEditOpen, setIsEditOpen] = useState(false); const [isEditOpen, setIsEditOpen] = useState(false);
const handleOpenEdit = () => setIsEditOpen(true);
const handleCloseEdit = () => setIsEditOpen(false);
// 削除メッセージダイアログの表示状態 // 削除メッセージダイアログの表示状態
const [isDeleteOpen, setIsDeleteOpen] = useState(false); const [isDeleteOpen, setIsDeleteOpen] = useState(false);
const handleOpenDelete = () => setIsDeleteOpen(true);
const handleCloseDelete = () => setIsDeleteOpen(false);
// セル選択の表示状態
const [selectedRow, setSelectedRow] = useState<number | null>(null);
// コンポーネントマウント時にタスク一覧を取得 // コンポーネントマウント時にタスク一覧を取得
useEffect(() => { useEffect(() => {
@ -74,10 +70,74 @@ const StockPage: React.FC = () => {
*/ */
/** /**
* セルを選択する関数 * セルを選択する関数. 再度クリックで選択解除
*/ */
const handleRowClick = (id: number) => { const handleRowClick = (stock: Stock) => {
setSelectedRow(prevSelected => (prevSelected === id ? null : id)); // クリックで選択・解除を切り替え 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> </Typography>
{/* タスク編集ボタン */} {/* タスク編集ボタン（全テーブル共通） */}
{/* <Button color="success" <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '80%' }}>
type="submit" 編集
variant="contained" </Button>
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="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>
@ -115,198 +163,140 @@ const StockPage: React.FC = () => {
</DialogContent> </DialogContent>
</Dialog> </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" }}> <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> </div>
<Typography variant="h4" component="h1" gutterBottom> {/* 肉・魚 */}
肉・魚 <Typography variant="h4" component="h1" gutterBottom>肉・魚</Typography>
</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, ["肉", "魚"])}
{stocks.filter(stock => stock.category == "肉" || stock.category == "魚").length === 0 ? null : ( {/* 編集ダイアログ */}
<TableContainer component={Paper}> <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
<Table> <DialogTitle>在庫の編集</DialogTitle>
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> <DialogContent>
<TableRow> {selectedRow && (
<TableCell>食材名</TableCell> <>
<TableCell>数量</TableCell> <Typography variant="body1">選択した食材の在庫を編集します</Typography>
<TableCell>購入価格</TableCell> <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
<TableCell>賞味・消費期限</TableCell> <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
<TableCell>購入日</TableCell> <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
</TableRow> <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
</TableHead> <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
<TableBody> <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%'}}>
{stocks 変更を適用
.filter(stock => stock.category == "肉" || stock.category == "魚") // 肉と魚だけ抽出 </Button>
.map(stock => ( </>
<TableRow )}
key={stock.stock_id} </DialogContent>
onClick={() => handleRowClick(stock.stock_id)} </Dialog>
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> </div>
<Typography variant="h4" component="h1" gutterBottom> {/* 野菜 */}
野菜 <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
</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" }}>
{stocks.filter(stock => stock.category === "野菜").length === 0 ? null : ( {StockTable(stocks, ["野菜"])}
<TableContainer component={Paper}>
<Table> {/* 編集ダイアログ */}
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
<TableRow> <DialogTitle>在庫の編集</DialogTitle>
<TableCell>食材名</TableCell> <DialogContent>
<TableCell>数量</TableCell> {selectedRow && (
<TableCell>購入価格</TableCell> <>
<TableCell>賞味・消費期限</TableCell> <Typography variant="body1">選択した食材の在庫を編集します</Typography>
<TableCell>購入日</TableCell> <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
</TableRow> <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
</TableHead> <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
<TableBody> <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
{stocks <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
.filter(stock => stock.category == "野菜") // 野菜だけ抽出 <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
.map(stock => ( 変更を適用
<TableRow </Button>
key={stock.stock_id} </>
onClick={() => handleRowClick(stock.stock_id)} )}
style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}> </DialogContent>
<TableCell>{stock.stuff_name}</TableCell> </Dialog>
<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> </div>
<Typography variant="h4" component="h1" gutterBottom> {/* 調味料 */}
調味料 <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
</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" }}>
{stocks.filter(stock => stock.category === "調味料").length === 0 ? null : ( {StockTable(stocks, ["調味料"])}
<TableContainer component={Paper}>
<Table> {/* 編集ダイアログ */}
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
<TableRow> <DialogTitle>在庫の編集</DialogTitle>
<TableCell>食材名</TableCell> <DialogContent>
<TableCell>数量</TableCell> {selectedRow && (
<TableCell>購入価格</TableCell> <>
<TableCell>賞味・消費期限</TableCell> <Typography variant="body1">選択した食材の在庫を編集します</Typography>
<TableCell>購入日</TableCell> <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
</TableRow> <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
</TableHead> <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
<TableBody> <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
{stocks <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
.filter(stock => stock.category == "調味料") // 調味料だけ抽出 <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
.map(stock => ( 変更を適用
<TableRow </Button>
key={stock.stock_id} </>
onClick={() => handleRowClick(stock.stock_id)} )}
style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}> </DialogContent>
<TableCell>{stock.stuff_name}</TableCell> </Dialog>
<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> </div>
<Typography variant="h4" component="h1" gutterBottom> {/* その他 */}
その他 <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
</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" }}>
{stocks.filter(stock => stock.category === "その他").length === 0 ? null : ( {StockTable(stocks, ["その他"])}
<TableContainer component={Paper}>
<Table> {/* 編集ダイアログ */}
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
<TableRow> <DialogTitle>在庫の編集</DialogTitle>
<TableCell>食材名</TableCell> <DialogContent>
<TableCell>数量</TableCell> {selectedRow && (
<TableCell>購入価格</TableCell> <>
<TableCell>賞味・消費期限</TableCell> <Typography variant="body1">選択した食材の在庫を編集します</Typography>
<TableCell>購入日</TableCell> <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
</TableRow> <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
</TableHead> <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
<TableBody> <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
{stocks <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
.filter(stock => stock.category == "その他") // その他だけ抽出 <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
.map(stock => ( 変更を適用
<TableRow </Button>
key={stock.stock_id} </>
onClick={() => handleRowClick(stock.stock_id)} )}
style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}> </DialogContent>
<TableCell>{stock.stuff_name}</TableCell> </Dialog>
<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> </div>
</Container> </Container>
); );

Write Preview
Loading…
Cancel
Save