買い物リスト編集機能の追加

frontend/src/pages/TaskListPage.tsx

@@ -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[]>([]);
@@ -86,6 +97,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);
@@ -160,6 +172,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>
@@ -202,9 +246,8 @@ const TaskListPage: React.FC = () => {
                     aria-label="数量変更"
                     sx={{ marginRight: 2 }}
                     onClick={() => {
-                      setOpenInfoDialog(true)
-                      //setSelectedTask(tobuy.tobuyId)
-                      // handleDeleteTask(tobuy.tobuyId)
+                      setOpenAmountDialog(true)
+                      setSelectedEditingTask(tobuy)
                     }}
                   >
                     <EditIcon />
@@ -355,7 +398,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型で保存
                 }
               }}
@@ -422,6 +465,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();
+  },
+
   /**
    * 買うものリストの在庫登録（購入処理）
    */