個数ダイアログの追加

feature-frontend-dishedit
masato.fujita 4 months ago
parent 9d5a87b303
commit 3a864a4c96
  1. 180
      frontend/src/pages/DishList.tsx

@ -64,7 +64,7 @@ const DishList: React.FC = () => {
// }
// すべての料理リスト
const [allDish, setAllDish] = useState<Dish[]>();
const [allDish, setAllDish] = useState<Dish[]>(testdish);
// 画面表示用の食材情報配列
const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish);
// エラーメッセージの状態管理
@ -74,7 +74,9 @@ const DishList: React.FC = () => {
// 料理リスト編集ダイアログの表示状態
const [openChangeDialog, setOpenChangeDialog] = useState(false);
// 料理リストの食材の個数編集ダイアログの表示状態
const [openChangeItemDialog, setOpenChangeItemDialog] = useState(false);
const [openChangeAmountDialog, setOpenChangeAmountDialog] = useState(false);
// 編集する食材の状態
const [selectedEditingStuff, setSelectedEditingStuff] = useState<Dish>();
const changeDialog = () => {
setOpenDialog(false);
@ -86,6 +88,17 @@ const DishList: React.FC = () => {
setOpenDialog(true);
setOpenChangeDialog(false);
};
// 選択された食材
let selectedItem : string = '';
// 選択された食材の個数
let selectedItemAmount : number = 0;
// 選択された食材の個数を変更するダイアログを開く処理
const changeSelectedItemAmount = (dish : Dish, stuff_name : string, stuff_amount : number) => {
setOpenChangeAmountDialog(true)
setSelectedEditingStuff(dish);
selectedItem = stuff_name;
selectedItemAmount = stuff_amount;
};
/**
*
* IDのタスクをAPIを通じて削除
@ -120,8 +133,8 @@ const DishList: React.FC = () => {
const fetchTasks = async () => {
try {
const dishlistfirst = await recipeApi.getAllRecipes();
setAllDish(dishlistfirst);
// const dishlistfirst = await recipeApi.getAllRecipes();
// setAllDish(dishlistfirst);
} catch (error) {
alert("取得失敗");
// console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
@ -178,7 +191,7 @@ const DishList: React.FC = () => {
</Button>
</div>
{/*新規料理追加ボタン - 画面下部に固定表示 */}
<Tooltip title="料理から追加">
{/* <Tooltip title="">
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 106, left: '60%', transform: 'translateX(-50%)' }}
@ -186,9 +199,9 @@ const DishList: React.FC = () => {
>
<SoupKitchenIcon />
</Fab>
</Tooltip>
</Tooltip> */}
</Box>
{/* 新規タスク作成ダイアログ */}
{/* 料理リストの詳細表示ダイアログ */}
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}
maxWidth="lg"
fullWidth
@ -234,13 +247,13 @@ const DishList: React.FC = () => {
</Button>
</DialogActions>
</Dialog>
{/* 食材の個数の編集ダイアログ */}
{/* 食材編集ダイアログ */}
<Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true}
maxWidth="lg"
fullWidth
>
<Box display="flex" alignItems="center">
<DialogTitle sx={{ flexGrow: 1 }}></DialogTitle>
<DialogTitle sx={{ flexGrow: 1 }}></DialogTitle>
</Box>
<FormGroup>
{/* <List> */}
@ -277,11 +290,11 @@ const DishList: React.FC = () => {
/>
{/* 買い物リスト:食材情報記入ボタン */}
<ListItemSecondaryAction>
<Tooltip title="食材情報追加">
<Tooltip title="個数を編集">
<IconButton
edge="end"
aria-label="食材情報追加"
//onClick={() => handleDeleteTask(task.id)}
aria-label="個数を編集"
onClick={() => changeSelectedItemAmount(test, test.recipeName, test.summary)}
>
<ShoppingBasketIcon />
</IconButton>
@ -346,115 +359,52 @@ const DishList: React.FC = () => {
</Button>
</DialogActions>
</Dialog>
{/* 食材編集ダイアログ */}
<Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true}
{/* 食材の個数の編集ダイアログ */}
<Dialog open={openChangeAmountDialog} onClose={() => setOpenChangeAmountDialog(false)} disableScrollLock={true}
maxWidth="lg"
fullWidth
>
<Box display="flex" alignItems="center">
<DialogTitle sx={{ flexGrow: 1 }}></DialogTitle>
<DialogTitle sx={{ flexGrow: 1 }}></DialogTitle>
</Box>
<FormGroup>
{/* <List> */}
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
{testDishArray.map((test, id) => (
<ListItem
key={id}
sx={{
bgcolor: 'background.paper',
mb: 1,
borderRadius: 1,
boxShadow: 1,
}}
>
{/*
<Checkbox
checked={task.completed}
onChange={() => handleToggleComplete(task.id)}
/> */}
{/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
<ListItemText
primary={test.recipeName}
// secondary={task.description}
sx={{width: '80%'}}
/>
{/* 食材の個数を表示 */}
<ListItemText
primary={<Typography style={{textAlign:"center"}}><br />
{test.summary}
</Typography>
}
// secondary={task.description}
sx={{ align: "right", fontSize: "20px" }}
/>
{/* 買い物リスト:食材情報記入ボタン */}
<ListItemSecondaryAction>
<Tooltip title="食材情報追加">
<IconButton
edge="end"
aria-label="食材情報追加"
//onClick={() => handleDeleteTask(task.id)}
>
<ShoppingBasketIcon />
</IconButton>
</Tooltip>
{/* 買い物リスト:食材削除ボタン */}
<Tooltip title="項目を削除"
componentsProps={{
tooltip: {
sx: {
backgroundColor: "white",
color: "red",
fontSize: "0.8rem",
padding: "6px",
borderRadius: "6px",
},
},
}}
>
<IconButton
edge="end"
aria-label="delete"
onClick={() => handleDeleteStuffTemp(id)}
>
<DeleteIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
// <Button onClick={() => setOpenDialog(true)} key = {index}>
// {test}
// </Button>
// <ListItem
// key={index}
// sx={{
// bgcolor: 'background.paper',
// mb: 1,
// borderRadius: 1,
// boxShadow: 2,
// }}
// >
// {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
// <ListItemText
// primary={test}
// //secondary={tobuy.amount}
// primaryTypographyProps={{ fontSize: '40px', margin: '10px' }}
// sx={{
// textDecoration: false ? 'line-through' : 'none',
// }}
// />
// </ListItem>
))}
{/* </List> */}
</FormGroup>
<DialogContent>
<Box sx={{ pt: 1 }}>
{/* 材料名表示 */}
<TextField
autoFocus
margin="dense"
label="材料名"
fullWidth
value={selectedItem}
disabled
sx={{ marginBottom: 2 }}
/>
{/* 数量入力フィールド */}
<TextField
margin="dense"
label="数量"
fullWidth
value={selectedItemAmount}
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
// if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外
// setSelectedEditingTask({ ...selectedEditingTask, amount: parsedValue }); // number型で保存
// }
}}
sx={{ width: "20%" }}
type="number"
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
/>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => cancelChange()}></Button>
<Button onClick={() => setOpenDialog(false)} variant="contained"
style={{width: '40%', fontSize: '40px'}}
>
<Button onClick={() => setOpenChangeAmountDialog(false)}></Button>
<Button onClick={() => setOpenChangeAmountDialog(false)} variant="contained">
</Button>
</DialogActions>
</Dialog>

Loading…
Cancel
Save