文字を大きくしたりしました

feature-frontend-stock-suzuki
Yuna.Suzuki 4 months ago
parent b211d15c44
commit 05623ea8c2
  1. 71
      frontend/src/pages/StockPage.tsx

@ -204,12 +204,8 @@ const StockPage: React.FC = () => {
}; };
/** /**
* . *
*/ */
// const handleRowClick = (stock: Stock) => {
// setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
// };
// セルを選択して編集画面
const handleRowClick = (stock: Stock) => { const handleRowClick = (stock: Stock) => {
setSelectedRow(stock); // 行選択 setSelectedRow(stock); // 行選択
setEditStock({ ...stock }); // 編集対象にセット setEditStock({ ...stock }); // 編集対象にセット
@ -301,7 +297,6 @@ const StockPage: React.FC = () => {
} }
}; };
/** 編集ダイアログを閉じる */ /** 編集ダイアログを閉じる */
const handleCloseEdit = () => { const handleCloseEdit = () => {
setIsEditOpen(false); setIsEditOpen(false);
@ -332,9 +327,9 @@ const StockPage: React.FC = () => {
<Table> <Table>
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
<TableRow> <TableRow>
<TableCell align="center" sx={{ width: '30%' }}></TableCell> <TableCell align="center" sx={{ width: '40%', fontSize: '16px'}}></TableCell>
<TableCell align="center" sx={{ width: '30%' }}></TableCell> <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}></TableCell>
<TableCell align="center" sx={{ width: '40%' }}></TableCell> <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}></TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -361,9 +356,9 @@ const StockPage: React.FC = () => {
onClick={() => handleRowClick(stock)} onClick={() => handleRowClick(stock)}
style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }} style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
> >
<TableCell align="center" sx={{ width: '30%' }}>{stock.stuffName}</TableCell> <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>{stock.stuffName}</TableCell>
<TableCell align="center" sx={{ width: '30%' }}>{stock.amount}</TableCell> <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>{stock.amount}</TableCell>
<TableCell align="center" sx={{ width: '40%' }} <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}
style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}} style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
> >
{formatDate(stock.expDate)} {formatDate(stock.expDate)}
@ -375,7 +370,6 @@ const StockPage: React.FC = () => {
</Table> </Table>
</TableContainer> </TableContainer>
{/* 編集ダイアログ */} {/* 編集ダイアログ */}
<Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm"> <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
<DialogTitle> <DialogTitle>
@ -401,7 +395,6 @@ const StockPage: React.FC = () => {
e.preventDefault(); e.preventDefault();
} }
}} }}
/> />
<TextField <TextField
label="購入価格" label="購入価格"
@ -417,7 +410,6 @@ const StockPage: React.FC = () => {
e.preventDefault(); e.preventDefault();
} }
}} }}
/> />
{/* 購入日・消費期限を横並びに */} {/* 購入日・消費期限を横並びに */}
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}> <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
@ -532,21 +524,6 @@ const StockPage: React.FC = () => {
</Typography> </Typography>
{/* <Box sx={{ textAlign: 'right' }}> */}
{/* <Box
sx={{
position: 'sticky',
top: 0,
zIndex: 1000,
backgroundColor: '#f5f5f5',
padding: 2,
display: 'flex',
gap: 0.5,
justifyContent: 'flex-end', // ← 右寄せ
borderBottom: 'none', // ← これで線を消す
boxShadow: 'none', // ← 影も消す
}}
> */}
<Box <Box
sx={{ sx={{
position: 'fixed', // ← sticky から fixed に変更 position: 'fixed', // ← sticky から fixed に変更
@ -557,28 +534,16 @@ const StockPage: React.FC = () => {
backgroundColor: '#f5f5f5', backgroundColor: '#f5f5f5',
padding: 2, padding: 2,
display: 'flex', display: 'flex',
justifyContent: 'flex-end', // ← 左寄せ
boxShadow: 'none', // 軽めの上向きシャドウ boxShadow: 'none', // 軽めの上向きシャドウ
}} }}
> >
{/* 在庫の食材追加ボタン */} {/* 在庫の食材追加ボタン */}
{/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}> <Box sx={{
display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
</Button> */} mr: 2,
{/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}> }}>
</Button> */}
{/* <Typography variant="caption" color="textSecondary">
</Typography>
<Fab
color="primary"
onClick={handleOpenAdd}
>
<AddIcon />
</Fab> */}
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
ml: 90, }}>
<Typography variant="caption" color="textSecondary"> <Typography variant="caption" color="textSecondary">
</Typography> </Typography>
@ -587,7 +552,6 @@ const StockPage: React.FC = () => {
</Fab> </Fab>
</Box> </Box>
{/* 新規タスク作成ダイアログ */} {/* 新規タスク作成ダイアログ */}
<Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}> <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
<Box display="flex" alignItems="center" > <Box display="flex" alignItems="center" >
@ -732,17 +696,6 @@ const StockPage: React.FC = () => {
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
{/*
<Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
mt: 3, mb: 2, mr: 1
}}>
</Button> */}
{/*
<Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}></Button> */}
</Box> </Box>
{/* 在庫一覧リスト */} {/* 在庫一覧リスト */}

Loading…
Cancel
Save