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

frontend/src/components/BuyDialog.tsx

@@ -9,8 +9,19 @@ import {
     Box,
 } from '@mui/material';
 import { NewStock } from '../types/types';
-import DatePicker from 'react-datepicker';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
 
+// 日付をyyyy-MM-dd形式で返す関数
+const formatDateLocal = (date: Date) => {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+// 日本語ロケールを登録
+    registerLocale('ja', ja);
 
 const BuyDialog = ({
     openDialog,
@@ -25,7 +36,7 @@ const BuyDialog = ({
     setNewStock: (tobuy: NewStock) => void,
     onSubmit: () => void,
 }) => {
-
+    
     return (
 
 
@@ -55,7 +66,7 @@ const BuyDialog = ({
                             popperClassName="custom-datepicker-popper"
                             selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
                             onChange={(date) =>
-                                setNewStock({ ...newStock, buyDate: date ? date.toISOString().split('T')[0] : '' })
+                                setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
                             }
                             dateFormat="yyyy/MM/dd"
                             customInput={
@@ -82,7 +93,7 @@ const BuyDialog = ({
                             popperClassName="custom-datepicker-popper"
                             selected={newStock.expDate ? new Date(newStock.expDate) : null}
                             onChange={(date) =>
-                                setNewStock({ ...newStock, expDate: date ? date.toISOString().split('T')[0] : '' })
+                                setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
                             }
                             dateFormat="yyyy/MM/dd"
                             customInput={

frontend/src/pages/StockPage.tsx

@@ -27,21 +27,34 @@ import {
   MenuItem,
 } from '@mui/material';
 import { STOCK_ERRORS } from '../constants/errorMessages';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
+
+// 日付をyyyy-MM-dd形式で返す関数
+const formatDateLocal = (date: Date) => {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
 
 // 新規在庫の初期状態
 const EMPTY_STOCK: Omit<Stock, 'stockId' | 'stuffId'> & { stuffId: number | null } & { newAddition: boolean } = {
   stuffId: null,
   stuffName: '',
-  amount: 0,
+  amount: 1,
   price: 0,
   lastUpdate: '',
-  buyDate: '',
+  buyDate: new Date().toISOString(),
   expDate: '',
   category: '',
   newAddition: false, // 材料を新規作成するか否か
   // shop '',
 }
 
+// 日本語ロケールを登録
+registerLocale('ja', ja);
+
 const StockPage: React.FC = () => {
 
   const [stocks, setStocks] = useState<Stock[]>([]);
@@ -86,6 +99,9 @@ const StockPage: React.FC = () => {
       if (newStock.newAddition) {
         newStock.stuffId = null;
       }
+      if (isNaN(newStock.amount)) return;
+      if (isNaN(newStock.price)) return;
+
       console.log(newStock)
       const today = new Date().toISOString().substring(0, 10);
 
@@ -381,7 +397,7 @@ const StockPage: React.FC = () => {
         在庫一覧
       </Typography>
 
-      <Box sx={{textAlign: 'right'}}>
+      <Box sx={{ textAlign: 'right' }}>
         {/* 在庫の食材追加ボタン */}
         <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加
@@ -453,7 +469,7 @@ const StockPage: React.FC = () => {
                 onChange={(e) => {
                   const value = e.target.value;
                   const parsedValue = parseInt(value, 10); // 数値に変換
-                  if (!isNaN(parsedValue)) {
+                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
                     setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
                   }
                 }}
@@ -470,7 +486,7 @@ const StockPage: React.FC = () => {
                 onChange={(e) => {
                   const value = e.target.value;
                   const parsedValue = parseInt(value, 10); // 数値に変換
-                  if (!isNaN(parsedValue)) {
+                  if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
                     setNewStock({ ...newStock, price: parsedValue }); // number型で保存
                   }
                 }}
@@ -479,23 +495,54 @@ const StockPage: React.FC = () => {
                 inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
               />
 
-              {/* 購入日入力フィールド */}
+              {/* 購入日・消費期限を横並びに */}
-              <TextField
+              <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-                margin="dense"
+                {/* 購入日入力フィールド */}
-                label="購入日(yyyy/MM/dd)"
+                <DatePicker
-                fullWidth
+                  popperClassName="custom-datepicker-popper"
-                value={newStock.buyDate}
+                  selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
-                onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
+                  onChange={(date) =>
-              />
+                    setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
-
+                  }
-              {/* 賞味・消費期限入力フィールド */}
+                  dateFormat="yyyy/MM/dd"
-              <TextField
+                  customInput={
-                margin="dense"
+                    <TextField
-                label="消費・賞味期限(yyyy/MM/dd)"
+                      margin="dense"
-                fullWidth
+                      label="購入日(yyyy/MM/dd)"
-                value={newStock.expDate}
+                      fullWidth
-                onChange={(e) => setNewStock({ ...newStock, expDate: e.target.value })}
+                    />
-              />
+                  }
+                  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"
+                  selected={newStock.expDate ? new Date(newStock.expDate) : null}
+                  onChange={(date) =>
+                    setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
+                  }
+                  dateFormat="yyyy/MM/dd"
+                  customInput={
+                    <TextField
+                      margin="dense"
+                      label="消費・賞味期限(yyyy/MM/dd)"
+                      fullWidth
+                    />
+                  }
+                  isClearable
+                //withPortal
+                />
+              </Box>
             </Box>
           </DialogContent>
           <DialogActions>

frontend/src/pages/TaskListPage.tsx

@@ -65,7 +65,7 @@ const TaskListPage: React.FC = () => {
   
   const [newStock, setNewStock] = useState<NewStock>({
     price: '', // ここではstring
-    buyDate: '',
+    buyDate: new Date().toISOString(),
     expDate: '',
   });