From 525a52bbb87e76b487128c0e0c348328780c6bcf Mon Sep 17 00:00:00 2001 From: "Masaharu.Kato" Date: Tue, 24 Jun 2025 14:01:08 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E=E3=83=83?= =?UTF-8?q?=E3=83=88=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.css | 26 +- frontend/src/components/AddByRecipeDialog.tsx | 4 +- .../src/components/AddStuffAmountDialog.tsx | 50 +- frontend/src/components/BuyDialog.tsx | 167 ++++--- frontend/src/components/BuyExpDateSelect.tsx | 10 +- frontend/src/components/CategoryDropDown.tsx | 28 -- frontend/src/components/DeleteStuffDialog.tsx | 2 +- frontend/src/components/EditAmountDialog.tsx | 2 +- frontend/src/components/Layout.tsx | 154 +++--- frontend/src/components/MessageAlert.tsx | 2 +- .../src/components/StuffHistoryDialog.tsx | 6 +- frontend/src/pages/AddRecipe.tsx | 210 ++++---- frontend/src/pages/DishList.tsx | 457 ------------------ frontend/src/pages/LoginPage.tsx | 2 +- frontend/src/pages/RecipeList.tsx | 8 +- frontend/src/pages/StockPage.tsx | 310 ++++++------ 16 files changed, 480 insertions(+), 958 deletions(-) delete mode 100644 frontend/src/components/CategoryDropDown.tsx delete mode 100644 frontend/src/pages/DishList.tsx diff --git a/frontend/src/App.css b/frontend/src/App.css index b45f764..7c36cea 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -7,18 +7,24 @@ body { /* アプリケーションのルートコンテナスタイル */ .app { display: flex; - flex-direction: column; /* 子要素を縦方向に配置 */ - min-height: 100vh; /* ビューポートの高さいっぱいに広げる */ - background-color: #f5f5f5; /* 薄いグレーの背景色 */ + flex-direction: column; + /* 子要素を縦方向に配置 */ + min-height: 100vh; + /* ビューポートの高さいっぱいに広げる */ + background-color: #f5f5f5; + /* 薄いグレーの背景色 */ } /* メインコンテンツエリアのスタイル */ .main-content { - flex: 1; /* 利用可能なスペースをすべて使用 */ + flex: 1; + /* 利用可能なスペースをすべて使用 */ padding: 24px; width: 100%; - max-width: 1200px; /* コンテンツの最大幅を制限 */ - margin: 0 auto; /* 中央揃え */ + max-width: 1200px; + /* コンテンツの最大幅を制限 */ + margin: 0 auto; + /* 中央揃え */ } /* Material UIのコンテナコンポーネントのカスタマイズ */ @@ -29,14 +35,16 @@ body { /* Material UIのペーパーコンポーネントのカスタマイズ */ .MuiPaper-root { - background-color: white; /* 白背景を確保 */ + background-color: white; + /* 白背景を確保 */ } .mainContainer { padding-top: 0; padding-left: 0; padding-right: 0; - padding-bottom: 80px; /* ボトムナビゲーションバーで隠れる分 */ + padding-bottom: 80px; + /* ボトムナビゲーションバーで隠れる分 */ } .mainTitle { @@ -75,4 +83,4 @@ body { .numberField { width: 6rem; /* text-align: right; */ -} +} \ No newline at end of file diff --git a/frontend/src/components/AddByRecipeDialog.tsx b/frontend/src/components/AddByRecipeDialog.tsx index f268942..b070f8a 100644 --- a/frontend/src/components/AddByRecipeDialog.tsx +++ b/frontend/src/components/AddByRecipeDialog.tsx @@ -76,10 +76,10 @@ const AddByRecipeDialog = ({ /> - + {recipe.recipeName} - + ({recipe.maxServings}人分在庫あり)
diff --git a/frontend/src/components/AddStuffAmountDialog.tsx b/frontend/src/components/AddStuffAmountDialog.tsx index 4fe7d37..4125cdf 100644 --- a/frontend/src/components/AddStuffAmountDialog.tsx +++ b/frontend/src/components/AddStuffAmountDialog.tsx @@ -50,7 +50,7 @@ const AddStuffAmountDialog = ({ const [stuffs, setStuffs] = useState(); const [newAddition, setNewAddition] = useState(false); - + // エラーメッセージ表示 const { showErrorMessage } = useMessage(); @@ -88,30 +88,30 @@ const AddStuffAmountDialog = ({ {!newAddition && - {stuffs ? - <> - 材料名（選択） - - - : - <> - - {newItem.category ? '読み込み中...' : 'カテゴリを選択してください...'} - - - - } + {stuffs ? + <> + 材料名（選択） + + + : + <> + + {newItem.category ? '読み込み中...' : 'カテゴリを選択してください...'} + + + + } } {/* タスクタイトル入力フィールド */} diff --git a/frontend/src/components/BuyDialog.tsx b/frontend/src/components/BuyDialog.tsx index 33c85ba..302e89f 100644 --- a/frontend/src/components/BuyDialog.tsx +++ b/frontend/src/components/BuyDialog.tsx @@ -1,16 +1,16 @@ import { useState } from 'react'; import { - Dialog, - DialogTitle, - DialogContent, - DialogActions, - TextField, - Button, - Box, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + TextField, + Button, + Box, } from '@mui/material'; import { NewStock } from '../types/types'; import BuyExpDateSelect from './BuyExpDateSelect'; -/*import DatePicker, { registerLocale } from 'react-datepicker'; +/*import DatePicker, { registerLocale } from 'react-datepicker';F import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/ /*// 日付をyyyy-MM-dd形式で返す関数 @@ -25,91 +25,90 @@ const formatDateLocal = (date: Date) => { //registerLocale('ja', ja); const BuyDialog = ({ - openDialog, - setOpenDialog, - stuffName, - newStock, - setNewStock, - onSubmit, + openDialog, + setOpenDialog, + stuffName, + newStock, + setNewStock, + onSubmit, }: { - openDialog: boolean, - setOpenDialog: (open: boolean) => void, - stuffName: string, - newStock: NewStock, - setNewStock: (tobuy: NewStock) => void, - onSubmit: () => void, + openDialog: boolean, + setOpenDialog: (open: boolean) => void, + stuffName: string, + newStock: NewStock, + setNewStock: (tobuy: NewStock) => void, + onSubmit: () => void, }) => { - return ( + return ( + setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }} + > + 在庫登録 + + + {/* 材料名表示 */} + - setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }} - > - 在庫登録 - - - {/* 材料名表示 */} - + {/* 価格入力フィールド */} + { + const value = e.target.value; + if (/^\d*$/.test(value)) { + setNewStock({ ...newStock, price: value }) + }; + }} + sx={{ marginBottom: 2 }} + /> - {/* 価格入力フィールド */} - { - const value = e.target.value; - if (/^\d*$/.test(value)) { - setNewStock({ ...newStock, price: value }) - }; - }} - sx={{ marginBottom: 2 }} - /> + {/* 価格入力フィールド */} + { + const value = e.target.value; + if (/^\d*$/.test(value)) { + setNewStock({ ...newStock, amount: value }) + }; + }} + sx={{ marginBottom: 2 }} + /> - {/* 価格入力フィールド */} - { - const value = e.target.value; - if (/^\d*$/.test(value)) { - setNewStock({ ...newStock, amount: value }) - }; - }} - sx={{ marginBottom: 2 }} - /> + {/* 購入日・賞味期限入力 */} + setNewStock({ ...newStock, buyDate, expDate })} /> - {/* 購入日・賞味期限入力 */} - setNewStock({...newStock, buyDate, expDate}) } /> + {/* 購入店舗入力フィールド */} + setNewStock({ ...newStock, shop: e.target.value })} + fullWidth + /> + + + + + + + - {/* 購入店舗入力フィールド */} - setNewStock({ ...newStock, shop: e.target.value })} - fullWidth - /> - - - - - - - - - ) + ) } export default BuyDialog; \ No newline at end of file diff --git a/frontend/src/components/BuyExpDateSelect.tsx b/frontend/src/components/BuyExpDateSelect.tsx index 486b5fd..6fa3112 100644 --- a/frontend/src/components/BuyExpDateSelect.tsx +++ b/frontend/src/components/BuyExpDateSelect.tsx @@ -28,11 +28,11 @@ const validateExpDate = ((buyDate: string, expDate: string | null) => { }) const BuyExpDateSelect = ({ - newStock, - setNewStock, + newStock, + setNewStock, }: { - newStock: {buyDate: string, expDate: string | null}, - setNewStock: (tobuy: {buyDate: string, expDate: string | null}) => void, + newStock: { buyDate: string, expDate: string | null }, + setNewStock: (tobuy: { buyDate: string, expDate: string | null }) => void, }) => { {/* 購入日・消費期限を横並びに */ } @@ -72,7 +72,7 @@ const BuyExpDateSelect = ({ } }} /> - + } diff --git a/frontend/src/components/CategoryDropDown.tsx b/frontend/src/components/CategoryDropDown.tsx deleted file mode 100644 index 74ded65..0000000 --- a/frontend/src/components/CategoryDropDown.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useState } from "react"; -import MenuItem from "@mui/material/MenuItem"; -import Select from "@mui/material/Select"; -import FormControl from "@mui/material/FormControl"; -import InputLabel from "@mui/material/InputLabel"; - -const CategoryDropDown = () => { - const [selectedValue, setSelectedValue] = useState(""); // 選択された値の状態管理 - - return ( - - カテゴリ - - - ); -}; - -export default CategoryDropDown; \ No newline at end of file diff --git a/frontend/src/components/DeleteStuffDialog.tsx b/frontend/src/components/DeleteStuffDialog.tsx index fe948b0..4f01e75 100644 --- a/frontend/src/components/DeleteStuffDialog.tsx +++ b/frontend/src/components/DeleteStuffDialog.tsx @@ -27,7 +27,7 @@ const DeleteStuffDialog = ({ > 食材の削除 - {stuffName} を削除します。 + {stuffName} を削除します。 ⚠️ 注意: 削除すると復元できません。 diff --git a/frontend/src/components/EditAmountDialog.tsx b/frontend/src/components/EditAmountDialog.tsx index 42fdc97..094ea84 100644 --- a/frontend/src/components/EditAmountDialog.tsx +++ b/frontend/src/components/EditAmountDialog.tsx @@ -25,7 +25,7 @@ const EditAmountDialog = ({ setEditingItem: (tobuy: StuffNameAndAmount) => void, onSubmit: () => void, }) => { - + // エラーメッセージ表示 const { showErrorMessage } = useMessage(); diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 162e24e..cb062a4 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -40,48 +40,48 @@ const Layout: React.FC = () => { const [drawerOpen, setDrawerOpen] = useState(false); - const getTabIndex = (pathname: string) => { - pathname = pathname.split("/")[1]; - console.log(pathname); - switch (pathname) { - case 'stock': - return 0; - case 'tasks': - return 1; - case 'recipeList': - return 2; - case 'addRecipe': - return 2; - default: - return -1; - } - }; - - - - - - const [bottomNavi, setBottomNavi] = useState(getTabIndex(location.pathname)); - - useEffect(() => { - setBottomNavi(getTabIndex(location.pathname)); - }, [location.pathname]); - - /** - * ログアウト処理を行うハンドラー関数 - * ローカルストレージからトークンを削除し、ログインページにリダイレクト - */ - const handleLogout = () => { - localStorage.removeItem('token'); - navigate('/login'); - }; - - // メニューを開閉するハンドラー - const toggleDrawer = () => { - setDrawerOpen(!drawerOpen); - }; - - // メッセージ表示 + const getTabIndex = (pathname: string) => { + pathname = pathname.split("/")[1]; + console.log(pathname); + switch (pathname) { + case 'stock': + return 0; + case 'tasks': + return 1; + case 'recipeList': + return 2; + case 'addRecipe': + return 2; + default: + return -1; + } + }; + + + + + + const [bottomNavi, setBottomNavi] = useState(getTabIndex(location.pathname)); + + useEffect(() => { + setBottomNavi(getTabIndex(location.pathname)); + }, [location.pathname]); + + /** + * ログアウト処理を行うハンドラー関数 + * ローカルストレージからトークンを削除し、ログインページにリダイレクト + */ + const handleLogout = () => { + localStorage.removeItem('token'); + navigate('/login'); + }; + + // メニューを開閉するハンドラー + const toggleDrawer = () => { + setDrawerOpen(!drawerOpen); + }; + + // メッセージ表示 // ページ遷移後もメッセージを維持 useEffect(() => { @@ -131,36 +131,36 @@ const Layout: React.FC = () => { // ここでルーティング処理などを行う } - return ( - - {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */} - - - - shopchop - - - - - - theme.zIndex.drawer + 1 }} elevation={3}> - - } /> - } /> - } /> - - - - {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */} - - - + return ( + + {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */} + + + + shopchop + + + + + + theme.zIndex.drawer + 1 }} elevation={3}> + + } /> + } /> + } /> + + + + {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */} + + + { /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */} - - + - ); - }; + + ); +}; - export default Layout; +export default Layout; diff --git a/frontend/src/components/MessageAlert.tsx b/frontend/src/components/MessageAlert.tsx index 7368571..bc743f7 100644 --- a/frontend/src/components/MessageAlert.tsx +++ b/frontend/src/components/MessageAlert.tsx @@ -18,7 +18,7 @@ const MessageAlert: React.FC = ({ }) => { return ( + anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} sx={{ bottom: '120px' }}> {message} diff --git a/frontend/src/components/StuffHistoryDialog.tsx b/frontend/src/components/StuffHistoryDialog.tsx index 4ccd34e..4ad5403 100644 --- a/frontend/src/components/StuffHistoryDialog.tsx +++ b/frontend/src/components/StuffHistoryDialog.tsx @@ -93,9 +93,9 @@ const StuffHistoryDialog = ({ {history.buyDate} {/* 「購入店舗」セルに nowrap と minWidth を適用 */} - {history.shop || ''} - {history.buyAmount} - {history.price} + {history.shop || ''} + {history.buyAmount} + {history.price} ))} diff --git a/frontend/src/pages/AddRecipe.tsx b/frontend/src/pages/AddRecipe.tsx index dd78af6..d7c6586 100644 --- a/frontend/src/pages/AddRecipe.tsx +++ b/frontend/src/pages/AddRecipe.tsx @@ -99,7 +99,7 @@ const AddRecipe: React.FC = () => { try { if (!recipeId) { // console.log("yes3"); - // 新規追加 + // 新規追加 const response = await recipeApi.addRecipe({ recipeName, summary: recipeSummary, @@ -167,7 +167,7 @@ const AddRecipe: React.FC = () => { // // const stockedStuffAmountRecipe = recipeStuff.filter(recipe => (stockStuff.some(stuff => recipe.stuffId === stuff.stuffId))); // // console.log(stockedStuffAmountRecipe) // // const stockedStuffAmountStock = stockStuff.filter(stock => (stockedStuffAmountRecipe.some(stocked => stock.stuffId === stocked.stuffId))); - + // // recipeStuff.map(item => { // // await Promise.all(stockStuff.map(async stock => { // // if (item.stuffId == stock.stuffId) @@ -209,121 +209,121 @@ const AddRecipe: React.FC = () => { return (
- {(recipeId && !recipeLoaded) - ?

読み込み中...

- : - <> -
- - {!recipeId ? '料理の追加' : '料理の編集'} -
-
-
- setRecipeName(e.target.value)} - /> - setRecipeSummary(e.target.value)} - /> -
-

- 材料リスト -

- {/* すべての材料情報を表示 */} - {(!items || !items.length) - ? (

+ボタンで材料を追加してください

) - : ({items.map((item, index) => ( + {(recipeId && !recipeLoaded) + ?

読み込み中...

+ : + <> +
+ + {!recipeId ? '料理の追加' : '料理の編集'} +
+
+
+ setRecipeName(e.target.value)} + /> + setRecipeSummary(e.target.value)} + /> +
+

+ 材料リスト +

+ {/* すべての材料情報を表示 */} + {(!items || !items.length) + ? (

+ボタンで材料を追加してください

) + : ({items.map((item, index) => ( - - - {/* 買い物リスト：食材情報記入ボタン */} - - - {`× ${item.amount}`} - - {/* 買い物リスト：数量変更ボタン */} - - { - setEditingItem(item) - setEditingItemIdx(index) - setOpenAmountDialog(true) - }} - > - - - - {/* 買い物リスト：食材削除ボタン */} - - { - setEditingItem(item) - setEditingItemIdx(index) - setOpenDeleteDialog(true) - }}> - - - + + + {/* 買い物リスト：食材情報記入ボタン */} + + + {`× ${item.amount}`} + + {/* 買い物リスト：数量変更ボタン */} + + { + setEditingItem(item) + setEditingItemIdx(index) + setOpenAmountDialog(true) + }} + > + + + + {/* 買い物リスト：食材削除ボタン */} + + { + setEditingItem(item) + setEditingItemIdx(index) + setOpenDeleteDialog(true) + }}> + + + - + - + - ))})} + ))})} -
- {/* +
+ {/* 材料を追加 */} - setOpenAddDialog(true)}> - - -
+ setOpenAddDialog(true)}> + + +
-
- -
+
+ +
- {/* 新規材料追加ダイアログ */} - { - // console.log('newItem:', newItem); - setItems([...items, newItem]); - setOpenAddDialog(false); - }} /> + {/* 新規材料追加ダイアログ */} + { + // console.log('newItem:', newItem); + setItems([...items, newItem]); + setOpenAddDialog(false); + }} /> - {/* 削除ダイアログ */} - setItems([...items.slice(0, editingItemIdx), ...items.slice(editingItemIdx + 1)])} - /> + {/* 削除ダイアログ */} + setItems([...items.slice(0, editingItemIdx), ...items.slice(editingItemIdx + 1)])} + /> - {/* 数量変更ダイアログ */} - setEditingItem({ ...editingItem, ...v })} - onSubmit={() => { - setItems([...items.slice(0, editingItemIdx), editingItem, ...items.slice(editingItemIdx + 1)]) - setOpenAmountDialog(false); - }} /> + {/* 数量変更ダイアログ */} + setEditingItem({ ...editingItem, ...v })} + onSubmit={() => { + setItems([...items.slice(0, editingItemIdx), editingItem, ...items.slice(editingItemIdx + 1)]) + setOpenAmountDialog(false); + }} /> -
- - } +
+ + }
); }; diff --git a/frontend/src/pages/DishList.tsx b/frontend/src/pages/DishList.tsx deleted file mode 100644 index 1a28b76..0000000 --- a/frontend/src/pages/DishList.tsx +++ /dev/null @@ -1,457 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { toBuyApi } from '../services/api'; -import { - Container, - Typography, - Tooltip, - List, - ListItem, - ListItemText, - ListItemSecondaryAction, - IconButton, - Checkbox, - Fab, - Dialog, - DialogTitle, - DialogContent, - DialogActions, - TextField, - Button, - Box, - FormControlLabel, - FormGroup, - MenuItem, - Select, - FormControl, - InputLabel -} from '@mui/material'; -import { - Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, - SoupKitchen as SoupKitchenIcon -} from '@mui/icons-material'; -import { ToBuy, Stuff } from '../types/types'; -import { GENERAL_ERRORS } from '../constants/errorMessages'; -import CategoryDropDown from "../components/CategoryDropDown"; - -const DishList: React.FC = () => { - const navigate = useNavigate(); - // 料理リストの料理名を格納する配列 - // const dishes = ; - - // タスク一覧の状態管理 - const [tobuys, setToBuys] = useState([]); - const test = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1]; - // APIができるまでのテスト用の型 - interface Dish { - id:number, - name:string, - amount:number - } - // APIができるまでの食材配列 - const testdish : Dish[] = [ - { id: 1, name: 'ジャガイモ', amount:1 }, - { id: 2, name: '人参', amount:2 }, - { id: 3, name: '人参', amount:2 }, - { id: 4, name: '人参', amount:2 } - ]; - - // 画面表示用の食材情報配列 - const [testDishArray, setTestDishArray] = useState(testdish); - - // エラーメッセージの状態管理 - const [error, setError] = useState(false); - // 選択した料理の情報を表示するダイアログの表示状態 - const [openDialog, setOpenDialog] = useState(false); - // 料理リスト編集ダイアログの表示状態 - const [openChangeDialog, setOpenChangeDialog] = useState(false); - // 料理リストの食材の個数編集ダイアログの表示状態 - const [openChangeItemDialog, setOpenChangeItemDialog] = useState(false); - - const changeDialog = () => { - setOpenDialog(false); - setOpenChangeDialog(true); - setTestDishArray(testdish); - }; - - const cancelChange = () => { - setOpenDialog(true); - setOpenChangeDialog(false); - }; - /** - * タスクを削除するハンドラー - * 指定されたIDのタスクをAPIを通じて削除 - */ - const handleDeleteStuffTemp = async (dish_id: number) => { - try { - let testDishArrayCopy = [...testDishArray]; // 配列をコピー - testDishArrayCopy.splice(dish_id, 1); - setTestDishArray(testDishArrayCopy); - // fetchTasks(); // 削除後のタスク一覧を再取得 - } catch (error) { - // console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error); - } - }; - // コンポーネントマウント時にタスク一覧を取得 - useEffect(() => { - fetchTasks(); - }, []); - - /** - * APIからタスク一覧を取得する関数 - * 取得したタスクをstate(tasks)に設定 - */ - // const fetchTasks = async () => { - // try { - // const tasks = await taskApi.getTasks(); - // setTasks(tasks); - // } catch (error) { - // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); - // } - // }; - - const fetchTasks = async () => { - try { - const tobuys = await toBuyApi.getToBuys(); - setToBuys(tobuys); - } catch (error) { - // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); - } - }; - return ( - - -
-

料理リスト一覧

-
-
- {/* */} - {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} - {test.map((test, index) => ( - - - - - - // - ))} - {/* */} -
-
- -
- {/*新規料理追加ボタン - 画面下部に固定表示 */} - - setOpenDialog(true)} - > - - - - - {/* 新規タスク作成ダイアログ */} - setOpenDialog(false)} disableScrollLock={true} - maxWidth="lg" - fullWidth - > - - 料理名 - - - {/* */} - {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} - {test.map((test, index) => ( - - // - // {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} - // - // - ))} - {/* */} - - - - - - - {/* 食材の個数の編集ダイアログ */} - setOpenChangeDialog(false)} disableScrollLock={true} - maxWidth="lg" - fullWidth - > - - 食材名 - - - {/* */} - {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} - {testDishArray.map((test, id) => ( - - {/* タスク完了状態を切り替えるチェックボックス - handleToggleComplete(task.id)} - /> */} - {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} - - {/* 食材の個数を表示 */} - 個数
- {test.amount} - - } - // secondary={task.description} - sx={{ align: "right", fontSize: "20px" }} - /> - {/* 買い物リスト：食材情報記入ボタン */} - - - handleDeleteTask(task.id)} - > - - - - {/* 買い物リスト：食材削除ボタン */} - - - handleDeleteStuffTemp(id)} - > - - - - - - - // - // - // {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} - // - // - ))} - {/* */} - - - - - - - {/* 食材編集ダイアログ */} - setOpenChangeDialog(false)} disableScrollLock={true} - maxWidth="lg" - fullWidth - > - - 料理名 - - - {/* */} - {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} - {testDishArray.map((test, id) => ( - - {/* タスク完了状態を切り替えるチェックボックス - handleToggleComplete(task.id)} - /> */} - {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} - - {/* 食材の個数を表示 */} - 個数
- {test.amount} - - } - // secondary={task.description} - sx={{ align: "right", fontSize: "20px" }} - /> - {/* 買い物リスト：食材情報記入ボタン */} - - - handleDeleteTask(task.id)} - > - - - - {/* 買い物リスト：食材削除ボタン */} - - - handleDeleteStuffTemp(id)} - > - - - - - - - // - // - // {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} - // - // - ))} - {/* */} - - - - - - - - ); -}; - -export default DishList; \ No newline at end of file diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx index 6312431..d3d2913 100644 --- a/frontend/src/pages/LoginPage.tsx +++ b/frontend/src/pages/LoginPage.tsx @@ -58,7 +58,7 @@ const LoginPage: React.FC = () => { }; return ( - + diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx index 53bd410..a128be8 100644 --- a/frontend/src/pages/RecipeList.tsx +++ b/frontend/src/pages/RecipeList.tsx @@ -112,12 +112,12 @@ const RecipeList: React.FC = () => { /> - + {recipe.maxServings ? {recipe.maxServings}人分 - : <>} + : <>} {recipe.maxServings === 0 ? @@ -151,8 +151,8 @@ const RecipeList: React.FC = () => { {/* 買うものリストへ追加ダイアログ */} { } diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index e63799d..52cd94e 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -380,163 +380,163 @@ const StockPage: React.FC = () => { return ( !filteredStocks.length - ? 該当する在庫はありません。 - : <> - - - - - 食材名 - 数量 - 消費・賞味期限 - - - - {filteredStocks.map(stock => { - let daysLeft = null; - - if (stock.expDate !== null) { - const today = new Date(); - const expDate = new Date(stock.expDate); - // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得 - const todayDateOnly = new Date(today); - todayDateOnly.setHours(0, 0, 0, 0); - const expDateOnly = new Date(expDate); - expDateOnly.setHours(0, 0, 0, 0); - const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime(); - daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); - - // console.log("テーブルtoday:", today); - // console.log("テーブルexp:", expDate); - // console.log("テーブルtodayDateOnly:", todayDateOnly); - // console.log("テーブルexpDateOnly:", expDateOnly); - // console.log("日数差:", daysLeft); - } - - return ( - handleRowClick(stock)} - style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }} - > - {stock.stuffName} - {stock.amount} - 該当する在庫はありません。 + : <> + +
+ + + 食材名 + 数量 + 消費・賞味期限 + + + + {filteredStocks.map(stock => { + let daysLeft = null; + + if (stock.expDate !== null) { + const today = new Date(); + const expDate = new Date(stock.expDate); + // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得 + const todayDateOnly = new Date(today); + todayDateOnly.setHours(0, 0, 0, 0); + const expDateOnly = new Date(expDate); + expDateOnly.setHours(0, 0, 0, 0); + const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime(); + daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); + + // console.log("テーブルtoday:", today); + // console.log("テーブルexp:", expDate); + // console.log("テーブルtodayDateOnly:", todayDateOnly); + // console.log("テーブルexpDateOnly:", expDateOnly); + // console.log("日数差:", daysLeft); + } + + return ( + handleRowClick(stock)} + style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }} > - {stock.expDate && formatDate(stock.expDate)} - - - ); - })} - -
- - - {/* 編集ダイアログ */} - - - - 在庫の編集 - - - - {editStock && ( - <> - - {/* 材料の詳細 */} - 【{editStock.stuffName}】 - - {/* 現在の数量フィールド */} - { - if (e.key === '-' || e.key === 'e' || e.key === 'E') { - e.preventDefault(); - } - }} - /> - - {/* 購入時数量フィールド */} - { - if (e.key === '-' || e.key === 'e' || e.key === 'E') { - e.preventDefault(); - } - }} - /> - - {/* 購入価格フィールド */} - { - if (e.key === '-' || e.key === 'e' || e.key === 'E') { - e.preventDefault(); - } - }} - /> - - {/* 購入店舗フィールド */} - - - {/* 購入日・賞味期限入力 */} - setEditStock({ ...editStock, buyDate, expDate })} /> - - )} - - - - - + {stock.stuffName} + {stock.amount} + + {stock.expDate && formatDate(stock.expDate)} + + + ); + })} + + + + + {/* 編集ダイアログ */} + + + + 在庫の編集 + + + + {editStock && ( + <> + + {/* 材料の詳細 */} + 【{editStock.stuffName}】 + + {/* 現在の数量フィールド */} + { + if (e.key === '-' || e.key === 'e' || e.key === 'E') { + e.preventDefault(); + } + }} + /> + + {/* 購入時数量フィールド */} + { + if (e.key === '-' || e.key === 'e' || e.key === 'E') { + e.preventDefault(); + } + }} + /> + + {/* 購入価格フィールド */} + { + if (e.key === '-' || e.key === 'e' || e.key === 'E') { + e.preventDefault(); + } + }} + /> + + {/* 購入店舗フィールド */} + + + {/* 購入日・賞味期限入力 */} + setEditStock({ ...editStock, buyDate, expDate })} /> + + )} + + + + + - - - {/* 削除ダイアログ */} - {selectedRow && - { - handleDeleteStock(selectedRow.stockId); - setSelectedRow(null); - setOpenEditDialog(false); // 編集画面から飛んだ場合に備え、編集画面も閉じる - }} - />} - + + + {/* 削除ダイアログ */} + {selectedRow && + { + handleDeleteStock(selectedRow.stockId); + setSelectedRow(null); + setOpenEditDialog(false); // 編集画面から飛んだ場合に備え、編集画面も閉じる + }} + />} + ); };