在庫登録

frontend/src/pages/TaskListPage.tsx

@@ -27,7 +27,7 @@ import { Task } from '../types/types';
 import { TASK_ERRORS } from '../constants/errorMessages';
 
 // 新規タスクの初期状態
-const EMPTY_TASK = { title: '', description: '', completed: false };
+const EMPTY_TASK = { title: '', description: '', price: 0, buy_date: new Date(), completed: false };
 
 const TaskListPage: React.FC = () => {
   // タスク一覧の状態管理
@@ -36,6 +36,12 @@ const TaskListPage: React.FC = () => {
   const [openDialog, setOpenDialog] = useState(false);
   // 新規タスクの入力内容
   const [newTask, setNewTask] = useState(EMPTY_TASK);
+  //在庫登録ダイアログの表示状態
+  const [openInfoDialog, setOpenInfoDialog] = useState(false);
+  
+  const [selectedTask, setSelectedTask] = useState<Task>();
+
+
 
   // コンポーネントマウント時にタスク一覧を取得
   useEffect(() => {
@@ -132,8 +138,19 @@ const TaskListPage: React.FC = () => {
                   textDecoration: task.completed ? 'line-through' : 'none',
                 }}
               />             
-              {/* タスク削除ボタン */}
+
               <ListItemSecondaryAction>
+                {/*在庫登録ボタン */}
+                <IconButton
+                  edge="end"
+                  aria-label="stock"
+                  onClick={() => {
+                    setSelectedTask(task);
+                    setOpenInfoDialog(true);}}
+                >
+                <DeleteIcon />
+                </IconButton>  
+                {/* タスク削除ボタン */}
                 <IconButton
                   edge="end"
                   aria-label="delete"
@@ -188,7 +205,50 @@ const TaskListPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {/*在庫登録のための数値入力ダイアログ */}
+      <Dialog open={openInfoDialog} onClose={() => setOpenInfoDialog(false)} disableScrollLock={true}>
+        <DialogTitle>在庫登録</DialogTitle>
+        <DialogContent>
+          <Box sx={{ pt: 1 }}>
+            {/* 価格入力フィールド */}
+            <TextField
+              autoFocus
+              margin="dense"
+              label="価格"
+              fullWidth
+            />
+            {/* 消費・賞味期限入力フィールド */}
+            <TextField
+              margin="dense"
+              label="消費・賞味期限(yyyy/MM/dd)"
+              fullWidth
+              multiline
+            />
+            {/* 購入日入力フィールド */}
+            <TextField
+              margin="dense"
+              label="購入日(yyyy/MM/dd)"
+              fullWidth
+              multiline
+            />
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenInfoDialog(false)}>キャンセル</Button>
+          <Button onClick={() => {
+            if (selectedTask) {
+              handleDeleteTask(selectedTask.id)
+              setOpenInfoDialog(false)
+            }
+            }}
+            variant="contained">
+            登録
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Container>
+    
   );
 };