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-dishuiandcolor^2
Masaharu.Kato 4 months ago
parent 2f910ce675
commit 51886f3730
7 changed files with 312 additions and 309 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. 40
      frontend/src/App.css
  2. 2
      frontend/src/App.tsx
  3. 2
      frontend/src/components/Layout.tsx
  4. 19
      frontend/src/pages/AddRecipe.tsx
  5. 60
      frontend/src/pages/RecipeList.tsx
  6. 453
      frontend/src/pages/StockPage.tsx
  7. 37
      frontend/src/pages/TaskListPage.tsx

40
frontend/src/App.css
Unescape View File

@ -31,3 +31,43 @@ body {
.MuiPaper-root {
background-color: white; /* 白背景を確保 */
}
.mainContainer {
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 80px; /* ボトムナビゲーションバーで隠れる分 */
}
.mainTitle {
padding-left: 1rem;
font-size: 2rem;
margin-bottom: 0.25rem;
}
.listWrapper {
background: #ebcba2;
margin: 0;
padding: 1rem;
}
.plusButtonWrapper {
position: fixed !important;
text-align: center;
bottom: 80px;
left: 80%;
transform: translateX(-50%);
}
.plusButtonLabel {
font-size: 0.9rem;
color: #000;
background: rgba(255, 255, 255, 0.8);
padding: 0.5rem;
border-radius: 4px;
white-space: nowrap;
}
.plusButton {
/* box-shadow: 0px 4px 15px 5px #ebcba2 !important; */
}

2
frontend/src/App.tsx
Unescape View File

@ -29,7 +29,7 @@ const theme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#1976d2',
main: '#d27619',
},
secondary: {
main: '#dc004e',

2
frontend/src/components/Layout.tsx
Unescape View File

@ -167,7 +167,7 @@ const Layout: React.FC = () => {
{/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
<Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
<Container>
<Container sx={{ padding: 0, margin: 0 }}>
<MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
<MessageAlert
open={msgOpen}

19
frontend/src/pages/AddRecipe.tsx
Unescape View File

@ -21,6 +21,7 @@ import {
Checkbox,
FormControlLabel,
Box,
Container,
} from '@mui/material';
import {
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
@ -203,16 +204,17 @@ const AddRecipe: React.FC = () => {
}, []);
return (
<>
<div className="mainContainer">
{(recipeId && !recipeLoaded)
? <p>読み込み中...</p>
:
<Box>
<>
<div className="mainTitle">
<SoupKitchenIcon sx={{ marginRight: "0.5em" }} />
{!recipeId ? '料理の追加' : '料理の編集'}
</div>
<div style={{padding: '1rem'}}>
<div>
<h1>
<SoupKitchenIcon sx={{ marginRight: "0.5em" }} />
{!recipeId ? '料理の追加' : '料理の編集'}
</h1>
<TextField autoFocus margin="dense" label="料理名" fullWidth
value={recipeName} onChange={(e) => setRecipeName(e.target.value)}
/>
@ -381,9 +383,10 @@ const AddRecipe: React.FC = () => {
</Button>
</DialogActions>
</Dialog>
</Box>
</div>
</>
}
</>
</div>
);
};

60
frontend/src/pages/RecipeList.tsx
Unescape View File

@ -26,6 +26,7 @@ import {
FormControl,
InputLabel
} from '@mui/material';
import '../App.css';
import {
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
SoupKitchen as SoupKitchenIcon
@ -63,54 +64,45 @@ const RecipeList: React.FC = () => {
}, []);
return (
<Container>
<Box>
<div>
<h1 style={{ fontSize: "40px", textAlign: "center" }}>料理リスト</h1>
</div>
<div style={{
border: '3px solid black', borderRadius: '8px', height: '500px',
overflowY: 'auto', padding: '20px'
}}>
{/* <List> */}
<div className="mainContainer">
<div className="mainTitle">
<SoupKitchenIcon sx={{ mr: "0.5em" }} />
レシピリスト
</div>
<div className="listWrapper">
<List>
{/* 料理一覧をマップして各タスクをリストアイテムとして表示 */}
{!allRecipes
? <p>読み込み中...</p>
: allRecipes.map((recipe, index) => (
<FormGroup>
<Button
// <ListItem
? <p>読み込み中...</p>
: allRecipes.map((recipe, index) => (
<ListItem
key={recipe.recipeId}
sx={{
color: 'primary',
bgcolor: 'background.paper',
mb: 1,
borderRadius: 1,
boxShadow: 1,
fontSize: '40px'
fontSize: '1.5rem'
}}
onClick={() => openRecipeById(recipe.recipeId)}
>
{recipe.recipeName}
</Button>
</FormGroup>
// </ListItem>
))}
{/* </List> */}
</div>
<div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px" }}>
<Button variant='contained' sx={{
width: "60%", height: "60px",
fontSize: "32px", left: "50%", transform: 'translateX(-50%)'
}}
color="primary"
onClick={() => navigate('/addRecipe')}
>
新しい料理を追加
</Button>
</div>
</ListItem>
))}
</List>
</div>
<Box className="plusButtonWrapper">
<Fab color="primary" onClick={() => navigate('/addRecipe')} className="plusButton">
<AddIcon />
</Fab>
{/* <Typography className="plusButtonLabel">
新しいレシピの追加
</Typography> */}
</Box>
</Container>
</div>
);
};

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

@ -26,8 +26,9 @@ import {
Select,
MenuItem,
} from '@mui/material';
import '../App.css';
import { GENERAL_ERRORS, STOCK_ERRORS } from '../constants/errorMessages';
import { Add as AddIcon } from '@mui/icons-material';
import { Add as AddIcon, KeyboardArrowDown as ArrowDownIcon, KeyboardArrowUp as ArrowUpIcon, Inventory as InventoryIcon } from '@mui/icons-material';
import DatePicker, { registerLocale } from 'react-datepicker';
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
import { useMessage } from '../components/MessageContext';
@ -79,6 +80,19 @@ const StockPage: React.FC = () => {
const { showErrorMessage, showWarningMessage } = useMessage();
// カテゴリ名一覧
const CATEGORY_NAMES = [
"乳製品",
"魚・肉",
"野菜",
"調味料",
"その他",
];
const [openCategory, setOpenCategory] = useState(Object.fromEntries(
CATEGORY_NAMES.map(category => [category, true])
));
// コンポーネントマウント時にタスク一覧を取得
useEffect(() => {
fetchStocks();
@ -209,15 +223,6 @@ const StockPage: React.FC = () => {
};
*/
/** 追加ボタンを押したときにダイアログを開く */
const handleOpenAdd = () => {
setIsAddOpen(true);
};
/** 追加ダイアログを閉じる */
const handleCloseAdd = () => {
setIsAddOpen(false);
};
/**
* セルを選択して編集画面
*/
@ -358,8 +363,8 @@ const StockPage: React.FC = () => {
return (
<>
<TableContainer component={Paper}>
<Table>
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
<Table size="small">
<TableHead sx={{ backgroundColor: "#ebcba2", color: "#333" }}>
<TableRow>
<TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>食材名</TableCell>
<TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>数量</TableCell>
@ -588,244 +593,208 @@ const StockPage: React.FC = () => {
};
return (
<Container>
<Typography variant="h3" component="h1" sx={{ mb: 4 }} >
<div className="mainContainer">
<div className="mainTitle">
<InventoryIcon sx={{ mr: "0.5em" }} />
在庫リスト
</Typography>
<Box
sx={{
position: 'fixed', // ← sticky から fixed に変更
bottom: 55, // ← 下に固定
left: 0,
right: 0,
zIndex: 1300, // ダイアログよりは低く
backgroundColor: '#f5f5f5',
// backgroundColor: 'white',
// padding: 2,
px: 2,
py: 1,
display: 'flex',
justifyContent: 'flex-end', // ← 左寄せ
boxShadow: 'none', // 軽めの上向きシャドウ
}}
>
{/* 在庫の食材追加ボタン */}
<Box sx={{
display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
mr: 2
}}>
<Typography variant="caption" color="textSecondary">
食材の追加
</Typography>
<Fab color="primary" onClick={handleOpenAdd} >
<AddIcon />
</Fab>
</div>
{/* 新規タスク作成ダイアログ */}
<Dialog open={isAddOpen} onClose={() => setIsAddOpen(false)} 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>
{/* 新規タスク作成ダイアログ */}
<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.buyAmount}
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
setNewStock({ ...newStock, buyAmount: 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]*" }} // ここで整数のみ許可
<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.buyAmount}
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
setNewStock({ ...newStock, buyAmount: 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]*" }} // ここで整数のみ許可
/>
{/* 購入店舗入力フィールド */}
<TextField
margin="dense"
label="購入店舗"
fullWidth
value={newStock.shop}
onChange={(e) => setNewStock({...newStock, shop: e.target.value})}
/>
{/* 購入日・消費期限を横並びに */}
<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
margin="dense"
label="購入店舗"
fullWidth
value={newStock.shop}
onChange={(e) => setNewStock({...newStock, shop: e.target.value})}
{/* 消費・賞味期限入力フィールド */}
<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 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>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
<Button onClick={handleCreateStock} variant="contained">
追加
</Button>
</DialogActions>
</Dialog>
{/* 各カテゴリを表示 */}
{CATEGORY_NAMES.map(category => {
return (
<Box sx={{ padding: "1rem" }}>
<Typography variant="h5" component="h1" gutterBottom
onClick={() => setOpenCategory({...openCategory, [category]: !openCategory[category]})}
>
{!openCategory[category] ? <ArrowDownIcon color="primary" /> : <ArrowUpIcon color="primary" />}
{category}
</Typography>
{openCategory[category] && StockTable(stocks, [category])}
</Box>
)
})}
{/* 材料ボタン - 画面下部に固定表示 */}
<Box className="plusButtonWrapper">
<Fab color="primary" onClick={() => setIsAddOpen(true)} className="plusButton">
<AddIcon />
</Fab>
{/* <Typography className="plusButtonLabel">
材料の追加
</Typography> */}
</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>
</div>
);
};

37
frontend/src/pages/TaskListPage.tsx
Unescape View File

@ -22,8 +22,9 @@ import {
} from '@mui/material';
import {
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
SoupKitchen as SoupKitchenIcon, Edit as EditIcon
SoupKitchen as SoupKitchenIcon, Edit as EditIcon, ShoppingCart as ShoppingCartIcon
} from '@mui/icons-material';
import '../App.css';
import { ToBuy, Stuff, NewToBuy, NewStock, StuffAndCategoryAndAmount, StuffNameAndAmount, StockHistory, /*Stock*/ } from '../types/types';
import { GENERAL_ERRORS, TOBUY_ERRORS, STUFF_HISTORY_ERRORS } from '../constants/errorMessages';
import { TOBUY_MESSAGES } from '../constants/normalMessages';
@ -251,19 +252,20 @@ const TaskListPage: React.FC = () => {
}
return (
<Container>
<Typography variant="h4" component="h1" gutterBottom>
<div className="mainContainer">
<div className="mainTitle">
<ShoppingCartIcon sx={{ mr: "0.5em" }} />
買うものリスト
</Typography>
{/* タスク一覧表示エリア - 青い背景のコンテナ */}
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
</div>
{/* 買うものリスト表示エリア - 背景色のコンテナ */}
<div className="listWrapper">
<List>
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
{tobuys && tobuys.map((tobuy) => (
<ListItem
key={tobuy.tobuyId}
sx={{
bgcolor: 'background.paper',
bgcolor: "background.paper",
mb: 1,
borderRadius: 1,
boxShadow: 1,
@ -339,19 +341,16 @@ const TaskListPage: React.FC = () => {
))}
</List>
</div>
{/* 新規材料作成ボタン - 画面下部に固定表示 */}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
{/* 材料追加ボタン - 画面下部に固定表示 */}
<Box className="plusButtonWrapper">
<Fab color="primary" onClick={() => setOpenAddToBuyDialog(true)} className="plusButton">
<AddIcon />
</Fab>
{/* <Typography className="plusButtonLabel">
材料の追加
</Typography>
</Typography> */}
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
onClick={() => setOpenAddToBuyDialog(true)}
>
<AddIcon />
</Fab>
{/*新規料理追加ボタン - 画面下部に固定表示 */}
{/* <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
@ -413,7 +412,7 @@ const TaskListPage: React.FC = () => {
<StuffHistoryDialog openDialog={openHistoryDialog} setOpenDialog={setOpenHistoryDialog} stuffName={historyTobuy.stuffName} stockHistories={stockHistories} />
}
</Container>
</div>
);
};

Write Preview
Loading…
Cancel
Save