|
|
@ -14,7 +14,8 @@ import { |
|
|
|
TableHead, // 追加
|
|
|
|
TableHead, // 追加
|
|
|
|
TableRow, // 追加
|
|
|
|
TableRow, // 追加
|
|
|
|
Paper, |
|
|
|
Paper, |
|
|
|
Typography, // 追加: TableContainerの背景用
|
|
|
|
Typography, |
|
|
|
|
|
|
|
styled, // 追加: TableContainerの背景用
|
|
|
|
} from '@mui/material'; |
|
|
|
} from '@mui/material'; |
|
|
|
import CloseIcon from '@mui/icons-material/Close'; // 追加: 閉じるアイコンをインポート
|
|
|
|
import CloseIcon from '@mui/icons-material/Close'; // 追加: 閉じるアイコンをインポート
|
|
|
|
import { StockHistory } from '../types/types'; |
|
|
|
import { StockHistory } from '../types/types'; |
|
|
@ -31,6 +32,14 @@ const StuffHistoryDialog = ({ |
|
|
|
stockHistories: StockHistory[], |
|
|
|
stockHistories: StockHistory[], |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const StyledTableCell = styled(TableCell)({ |
|
|
|
|
|
|
|
paddingTop: '8px', |
|
|
|
|
|
|
|
paddingBottom: '8px', |
|
|
|
|
|
|
|
paddingLeft: '8px', |
|
|
|
|
|
|
|
paddingRight: '8px', |
|
|
|
|
|
|
|
whiteSpace: 'nowrap', |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '90vw', maxHeight: '80vh' } }}> |
|
|
|
<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' }}> |
|
|
|
<DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
|
|
@ -62,15 +71,15 @@ const StuffHistoryDialog = ({ |
|
|
|
overflowX: 'auto', |
|
|
|
overflowX: 'auto', |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
<Table sx={{ minWidth: 400 }} aria-label="purchase history table"> |
|
|
|
<Table aria-label="purchase history table"> |
|
|
|
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
|
|
|
<TableHead sx={{ backgroundColor: "#ebcba2", color: "#333" }}> |
|
|
|
<TableRow> |
|
|
|
<TableRow> |
|
|
|
{/* 各ヘッダーセルに white-space: nowrap; を適用 */} |
|
|
|
{/* 各ヘッダーセルに white-space: nowrap; を適用 */} |
|
|
|
<TableCell sx={{ whiteSpace: 'nowrap' }}>購入日</TableCell> |
|
|
|
<StyledTableCell>購入日</StyledTableCell> |
|
|
|
{/* 「購入店舗」ヘッダーも nowrap にし、minWidth でスクロールを考慮 */} |
|
|
|
{/* 「購入店舗」ヘッダーも nowrap にし、minWidth でスクロールを考慮 */} |
|
|
|
<TableCell sx={{ whiteSpace: 'nowrap', minWidth: '120px' }}>購入店舗</TableCell> |
|
|
|
<StyledTableCell>購入店舗</StyledTableCell> |
|
|
|
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>購入数量</TableCell> |
|
|
|
<StyledTableCell align="right">購入数量</StyledTableCell> |
|
|
|
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>購入価格</TableCell> |
|
|
|
<StyledTableCell align="right">購入価格</StyledTableCell> |
|
|
|
</TableRow> |
|
|
|
</TableRow> |
|
|
|
</TableHead> |
|
|
|
</TableHead> |
|
|
|
<TableBody> |
|
|
|
<TableBody> |
|
|
@ -80,13 +89,13 @@ const StuffHistoryDialog = ({ |
|
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }} |
|
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }} |
|
|
|
> |
|
|
|
> |
|
|
|
{/* 各ボディセルに white-space: nowrap; を適用 */} |
|
|
|
{/* 各ボディセルに white-space: nowrap; を適用 */} |
|
|
|
<TableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap' }}> |
|
|
|
<StyledTableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap' }}> |
|
|
|
{history.buyDate} |
|
|
|
{history.buyDate} |
|
|
|
</TableCell> |
|
|
|
</StyledTableCell> |
|
|
|
{/* 「購入店舗」セルに nowrap と minWidth を適用 */} |
|
|
|
{/* 「購入店舗」セルに nowrap と minWidth を適用 */} |
|
|
|
<TableCell sx={{ whiteSpace: 'nowrap', minWidth: '150px' }}>{history.shop || ''}</TableCell> |
|
|
|
<StyledTableCell sx={{whiteSpace: 'wrap'}}>{history.shop || ''}</StyledTableCell> |
|
|
|
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>{history.buyAmount}</TableCell> |
|
|
|
<StyledTableCell align="right" sx={{pr: '16px'}}>{history.buyAmount}</StyledTableCell> |
|
|
|
<TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>{history.price}</TableCell> |
|
|
|
<StyledTableCell align="right" sx={{pr: '16px'}}>{history.price}</StyledTableCell> |
|
|
|
</TableRow> |
|
|
|
</TableRow> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</TableBody> |
|
|
|
</TableBody> |
|
|
|