チェックボックスの作成

frontend/src/pages/TaskListPage.tsx

@@ -22,10 +22,8 @@ import {
   TextField,
   Button,
   Box,
-  MenuItem,
+  FormControlLabel,
-  Select,
+  FormGroup
-  FormControl,
-  InputLabel
 } from '@mui/material';
 import {
   Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
@@ -40,7 +38,7 @@ import CategoryDropDown from "../components/CategoryDropDown";
 
 
 // 新規タスクの初期状態
-const EMPTY_TASK = { id: 0, title: '', amount: 0, completed: false };
+const EMPTY_TASK = { id: 0, stuff_id: 0, stuff_name: '', amount: 0, price: 0, buyDate: new Date('2000-06-22'), expirationDate: new Date('2020-06-22'), newAddition: false, completed: false };
 
 const TaskListPage: React.FC = () => {
   // タスク一覧の状態管理
@@ -104,7 +102,7 @@ const TaskListPage: React.FC = () => {
    */
   const handleCreateTask = async () => {
     try {
-      await taskApi.createTask(newTask);
+      await taskApi.addStuff(newTask);
       setOpenDialog(false); // ダイアログを閉じる
       setNewTask(EMPTY_TASK); // 入力内容をリセット
       fetchTasks(); // 作成後のタスク一覧を再取得
@@ -139,8 +137,8 @@ const TaskListPage: React.FC = () => {
               />
               {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
               <ListItemText
-                primary={task.title}
+                primary={task.stuff_name}
-                secondary={task.description}
+                secondary={task.amount}
                 sx={{
                   textDecoration: task.completed ? 'line-through' : 'none',
                 }}
@@ -208,7 +206,17 @@ const TaskListPage: React.FC = () => {
 
       {/* 新規タスク作成ダイアログ */}
       <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}>
-        <DialogTitle>材料の追加</DialogTitle>
+       <Box display="flex" alignItems="center">
+        <DialogTitle sx={{ flexGrow: 1 }}>材料の追加</DialogTitle>
+        <FormGroup row>
+          
+          <FormControlLabel
+            control={<Checkbox />}
+            label="食材を新規追加"
+            checked={newTask.newAddition}
+          />
+        </FormGroup>
+        </Box>
         <DialogContent>
           <Box sx={{ pt: 1 }}>
             {/*材料カテゴリ選択 */}
@@ -219,8 +227,8 @@ const TaskListPage: React.FC = () => {
               margin="dense"
               label="材料名"
               fullWidth
-              value={newTask.title}
+              value={newTask.stuff_name}
-              onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+              onChange={(e) => setNewTask({ ...newTask, stuff_name: e.target.value })}
               sx={{ marginBottom: 2 }}
             />
             {/* 数量入力フィールド */}

frontend/src/services/api.ts

@@ -121,12 +121,12 @@ export const taskApi = {
   },
 
   /**
-   * 新規タスクを作成
+   * 新規材料を作成
-   * @param task 作成するタスク情報（ID、ユーザーID、作成日時、更新日時は除外）
+   * @param task 作成するタスク情報（価格,作成日時、更新日時は除外）
    * @returns 作成されたタスク情報
    */
-  createTask: async (task: Omit<Task, 'id' | 'userId' | 'createdAt' | 'updatedAt'>): Promise<Task> => {
+  addStuff: async (task: Omit<Task, 'userId'|'createdAt'|'price'|'buyDate'|'expirationDate'|'newAddition' >): Promise<Task> => {
-    const response = await fetch(`${API_BASE_URL}/api/tasks`, {
+    const response = await fetch(`${API_BASE_URL}/api/tubuy/add`, {
       method: 'POST',
       headers: getHeaders(),
       body: JSON.stringify(task),

frontend/src/types/types.ts

@@ -4,12 +4,17 @@
  */
 export interface Task {
   id: number;           // タスクの一意識別子
-  title: string;        // タスクのタイトル
+  stuff_name: string;        // タスクのタイトル
-  description?: string; // タスクの詳細説明（任意）
+  amount: number;       //材料の数量
+  price: number;        //材料の値段
+  buyDate:Date;         //購入日時
+  expirationDate: Date; //賞味・消費期限
+  //description?: string; // タスクの詳細説明（任意）
   completed: boolean;   // タスクの完了状態
   userId: number;       // タスクの所有者ID
   createdAt: string;    // タスク作成日時
-  updatedAt: string;    // タスク更新日時
+  newAddition: boolean  //材料を新規追加するかどうか
+  //updatedAt: string;    // タスク更新日時
 }
 
 /**