Masaharu.Kato
4 months ago
parent
c6cb147b89
commit
befc9b6175
@ -0,0 +1,42 @@ |
||||
package com.example.todoapp.dto; |
||||
|
||||
import com.example.todoapp.model.Stocks; |
||||
|
||||
import lombok.Data; |
||||
|
||||
import java.time.LocalDate; |
||||
|
||||
/** |
||||
* 在庫のデータ転送オブジェクト（DTO） |
||||
* <p> |
||||
* このクラスはクライアントとサーバー間で在庫情報をやり取りするために使用されます。 |
||||
* エンティティとは異なり、必要な情報のみを含み、関連エンティティへの参照ではなくIDのみを保持します。 |
||||
* </p> |
||||
*/ |
||||
|
||||
@Data |
||||
public class StockHistoryDTO { |
||||
private Long stockId; |
||||
private Long stuffId; |
||||
private Integer buyAmount; |
||||
private int price; |
||||
private String shop; |
||||
private LocalDate buyDate; |
||||
|
||||
/** |
||||
* 在庫エンティティからDTOを作成する |
||||
* |
||||
* @param stock 変換元の在庫エンティティ |
||||
* @return 変換されたStockDTOオブジェクト |
||||
*/ |
||||
public static StockHistoryDTO fromEntity(Stocks stock) { |
||||
StockHistoryDTO dto = new StockHistoryDTO(); |
||||
dto.setStockId(stock.getStockId()); |
||||
dto.setStuffId(stock.getStuff().getStuffId()); |
||||
dto.setBuyAmount(stock.getBuyAmount()); |
||||
dto.setPrice(stock.getPrice()); |
||||
dto.setShop(stock.getShop()); |
||||
dto.setBuyDate(stock.getBuyDate()); |
||||
return dto; |
||||
} |
||||
} |
||||
@ -0,0 +1,105 @@ |
||||
import { useState } from 'react'; |
||||
import { |
||||
Dialog, |
||||
DialogTitle, |
||||
DialogContent, |
||||
DialogActions, |
||||
Button, |
||||
Box, |
||||
IconButton, // 追加: 閉じるボタンのためにIconButtonをインポート
|
||||
Table, // 追加: テーブル表示のためにTableをインポート
|
||||
TableBody, // 追加
|
||||
TableCell, // 追加
|
||||
TableContainer, // 追加
|
||||
TableHead, // 追加
|
||||
TableRow, // 追加
|
||||
Paper, |
||||
Typography, // 追加: TableContainerの背景用
|
||||
} from '@mui/material'; |
||||
import CloseIcon from '@mui/icons-material/Close'; // 追加: 閉じるアイコンをインポート
|
||||
import { StockHistory } from '../types/types'; |
||||
|
||||
const StuffHistoryDialog = ({ |
||||
openDialog, |
||||
setOpenDialog, |
||||
stuffName, |
||||
stockHistories, |
||||
}: { |
||||
openDialog: boolean, |
||||
setOpenDialog: (open: boolean) => void, |
||||
stuffName: string, |
||||
stockHistories: StockHistory[], |
||||
}) => { |
||||
|
||||
return ( |
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}> |
||||
<DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
||||
購入履歴: {stuffName} |
||||
<IconButton |
||||
aria-label="close" |
||||
onClick={() => setOpenDialog(false)} |
||||
sx={{ |
||||
position: 'absolute', |
||||
right: 8, |
||||
top: 8, |
||||
color: (theme) => theme.palette.grey[500], |
||||
}} |
||||
> |
||||
<CloseIcon /> |
||||
</IconButton> |
||||
</DialogTitle> |
||||
<DialogContent dividers sx={{ padding: 0 }}> {/* dividersを追加して区切り線を表示, 表をぴったりくっつける */} |
||||
{(!stockHistories.length ? |
||||
<Typography sx={{ margin: "1rem" }}>購入履歴はありません。</Typography> |
||||
: |
||||
<TableContainer |
||||
component={Paper} |
||||
sx={{ |
||||
boxShadow: 'none', |
||||
margin: 0, |
||||
borderRadius: 0, |
||||
// TableContainerに横スクロールを有効にする
|
||||
overflowX: 'auto', |
||||
}} |
||||
> |
||||
<Table sx={{ minWidth: 400 }} aria-label="purchase history table"> |
||||
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
||||
<TableRow> |
||||
{/* 各ヘッダーセルに white-space: nowrap; を適用 */} |
||||
<TableCell sx={{ whiteSpace: 'nowrap' }}>購入日</TableCell> |
||||
{/* 「購入店舗」ヘッダーも nowrap にし、minWidth でスクロールを考慮 */} |
||||
<TableCell sx={{ whiteSpace: 'nowrap', minWidth: '150px' }}>購入店舗</TableCell> |
||||
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>購入数量</TableCell> |
||||
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>購入価格</TableCell> |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{stockHistories.map((history) => ( |
||||
<TableRow |
||||
key={history.stockId} |
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }} |
||||
> |
||||
{/* 各ボディセルに white-space: nowrap; を適用 */} |
||||
<TableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap' }}> |
||||
{history.buyDate} |
||||
</TableCell> |
||||
{/* 「購入店舗」セルに nowrap と minWidth を適用 */} |
||||
<TableCell sx={{ whiteSpace: 'nowrap', minWidth: '150px' }}>{history.shop || ''}</TableCell> |
||||
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>{history.buyAmount}</TableCell> |
||||
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>{history.price}</TableCell> |
||||
</TableRow> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
)} |
||||
</DialogContent> |
||||
{/* 必要であればDialogActionsにボタンなどを追加できます */} |
||||
{/* <DialogActions> |
||||
<Button onClick={() => setOpenDialog(false)}>閉じる</Button> |
||||
</DialogActions> */} |
||||
</Dialog> |
||||
); |
||||
} |
||||
|
||||
export default StuffHistoryDialog; |
||||
Loading…
Reference in new issue