|
|
|
|
@ -7,6 +7,7 @@ import { taskApi } from '../services/api'; |
|
|
|
|
import { |
|
|
|
|
Container, |
|
|
|
|
Typography, |
|
|
|
|
Tooltip, |
|
|
|
|
List, |
|
|
|
|
ListItem, |
|
|
|
|
ListItemText, |
|
|
|
|
@ -22,9 +23,16 @@ import { |
|
|
|
|
Button, |
|
|
|
|
Box, |
|
|
|
|
} from '@mui/material'; |
|
|
|
|
import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-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 { FaCarrot } from "react-icons/fa6"; //エラー起きる いったん保留
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 新規タスクの初期状態
|
|
|
|
|
const EMPTY_TASK = { title: '', description: '', completed: false }; |
|
|
|
|
@ -106,7 +114,7 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
タスク一覧 |
|
|
|
|
</Typography> |
|
|
|
|
{/* タスク一覧表示エリア - 青い背景のコンテナ */} |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px'}}> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}> |
|
|
|
|
<List> |
|
|
|
|
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} |
|
|
|
|
{tasks.map((task) => ( |
|
|
|
|
@ -132,39 +140,77 @@ const TaskListPage: React.FC = () => { |
|
|
|
|
textDecoration: task.completed ? 'line-through' : 'none', |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
{/* タスク削除ボタン */} |
|
|
|
|
{/* 買い物リスト：食材情報記入ボタン */} |
|
|
|
|
<ListItemSecondaryAction> |
|
|
|
|
<IconButton |
|
|
|
|
edge="end" |
|
|
|
|
aria-label="delete" |
|
|
|
|
onClick={() => handleDeleteTask(task.id)} |
|
|
|
|
<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", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<DeleteIcon /> |
|
|
|
|
</IconButton> |
|
|
|
|
|
|
|
|
|
<IconButton |
|
|
|
|
edge="end" |
|
|
|
|
aria-label="delete" |
|
|
|
|
onClick={() => handleDeleteTask(task.id)} |
|
|
|
|
> |
|
|
|
|
<DeleteIcon /> |
|
|
|
|
</IconButton> |
|
|
|
|
</Tooltip> |
|
|
|
|
</ListItemSecondaryAction> |
|
|
|
|
|
|
|
|
|
</ListItem> |
|
|
|
|
))} |
|
|
|
|
</List> |
|
|
|
|
</div> |
|
|
|
|
{/* 新規タスク作成ボタン - 画面下部に固定表示 */} |
|
|
|
|
<Fab |
|
|
|
|
color="primary" |
|
|
|
|
sx={{ position: 'fixed', bottom: 16, left: '50%', transform: 'translateX(-50%)'}} |
|
|
|
|
onClick={() => setOpenDialog(true)} |
|
|
|
|
> |
|
|
|
|
<AddIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
{/* 新規材料作成ボタン - 画面下部に固定表示 */} |
|
|
|
|
<Tooltip title="材料のみ追加"> |
|
|
|
|
<Fab |
|
|
|
|
color="primary" |
|
|
|
|
sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }} |
|
|
|
|
onClick={() => setOpenDialog(true)} |
|
|
|
|
> |
|
|
|
|
<AddIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
</Tooltip> |
|
|
|
|
{/*新規料理追加ボタン - 画面下部に固定表示 */} |
|
|
|
|
<Tooltip title="料理から追加"> |
|
|
|
|
<Fab |
|
|
|
|
color="primary" |
|
|
|
|
sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }} |
|
|
|
|
onClick={() => setOpenDialog(true)} |
|
|
|
|
> |
|
|
|
|
<SoupKitchenIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
</Tooltip> |
|
|
|
|
|
|
|
|
|
{/* 新規タスク作成ダイアログ */} |
|
|
|
|
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}> |
|
|
|
|
<DialogTitle>新規タスク</DialogTitle> |
|
|
|
|
<DialogTitle>材料の追加</DialogTitle> |
|
|
|
|
<DialogContent> |
|
|
|
|
<Box sx={{ pt: 1 }}> |
|
|
|
|
{/* タスクタイトル入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
autoFocus |
|
|
|
|
margin="dense" |
|
|
|
|
label="タイトル" |
|
|
|
|
label="材料名" |
|
|
|
|
fullWidth |
|
|
|
|
value={newTask.title} |
|
|
|
|
onChange={(e) => setNewTask({ ...newTask, title: e.target.value })} |
|
|
|
|
|
Haru.Kusano
5 months ago