You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
4.2 KiB
114 lines
4.2 KiB
import { useState } from 'react';
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Button,
|
|
Box,
|
|
IconButton, // 追加: 閉じるボタンのためにIconButtonをインポート
|
|
Table, // 追加: テーブル表示のためにTableをインポート
|
|
TableBody, // 追加
|
|
TableCell, // 追加
|
|
TableContainer, // 追加
|
|
TableHead, // 追加
|
|
TableRow, // 追加
|
|
Paper,
|
|
Typography,
|
|
styled, // 追加: 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[],
|
|
}) => {
|
|
|
|
const StyledTableCell = styled(TableCell)({
|
|
paddingTop: '8px',
|
|
paddingBottom: '8px',
|
|
paddingLeft: '8px',
|
|
paddingRight: '8px',
|
|
whiteSpace: 'nowrap',
|
|
})
|
|
|
|
return (
|
|
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '90vw', 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 aria-label="purchase history table">
|
|
<TableHead sx={{ backgroundColor: "#ebcba2", color: "#333" }}>
|
|
<TableRow>
|
|
{/* 各ヘッダーセルに white-space: nowrap; を適用 */}
|
|
<StyledTableCell>購入日</StyledTableCell>
|
|
{/* 「購入店舗」ヘッダーも nowrap にし、minWidth でスクロールを考慮 */}
|
|
<StyledTableCell>購入店舗</StyledTableCell>
|
|
<StyledTableCell align="right">購入数量</StyledTableCell>
|
|
<StyledTableCell align="right">購入価格</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{stockHistories.map((history) => (
|
|
<TableRow
|
|
key={history.stockId}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
{/* 各ボディセルに white-space: nowrap; を適用 */}
|
|
<StyledTableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap' }}>
|
|
{history.buyDate}
|
|
</StyledTableCell>
|
|
{/* 「購入店舗」セルに nowrap と minWidth を適用 */}
|
|
<StyledTableCell sx={{ whiteSpace: 'wrap' }}>{history.shop || ''}</StyledTableCell>
|
|
<StyledTableCell align="right" sx={{ pr: '16px' }}>{history.buyAmount}</StyledTableCell>
|
|
<StyledTableCell align="right" sx={{ pr: '16px' }}>{history.price}</StyledTableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
</DialogContent>
|
|
{/* 必要であればDialogActionsにボタンなどを追加できます */}
|
|
{/* <DialogActions>
|
|
<Button onClick={() => setOpenDialog(false)}>閉じる</Button>
|
|
</DialogActions> */}
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export default StuffHistoryDialog; |