From c2f4bf0f528b81289e3a0cead9e89bcf008c5ec3 Mon Sep 17 00:00:00 2001 From: "Yuna.Suzuki" Date: Thu, 5 Jun 2025 13:36:12 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=E5=9C=A8=E5=BA=AB=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E3=83=AA=E3=82=B9=E3=83=88=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 12 +++++ frontend/src/components/Layout.tsx | 31 ++++++++---- frontend/src/pages/StockList.tsx | 75 ++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+), 10 deletions(-) create mode 100644 frontend/src/pages/StockList.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7141e87..ad7a883 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -9,6 +9,7 @@ import Layout from './components/Layout'; import LoginPage from './pages/LoginPage'; import RegisterPage from './pages/RegisterPage'; import TaskListPage from './pages/TaskListPage'; +import StockList from './pages/StockList'; import './App.css'; /** @@ -92,6 +93,17 @@ const App: React.FC = () => { } /> + + {/* 在庫リストへのルートを追加 */} + + + + } + /> + diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index e8696a9..796dad0 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -3,13 +3,13 @@ * ヘッダー（AppBar）とメインコンテンツ領域を含む基本的なページ構造を定義 */ import React, { useState } from 'react'; -import { - AppBar, - Toolbar, - Typography, - Container, - Box, - Button, +import { + AppBar, + Toolbar, + Typography, + Container, + Box, + Button, Drawer, List, ListItemText, @@ -18,9 +18,10 @@ import { Divider, IconButton } from '@mui/material'; -import { +import { Menu as MenuIcon, ListAlt as ListAltIcon, + Science as ScienceIcon, // 鈴木 } from '@mui/icons-material'; import { useNavigate, Outlet, useLocation } from 'react-router-dom'; @@ -91,13 +92,23 @@ const Layout: React.FC = () => { role="presentation" > - handleNavigate('/tasks')} + handleNavigate('/tasks')} selected={isSelected('/tasks')} > + + {/* 在庫リストへのリンクを追加 */} + handleNavigate('/stock')} + selected={isSelected('/stock')} + > + + + + diff --git a/frontend/src/pages/StockList.tsx b/frontend/src/pages/StockList.tsx new file mode 100644 index 0000000..b269649 --- /dev/null +++ b/frontend/src/pages/StockList.tsx @@ -0,0 +1,75 @@ +/** + * テストページコンポーネント + * 白紙の状態で表示されるテスト用のページ + */ +import React from 'react'; +import { + Container, + Typography, + Button +} from '@mui/material'; + +const StockPage: React.FC = () => { + return ( + + + 在庫一覧 + + + {/* タスク編集ボタン */} + + + {/* タスク削除ボタン */} + + + + 乳製品 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 肉・魚 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 野菜 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 調味料 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + その他 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + ); +}; + +export default StockPage; \ No newline at end of file From d0632e0dffcbabb6bfa1e8dedee0e449354a6f2b Mon Sep 17 00:00:00 2001 From: "Masaharu.Kato" Date: Thu, 5 Jun 2025 13:52:19 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=E5=9C=A8=E5=BA=AB=E7=AE=A1=E7=90=86API?= =?UTF-8?q?=EF=BC=88=E4=BB=AE=EF=BC=89=E3=81=AE=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 11 ---- frontend/src/pages/StockList.tsx | 75 ---------------------- frontend/src/pages/StockPage.tsx | 107 +++++++++++++++++++++++++++++-- frontend/src/services/api.ts | 54 +++++++++++++++- frontend/src/types/types.ts | 16 +++++ 5 files changed, 167 insertions(+), 96 deletions(-) delete mode 100644 frontend/src/pages/StockList.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7395453..82bce23 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -10,7 +10,6 @@ import LoginPage from './pages/LoginPage'; import RegisterPage from './pages/RegisterPage'; import TaskListPage from './pages/TaskListPage'; import StockPage from './pages/StockPage'; -import StockList from './pages/StockList'; import './App.css'; /** @@ -95,16 +94,6 @@ const App: React.FC = () => { } /> - {/* 在庫リストへのルートを追加 */} - - - - } - /> - }> {/* ルートパスへのアクセスはタスク一覧にリダイレクト */} diff --git a/frontend/src/pages/StockList.tsx b/frontend/src/pages/StockList.tsx deleted file mode 100644 index b269649..0000000 --- a/frontend/src/pages/StockList.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/** - * テストページコンポーネント - * 白紙の状態で表示されるテスト用のページ - */ -import React from 'react'; -import { - Container, - Typography, - Button -} from '@mui/material'; - -const StockPage: React.FC = () => { - return ( - - - 在庫一覧 - - - {/* タスク編集ボタン */} - - - {/* タスク削除ボタン */} - - - - 乳製品 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - 肉・魚 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - 野菜 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - 調味料 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - その他 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - ); -}; - -export default StockPage; \ No newline at end of file diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index 8de8bd9..2b51066 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -2,15 +2,108 @@ * テストページコンポーネント * 白紙の状態で表示されるテスト用のページ */ -import React from 'react'; -import { Box } from '@mui/material'; +import React, { useState, useEffect } from 'react'; +import { stockApi } from '../services/api'; +import { Stock } from '../types/types'; +import { + Container, + Typography, + Button, + List, + ListItem, +} from '@mui/material'; +import { TASK_ERRORS } from '../constants/errorMessages'; + const StockPage: React.FC = () => { - return ( - - {/* 白紙のページ - 何も表示しない */} - - ); + + const [stocks, setStocks] = useState([]); + + // コンポーネントマウント時にタスク一覧を取得 + useEffect(() => { + fetchStocks(); + }, []); + + /** + * APIからタスク一覧を取得する関数 + * 取得したタスクをstate(tasks)に設定 + */ + const fetchStocks = async () => { + try { + const stocks = await stockApi.getStocks(); + setStocks(stocks.stock_array); + } catch (error) { + console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); + } + }; + + return ( + + + 在庫一覧 + + + {/* タスク編集ボタン */} + + + {/* タスク削除ボタン */} + + + + {stocks.map((stock) => ( + {stock.stuff_name} + ))} + + + + + 乳製品 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 肉・魚 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 野菜 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 調味料 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + その他 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + ); }; export default StockPage; \ No newline at end of file diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index 4919343..d7b6753 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -3,7 +3,7 @@ * バックエンドAPIとの通信を担当するモジュール * 認証、タスク管理などの機能を提供 */ -import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy } from '../types/types'; +import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy, Stock } from '../types/types'; import { AUTH_ERRORS, TASK_ERRORS } from '../constants/errorMessages'; // APIのベースURL - 環境変数から取得するか、デフォルト値を使用 @@ -89,8 +89,8 @@ export const authApi = { */ export const toBuyApi = { /** - * 全タスクを取得 - * @returns タスク一覧 + * 全買うものリストを取得 + * @returns 買うものリスト一覧 */ getToBuys: async (): Promise<{ "tobuy_array": ToBuy[] }> => { // const response = await fetch(`${API_BASE_URL}/api/tobuy/get`, { @@ -172,6 +172,54 @@ export const toBuyApi = { } +export const stockApi = { + /** + * 全在庫リストを取得 + * @returns 買在庫リスト一覧 + */ + getStocks: async (): Promise<{ "stock_array": Stock[] }> => { + // const response = await fetch(`${API_BASE_URL}/api/tobuy/get`, { + // headers: getHeaders(), // 認証トークンを含むヘッダー + // }); + + // if (!response.ok) { + // throw new Error(TASK_ERRORS.FETCH_FAILED); + // } + + // return response.json(); + + return { + "stock_array": [ + { + "stock_id": 1, + "stuff_id": 10, + "stuff_name": "豚肉", + "amount": 100, + "price": 200, + "buy_date": "2025-05-18T09:00:00.000Z", + "last_update": "2025-05-18T09:00:00.000Z", + "exp_date": "2025-05-19T10:15:00.000Z", + "category": "肉" + }, + { + "stock_id": 2, + "stuff_id": 1, + "stuff_name": "トマト", + "amount": 10, + "price": 200, + "buy_date": "2025-05-18T09:00:00.000Z", + "last_update": "2025-05-18T09:00:00.000Z", + "exp_date": "2025-05-19T10:15:00.000Z", + "category": "野菜" + } + ] + } + + + }, +} + + /** * (サンプル，実際には不要) * タスク管理関連のAPI機能を提供するオブジェクト diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts index 2304c92..898afd0 100644 --- a/frontend/src/types/types.ts +++ b/frontend/src/types/types.ts @@ -24,6 +24,22 @@ export interface ToBuy { shop?: string, } +/** + * タスク情報を表す型定義 + * タスクの基本情報と状態を管理 + */ +export interface Stock { + stock_id: number, + stuff_id: number, + stuff_name: string, + amount: number, + price: number, + buy_date: string, + last_update: string, + exp_date: string, + category: string, +} + /** * ユーザー情報を表す型定義 * ユーザーの基本情報を管理 From e163415c469e111df45e988dec231e35576ed2bc Mon Sep 17 00:00:00 2001 From: "Masaharu.Kato" Date: Thu, 5 Jun 2025 15:17:14 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=E3=82=AB=E3=83=86=E3=82=B4=E3=83=AA?= =?UTF-8?q?=E5=88=A5=E3=81=AE=E4=BB=AEAPI=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/services/api.ts | 23 +++++++++++++++++++++-- frontend/src/types/types.ts | 6 ++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index 854e67f..658bee1 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -3,7 +3,7 @@ * バックエンドAPIとの通信を担当するモジュール * 認証、タスク管理などの機能を提供 */ -import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy } from '../types/types'; +import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy, Stuff } from '../types/types'; import { AUTH_ERRORS, TASK_ERRORS } from '../constants/errorMessages'; // APIのベースURL - 環境変数から取得するか、デフォルト値を使用 @@ -171,6 +171,25 @@ export const toBuyApi = { }, } +export const stuffApi = { + getStuffs: async (category: string): Promise<{ stuff_array: Stuff[] }> => { + return { + "stuff_array": [ + { + "stuff_id": 6, + "stuff_name": "鯖", + "category": "魚" + }, + { + "stuff_id": 10, + "stuff_name": "鯛", + "category": "魚", + } + ] + } + } +} + /** * (サンプル，実際には不要) @@ -216,7 +235,7 @@ export const taskApi = { * @param task 作成するタスク情報（価格,作成日時、更新日時は除外） * @returns 作成されたタスク情報 */ - addStuff: async (task: Omit): Promise => { + addStuff: async (task: Omit): Promise => { const response = await fetch(`${API_BASE_URL}/api/tubuy/add`, { method: 'POST', headers: getHeaders(), diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts index 42b1cfe..8d6a10c 100644 --- a/frontend/src/types/types.ts +++ b/frontend/src/types/types.ts @@ -29,6 +29,12 @@ export interface ToBuy { shop?: string, } +export interface Stuff { + stuff_id: number, + stuff_name: string, + category: string, +} + /** * ユーザー情報を表す型定義 * ユーザーの基本情報を管理 From cca656158ad7601fcb7515207ebc6ee85b832ce9 Mon Sep 17 00:00:00 2001 From: "Masaharu.Kato" Date: Thu, 5 Jun 2025 15:29:18 +0900 Subject: [PATCH 4/8] make test case --- frontend/src/services/api.ts | 47 +++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index 658bee1..aa0a620 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -173,19 +173,42 @@ export const toBuyApi = { export const stuffApi = { getStuffs: async (category: string): Promise<{ stuff_array: Stuff[] }> => { + const data = [ + { "stuff_id": 1, "stuff_name": "牛乳", "category": "乳製品" }, + { "stuff_id": 2, "stuff_name": "ヨーグルト", "category": "乳製品" }, + { "stuff_id": 3, "stuff_name": "チーズ", "category": "乳製品" }, + { "stuff_id": 4, "stuff_name": "バター", "category": "乳製品" }, + { "stuff_id": 5, "stuff_name": "生クリーム", "category": "乳製品" }, + + { "stuff_id": 6, "stuff_name": "鮭", "category": "魚・肉" }, + { "stuff_id": 7, "stuff_name": "鶏むね肉", "category": "魚・肉" }, + { "stuff_id": 8, "stuff_name": "豚バラ肉", "category": "魚・肉" }, + { "stuff_id": 9, "stuff_name": "牛ひき肉", "category": "魚・肉" }, + { "stuff_id": 10, "stuff_name": "まぐろ", "category": "魚・肉" }, + + { "stuff_id": 11, "stuff_name": "にんじん", "category": "野菜" }, + { "stuff_id": 12, "stuff_name": "キャベツ", "category": "野菜" }, + { "stuff_id": 13, "stuff_name": "ほうれん草", "category": "野菜" }, + { "stuff_id": 14, "stuff_name": "玉ねぎ", "category": "野菜" }, + { "stuff_id": 15, "stuff_name": "ピーマン", "category": "野菜" }, + + { "stuff_id": 16, "stuff_name": "醤油", "category": "調味料" }, + { "stuff_id": 17, "stuff_name": "味噌", "category": "調味料" }, + { "stuff_id": 18, "stuff_name": "塩", "category": "調味料" }, + { "stuff_id": 19, "stuff_name": "砂糖", "category": "調味料" }, + { "stuff_id": 20, "stuff_name": "酢", "category": "調味料" }, + + { "stuff_id": 21, "stuff_name": "米", "category": "その他" }, + { "stuff_id": 22, "stuff_name": "パスタ", "category": "その他" }, + { "stuff_id": 23, "stuff_name": "小麦粉", "category": "その他" }, + { "stuff_id": 24, "stuff_name": "卵", "category": "その他" }, + { "stuff_id": 25, "stuff_name": "豆腐", "category": "その他" } + ] + + const filtered = data.filter(stuff => stuff.category == category) + return { - "stuff_array": [ - { - "stuff_id": 6, - "stuff_name": "鯖", - "category": "魚" - }, - { - "stuff_id": 10, - "stuff_name": "鯛", - "category": "魚", - } - ] + "stuff_array": filtered } } } From 5a3c49176a9ce703714db2ddd9241088d11489ce Mon Sep 17 00:00:00 2001 From: "Haru.Kusano" Date: Thu, 5 Jun 2025 15:30:41 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=E4=BB=AE=EF=BC=9A=E6=9D=90=E6=96=99?= =?UTF-8?q?=E3=83=97=E3=83=AB=E3=83=80=E3=82=A6=E3=83=B3=E3=81=AE=E4=BD=9C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/StuffNameDropDown.tsx | 16 ++++++++++++++++ frontend/src/pages/TaskListPage.tsx | 13 +++++++------ 2 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/StuffNameDropDown.tsx diff --git a/frontend/src/components/StuffNameDropDown.tsx b/frontend/src/components/StuffNameDropDown.tsx new file mode 100644 index 0000000..32b613a --- /dev/null +++ b/frontend/src/components/StuffNameDropDown.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { toBuyApi } from '../services/api'; +import { FormControl, InputLabel, Select, MenuItem } from "@mui/material"; + +const StuffNameDropDown = ({ value, onChange }) => { + return ( + + 材料を選択 + + + ); +}; + +export default StuffNameDropDown; \ No newline at end of file diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx index 80ef225..d5d6aab 100644 --- a/frontend/src/pages/TaskListPage.tsx +++ b/frontend/src/pages/TaskListPage.tsx @@ -44,7 +44,7 @@ const EMPTY_TASK: Omit & {category: string} & {newAddition: b amount: 0, shop: '', category: '', - newAddition: false + newAddition: false, } const TaskListPage: React.FC = () => { @@ -52,12 +52,11 @@ const TaskListPage: React.FC = () => { const [tobuys, setToBuys] = useState([]); // 新規タスク作成ダイアログの表示状態 const [openDialog, setOpenDialog] = useState(false); - // 新規タスクの入力内容 - const [newTask, setNewTask] = useState(EMPTY_TASK); + //在庫登録ダイアログの表示状態 const [openInfoDialog, setOpenInfoDialog] = useState(false); - const [selectedTask, setSelectedTask] = useState(); + const [selectedTask, setSelectedTask] = useState(); const [newToBuy, setNewToBuy] = useState(EMPTY_TASK); @@ -165,6 +164,7 @@ const TaskListPage: React.FC = () => { setOpenInfoDialog(true)} //onClick={() => handleDeleteTask(task.id)} > @@ -228,7 +228,8 @@ const TaskListPage: React.FC = () => { } label="食材を新規追加" - checked={newTask.newAddition} + checked={newToBuy.newAddition} + onChange={(e) => setNewToBuy({ ...newToBuy, newAddition:(e.target as HTMLInputElement).checked })} /> @@ -306,7 +307,7 @@ const TaskListPage: React.FC = () => { - + ); }; diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index aa0a620..a77a601 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -128,7 +128,7 @@ export const toBuyApi = { * @param tobuy 作成する材料情報 * @returns 作成された材料情報 */ - addToBuy: async (tobuy: Omit & { category: string }): Promise => { + addToBuy: async (tobuy: Omit & { stuff_id: number | null, category: string }): Promise => { // const response = await fetch(`${API_BASE_URL}/api/tasks`, { // method: 'POST', // headers: getHeaders(), From 76370a694fce7e425799bfaa6250fb33dbf3bd5a Mon Sep 17 00:00:00 2001 From: "Yuna.Suzuki" Date: Thu, 5 Jun 2025 16:16:23 +0900 Subject: [PATCH 7/8] =?UTF-8?q?Stockpage=E3=82=92=E7=B7=A8=E9=9B=86?= =?UTF-8?q?=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/StockPage.tsx | 217 +++++++++++++++++++++++++++---- 1 file changed, 191 insertions(+), 26 deletions(-) diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index 2b51066..e305d3b 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -5,19 +5,27 @@ import React, { useState, useEffect } from 'react'; import { stockApi } from '../services/api'; import { Stock } from '../types/types'; +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material"; import { Container, Typography, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + TextField, Button, - List, - ListItem, + Box, + } from '@mui/material'; import { TASK_ERRORS } from '../constants/errorMessages'; - +import CategoryDropDown from "../components/CategoryDropDown"; const StockPage: React.FC = () => { const [stocks, setStocks] = useState([]); + // 在庫編集ダイアログの表示状態 + const [openDialog, setOpenDialog] = useState(false); // コンポーネントマウント時にタスク一覧を取得 useEffect(() => { @@ -29,13 +37,32 @@ const StockPage: React.FC = () => { * 取得したタスクをstate(tasks)に設定 */ const fetchStocks = async () => { - try { - const stocks = await stockApi.getStocks(); - setStocks(stocks.stock_array); - } catch (error) { - console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); - } + try { + const stocks = await stockApi.getStocks(); + setStocks(stocks.stock_array); + } catch (error) { + console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); + } + }; + + /** + * 文字列(ISO 8601形式)をyyyy/MM/ddに変換する関数 + */ + const formatDate = (isoString: string): string => { + const date = new Date(isoString); + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月は0始まりなので+1 + const day = date.getDate().toString().padStart(2, "0"); + return `${year}/${month}/${day}`; }; + /* Date型をyyyy/MM/ddに変換する関数 + const formatDate = (date: Date): string => { + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月は0始まりなので+1 + const day = date.getDate().toString().padStart(2, "0"); + return `${year}/${month}/${day}`; + }; + */ return ( @@ -61,46 +88,184 @@ const StockPage: React.FC = () => { 削除 - - {stocks.map((stock) => ( - {stock.stuff_name} - ))} - - - 乳製品 - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
+ {/* 乳製品一覧表示エリア - 青い背景のコンテナ */} +
+ + {/* 要素が無かったら表示しない */} + {stocks.filter(stock => stock.category === "乳製品").length === 0 ? null : ( + + + + + 食材名 + 数量 + 購入価格 + 賞味・消費期限 + 購入日 + + + + {stocks + .filter(stock => stock.category == "乳製品") // 乳製品だけ抽出 + .map(stock => ( + + {stock.stuff_name} + {stock.amount} + {stock.price} + {formatDate(stock.exp_date)} + {formatDate(stock.buy_date)} + + ))} + +
+ + )}
肉・魚 - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
+ {/* 肉・魚一覧表示エリア - 青い背景のコンテナ */} +
+ + {stocks.filter(stock => stock.category == "肉" || stock.category == "魚").length === 0 ? null : ( + + + + + 食材名 + 数量 + 購入価格 + 賞味・消費期限 + 購入日 + + + + {stocks + .filter(stock => stock.category == "肉" || stock.category == "魚") // 肉と魚だけ抽出 + .map(stock => ( + + {stock.stuff_name} + {stock.amount} + {stock.price} + {formatDate(stock.exp_date)} + {formatDate(stock.buy_date)} + + ))} + +
+ + )} +
野菜 - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
+ {/* 野菜一覧表示エリア - 青い背景のコンテナ */} +
+ {stocks.filter(stock => stock.category === "野菜").length === 0 ? null : ( + + + + + 食材名 + 数量 + 購入価格 + 賞味・消費期限 + 購入日 + + + + {stocks + .filter(stock => stock.category == "野菜") // 野菜だけ抽出 + .map(stock => ( + + {stock.stuff_name} + {stock.amount} + {stock.price} + {formatDate(stock.exp_date)} + {formatDate(stock.buy_date)} + + ))} + +
+ + )}
調味料 - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
+ {/* 調味料一覧表示エリア - 青い背景のコンテナ */} +
+ {stocks.filter(stock => stock.category === "調味料").length === 0 ? null : ( + + + + + 食材名 + 数量 + 購入価格 + 賞味・消費期限 + 購入日 + + + + {stocks + .filter(stock => stock.category == "調味料") // 調味料だけ抽出 + .map(stock => ( + + {stock.stuff_name} + {stock.amount} + {stock.price} + {formatDate(stock.exp_date)} + {formatDate(stock.buy_date)} + + ))} + +
+ + )}
その他 - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
+ {/* その他一覧表示エリア - 青い背景のコンテナ */} +
+ {stocks.filter(stock => stock.category === "その他").length === 0 ? null : ( + + + + + 食材名 + 数量 + 購入価格 + 賞味・消費期限 + 購入日 + + + + {stocks + .filter(stock => stock.category == "その他") // その他だけ抽出 + .map(stock => ( + + {stock.stuff_name} + {stock.amount} + {stock.price} + {formatDate(stock.exp_date)} + {formatDate(stock.buy_date)} + + ))} + +
+ + )}
); From 7e5698f362205449e0317e618bc9396441579966 Mon Sep 17 00:00:00 2001 From: "Haru.Kusano" Date: Thu, 5 Jun 2025 16:17:16 +0900 Subject: [PATCH 8/8] =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E3=81=AE=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/TaskListPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx index e44bc7b..975f836 100644 --- a/frontend/src/pages/TaskListPage.tsx +++ b/frontend/src/pages/TaskListPage.tsx @@ -265,7 +265,7 @@ const TaskListPage: React.FC = () => { - {!newToBuy.newAddition && + {!newToBuy.newAddition && 材料名（選択）