Merge remote-tracking branch 'origin/feature-frontend-stock-suzuki' into develop-frontend

frontend/src/pages/StockPage.tsx

@@ -188,18 +188,23 @@ const StockPage: React.FC = () => {
   const handleOpenAdd = () => {
     setIsAddOpen(true);
   };
-  /** 削除ダイアログを閉じる */
+  /** 追加ダイアログを閉じる */
   const handleCloseAdd = () => {
     setIsAddOpen(false);
   };
 
   /**
-   * セルを選択する関数. 再度クリックで選択解除
+   * セルを選択する関数. 再度クリックで選択解除 → 行選択ではなくチェックボックスにしたため不要
    */
-  const handleRowClick = (stock: Stock) => {
+  // const handleRowClick = (stock: Stock) => {
+  //   setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
+  // };
+  // チェックボックス切り替え
+  const handleCheckboxChange = (stock: Stock) => {
     setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
   };
 
+
   /** 編集ボタンを押したときにダイアログを開く */
   // ダイアログを開く際に `selectedRow` の値を `editStock` にセット
   const handleOpenEdit = () => {
@@ -210,26 +215,35 @@ const StockPage: React.FC = () => {
       showWarningMessage("編集する食材を選択してください。");
     }
   };
-  // 変更を適用
+  // 変更を適用. 数量に0を入力したとき、削除ダイアログに飛ぶ機能を追加
   const handleApplyChanges = async () => {
-    if (editStock) {
-      try {
-        await handleUpdateStock(
-          editStock.stockId,
-          Number(editStock.amount),
-          Number(editStock.price),
-          editStock.buyDate,
-          editStock.expDate
-        );
-
-        setSelectedRow(editStock); // `selectedRow` を更新して変更を即時反映
-        fetchStocks(); // 最新データを取得してテーブルに反映
-        setSelectedRow(null); // セルの選択を解除
-      } catch (error) {
-        console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error);
+    if (!editStock) return;
+
+    try {
+      if (Number(editStock.amount) === 0) {
+        // 数量が 0 の場合は削除処理へ誘導
+        setIsEditOpen(false);         // 編集ダイアログを閉じる
+        setSelectedRow(editStock);    // 削除対象をセット
+        setIsDeleteOpen(true);        // 削除ダイアログを開く
+        return;
       }
+
+      await handleUpdateStock(
+        editStock.stockId,
+        Number(editStock.amount),
+        Number(editStock.price),
+        editStock.buyDate,
+        editStock.expDate
+      );
+
+      setSelectedRow(editStock); // 更新後に選択行を反映
+      fetchStocks();             // 最新データを取得
+      setSelectedRow(null);      // 選択解除
+    } catch (error) {
+      console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error);
     }
-    setIsEditOpen(false); // ダイアログを閉じる
+
+    setIsEditOpen(false); // 編集ダイアログを閉じる
   };
 
   // ダイアログを開く際に `selectedRow` の値を `editStock` にコピー
@@ -240,15 +254,25 @@ const StockPage: React.FC = () => {
   }, [selectedRow]); // `selectedRow` が変更されたら `editStock` に反映
 
   // テキストフィールドの変更を検知
+  // 負の値を入力できないように書き換え
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+
+    // 数値項目に対して負の値をブロック
+    const numericFields = ['amount', 'price'];
+    if (numericFields.includes(name) && Number(value) < 0) {
+      return; // 無視して更新しない
+    }
+
     if (editStock) {
       setEditStock({
         ...editStock,
-        [event.target.name]: event.target.value,
+        [name]: value,
       });
     }
   };
 
