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

料理リストにAPIの内容を表示

Browse Source
feature-frontend-dishedit
masato.fujita 9 months ago
parent 138df3084a
commit dc6ab8662f
1 changed files with 96 additions and 48 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. 144
      frontend/src/pages/DishList.tsx

144
frontend/src/pages/DishList.tsx
Unescape View File

@ -56,15 +56,40 @@ const DishList: React.FC = () => {
{ recipeId: 3, recipeName: '人参', summary:2 }, { recipeId: 3, recipeName: '人参', summary:2 },
{ recipeId: 4, recipeName: '人参', summary:2 } { recipeId: 4, recipeName: '人参', summary:2 }
]; ];
interface RecipeInfo {
recipeId: number;
recipeName: string;
summary: string;
stuffs: Array<{
stuffId: number; stuffName: string; amount: number
}>;
}
// interface testdish { const EMPTY_RECIPE: RecipeInfo = {
// recipeId: number, recipeId: 0,
// recipeName: string, recipeName: '',
// summary: number summary: '',
// } stuffs: []
}
interface Stuff {
stuffId: number;
stuffName: string;
amount: number;
}
// すべての料理リスト // すべての料理リスト
const [allDish, setAllDish] = useState<Dish[]>(testdish); const [allDish, setAllDish] = useState<Dish[]>();
// 食材リスト
const [stuff, setStuff] = useState<Stuff[]>([]);
// 料理名
const [selectedDishName, setSelectedDishName] = useState('');
// 料理情報
const [selectedrecipeInfo, setSelectedRecipeInfo] = useState<RecipeInfo>({recipeId: 0,
recipeName: '',
summary: '',
stuffs: []});
// 画面表示用の食材情報配列 // 画面表示用の食材情報配列
const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish); const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish);
// エラーメッセージの状態管理 // エラーメッセージの状態管理
@ -76,7 +101,16 @@ const DishList: React.FC = () => {
// 料理リストの食材の個数編集ダイアログの表示状態 // 料理リストの食材の個数編集ダイアログの表示状態
const [openChangeAmountDialog, setOpenChangeAmountDialog] = useState(false); const [openChangeAmountDialog, setOpenChangeAmountDialog] = useState(false);
// 編集する食材の状態 // 編集する食材の状態
const [selectedEditingStuff, setSelectedEditingStuff] = useState<Dish>(); const [selectedEditingStuff, setSelectedEditingStuff] = useState<Stuff>();
// 食材表示ダイアログを表示
const openStuffDialog = (recipeId : number) => {
setOpenDialog(true)
selectedDishId = recipeId;
fetchstuff(selectedDishId);
console.log(selectedDishId);
}
const changeDialog = () => { const changeDialog = () => {
setOpenDialog(false); setOpenDialog(false);
@ -88,26 +122,43 @@ const DishList: React.FC = () => {
setOpenDialog(true); setOpenDialog(true);
setOpenChangeDialog(false); setOpenChangeDialog(false);
}; };
// 選択された料理のID
let selectedDishId : number = 0;
// 選択された食材 // 選択された食材
let selectedItem : string = ''; let selectedItem : string = '';
// 選択された食材の個数 // 選択された食材の個数
let selectedItemAmount : number = 0; let selectedItemAmount : number = 0;
// 選択された食材の個数を変更するダイアログを開く処理 // 選択された食材の個数を変更するダイアログを開く処理
const changeSelectedItemAmount = (dish : Dish, stuff_name : string, stuff_amount : number) => { const changeSelectedItemAmount = (stuff : Stuff, stuff_name : string, stuff_amount : number) => {
setOpenChangeAmountDialog(true) setOpenChangeAmountDialog(true)
setSelectedEditingStuff(dish); setSelectedEditingStuff(stuff);
selectedItem = stuff_name; selectedItem = stuff_name;
selectedItemAmount = stuff_amount; selectedItemAmount = stuff_amount;
}; };
const fetchstuff = async (recipeId : number) => {
try {
const dish = await recipeApi.getById(recipeId);
console.log(dish);
// 情報の取得にラグがあるバグあり。変数に格納するのは諦めるべきか
// setSelectedRecipeInfo(dish);
console.log(selectedrecipeInfo);
setSelectedDishName(dish.recipeName);
setStuff(dish.stuffs);
console.log(selectedDishName);
} catch (error) {
alert("取得失敗");
// console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
}
};
/** /**
* タスクを削除するハンドラー * タスクを削除するハンドラー
* 指定されたIDのタスクをAPIを通じて削除 * 指定されたIDのタスクをAPIを通じて削除
*/ */
const handleDeleteStuffTemp = async (dish_id: number) => { const handleDeleteStuffTemp = async (stuff_id: number) => {
try { try {
let testDishArrayCopy = [...testDishArray]; // 配列をコピー let stuffCopy = [...stuff]; // 配列をコピー
testDishArrayCopy.splice(dish_id, 1); stuffCopy.splice(stuff_id, 1);
setTestDishArray(testDishArrayCopy); setStuff(stuff);
// fetchTasks(); // 削除後のタスク一覧を再取得 // fetchTasks(); // 削除後のタスク一覧を再取得
} catch (error) { } catch (error) {
// console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error); // console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error);
@ -133,8 +184,8 @@ const DishList: React.FC = () => {
const fetchTasks = async () => { const fetchTasks = async () => {
try { try {
// const dishlistfirst = await recipeApi.getAllRecipes(); const dishlistfirst = await recipeApi.getAllRecipes();
// setAllDish(dishlistfirst); setAllDish(dishlistfirst);
} catch (error) { } catch (error) {
alert("取得失敗"); alert("取得失敗");
// console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
@ -164,7 +215,7 @@ const DishList: React.FC = () => {
boxShadow: 1, boxShadow: 1,
fontSize: '40px' fontSize: '40px'
}} }}
onClick={() => setOpenDialog(true)} onClick={() => openStuffDialog(allDish.recipeId)}
> >
{allDish.recipeName} {allDish.recipeName}
{/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
@ -207,34 +258,31 @@ const DishList: React.FC = () => {
fullWidth fullWidth
> >
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<DialogTitle sx={{ flexGrow: 1 }}>料理名</DialogTitle> <DialogTitle sx={{ flexGrow: 1 }}>{selectedDishName}</DialogTitle>
</Box> </Box>
<FormGroup> <FormGroup>
{/* <List> */} {/* <List> */}
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} {/* 食材をマップして各食材をリストアイテムとして表示 */}
{test.map((test, index) => ( {stuff.map((stuff, stuffId) => (
<Button onClick={() => setOpenDialog(true)} key = {index}> <ListItem
{test} key = {stuffId}
</Button> sx={{
// <ListItem bgcolor: 'background.paper',
// key={index} mb: 1,
// sx={{ borderRadius: 1,
// bgcolor: 'background.paper', boxShadow: 2,
// mb: 1, }}
// borderRadius: 1, >
// boxShadow: 2, {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
// }} <ListItemText
// > primary={stuff.stuffName}
// {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} //secondary={tobuy.amount}
// <ListItemText primaryTypographyProps={{ fontSize: '40px', margin: '10px' }}
// primary={test} sx={{
// //secondary={tobuy.amount} textDecoration: false ? 'line-through' : 'none',
// primaryTypographyProps={{ fontSize: '40px', margin: '10px' }} }}
// sx={{ />
// textDecoration: false ? 'line-through' : 'none', </ListItem>
// }}
// />
// </ListItem>
))} ))}
{/* </List> */} {/* </List> */}
</FormGroup> </FormGroup>
@ -253,14 +301,14 @@ const DishList: React.FC = () => {
fullWidth fullWidth
> >
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<DialogTitle sx={{ flexGrow: 1 }}>料理名</DialogTitle> <DialogTitle sx={{ flexGrow: 1 }}>{selectedDishName}</DialogTitle>
</Box> </Box>
<FormGroup> <FormGroup>
{/* <List> */} {/* <List> */}
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
{testDishArray.map((test, id) => ( {stuff.map((stuff, stuffId) => (
<ListItem <ListItem
key={id} key={stuffId}
sx={{ sx={{
bgcolor: 'background.paper', bgcolor: 'background.paper',
mb: 1, mb: 1,
@ -275,14 +323,14 @@ const DishList: React.FC = () => {
/> */} /> */}
{/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
<ListItemText <ListItemText
primary={test.recipeName} primary={stuff.stuffName}
// secondary={task.description} // secondary={task.description}
sx={{width: '80%'}} sx={{width: '80%'}}
/> />
{/* 食材の個数を表示 */} {/* 食材の個数を表示 */}
<ListItemText <ListItemText
primary={<Typography style={{textAlign:"center"}}>個数<br /> primary={<Typography style={{textAlign:"center"}}>個数<br />
{test.summary} {stuff.amount}
</Typography> </Typography>
} }
// secondary={task.description} // secondary={task.description}
@ -294,7 +342,7 @@ const DishList: React.FC = () => {
<IconButton <IconButton
edge="end" edge="end"
aria-label="個数を編集" aria-label="個数を編集"
onClick={() => changeSelectedItemAmount(test, test.recipeName, test.summary)} onClick={() => changeSelectedItemAmount(stuff, stuff.stuffName, stuff.amount)}
> >
<ShoppingBasketIcon /> <ShoppingBasketIcon />
</IconButton> </IconButton>
@ -317,7 +365,7 @@ const DishList: React.FC = () => {
<IconButton <IconButton
edge="end" edge="end"
aria-label="delete" aria-label="delete"
onClick={() => handleDeleteStuffTemp(id)} onClick={() => handleDeleteStuffTemp(stuffId)}
> >
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>

Write Preview
Loading…
Cancel
Save