人数分の食材を買い物リストに登録できる機能を実装、UIの変更

feature-frontend-top
masato.fujita 4 months ago
parent 08899873e7
commit 8fceebb5a9
  1. 37
      frontend/src/pages/AddRecipe.tsx
  2. 7
      frontend/src/pages/StockPage.tsx

@ -86,17 +86,17 @@ const AddRecipe: React.FC = () => {
const handleSaveRecipe = async () => { const handleSaveRecipe = async () => {
// if (!recipeName) { if (!recipeName) {
// showErrorMessage('レシピ名が入力されていません!') showErrorMessage('レシピ名が入力されていません!')
// console.log("yes1"); console.log("yes1");
// return false; return false;
// } }
// if (!items.length) { if (!items.length) {
// showErrorMessage('材料が追加されていません!') showErrorMessage('材料が追加されていません!')
// console.log("yes2"); console.log("yes2");
// return false; return false;
// } }
try { try {
if (!recipeId) { if (!recipeId) {
@ -127,13 +127,13 @@ const AddRecipe: React.FC = () => {
const checkRecipeAndItems = async () => { const checkRecipeAndItems = async () => {
if (!recipeName) { if (!recipeName) {
alert('レシピ名が入力されていません!') showErrorMessage('レシピ名が入力されていません!')
console.log("yes1"); console.log("yes1");
return false; return false;
} }
if (!items.length) { if (!items.length) {
alert('材料が追加されていません!') showErrorMessage('材料が追加されていません!')
console.log("yes2"); console.log("yes2");
return false; return false;
} }
@ -154,7 +154,7 @@ const AddRecipe: React.FC = () => {
console.log("before"); console.log("before");
if (!recipeId) return false; if (!recipeId) return false;
console.log("ds"); console.log("ds");
await toBuyApi.addByRecipe(recipeId); await toBuyApi.addByRecipe(recipeId, numOfPeaple);
showSuccessMessage('レシピが保存されて買うものリストに追加されました!'); showSuccessMessage('レシピが保存されて買うものリストに追加されました!');
navigate('/tasks'); navigate('/tasks');
} }
@ -312,12 +312,13 @@ const AddRecipe: React.FC = () => {
setOpenAmountDialog(false); setOpenAmountDialog(false);
}} /> }} />
{/* 人数入力ダイアログ */}
<Dialog open={openNumOfPeapleDialog} onClose={() => setOpenNumOfPeapleDialog(false)} disableScrollLock={true} <Dialog open={openNumOfPeapleDialog} onClose={() => setOpenNumOfPeapleDialog(false)} disableScrollLock={true}
style={{ width : '100%', position : 'fixed', left: '50%', transform: 'translateX(-50%)' }} style={{ width : '100%', position : 'fixed', left: '50%', transform: 'translateX(-50%)' }}
> >
<Box display="flex" alignItems="center" <Box display="flex" alignItems="center"
> >
<DialogTitle sx={{ flexGrow: 1 }}></DialogTitle> <DialogTitle sx={{ flexGrow: 1 }}></DialogTitle>
</Box> </Box>
<DialogContent> <DialogContent>
<div> <div>
@ -343,10 +344,10 @@ const AddRecipe: React.FC = () => {
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setOpenNumOfPeapleDialog(false)}></Button> <Button onClick={() => setOpenNumOfPeapleDialog(false)}></Button>
<Button onClick={() => handleSubmitAndAddToBuy} variant="contained" <Button onClick={() => handleSubmitAndAddToBuy()} variant="contained"
style={{ width: '40%', fontSize: '1vw' }} style={{ width: '40%', fontSize: 'clamp(12px, 3vw, 20px)' }}
> >
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>

@ -39,13 +39,6 @@ const formatDateLocal = (date: Date) => {
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}; };
// 日付を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 } = { const EMPTY_STOCK: Omit<Stock, 'stockId' | 'stuffId'> & { stuffId: number | null } & { newAddition: boolean } = {

Loading…
Cancel
Save