diff --git a/frontend/src/pages/AddDishes1.tsx b/frontend/src/pages/AddDishes1.tsx index 3175670..3d9f699 100644 --- a/frontend/src/pages/AddDishes1.tsx +++ b/frontend/src/pages/AddDishes1.tsx @@ -36,11 +36,12 @@ const AddDishes1: React.FC = () => { const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); // フォームのデフォルト送信動作を防止 if (!dish.trim()) { + alert("エラー"); setError(true); } else { alert("送信成功！"); - localStorage.setItem("dishName", dish); - navigate('/add2', { state: dish }); // タスク一覧ページにリダイレクト + localStorage.setItem("dishName", dish); // ローカルストレージにフォームに入力された料理名を保存 + navigate('/add2', { state: dish }); // 料理名から材料名追加ページにリダイレクト } }; @@ -55,7 +56,6 @@ const AddDishes1: React.FC = () => { required // id="username" label="追加・編集したい料理名を入力" - placeholder='ここに料理名を入力' variant="outlined" InputLabelProps={{ style: { fontSize: "40px" }}} style={{width: "80%" }} @@ -71,7 +71,7 @@ const AddDishes1: React.FC = () => {
diff --git a/frontend/src/pages/AddDishes2.tsx b/frontend/src/pages/AddDishes2.tsx index 394b76b..1885317 100644 --- a/frontend/src/pages/AddDishes2.tsx +++ b/frontend/src/pages/AddDishes2.tsx @@ -2,36 +2,253 @@ * テストページコンポーネント * 白紙の状態で表示されるテスト用のページ */ -import React from 'react'; -import { useLocation } from "react-router-dom"; +import React, { useState, useEffect } from 'react'; +import { taskApi } from '../services/api'; import { - AppBar, - Toolbar, - Typography, - Container, - Box, - Button, - Drawer, + Container, + Typography, + Tooltip, List, + ListItem, ListItemText, - ListItemIcon, - ListItemButton, - Divider, + ListItemSecondaryAction, IconButton, + Checkbox, + Fab, + Dialog, + DialogTitle, + DialogContent, + DialogActions, TextField, - Paper, - Alert, - Link, - Grid, + Button, + Box, + 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 { Task } from '../types/types'; +import { TASK_ERRORS } from '../constants/errorMessages'; +import { GENERAL_ERRORS } from '../constants/errorMessages'; +import CategoryDropDown from "../components/CategoryDropDown"; + +// 新規タスクの初期状態 +const EMPTY_TASK = { title: '', amount: 0, completed: false }; + +interface Empty_Task { + title: string; // 食材名 + amount: number; // 食材の個数 + completed: boolean; // +} const AddDishes2: React.FC = () => { const receivedData = localStorage.getItem("dishName"); + // タスク一覧の状態管理 + const [tasks, setTasks] = useState([]); + const [addtasks, setAddTasks] = useState([]); + // エラーメッセージの状態管理 + const [error, setError] = useState(false); + // 新規タスク作成ダイアログの表示状態 + const [openDialog, setOpenDialog] = useState(false); + // 新規タスクの入力内容 + const [newTask, setNewTask] = useState(EMPTY_TASK); + + // const fetchTasks = async () => { + // try { + // const tasks = await taskApi.getTasks(); + // setTasks(tasks); + // } catch (error) { + // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); + // } + // }; + + // コンポーネントマウント時にタスク一覧を取得 + // useEffect(() => { + // fetchTasks(); + // }, []); + /** + * タスクを削除するハンドラー + * 指定されたIDのタスクをAPIを通じて削除 + */ + const handleDeleteTask = async (index: number) => { + try { + let newAddTasks = [...addtasks]; // 配列をコピー + newAddTasks.splice(index, 1); + setAddTasks(newAddTasks); + // fetchTasks(); // 削除後のタスク一覧を再取得 + } catch (error) { + console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error); + } + }; + + /** + * 新規タスクを作成するハンドラー + * 入力されたタスク情報をAPIに送信して新規作成 + * 作成後はダイアログを閉じ、入力内容をリセット + */ + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); // フォームのデフォルト送信動作を防止 + if (addtasks[0] == null) { + setError(true); + alert("食材を追加してください") + } else { + alert("送信成功！"); + // localStorage.setItem("dishName", dish); // ローカルストレージにフォームに入力された料理名を保存 + // navigate('/add2', { state: dish }); // 料理名から材料名追加ページにリダイレクト + } + }; + const handleCreateTask = async () => { + try { + // await taskApi.createTask(newTask); + let newAddTasks = [...addtasks]; // 配列をコピー + newAddTasks.push(newTask); + setAddTasks(newAddTasks); + setOpenDialog(false); // ダイアログを閉じる + setNewTask(EMPTY_TASK); // 入力内容をリセット + // fetchTasks(); // 作成後のタスク一覧を再取得 + } catch (error) { + console.error(`${TASK_ERRORS.CREATE_FAILED}:`, error); + } + }; return ( -
-

追加する料理名

-

{receivedData}

-
+ +
+

追加する料理名

+

{receivedData}

+
+ + {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} + {addtasks.map((task, index) => ( + + {/* タスク完了状態を切り替えるチェックボックス + handleToggleComplete(task.id)} + /> */} + {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} + + {/* 食材の個数を表示 */} + 個数
+ {task.amount} + + } + // secondary={task.description} + primaryTypographyProps={{ align: "right", marginRight: "20%", fontSize: "20px" }} + /> + {/* 買い物リスト：食材情報記入ボタン */} + + + handleDeleteTask(task.id)} + > + + + + {/* 買い物リスト：食材削除ボタン */} + + + handleDeleteTask(index)} + > + + + + + + + ))} + +
+ +
+
+ +
+ {/* 新規タスク作成ダイアログ */} + setOpenDialog(false)} disableScrollLock={true}> + 材料の追加 + + + {/*材料カテゴリ選択 */} + + {/* タスクタイトル入力フィールド */} + setNewTask({ ...newTask, title: e.target.value })} + sx={{ marginBottom: 2 }} + /> + {/* 数量入力フィールド */} + { + const value = e.target.value; + const parsedValue = parseInt(value, 10); // 数値に変換 + if (!isNaN(parsedValue)) { + setNewTask({ ...newTask, amount: parsedValue }); // number型で保存 + } + }} + sx={{ width: "20%" }} + type="number" + inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可 + /> + + + + + + + + ); };