Merge remote-tracking branch 'origin/feature-frontend-top' into feature-frontend-styles

frontend/src/pages/TaskListPage.tsx

@@ -32,7 +32,7 @@ import {
 } from '@mui/material';
 import {
   Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
-  SoupKitchen as SoupKitchenIcon
+  SoupKitchen as SoupKitchenIcon, Edit as EditIcon
 } from '@mui/icons-material';
 import { ToBuy, Stuff, /*Stock*/ } from '../types/types';
 import { TOBUY_ERRORS } from '../constants/errorMessages';
@@ -64,9 +64,20 @@ const TaskListPage: React.FC = () => {
 
   //在庫登録ダイアログの表示状態
   const [openInfoDialog, setOpenInfoDialog] = useState(false);
+  //数量変更ダイアログの表示状態
+  const [openAmountDialog, setOpenAmountDialog] = useState(false);
 
   const [selectedTask, setSelectedTask] = useState<ToBuy["tobuyId"]>(0);
 
+  const [selectedEditingTask, setSelectedEditingTask] = useState<ToBuy>({
+  tobuyId: 0,
+  stuffId: 0,
+  stuffName: "",
+  amount: 0,
+  shop: undefined,
+});
+
+
   const [newToBuy, setNewToBuy] = useState(EMPTY_TOBUY);
 
   const [stuffs, setStuffs] = useState<Stuff[]>([]);
@@ -88,6 +99,7 @@ const TaskListPage: React.FC = () => {
   const fetchTasks = async () => {
     try {
       const tobuys = await toBuyApi.getToBuys();
+      console.log(tobuys);
       setToBuys(tobuys);
     } catch (error) {
       console.error(`${TOBUY_ERRORS.FETCH_FAILED}:`, error);
@@ -172,6 +184,38 @@ const TaskListPage: React.FC = () => {
     }
   };
 
+  /**
+   * 買い物リストの数量を変更するハンドラー
+   * 入力されたタスク情報をAPIに送信して変更
+   * 作成後はダイアログを閉じ、入力内容をリセット
+   */
+   const handleUpdateTask = async () => {
+    try {
+      console.log(selectedEditingTask)
+      await toBuyApi.updateToBuy(selectedEditingTask);
+      setOpenAmountDialog(false); // ダイアログを閉じる
+      //setNewToBuy(EMPTY_TOBUY); // 入力内容をリセット
+      fetchTasks(); // 作成後のタスク一覧を再取得
+    } catch (error) {
+      console.error(`${TOBUY_ERRORS.CREATE_FAILED}:`, error);
+    }
+  };
+
+//   /**
+//    * クリックされたタスクの情報を取得するための関数
+//    * @param tobuyId 
+//    * @returns tobuyIdが一致するtoBuy
+//    */
+//   const getToBuyDetails = (tobuyId: number): ToBuy => {
+//     console.log(tobuyId)
+//     const result = tobuys.find((toBuy) => toBuy.tobuyId === tobuyId);
+//     if(result === undefined){
+//       throw new Error(`tobuyId: ${tobuyId} に対応するデータが見つかりません`);
+//     }
+//   return result;
+// };
+
+
   return (
     <Container>
       <Typography variant="h4" component="h1" gutterBottom>
@@ -207,11 +251,25 @@ const TaskListPage: React.FC = () => {
                 <Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
                   {`× ${tobuy.amount}`}
                 </Typography>
+                {/* 買い物リスト：数量変更ボタン */}
+                <Tooltip title="数量変更">
+                  <IconButton
+                    sx={{ marginRight: 0, marginLeft: 0 }}
+                    edge="end"
+                    aria-label="数量変更"
+                    onClick={() => {
+                      setOpenAmountDialog(true)
+                      setSelectedEditingTask(tobuy)
+                    }}
+                  >
+                    <EditIcon />
+                  </IconButton>
+                </Tooltip>
+                {/* 買い物リスト：食材情報記入ボタン */}
                 <Tooltip title="購入情報を記入">
-                  {/* デフォルトの marginRightの設定（マイナス）を上書き */}
                   <IconButton
                     color="primary"
-                    sx={{ marginRight: 0}}
+                    sx={{ marginRight: 0, marginLeft: 0 }}
                     edge="end"
                     aria-label="購入情報を記入"
                     onClick={() => {
@@ -223,6 +281,7 @@ const TaskListPage: React.FC = () => {
                     <ShoppingBasketIcon />
                   </IconButton>
                 </Tooltip>
+
                 {/* 買い物リスト：食材削除ボタン */}
                 <Tooltip title="項目を削除"
                   componentsProps={{
@@ -240,6 +299,7 @@ const TaskListPage: React.FC = () => {
 
                   <IconButton
                     edge="end"
+                    sx={{ marginLeft: 3 }}
                     aria-label="delete"
                     onClick={() => handleDeleteTask(tobuy.tobuyId)}
                   >
@@ -253,31 +313,37 @@ const TaskListPage: React.FC = () => {
         </List>
       </div>
       {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Tooltip title="材料のみ追加">
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
-        <Fab
+        <Typography variant="caption" color="textSecondary">
-          color="primary"
+          材料のみ追加
-          sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
+        </Typography>
-          onClick={() => setOpenDialog(true)}
+      </Box>
-        >
+      <Fab
-          <AddIcon />
+        color="primary"
-        </Fab>
+        sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
-      </Tooltip>
+        onClick={() => setOpenDialog(true)}
-      {/*新規料理追加ボタン - 画面下部に固定表示 */}
+      >
-      <Tooltip title="料理から追加">
+        <AddIcon />
-        <Fab
+      </Fab>
-          color="primary"
-          sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
-          onClick={() => {
-            setOpenDialog(true);
-            //handleNavigate('/AddDishies1');
-          }}
-        //selected={isSelected('/test')}
 
+      {/*新規料理追加ボタン - 画面下部に固定表示 */}
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', transform: 'translateX(-50%)' }}>
+        <Typography variant="caption" color="textSecondary">
+          料理から追加
+        </Typography>
+      </Box>
+      <Fab
+        color="primary"
+        sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
+        onClick={() => {
+          setOpenDialog(true);
+          //handleNavigate('/AddDishies1');
+        }}
+      //selected={isSelected('/test')}
+      >
+        <SoupKitchenIcon />
+      </Fab>
 
-        >
-          <SoupKitchenIcon />
-        </Fab>
-      </Tooltip>
 
       {/* 新規タスク作成ダイアログ */}
       <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}>
@@ -345,7 +411,7 @@ const TaskListPage: React.FC = () => {
               onChange={(e) => {
                 const value = e.target.value;
                 const parsedValue = parseInt(value, 10); // 数値に変換
-                if (!isNaN(parsedValue)) {
+                if (!isNaN(parsedValue) && parsedValue >= 0) { //負数除外
                   setNewToBuy({ ...newToBuy, amount: parsedValue }); // number型で保存
                 }
               }}
@@ -423,6 +489,52 @@ const TaskListPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {/* 数量変更ダイアログ */}
+      <Dialog open={openAmountDialog} onClose={() => setOpenAmountDialog(false)} disableScrollLock={true}>
+        <Box display="flex" alignItems="center">
+          <DialogTitle sx={{ flexGrow: 1 }}>数量の変更</DialogTitle>
+        </Box>
+        <DialogContent>
+          <Box sx={{ pt: 1 }}>
+       
+            {/* 材料名表示 */}
+            <TextField
+              autoFocus
+              margin="dense"
+              label="材料名"
+              fullWidth
+              value={selectedEditingTask.stuffName}
+              disabled
+              sx={{ marginBottom: 2 }}
+            />
+            {/* 数量入力フィールド */}
+            <TextField
+              margin="dense"
+              label="数量"
+              fullWidth
+              value={selectedEditingTask.amount}
+              onChange={(e) => {
+                const value = e.target.value;
+                const parsedValue = parseInt(value, 10); // 数値に変換
+                if (!isNaN(parsedValue) && parsedValue >= 0) { //負数除外
+                  setSelectedEditingTask({ ...selectedEditingTask, amount: parsedValue }); // number型で保存
+                }
+              }}
+              sx={{ width: "20%" }}
+              type="number"
+              inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+
+            />
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenAmountDialog(false)}>キャンセル</Button>
+          <Button onClick={handleUpdateTask} variant="contained">
+            確定
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Container>
 
   );

frontend/src/services/api.ts

@@ -109,7 +109,7 @@ export const toBuyApi = {
    * @param tobuy 作成する材料情報
    * @returns 作成された材料情報
    */
-  addToBuy: async (tobuy: Omit<ToBuy, 'stuffId' | 'tobuyId'> & { stuffId: number | null, category: string }): Promise<any> => {
+  addToBuy:async (tobuy: Omit<ToBuy, 'stuffId' | 'tobuyId'> & { stuffId: number | null, category: string }): Promise<any> => {
     const response = await fetch(`${API_BASE_URL}/api/tobuy/add`, {
       method: 'POST',
       headers: getHeaders(),
@@ -154,6 +154,25 @@ export const toBuyApi = {
     // }
   },
 
+  /**
+   * 買うものリストの変更
+   * @param tobuy 変更する材料情報
+   * @returns 変更された材料情報
+   */
+  updateToBuy: async (tobuy:ToBuy): Promise<any> => {
+    const response = await fetch(`${API_BASE_URL}/api/tobuy/update`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(tobuy),
+    });
+
+    if (!response.ok) {
+      throw new Error(TOBUY_ERRORS.CREATE_FAILED);
+    }
+
+    return response.json();
+  },
+
   /**
    * 買うものリストの在庫登録（購入処理）
    */