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

Merge branch 'feature-frontend-tobuydialog' into feature-frontend-alert

Browse Source
feature-frontend-alert
Masaharu.Kato 4 months ago
parent 7da7bb3273 da204c42a3
commit ed76ca7148
4 changed files with 149 additions and 99 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. 15
      frontend/src/components/BuyDialog.tsx
  2. 114
      frontend/src/components/Layout.tsx
  3. 108
      frontend/src/pages/StockPage.tsx
  4. 11
      frontend/src/pages/TaskListPage.tsx

15
frontend/src/components/BuyDialog.tsx
Unescape View File

@ -26,12 +26,14 @@ const formatDateLocal = (date: Date) => {
const BuyDialog = ({
openDialog,
setOpenDialog,
stuffName,
newStock,
setNewStock,
onSubmit,
}: {
openDialog: boolean,
setOpenDialog: (open: boolean) => void,
stuffName: string,
newStock: NewStock,
setNewStock: (tobuy: NewStock) => void,
onSubmit: () => void,
@ -40,11 +42,21 @@ const BuyDialog = ({
return (
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '500px', maxHeight: '80vh' } }}
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }}
>
<DialogTitle>在庫登録</DialogTitle>
<DialogContent>
<Box sx={{ pt: 1 }}>
{/* 材料名表示 */}
<TextField
margin="dense"
label="材料名"
fullWidth
value={stuffName}
disabled
sx={{ marginBottom: 2 , marginTop: 2}}
/>
{/* 価格入力フィールド */}
<TextField
autoFocus
@ -58,6 +70,7 @@ const BuyDialog = ({
setNewStock({ ...newStock, price: value })
};
}}
sx={{ marginBottom: 2 }}
/>
{/* 購入日・消費期限を横並びに */}
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>

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

