・編集で数量0の時の削除メッセージ

・追加ダイアログの修正

frontend/src/pages/StockPage.tsx

@@ -231,7 +231,7 @@ const StockPage: React.FC = () => {
   const handleApplyChanges = async () => {
     if (!editStock) return;
 
-    const {stockId, amount, buyAmount, price, shop, buyDate, expDate, lastUpdate} = editStock;
+    const { stockId, amount, buyAmount, price, shop, buyDate, expDate, lastUpdate } = editStock;
     // 購入日が消費・賞味期限より未来の場合はエラー表示
     const buy = new Date(buyDate);
     const exp = new Date(expDate);
@@ -252,18 +252,23 @@ const StockPage: React.FC = () => {
     }
 
     try {
-      if (amount === 0) {
+      // Number型に変換した変数を用意
+      const numericAmount = Number(amount);
+      const numericBuyAmount = Number(buyAmount);
+      const numericPrice = Number(price);
+
+      if (numericAmount === 0) {
         // 数量が 0 の場合は削除処理へ誘導
         // setIsEditOpen(false);         // 編集ダイアログを閉じる
         setSelectedRow(editStock);    // 削除対象をセット
         setIsDeleteOpen(true);        // 削除ダイアログを開く
         return;
       }
-      if (!amount || !buyAmount) {
+      if (!numericAmount || !numericBuyAmount) {
         showErrorMessage(GENERAL_ERRORS.INVALID_AMOUNT);
         return;
       }
-      if (!price) {
+      if (!numericPrice) {
         showErrorMessage(GENERAL_ERRORS.INVALID_PRICE);
         return;
       }
@@ -327,6 +332,7 @@ const StockPage: React.FC = () => {
   /** 編集ダイアログを閉じる */
   const handleCloseEdit = () => {
     setIsEditOpen(false);
+    setSelectedRow(null);
   };
 
   /** 削除ボタンを押したときにダイアログを開く */
@@ -409,9 +415,10 @@ const StockPage: React.FC = () => {
             {editStock && (
               <>
 
-                {/* 材料名 */}
+                {/* 材料の詳細 */}
                 <Typography variant="h4">【{editStock.stuffName}】</Typography>
 
+                {/* 現在の数量フィールド */}
                 <TextField
                   label="現在の数量"
                   fullWidth
@@ -428,8 +435,9 @@ const StockPage: React.FC = () => {
                   }}
                 />
 
+                {/* 購入時数量フィールド */}
                 <TextField
-                  label="購入時数量"
+                  label="購入時の数量"
                   fullWidth
                   margin="normal"
                   name="buyAmount"
@@ -444,6 +452,7 @@ const StockPage: React.FC = () => {
                   }}
                 />
 
+                {/* 購入価格フィールド */}
                 <TextField
                   label="購入価格"
                   fullWidth
@@ -460,6 +469,7 @@ const StockPage: React.FC = () => {
                   }}
                 />
 
+                {/* 購入店舗フィールド */}
                 <TextField
                   label="購入店舗"
                   fullWidth
@@ -472,7 +482,7 @@ const StockPage: React.FC = () => {
 
                 {/* 購入日・消費期限を横並びに */}
                 <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-                  {/* 購入日 */}
+                  {/* 購入日フィールド */}
                   <DatePicker
                     selected={editStock.buyDate ? new Date(editStock.buyDate) : null}
                     onChange={(date) => {
@@ -494,7 +504,7 @@ const StockPage: React.FC = () => {
                     }
                     isClearable
                   />
-                  {/* 消費・賞味期限 */}
+                  {/* 消費・賞味期限フィールド */}
                   <DatePicker
                     selected={editStock.expDate ? new Date(editStock.expDate) : null}
                     onChange={(date) => {
@@ -604,7 +614,7 @@ const StockPage: React.FC = () => {
         {/* 在庫の食材追加ボタン */}
         <Box sx={{
           display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
-          mr: 2,
+          mr: 2
         }}>
           <Typography variant="caption" color="textSecondary">
             食材の追加
@@ -675,10 +685,10 @@ const StockPage: React.FC = () => {
                 onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
                 sx={{ marginBottom: 2 }}
               />}
-              {/* 数量入力フィールド */}
+              {/* 現在の数量入力フィールド */}
               <TextField
                 margin="dense"
-                label="数量"
+                label="現在の数量"
                 fullWidth
                 value={newStock.amount}
                 onChange={(e) => {
@@ -692,6 +702,23 @@ const StockPage: React.FC = () => {
                 type="number"
                 inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
               />
+              {/* 購入時数量入力フィールド */}
+              <TextField
+                margin="dense"
+                label="購入時の数量"
+                fullWidth
+                value={newStock.buyAmount}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  const parsedValue = parseInt(value, 10); // 数値に変換
+                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
+                    setNewStock({ ...newStock, buyAmount: parsedValue }); // number型で保存
+                  }
+                }}
+                // sx={{ width: "50%" }}
+                type="number"
+                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+              />
               {/* 購入価格入力フィールド */}
               <TextField
                 margin="dense"
@@ -709,7 +736,14 @@ const StockPage: React.FC = () => {
                 type="number"
                 inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
               />
-
+              {/* 購入店舗入力フィールド */}
+              <TextField
+                margin="dense"
+                label="購入店舗"
+                fullWidth
+                value={newStock.shop}
+                onChange={(e) => setNewStock({...newStock, shop: e.target.value})}
+              />
               {/* 購入日・消費期限を横並びに */}
               <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
                 {/* 購入日入力フィールド */}