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 [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>
);

Write Preview
Loading…
Cancel
Save