数量変更ボタンの追加

feature-frontend-styles
Haru.Kusano 4 months ago
parent 8a5bd92092
commit aaa0ef605a
  1. 79
      frontend/src/pages/TaskListPage.tsx

@ -32,7 +32,7 @@ import {
} from '@mui/material';
import {
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
SoupKitchen as SoupKitchenIcon
SoupKitchen as SoupKitchenIcon, Edit as EditIcon
} from '@mui/icons-material';
import { ToBuy, Stuff, Stock } from '../types/types';
import { TOBUY_ERRORS } from '../constants/errorMessages';
@ -64,7 +64,7 @@ const TaskListPage: React.FC = () => {
//在庫登録ダイアログの表示状態
const [openInfoDialog, setOpenInfoDialog] = useState(false);
const [selectedTask, setSelectedTask] = useState<ToBuy["tobuyId"]>(0);
const [newToBuy, setNewToBuy] = useState(EMPTY_TOBUY);
@ -126,14 +126,14 @@ const TaskListPage: React.FC = () => {
console.error(`${TOBUY_ERRORS.DELETE_FAILED}:`, error);
}
};
/**
*
*/
const handleBuy = async (tobuyId: number) => {
try {
const today = new Date().toISOString().substring(0, 10);
await toBuyApi.buy({tobuyId, ...newStock, lastUpdate: today});
await toBuyApi.buy({ tobuyId, ...newStock, lastUpdate: today });
fetchTasks(); // 削除後の買うもの一覧を再取得
} catch (error) {
console.error(`${TOBUY_ERRORS.BUY_FAILED}:`, error);
@ -194,13 +194,28 @@ const TaskListPage: React.FC = () => {
textDecoration: false ? 'line-through' : 'none',
}}
/>
{/* 買い物リスト:食材情報記入ボタン */}
<ListItemSecondaryAction>
{/* 買い物リスト:数量変更ボタン */}
<Tooltip title="数量変更">
<IconButton
edge="end"
aria-label="数量変更"
sx={{ marginRight: 2 }}
onClick={() => {
setOpenInfoDialog(true)
//setSelectedTask(tobuy.tobuyId)
// handleDeleteTask(tobuy.tobuyId)
}}
>
<EditIcon />
</IconButton>
</Tooltip>
{/* 買い物リスト:食材情報記入ボタン */}
<Tooltip title="食材情報追加">
<IconButton
edge="end"
aria-label="食材情報追加"
//sx={{ marginRight: 2 }}
//sx={{ marginRight: 3 }}
onClick={() => {
setOpenInfoDialog(true)
setSelectedTask(tobuy.tobuyId)
@ -210,7 +225,7 @@ const TaskListPage: React.FC = () => {
<ShoppingBasketIcon />
</IconButton>
</Tooltip>
{/* 買い物リスト:食材削除ボタン */}
<Tooltip title="項目を削除"
componentsProps={{
@ -246,33 +261,33 @@ const TaskListPage: React.FC = () => {
<Typography variant="caption" color="textSecondary">
</Typography>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
onClick={() => setOpenDialog(true)}
>
<AddIcon />
</Fab>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
onClick={() => setOpenDialog(true)}
>
<AddIcon />
</Fab>
{/*新規料理追加ボタン - 画面下部に固定表示 */}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
</Typography>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
onClick={() => {
setOpenDialog(true);
//handleNavigate('/AddDishies1');
}}
//selected={isSelected('/test')}
>
<SoupKitchenIcon />
</Fab>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
onClick={() => {
setOpenDialog(true);
//handleNavigate('/AddDishies1');
}}
//selected={isSelected('/test')}
>
<SoupKitchenIcon />
</Fab>
{/* 新規タスク作成ダイアログ */}
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}>
@ -371,7 +386,7 @@ const TaskListPage: React.FC = () => {
label="価格"
fullWidth
value={newStock.price}
onChange={(e) => setNewStock({...newStock, price: parseInt(e.target.value)})}
onChange={(e) => setNewStock({ ...newStock, price: parseInt(e.target.value) })}
/>
{/* 消費・賞味期限入力フィールド */}
<TextField
@ -380,7 +395,7 @@ const TaskListPage: React.FC = () => {
fullWidth
multiline
value={newStock.expDate}
onChange={(e) => setNewStock({...newStock, expDate: e.target.value})}
onChange={(e) => setNewStock({ ...newStock, expDate: e.target.value })}
/>
{/* 購入日入力フィールド */}
<TextField
@ -389,7 +404,7 @@ const TaskListPage: React.FC = () => {
fullWidth
multiline
value={newStock.buyDate}
onChange={(e) => setNewStock({...newStock, buyDate: e.target.value})}
onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
/>
</Box>
</DialogContent>

Loading…
Cancel
Save