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