expcman
/
joint_exc
mirror of https://ivis.backlog.com/git/TRAIN2025_GROUP_K/joint_exc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
feature-frontend-stock-suzuki
Yuna.Suzuki 4 months ago
parent b211d15c44
commit 05623ea8c2
1 changed files with 202 additions and 249 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 451
      frontend/src/pages/StockPage.tsx

451
frontend/src/pages/StockPage.tsx
Unescape View File

@ -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,250 +524,211 @@ const StockPage: React.FC = () => {
在庫リスト 在庫リスト
</Typography> </Typography>
{/* <Box sx={{ textAlign: 'right' }}> */} <Box
{/* <Box
sx={{ sx={{
position: 'sticky', position: 'fixed', // ← sticky から fixed に変更
top: 0, bottom: 0, // ← 下に固定
zIndex: 1000, left: 0,
right: 0,
zIndex: 1300, // ダイアログよりは低く
backgroundColor: '#f5f5f5', backgroundColor: '#f5f5f5',
padding: 2, padding: 2,
display: 'flex', display: 'flex',
gap: 0.5, justifyContent: 'flex-end', // ← 左寄せ
justifyContent: 'flex-end', // ← 右寄せ boxShadow: 'none', // 軽めの上向きシャドウ
borderBottom: 'none', // ← これで線を消す
boxShadow: 'none', // ← 影も消す
}} }}
> */} >
<Box
sx={{
position: 'fixed', // ← sticky から fixed に変更
bottom: 0, // ← 下に固定
left: 0,
right: 0,
zIndex: 1300, // ダイアログよりは低く
backgroundColor: '#f5f5f5',
padding: 2,
display: 'flex',
boxShadow: 'none', // 軽めの上向きシャドウ
}}
>
{/* 在庫の食材追加ボタン */}
{/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
追加
</Button> */}
{/* <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>
<Fab color="primary" onClick={handleOpenAdd} >
<AddIcon />
</Fab>
</Box>
{/* 在庫の食材追加ボタン */}
<Box sx={{
display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
mr: 2,
}}>
<Typography variant="caption" color="textSecondary">
食材の追加
</Typography>
<Fab color="primary" onClick={handleOpenAdd} >
<AddIcon />
</Fab>
</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" >
<DialogTitle sx={{ flexGrow: 1 }}> <DialogTitle sx={{ flexGrow: 1 }}>
<Typography variant="h5" > <Typography variant="h5" >
在庫に食材を追加 在庫に食材を追加
</Typography> </Typography>
</DialogTitle> </DialogTitle>
<FormGroup row> <FormGroup row>
<FormControlLabel <FormControlLabel
control={<Checkbox />} control={<Checkbox />}
label="食材を新規追加" label="食材を新規追加"
checked={newStock.newAddition} checked={newStock.newAddition}
onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })} onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
/> />
</FormGroup> </FormGroup>
</Box> </Box>
<DialogContent> <DialogContent>
<Box sx={{ pt: 1 }}> <Box sx={{ pt: 1 }}>
{/*材料カテゴリ選択 */} {/*材料カテゴリ選択 */}
<FormControl sx={{ width: "50%", marginBottom: 2 }}> <FormControl sx={{ width: "50%", marginBottom: 2 }}>
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel> <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
value={newStock.category} value={newStock.category}
onChange={(e) => onChangeCategory(e.target.value)} onChange={(e) => onChangeCategory(e.target.value)}
> >
<MenuItem value="乳製品">乳製品</MenuItem> <MenuItem value="乳製品">乳製品</MenuItem>
<MenuItem value="魚・肉">魚・肉</MenuItem> <MenuItem value="魚・肉">魚・肉</MenuItem>
<MenuItem value="野菜">野菜</MenuItem> <MenuItem value="野菜">野菜</MenuItem>
<MenuItem value="調味料">調味料</MenuItem> <MenuItem value="調味料">調味料</MenuItem>
<MenuItem value="その他">その他</MenuItem> <MenuItem value="その他">その他</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
{!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}> {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
<InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel> <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
value={newStock.stuffId} value={newStock.stuffId}
onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })} onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
> >
{stuffs.map((stuff) => ( {stuffs.map((stuff) => (
<MenuItem key={stuff.stuffId} value={stuff.stuffId}> <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
{stuff.stuffName} {stuff.stuffName}
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
</FormControl>} </FormControl>}
{/* タスクタイトル入力フィールド */} {/* タスクタイトル入力フィールド */}
{newStock.newAddition && <TextField {newStock.newAddition && <TextField
autoFocus autoFocus
margin="dense" margin="dense"
label="材料名" label="材料名"
fullWidth fullWidth
value={newStock.stuffName} value={newStock.stuffName}
onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })} onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
sx={{ marginBottom: 2 }} sx={{ marginBottom: 2 }}
/>} />}
{/* 数量入力フィールド */} {/* 数量入力フィールド */}
<TextField <TextField
margin="dense" margin="dense"
label="数量" label="数量"
fullWidth fullWidth
value={newStock.amount} value={newStock.amount}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換 const parsedValue = parseInt(value, 10); // 数値に変換
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
setNewStock({ ...newStock, amount: parsedValue }); // number型で保存 setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
} }
}} }}
// sx={{ width: "50%" }} // sx={{ width: "50%" }}
type="number" type="number"
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
/>
{/* 購入価格入力フィールド */}
<TextField
margin="dense"
label="購入価格"
fullWidth
value={newStock.price}
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
setNewStock({ ...newStock, price: parsedValue }); // number型で保存
}
}}
// sx={{ width: "50%" }}
type="number"
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
/>
{/* 購入日・消費期限を横並びに */}
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
{/* 購入日入力フィールド */}
<DatePicker
popperClassName="custom-datepicker-popper"
selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
onChange={(date) =>
setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
}
dateFormat="yyyy/MM/dd"
customInput={
<TextField
margin="dense"
label="購入日(yyyy/MM/dd)"
fullWidth
/>
}
isClearable
//withPortal // ← 他の文字との重なり対策
/> />
{/* 購入価格入力フィールド */} {/* 消費・賞味期限入力フィールド */}
<TextField <DatePicker
margin="dense" popperClassName="custom-datepicker-popper"
label="購入価格" selected={newStock.expDate ? new Date(newStock.expDate) : null}
fullWidth onChange={(date) =>
value={newStock.price} setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
onChange={(e) => { }
const value = e.target.value; dateFormat="yyyy/MM/dd"
const parsedValue = parseInt(value, 10); // 数値に変換 customInput={
if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK <TextField
setNewStock({ ...newStock, price: parsedValue }); // number型で保存 margin="dense"
} label="消費・賞味期限(yyyy/MM/dd)"
}} fullWidth
// sx={{ width: "50%" }} />
type="number" }
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 isClearable
//withPortal
/> />
{/* 購入日・消費期限を横並びに */}
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
{/* 購入日入力フィールド */}
<DatePicker
popperClassName="custom-datepicker-popper"
selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
onChange={(date) =>
setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
}
dateFormat="yyyy/MM/dd"
customInput={
<TextField
margin="dense"
label="購入日(yyyy/MM/dd)"
fullWidth
/>
}
isClearable
//withPortal // ← 他の文字との重なり対策
/>
{/* 消費・賞味期限入力フィールド */}
<DatePicker
popperClassName="custom-datepicker-popper"
selected={newStock.expDate ? new Date(newStock.expDate) : null}
onChange={(date) =>
setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
}
dateFormat="yyyy/MM/dd"
customInput={
<TextField
margin="dense"
label="消費・賞味期限(yyyy/MM/dd)"
fullWidth
/>
}
isClearable
//withPortal
/>
</Box>
</Box> </Box>
</DialogContent> </Box>
<DialogActions> </DialogContent>
<Button onClick={() => setIsAddOpen(false)}>キャンセル</Button> <DialogActions>
<Button onClick={handleCreateStock} variant="contained"> <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
追加 <Button onClick={handleCreateStock} variant="contained">
</Button> 追加
</DialogActions> </Button>
</Dialog> </DialogActions>
</Dialog>
{/* 在庫の食材編集ボタン（全テーブル共通） </Box>
<Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
mt: 3, mb: 2, mr: 1 {/* 在庫一覧リスト */}
}}> {/* 乳製品 */}
詳細・編集 <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
</Button> */} <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["乳製品"])}
{/* 在庫の食材削除ボタン （全テーブル共通） </div>
<Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button> */}
{/* 肉・魚 */}
</Box> <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{/* 在庫一覧リスト */} {StockTable(stocks, ["魚・肉"])}
{/* 乳製品 */} </div>
<Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> {/* 野菜 */}
{StockTable(stocks, ["乳製品"])} <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
</div> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["野菜"])}
{/* 肉・魚 */} </div>
<Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> {/* 調味料 */}
{StockTable(stocks, ["魚・肉"])} <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
</div> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["調味料"])}
{/* 野菜 */} </div>
<Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> {/* その他 */}
{StockTable(stocks, ["野菜"])} <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
</div> <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["その他"])}
{/* 調味料 */} </div>
<Typography variant="h4" component="h1" gutterBottom>調味料</Typography> <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["調味料"])}
</div>
{/* その他 */}
<Typography variant="h4" component="h1" gutterBottom>その他</Typography>
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
{StockTable(stocks, ["その他"])}
</div>
<Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
</Container> </Container>
); );
}; };

Write Preview
Loading…
Cancel
Save