@ -17,7 +17,10 @@ import {
ListItemButton,
Divider,
IconButton,
AlertColor
AlertColor,
BottomNavigation,
BottomNavigationAction,
Paper
} from '@mui/material';
import {
Menu as MenuIcon,
@ -25,6 +28,7 @@ import {
Inventory as InventoryIcon, // テストページ用のアイコン
Science as ScienceIcon, // 鈴木
SoupKitchen as SoupKitchenIcon,
ShoppingCart as ShoppingCartIcon
} from '@mui/icons-material';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
import { MessageContext } from './MessageContext';
@ -34,6 +38,7 @@ const Layout: React.FC = () => {
const navigate = useNavigate();
const location = useLocation();
const [drawerOpen, setDrawerOpen] = useState(false);
const [bottomNavi, setBottomNavi] = useState(1);
/**
* ログアウト処理を行うハンドラー関数
@ -44,19 +49,9 @@ const Layout: React.FC = () => {
navigate('/login');
};
/**
* 画面遷移処理を行うハンドラー関数
* 指定されたパスに遷移し、サイドメニューを閉じる
*/
const handleNavigate = (path: string) => {
navigate(path);
setDrawerOpen(false);
};
// 現在のパスに基づいてメニュー項目が選択状態かどうかを判定
const isSelected = (path: string): boolean => {
return location.pathname === path;
};
// メニューを開閉するハンドラー
const toggleDrawer = () => {
@ -96,21 +91,27 @@ const Layout: React.FC = () => {
sessionStorage.removeItem('globalMessage');
};
const handleBottomNavigation = (event: React.SyntheticEvent, newValue: any) => {
setBottomNavi(newValue);
switch(newValue) {
case 0:
navigate('stock');
break;
case 1:
navigate('tasks');
break;
case 2:
navigate('recipeList');
break;
}
// ここでルーティング処理などを行う
}
return (
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
{/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
<AppBar position="static" elevation={0}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
onClick={toggleDrawer}
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
shopchop
</Typography>
@ -120,52 +121,31 @@ const Layout: React.FC = () => {
</Toolbar>
</AppBar>
{/* サイドメニュー */}
<Drawer
anchor="left"
open={drawerOpen}
onClose={() => setDrawerOpen(false)}
>
<Box
sx={{ width: 250 }}
role="presentation"
<Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
<BottomNavigation
showLabels
value={bottomNavi}
onChange={(event, newValue) => {
setBottomNavi(newValue);
switch(newValue) {
case 0:
navigate('stock');
break;
case 1:
navigate('tasks');
break;
case 2:
navigate('recipeList');
break;
}
// ここでルーティング処理などを行う
}}
>
<List>
<ListItemButton
onClick={() => handleNavigate('/tasks')}
selected={isSelected('/tasks')}
>
<ListItemIcon><ListAltIcon /></ListItemIcon>
<ListItemText primary="買うものリスト" />
</ListItemButton>
{/* テストページへのリンクを追加 */}
{/* 在庫リストへのリンクを追加 */}
<ListItemButton
onClick={() => handleNavigate('/addRecipe')}
selected={isSelected('/addRecipe')}
>
<ListItemIcon><SoupKitchenIcon /></ListItemIcon>
<ListItemText primary="料理の追加" />
</ListItemButton>
<ListItemButton
onClick={() => handleNavigate('/recipeList')}
selected={isSelected('/recipeList')}
>
<ListItemIcon><ScienceIcon /></ListItemIcon>
<ListItemText primary="料理リスト" />
</ListItemButton>
<ListItemButton
onClick={() => handleNavigate('/stock')}
selected={isSelected('/stock')}
>
<ListItemIcon><InventoryIcon /></ListItemIcon>
<ListItemText primary="在庫管理" />
</ListItemButton>
<Divider />
</List>
</Box>
</Drawer>
<BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
<BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
<BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
</BottomNavigation>
</Paper>
{/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
<Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>

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

@ -149,7 +149,7 @@ const StockPage: React.FC = () => {
};
/**
* カテゴリー選択？？
* カテゴリー選択
*/
const onChangeCategory = async (category: string) => {
setNewStock({ ...newStock, category })
@ -273,8 +273,6 @@ const StockPage: React.FC = () => {
<TableRow>
<TableCell>食材名</TableCell>
<TableCell>数量</TableCell>
<TableCell>購入価格</TableCell>
<TableCell>購入日</TableCell>
<TableCell>消費・賞味期限</TableCell>
</TableRow>
</TableHead>
@ -293,8 +291,6 @@ const StockPage: React.FC = () => {
>
<TableCell>{stock.stuffName}</TableCell>
<TableCell>{stock.amount}</TableCell>
<TableCell>{stock.price}</TableCell>
<TableCell>{formatDate(stock.buyDate)}</TableCell>
<TableCell
style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
>
@ -333,6 +329,54 @@ const StockPage: React.FC = () => {
value={editStock.price}
onChange={handleChange}
/>
{/* 購入日・消費期限を横並びに */}
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
{/* 購入日 */}
<DatePicker
selected={editStock.buyDate ? new Date(editStock.buyDate) : null}
onChange={(date) => {
if (editStock) {
setEditStock({
...editStock,
buyDate: date ? formatDateLocal(date) : '',
});
}
}}
dateFormat="yyyy/MM/dd"
customInput={
<TextField
margin="normal"
label="購入日 (yyyy/MM/dd)"
fullWidth
name="buyDate"
/>
}
isClearable
/>
{/* 消費・賞味期限 */}
<DatePicker
selected={editStock.expDate ? new Date(editStock.expDate) : null}
onChange={(date) => {
if (editStock) {
setEditStock({
...editStock,
expDate: date ? formatDateLocal(date) : '',
});
}
}}
dateFormat="yyyy/MM/dd"
customInput={
<TextField
margin="normal"
label="消費・賞味期限 (yyyy/MM/dd)"
fullWidth
name="expDate"
/>
}
isClearable
/>
</Box>
{/* 以前の書き方
<TextField
label="購入日 (yyyy-MM-dd)"
fullWidth
@ -348,18 +392,15 @@ const StockPage: React.FC = () => {
name="expDate"
value={editStock.expDate}
onChange={handleChange}
/>
<Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
<Button
variant="contained"
color="success"
onClick={handleApplyChanges}
sx={{ mt: 3, mb: 2, left: "68%" }}
>
変更を適用
</Button>
/> */}
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
<Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
キャンセル
</Button>
<Button variant="contained" color="success" onClick={handleApplyChanges}>
変更を適用
</Button>
</Box>
</>
)}
</DialogContent>
@ -378,13 +419,26 @@ const StockPage: React.FC = () => {
<>
<Typography variant="h4">【{selectedRow.stuffName}】を削除します。</Typography>
<Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
<Button onClick={() => { setIsDeleteOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
<Button variant="contained" color="error" onClick={() => {
handleDeleteStock(selectedRow.stockId);
setIsDeleteOpen(false); // 削除処理後にダイアログを閉じる
setSelectedRow(null); // セルの選択を解除
}}
style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
<Button onClick={() => {
setIsDeleteOpen(false);
setSelectedRow(null);
}}>
キャンセル
</Button>
<Button
variant="contained"
color="error"
onClick={() => {
handleDeleteStock(selectedRow.stockId);
setIsDeleteOpen(false);
setSelectedRow(null);
}}
>
削除
</Button>
</Box>
</>
)}
</DialogContent>
@ -401,6 +455,7 @@ const StockPage: React.FC = () => {
</Typography>
<Box sx={{ textAlign: 'right' }}>
{/* <Box sx={{ position: 'fixed', top: 16, right: 16, zIndex: 1000, display: 'flex', gap: 2 }}> */}
{/* 在庫の食材追加ボタン */}
<Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
追加
@ -557,8 +612,9 @@ const StockPage: React.FC = () => {
</Dialog>
{/* 在庫の食材編集ボタン（全テーブル共通） */}
<Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, mr: 1 }}>
編集
<Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
mt: 3, mb: 2, mr: 1 }}>
詳細・編集
</Button>
{/* 在庫の食材削除ボタン （全テーブル共通） */}

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

@ -252,6 +252,7 @@ const TaskListPage: React.FC = () => {
<IconButton color="primary" sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="購入情報を記入"
onClick={() => {
setOpenInfoDialog(true)
setEditingItem(tobuy)
setSelectedToBuyId(tobuy.tobuyId)
// handleDeleteTask(tobuy.tobuyId)
}}>
@ -295,28 +296,28 @@ const TaskListPage: React.FC = () => {
</List>
</div>
{/* 新規材料作成ボタン - 画面下部に固定表示 */}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
材料のみ追加
</Typography>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
onClick={() => setOpenAddToBuyDialog(true)}
>
<AddIcon />
</Fab>
{/*新規料理追加ボタン - 画面下部に固定表示 */}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', transform: 'translateX(-50%)' }}>
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
料理から追加
</Typography>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
onClick={() => {
// setOpenAddToBuyDialog(true);
navigate('/RecipeList');
@ -331,7 +332,7 @@ const TaskListPage: React.FC = () => {
<AddStuffAmountDialog openDialog={openAddToBuyDialog} setOpenDialog={setOpenAddToBuyDialog} newItem={newToBuy} setNewItem={setNewToBuy} onSubmit={handleAddNewToBuy} />
{/* 購入処理(在庫登録)のための数値入力ダイアログ */}
<BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
<BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} stuffName={editingItem.stuffName} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
{/* 数量変更ダイアログ */}
<EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}

Write Preview
Loading…
Cancel
Save