Masaharu.Kato
4 months ago
parent
8b4afe5731
commit
525a52bbb8
@ -1,28 +0,0 @@ |
||||
import React, { useState } from "react"; |
||||
import MenuItem from "@mui/material/MenuItem"; |
||||
import Select from "@mui/material/Select"; |
||||
import FormControl from "@mui/material/FormControl"; |
||||
import InputLabel from "@mui/material/InputLabel"; |
||||
|
||||
const CategoryDropDown = () => { |
||||
const [selectedValue, setSelectedValue] = useState(""); // 選択された値の状態管理
|
||||
|
||||
return ( |
||||
<FormControl sx={{ width: "50%", marginBottom:2 }}> |
||||
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel> |
||||
<Select |
||||
labelId="demo-simple-select-label" |
||||
value={selectedValue} |
||||
onChange={(event) => setSelectedValue(event.target.value)} |
||||
> |
||||
<MenuItem value="乳製品">乳製品</MenuItem> |
||||
<MenuItem value="魚・肉">魚・肉</MenuItem> |
||||
<MenuItem value="野菜">野菜</MenuItem> |
||||
<MenuItem value="調味料">調味料</MenuItem> |
||||
<MenuItem value="その他">その他</MenuItem> |
||||
</Select> |
||||
</FormControl> |
||||
); |
||||
}; |
||||
|
||||
export default CategoryDropDown; |
||||
@ -1,457 +0,0 @@ |
||||
import React, { useState, useEffect } from 'react'; |
||||
import { useNavigate } from 'react-router-dom'; |
||||
import { toBuyApi } from '../services/api'; |
||||
import {
|
||||
Container, |
||||
Typography, |
||||
Tooltip, |
||||
List, |
||||
ListItem, |
||||
ListItemText, |
||||
ListItemSecondaryAction, |
||||
IconButton, |
||||
Checkbox, |
||||
Fab, |
||||
Dialog, |
||||
DialogTitle, |
||||
DialogContent, |
||||
DialogActions, |
||||
TextField, |
||||
Button, |
||||
Box, |
||||
FormControlLabel, |
||||
FormGroup, |
||||
MenuItem, |
||||
Select, |
||||
FormControl, |
||||
InputLabel |
||||
} from '@mui/material'; |
||||
import { |
||||
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, |
||||
SoupKitchen as SoupKitchenIcon |
||||
} from '@mui/icons-material'; |
||||
import { ToBuy, Stuff } from '../types/types'; |
||||
import { GENERAL_ERRORS } from '../constants/errorMessages'; |
||||
import CategoryDropDown from "../components/CategoryDropDown"; |
||||
|
||||
const DishList: React.FC = () => { |
||||
const navigate = useNavigate(); |
||||
// 料理リストの料理名を格納する配列
|
||||
// const dishes = ;
|
||||
|
||||
// タスク一覧の状態管理
|
||||
const [tobuys, setToBuys] = useState<ToBuy[]>([]); |
||||
const test = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1]; |
||||
// APIができるまでのテスト用の型
|
||||
interface Dish { |
||||
id:number, |
||||
name:string, |
||||
amount:number |
||||
} |
||||
// APIができるまでの食材配列
|
||||
const testdish : Dish[] = [ |
||||
{ id: 1, name: 'ジャガイモ', amount:1 }, |
||||
{ id: 2, name: '人参', amount:2 }, |
||||
{ id: 3, name: '人参', amount:2 }, |
||||
{ id: 4, name: '人参', amount:2 } |
||||
]; |
||||
|
||||
// 画面表示用の食材情報配列
|
||||
const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish); |
||||
|
||||
// エラーメッセージの状態管理
|
||||
const [error, setError] = useState(false); |
||||
// 選択した料理の情報を表示するダイアログの表示状態
|
||||
const [openDialog, setOpenDialog] = useState(false); |
||||
// 料理リスト編集ダイアログの表示状態
|
||||
const [openChangeDialog, setOpenChangeDialog] = useState(false); |
||||
// 料理リストの食材の個数編集ダイアログの表示状態
|
||||
const [openChangeItemDialog, setOpenChangeItemDialog] = useState(false); |
||||
|
||||
const changeDialog = () => { |
||||
setOpenDialog(false); |
||||
setOpenChangeDialog(true); |
||||
setTestDishArray(testdish); |
||||
}; |
||||
|
||||
const cancelChange = () => { |
||||
setOpenDialog(true); |
||||
setOpenChangeDialog(false); |
||||
}; |
||||
/** |
||||
* タスクを削除するハンドラー |
||||
* 指定されたIDのタスクをAPIを通じて削除 |
||||
*/ |
||||
const handleDeleteStuffTemp = async (dish_id: number) => { |
||||
try { |
||||
let testDishArrayCopy = [...testDishArray]; // 配列をコピー
|
||||
testDishArrayCopy.splice(dish_id, 1); |
||||
setTestDishArray(testDishArrayCopy); |
||||
// fetchTasks(); // 削除後のタスク一覧を再取得
|
||||
} catch (error) { |
||||
// console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error);
|
||||
} |
||||
}; |
||||
// コンポーネントマウント時にタスク一覧を取得
|
||||
useEffect(() => { |
||||
fetchTasks(); |
||||
}, []); |
||||
|
||||
/** |
||||
* APIからタスク一覧を取得する関数 |
||||
* 取得したタスクをstate(tasks)に設定 |
||||
*/ |
||||
// const fetchTasks = async () => {
|
||||
// try {
|
||||
// const tasks = await taskApi.getTasks();
|
||||
// setTasks(tasks);
|
||||
// } catch (error) {
|
||||
// console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
|
||||
// }
|
||||
// };
|
||||
|
||||
const fetchTasks = async () => { |
||||
try { |
||||
const tobuys = await toBuyApi.getToBuys(); |
||||
setToBuys(tobuys); |
||||
} catch (error) { |
||||
// console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
|
||||
} |
||||
}; |
||||
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> */} |
||||
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} |
||||
{test.map((test, index) => ( |
||||
<FormGroup> |
||||
|
||||
|
||||
<Button
|
||||
// <ListItem
|
||||
key={index} |
||||
sx={{ |
||||
bgcolor: 'background.paper', |
||||
mb: 1, |
||||
borderRadius: 1, |
||||
boxShadow: 1, |
||||
fontSize: '40px' |
||||
}} |
||||
onClick={() => setOpenDialog(true)} |
||||
> |
||||
{test} |
||||
{/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} |
||||
{/* <ListItemText |
||||
primary={test} |
||||
//secondary={tobuy.amount}
|
||||
sx={{ |
||||
textDecoration: false ? 'line-through' : 'none', |
||||
}} |
||||
/> */} |
||||
</Button> |
||||
</FormGroup> |
||||
// </ListItem>
|
||||
))} |
||||
{/* </List> */} |
||||
</div> |
||||
<div style={{width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px"}}> |
||||
<Button variant='contained' sx={{ |
||||
width: "60%",
|
||||
fontSize: "24px", left: "50%", transform: 'translateX(-50%)' }}
|
||||
color="primary" |
||||
onClick={() => navigate('/add1')} |
||||
> |
||||
新しい料理を追加 |
||||
</Button> |
||||
</div> |
||||
{/*新規料理追加ボタン - 画面下部に固定表示 */} |
||||
<Tooltip title="料理から追加"> |
||||
<Fab |
||||
color="primary" |
||||
sx={{ position: 'fixed', bottom: 106, left: '60%', transform: 'translateX(-50%)' }} |
||||
onClick={() => setOpenDialog(true)} |
||||
> |
||||
<SoupKitchenIcon /> |
||||
</Fab> |
||||
</Tooltip> |
||||
</Box> |
||||
{/* 新規タスク作成ダイアログ */} |
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} |
||||
maxWidth="lg" |
||||
fullWidth |
||||
> |
||||
<Box display="flex" alignItems="center"> |
||||
<DialogTitle sx={{ flexGrow: 1 }}>料理名</DialogTitle> |
||||
</Box> |
||||
<FormGroup> |
||||
{/* <List> */} |
||||
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} |
||||
{test.map((test, index) => ( |
||||
<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> |
||||
<DialogActions> |
||||
<Button onClick={() => setOpenDialog(false)}>キャンセル</Button> |
||||
<Button onClick={() => changeDialog()} variant="contained" |
||||
style={{width: '40%', fontSize: '40px'}} |
||||
> |
||||
この料理を編集 |
||||
</Button> |
||||
</DialogActions> |
||||
</Dialog> |
||||
{/* 食材の個数の編集ダイアログ */} |
||||
<Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true} |
||||
maxWidth="lg" |
||||
fullWidth |
||||
> |
||||
<Box display="flex" alignItems="center"> |
||||
<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.name} |
||||
// secondary={task.description}
|
||||
sx={{width: '80%'}} |
||||
/> |
||||
{/* 食材の個数を表示 */} |
||||
<ListItemText |
||||
primary={<Typography style={{textAlign:"center"}}>個数<br /> |
||||
{test.amount} |
||||
</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> |
||||
<DialogActions> |
||||
<Button onClick={() => cancelChange()}>変更をキャンセル</Button> |
||||
<Button onClick={() => setOpenDialog(false)} variant="contained" |
||||
style={{width: '40%', fontSize: '40px'}} |
||||
> |
||||
料理リストへ登録 |
||||
</Button> |
||||
</DialogActions> |
||||
</Dialog> |
||||
{/* 食材編集ダイアログ */} |
||||
<Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true} |
||||
maxWidth="lg" |
||||
fullWidth |
||||
> |
||||
<Box display="flex" alignItems="center"> |
||||
<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.name} |
||||
// secondary={task.description}
|
||||
sx={{width: '80%'}} |
||||
/> |
||||
{/* 食材の個数を表示 */} |
||||
<ListItemText |
||||
primary={<Typography style={{textAlign:"center"}}>個数<br /> |
||||
{test.amount} |
||||
</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> |
||||
<DialogActions> |
||||
<Button onClick={() => cancelChange()}>変更をキャンセル</Button> |
||||
<Button onClick={() => setOpenDialog(false)} variant="contained" |
||||
style={{width: '40%', fontSize: '40px'}} |
||||
> |
||||
料理リストへ登録 |
||||
</Button> |
||||
</DialogActions> |
||||
</Dialog> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
export default DishList; |
||||
Loading…
Reference in new issue