+
   /** 編集ダイアログを閉じる */
   const handleCloseEdit = () => {
     setIsEditOpen(false);
@@ -279,6 +303,7 @@ const StockPage: React.FC = () => {
           <Table>
             <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
               <TableRow>
+                <TableCell padding="checkbox" />
                 <TableCell>食材名</TableCell>
                 <TableCell>数量</TableCell>
                 <TableCell>消費・賞味期限</TableCell>
@@ -286,6 +311,7 @@ const StockPage: React.FC = () => {
             </TableHead>
             <TableBody>
               {filteredStocks.map(stock => {
+                const isSelected = selectedRow?.stockId === stock.stockId;
                 const today = new Date();
                 const expDate = new Date(stock.expDate);
                 const timeDiff = expDate.getTime() - today.getTime();
@@ -294,9 +320,17 @@ const StockPage: React.FC = () => {
                 return (
                   <TableRow
                     key={stock.stockId}
-                    onClick={() => handleRowClick(stock)}
-                    style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
+                    sx={{
+                      backgroundColor: isSelected ? 'yellow' : 'white',
+                    }}
+
                   >
+                    <TableCell padding="checkbox">
+                      <Checkbox
+                        checked={isSelected}
+                        onChange={() => handleCheckboxChange(stock)}
+                      />
+                    </TableCell>
                     <TableCell>{stock.stuffName}</TableCell>
                     <TableCell>{stock.amount}</TableCell>
                     <TableCell
@@ -327,6 +361,13 @@ const StockPage: React.FC = () => {
                   type="number"
                   value={editStock.amount}
                   onChange={handleChange}
+                  inputProps={{ min: 0 }}
+                  onKeyDown={(e) => {
+                    if (e.key === '-' || e.key === 'e' || e.key === 'E') {
+                      e.preventDefault();
+                    }
+                  }}
+
                 />
                 <TextField
                   label="購入価格"
@@ -336,6 +377,13 @@ const StockPage: React.FC = () => {
                   type="number"
                   value={editStock.price}
                   onChange={handleChange}
+                  inputProps={{ min: 0 }}
+                  onKeyDown={(e) => {
+                    if (e.key === '-' || e.key === 'e' || e.key === 'E') {
+                      e.preventDefault();
+                    }
+                  }}
+
                 />
                 {/* 購入日・消費期限を横並びに */}
                 <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
@@ -384,23 +432,6 @@ const StockPage: React.FC = () => {
                     isClearable
                   />
                 </Box>
-                {/* 以前の書き方
-                <TextField
-                  label="購入日 (yyyy-MM-dd)"
-                  fullWidth
-                  margin="normal"
-                  name="buyDate"
-                  value={editStock.buyDate}
-                  onChange={handleChange}
-                />
-                <TextField
-                  label="消費・賞味期限 (yyyy-MM-dd)"
-                  fullWidth
-                  margin="normal"
-                  name="expDate"
-                  value={editStock.expDate}
-                  onChange={handleChange}
-                /> */}
                 <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
                   <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
                     キャンセル
@@ -462,15 +493,29 @@ const StockPage: React.FC = () => {
         在庫一覧
       </Typography>
 
-      <Box sx={{ textAlign: 'right' }}>
-      {/* <Box sx={{ position: 'fixed', top: 16, right: 16, zIndex: 1000, display: 'flex', gap: 2 }}> */}
+      {/* <Box sx={{ textAlign: 'right' }}> */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 1000,
+          backgroundColor: '#f5f5f5',
+          padding: 2,
+          display: 'flex',
+          gap: 0.5,
+          justifyContent: 'flex-end', // ← 右寄せ
+          borderBottom: 'none', // ← これで線を消す
+          boxShadow: 'none',    // ← 影も消す
+        }}
+      >
+
         {/* 在庫の食材追加ボタン */}
         <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加
         </Button>
 
         {/* 新規タスク作成ダイアログ */}
-        <Dialog open={isAddOpen} onClose={() => setIsAddOpen(false)} disableScrollLock={true}>
+        <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
           <Box display="flex" alignItems="center" >
             <DialogTitle sx={{ flexGrow: 1 }}>在庫に食材を追加</DialogTitle>
             <FormGroup row>
@@ -581,15 +626,6 @@ const StockPage: React.FC = () => {
                   isClearable
                 //withPortal // ← 他の文字との重なり対策
                 />
-                {/*
-            <TextField
-              margin="dense"
-              label="購入日(yyyy/MM/dd)"
-              fullWidth
-              value={newStock.buyDate}
-              onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
-            />
-            */}
                 {/* 消費・賞味期限入力フィールド */}
                 <DatePicker
                   popperClassName="custom-datepicker-popper"
@@ -621,7 +657,8 @@ const StockPage: React.FC = () => {
 
         {/* 在庫の食材編集ボタン（全テーブル共通） */}
         <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
-          mt: 3, mb: 2, mr: 1 }}>
+          mt: 3, mb: 2, mr: 1
+        }}>
           詳細・編集
         </Button>