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 21344b23c6
commit b211d15c44
1 changed files with 225 additions and 210 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. 435
      frontend/src/pages/StockPage.tsx

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

@ -114,10 +114,10 @@ const StockPage: React.FC = () => {
const expDateOnly = new Date(exp);
expDateOnly.setHours(0, 0, 0, 0);
console.log("新規作成buy:", buy);
console.log("新規作成exp:", exp);
console.log("新規作成buyDateOnly:", buyDateOnly);
console.log("新規作成expDateOnly:", expDateOnly);
// console.log("新規作成buy:", buy);
// console.log("新規作成exp:", exp);
// console.log("新規作成buyDateOnly:", buyDateOnly);
// console.log("新規作成expDateOnly:", expDateOnly);
if (buyDateOnly.getTime() > expDateOnly.getTime()) {
alert("購入日は消費・賞味期限より前の日付を設定してください。");
@ -238,10 +238,10 @@ const StockPage: React.FC = () => {
buyDateOnly.setHours(0, 0, 0, 0);
const expDateOnly = new Date(exp);
expDateOnly.setHours(0, 0, 0, 0);
console.log("編集buy:", buy);
console.log("編集exp:", exp);
console.log("編集buyDateOnly:", buyDateOnly);
console.log("編集expDateOnly:", expDateOnly);
// console.log("編集buy:", buy);
// console.log("編集exp:", exp);
// console.log("編集buyDateOnly:", buyDateOnly);
// console.log("編集expDateOnly:", expDateOnly);
if (buy > exp) {
alert("購入日は消費・賞味期限より前の日付を設定してください。");
@ -332,9 +332,9 @@ const StockPage: React.FC = () => {
<Table>
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
<TableRow>
<TableCell>食材名</TableCell>
<TableCell>数量</TableCell>
<TableCell>消費・賞味期限</TableCell>
<TableCell align="center" sx={{ width: '30%' }}>食材名</TableCell>
<TableCell align="center" sx={{ width: '30%' }}>数量</TableCell>
<TableCell align="center" sx={{ width: '40%' }}>消費・賞味期限</TableCell>
</TableRow>
</TableHead>
<TableBody>
@ -349,11 +349,11 @@ const StockPage: React.FC = () => {
const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime();
const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
console.log("テーブルtoday:", today);
console.log("テーブルexp:", expDate);
console.log("テーブルtodayDateOnly:", todayDateOnly);
console.log("テーブルexpDateOnly:", expDateOnly);
console.log("日数差:", daysLeft);
// console.log("テーブルtoday:", today);
// console.log("テーブルexp:", expDate);
// console.log("テーブルtodayDateOnly:", todayDateOnly);
// console.log("テーブルexpDateOnly:", expDateOnly);
// console.log("日数差:", daysLeft);
return (
<TableRow
@ -361,9 +361,9 @@ const StockPage: React.FC = () => {
onClick={() => handleRowClick(stock)}
style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
>
<TableCell>{stock.stuffName}</TableCell>
<TableCell>{stock.amount}</TableCell>
<TableCell
<TableCell align="center" sx={{ width: '30%' }}>{stock.stuffName}</TableCell>
<TableCell align="center" sx={{ width: '30%' }}>{stock.amount}</TableCell>
<TableCell align="center" sx={{ width: '40%' }}
style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
>
{formatDate(stock.expDate)}
@ -528,12 +528,12 @@ const StockPage: React.FC = () => {
return (
<Container>
<Typography variant="h3" component="h1" gutterBottom>
<Typography variant="h3" component="h1" sx={{ mb: 4 }} >
在庫リスト
</Typography>
{/* <Box sx={{ textAlign: 'right' }}> */}
<Box
{/* <Box
sx={{
position: 'sticky',
top: 0,
@ -546,16 +546,29 @@ const StockPage: React.FC = () => {
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 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 variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
追加
</Button> */}
{/* <Typography variant="caption" color="textSecondary">
{/* <Typography variant="caption" color="textSecondary">
食材の追加
</Typography>
<Fab
@ -564,203 +577,205 @@ const StockPage: React.FC = () => {
>
<AddIcon />
</Fab> */}
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Typography variant="caption" color="textSecondary">
食材の追加
</Typography>
<Fab color="primary" onClick={handleOpenAdd}>
<AddIcon />
</Fab>
</Box>
<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>
{/* 新規タスク作成ダイアログ */}
<Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
<Box display="flex" alignItems="center" >
<DialogTitle sx={{ flexGrow: 1 }}>
<Typography variant="h5" >
在庫に食材を追加
</Typography>
</DialogTitle>
<FormGroup row>
<FormControlLabel
control={<Checkbox />}
label="食材を新規追加"
checked={newStock.newAddition}
onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
/>
</FormGroup>
</Box>
<DialogContent>
<Box sx={{ pt: 1 }}>
{/*材料カテゴリ選択 */}
<FormControl sx={{ width: "50%", marginBottom: 2 }}>
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
<Select
labelId="demo-simple-select-label"
value={newStock.category}
onChange={(e) => onChangeCategory(e.target.value)}
>
<MenuItem value="乳製品">乳製品</MenuItem>
<MenuItem value="魚・肉">魚・肉</MenuItem>
<MenuItem value="野菜">野菜</MenuItem>
<MenuItem value="調味料">調味料</MenuItem>
<MenuItem value="その他">その他</MenuItem>
</Select>
</FormControl>
{!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
<InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
<Select
labelId="demo-simple-select-label"
value={newStock.stuffId}
onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
>
{stuffs.map((stuff) => (
<MenuItem key={stuff.stuffId} value={stuff.stuffId}>
{stuff.stuffName}
</MenuItem>
))}
</Select>
</FormControl>}
{/* タスクタイトル入力フィールド */}
{newStock.newAddition && <TextField
autoFocus
margin="dense"
label="材料名"
fullWidth
value={newStock.stuffName}
onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
sx={{ marginBottom: 2 }}
/>}
{/* 数量入力フィールド */}
<TextField
margin="dense"
label="数量"
fullWidth
value={newStock.amount}
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
}
}}
// sx={{ width: "50%" }}
type="number"
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 // ← 他の文字との重なり対策
/>
{/* 消費・賞味期限入力フィールド */}
<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
{/* 新規タスク作成ダイアログ */}
<Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
<Box display="flex" alignItems="center" >
<DialogTitle sx={{ flexGrow: 1 }}>
<Typography variant="h5" >
在庫に食材を追加
</Typography>
</DialogTitle>
<FormGroup row>
<FormControlLabel
control={<Checkbox />}
label="食材を新規追加"
checked={newStock.newAddition}
onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
/>
</Box>
</FormGroup>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
<Button onClick={handleCreateStock} variant="contained">
追加
</Button>
</DialogActions>
</Dialog>
<DialogContent>
<Box sx={{ pt: 1 }}>
{/*材料カテゴリ選択 */}
<FormControl sx={{ width: "50%", marginBottom: 2 }}>
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
<Select
labelId="demo-simple-select-label"
value={newStock.category}
onChange={(e) => onChangeCategory(e.target.value)}
>
<MenuItem value="乳製品">乳製品</MenuItem>
<MenuItem value="魚・肉">魚・肉</MenuItem>
<MenuItem value="野菜">野菜</MenuItem>
<MenuItem value="調味料">調味料</MenuItem>
<MenuItem value="その他">その他</MenuItem>
</Select>
</FormControl>
{!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
<InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
<Select
labelId="demo-simple-select-label"
value={newStock.stuffId}
onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
>
{stuffs.map((stuff) => (
<MenuItem key={stuff.stuffId} value={stuff.stuffId}>
{stuff.stuffName}
</MenuItem>
))}
</Select>
</FormControl>}
{/* タスクタイトル入力フィールド */}
{newStock.newAddition && <TextField
autoFocus
margin="dense"
label="材料名"
fullWidth
value={newStock.stuffName}
onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
sx={{ marginBottom: 2 }}
/>}
{/* 数量入力フィールド */}
<TextField
margin="dense"
label="数量"
fullWidth
value={newStock.amount}
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
}
}}
// sx={{ width: "50%" }}
type="number"
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 // ← 他の文字との重なり対策
/>
{/* 消費・賞味期限入力フィールド */}
<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>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
<Button onClick={handleCreateStock} variant="contained">
追加
</Button>
</DialogActions>
</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>
{/* 在庫一覧リスト */}
{/* 乳製品 */}
<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, ["魚・肉"])}
</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>
{/* 調味料 */}
<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, ["その他"])}
</div>
</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, ["魚・肉"])}
</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>
{/* 調味料 */}
<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, ["その他"])}
</div>
<Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
</Container>
);
};

Write Preview
Loading…
Cancel
Save