expcman
/
joint_exc
mirror of https://ivis.backlog.com/git/TRAIN2025_GROUP_K/joint_exc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
feature-frontend-styles
Masaharu.Kato 4 months ago
parent de2229f4bc ba36fe74b3
commit 026347f7e4
2 changed files with 159 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 166
      frontend/src/pages/TaskListPage.tsx
  2. 21
      frontend/src/services/api.ts

166
frontend/src/pages/TaskListPage.tsx
Unescape View File

@ -32,7 +32,7 @@ import {
} from '@mui/material';
import {
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
SoupKitchen as SoupKitchenIcon
SoupKitchen as SoupKitchenIcon, Edit as EditIcon
} from '@mui/icons-material';
import { ToBuy, Stuff, /*Stock*/ } from '../types/types';
import { TOBUY_ERRORS } from '../constants/errorMessages';
@ -64,9 +64,20 @@ const TaskListPage: React.FC = () => {
//在庫登録ダイアログの表示状態
const [openInfoDialog, setOpenInfoDialog] = useState(false);
//数量変更ダイアログの表示状態
const [openAmountDialog, setOpenAmountDialog] = useState(false);
const [selectedTask, setSelectedTask] = useState<ToBuy["tobuyId"]>(0);
const [selectedEditingTask, setSelectedEditingTask] = useState<ToBuy>({
tobuyId: 0,
stuffId: 0,
stuffName: "",
amount: 0,
shop: undefined,
});
const [newToBuy, setNewToBuy] = useState(EMPTY_TOBUY);
const [stuffs, setStuffs] = useState<Stuff[]>([]);
@ -88,6 +99,7 @@ const TaskListPage: React.FC = () => {
const fetchTasks = async () => {
try {
const tobuys = await toBuyApi.getToBuys();
console.log(tobuys);
setToBuys(tobuys);
} catch (error) {
console.error(`${TOBUY_ERRORS.FETCH_FAILED}:`, error);
@ -172,6 +184,38 @@ const TaskListPage: React.FC = () => {
}
};
/**
* 買い物リストの数量を変更するハンドラー
* 入力されたタスク情報をAPIに送信して変更
* 作成後はダイアログを閉じ、入力内容をリセット
*/
const handleUpdateTask = async () => {
try {
console.log(selectedEditingTask)
await toBuyApi.updateToBuy(selectedEditingTask);
setOpenAmountDialog(false); // ダイアログを閉じる
//setNewToBuy(EMPTY_TOBUY); // 入力内容をリセット
fetchTasks(); // 作成後のタスク一覧を再取得
} catch (error) {
console.error(`${TOBUY_ERRORS.CREATE_FAILED}:`, error);
}
};
// /**
// * クリックされたタスクの情報を取得するための関数
// * @param tobuyId
// * @returns tobuyIdが一致するtoBuy
// */
// const getToBuyDetails = (tobuyId: number): ToBuy => {
// console.log(tobuyId)
// const result = tobuys.find((toBuy) => toBuy.tobuyId === tobuyId);
// if(result === undefined){
// throw new Error(`tobuyId: ${tobuyId} に対応するデータが見つかりません`);
// }
// return result;
// };
return (
<Container>
<Typography variant="h4" component="h1" gutterBottom>
@ -207,11 +251,25 @@ const TaskListPage: React.FC = () => {
<Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
{`× ${tobuy.amount}`}
</Typography>
{/* 買い物リスト：数量変更ボタン */}
<Tooltip title="数量変更">
<IconButton
sx={{ marginRight: 0, marginLeft: 0 }}
edge="end"
aria-label="数量変更"
onClick={() => {
setOpenAmountDialog(true)
setSelectedEditingTask(tobuy)
}}
>
<EditIcon />
</IconButton>
</Tooltip>
{/* 買い物リスト：食材情報記入ボタン */}
<Tooltip title="購入情報を記入">
{/* デフォルトの marginRightの設定（マイナス）を上書き */}
<IconButton
color="primary"
sx={{ marginRight: 0}}
sx={{ marginRight: 0, marginLeft: 0 }}
edge="end"
aria-label="購入情報を記入"
onClick={() => {
@ -223,6 +281,7 @@ const TaskListPage: React.FC = () => {
<ShoppingBasketIcon />
</IconButton>
</Tooltip>
{/* 買い物リスト：食材削除ボタン */}
<Tooltip title="項目を削除"
componentsProps={{
@ -240,6 +299,7 @@ const TaskListPage: React.FC = () => {
<IconButton
edge="end"
sx={{ marginLeft: 3 }}
aria-label="delete"
onClick={() => handleDeleteTask(tobuy.tobuyId)}
>
@ -253,31 +313,37 @@ const TaskListPage: React.FC = () => {
</List>
</div>
{/* 新規材料作成ボタン - 画面下部に固定表示 */}
<Tooltip title="材料のみ追加">
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
onClick={() => setOpenDialog(true)}
>
<AddIcon />
</Fab>
</Tooltip>
{/*新規料理追加ボタン - 画面下部に固定表示 */}
<Tooltip title="料理から追加">
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
onClick={() => {
setOpenDialog(true);
//handleNavigate('/AddDishies1');
}}
//selected={isSelected('/test')}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
材料のみ追加
</Typography>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
onClick={() => setOpenDialog(true)}
>
<AddIcon />
</Fab>
{/*新規料理追加ボタン - 画面下部に固定表示 */}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
料理から追加
</Typography>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
onClick={() => {
setOpenDialog(true);
//handleNavigate('/AddDishies1');
}}
//selected={isSelected('/test')}
>
<SoupKitchenIcon />
</Fab>
>
<SoupKitchenIcon />
</Fab>
</Tooltip>
{/* 新規タスク作成ダイアログ */}
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}>
@ -345,7 +411,7 @@ const TaskListPage: React.FC = () => {
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
if (!isNaN(parsedValue)) {
if (!isNaN(parsedValue) && parsedValue >= 0) { //負数除外
setNewToBuy({ ...newToBuy, amount: parsedValue }); // number型で保存
}
}}
@ -423,6 +489,52 @@ const TaskListPage: React.FC = () => {
</Button>
</DialogActions>
</Dialog>
{/* 数量変更ダイアログ */}
<Dialog open={openAmountDialog} onClose={() => setOpenAmountDialog(false)} disableScrollLock={true}>
<Box display="flex" alignItems="center">
<DialogTitle sx={{ flexGrow: 1 }}>数量の変更</DialogTitle>
</Box>
<DialogContent>
<Box sx={{ pt: 1 }}>
{/* 材料名表示 */}
<TextField
autoFocus
margin="dense"
label="材料名"
fullWidth
value={selectedEditingTask.stuffName}
disabled
sx={{ marginBottom: 2 }}
/>
{/* 数量入力フィールド */}
<TextField
margin="dense"
label="数量"
fullWidth
value={selectedEditingTask.amount}
onChange={(e) => {
const value = e.target.value;
const parsedValue = parseInt(value, 10); // 数値に変換
if (!isNaN(parsedValue) && parsedValue >= 0) { //負数除外
setSelectedEditingTask({ ...selectedEditingTask, amount: parsedValue }); // number型で保存
}
}}
sx={{ width: "20%" }}
type="number"
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
/>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenAmountDialog(false)}>キャンセル</Button>
<Button onClick={handleUpdateTask} variant="contained">
確定
</Button>
</DialogActions>
</Dialog>
</Container>
);

21
frontend/src/services/api.ts
Unescape View File

@ -109,7 +109,7 @@ export const toBuyApi = {
* @param tobuy 作成する材料情報
* @returns 作成された材料情報
*/
addToBuy: async (tobuy: Omit<ToBuy, 'stuffId' | 'tobuyId'> & { stuffId: number | null, category: string }): Promise<any> => {
addToBuy:async (tobuy: Omit<ToBuy, 'stuffId' | 'tobuyId'> & { stuffId: number | null, category: string }): Promise<any> => {
const response = await fetch(`${API_BASE_URL}/api/tobuy/add`, {
method: 'POST',
headers: getHeaders(),
@ -154,6 +154,25 @@ export const toBuyApi = {
// }
},
/**
* 買うものリストの変更
* @param tobuy 変更する材料情報
* @returns 変更された材料情報
*/
updateToBuy: async (tobuy:ToBuy): Promise<any> => {
const response = await fetch(`${API_BASE_URL}/api/tobuy/update`, {
method: 'PUT',
headers: getHeaders(),
body: JSON.stringify(tobuy),
});
if (!response.ok) {
throw new Error(TOBUY_ERRORS.CREATE_FAILED);
}
return response.json();
},
/**
* 買うものリストの在庫登録（購入処理）
*/

Write Preview
Loading…
Cancel
Save