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

画面設計を変更しました。

Browse Source 
・テーブルの行を選択したら詳細・編集画面に遷移
・詳細・編集画面に削除ボタンを配置
feature-frontend-stock-suzuki
Yuna.Suzuki 4 months ago
parent ee33a0a82a
commit 21344b23c6
1 changed files with 109 additions and 34 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. 143
      frontend/src/pages/StockPage.tsx

143
frontend/src/pages/StockPage.tsx
Unescape View File

@ -26,6 +26,7 @@ import {
Select,
MenuItem,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import { STOCK_ERRORS } from '../constants/errorMessages';
import DatePicker, { registerLocale } from 'react-datepicker';
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
@ -103,6 +104,26 @@ const StockPage: React.FC = () => {
if (isNaN(newStock.price)) return;
console.log(newStock)
// 購入日と消費・賞味期限の整合性チェック
const buy = new Date(newStock.buyDate);
const exp = new Date(newStock.expDate);
// 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
const buyDateOnly = new Date(buy);
buyDateOnly.setHours(0, 0, 0, 0);
const expDateOnly = new Date(exp);
expDateOnly.setHours(0, 0, 0, 0);
console.log("新規作成buy:", buy);
console.log("新規作成exp:", exp);
console.log("新規作成buyDateOnly:", buyDateOnly);
console.log("新規作成expDateOnly:", expDateOnly);
if (buyDateOnly.getTime() > expDateOnly.getTime()) {
alert("購入日は消費・賞味期限より前の日付を設定してください。");
return;
}
const today = new Date().toISOString().substring(0, 10);
const updatedStock = { ...newStock, lastUpdate: today }; // lastUpdate に today を設定
@ -183,17 +204,18 @@ const StockPage: React.FC = () => {
};
/**
* セルを選択する関数. 再度クリックで選択解除 → 行選択ではなくチェックボックスにしたため不要
* セルを選択する関数. 再度クリックで選択解除 → 修正
*/
// const handleRowClick = (stock: Stock) => {
// setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
// };
// チェックボックス切り替え
const handleCheckboxChange = (stock: Stock) => {
setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
// セルを選択して編集画面
const handleRowClick = (stock: Stock) => {
setSelectedRow(stock); // 行選択
setEditStock({ ...stock }); // 編集対象にセット
setIsEditOpen(true); // 編集ダイアログを開く
};
/** 編集ボタンを押したときにダイアログを開く */
// ダイアログを開く際に `selectedRow` の値を `editStock` にセット
const handleOpenEdit = () => {
@ -208,10 +230,28 @@ const StockPage: React.FC = () => {
const handleApplyChanges = async () => {
if (!editStock) return;
// 購入日が消費・賞味期限より未来の場合はエラー表示
const buy = new Date(editStock.buyDate);
const exp = new Date(editStock.expDate);
// 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
const buyDateOnly = new Date(buy);
buyDateOnly.setHours(0, 0, 0, 0);
const expDateOnly = new Date(exp);
expDateOnly.setHours(0, 0, 0, 0);
console.log("編集buy:", buy);
console.log("編集exp:", exp);
console.log("編集buyDateOnly:", buyDateOnly);
console.log("編集expDateOnly:", expDateOnly);
if (buy > exp) {
alert("購入日は消費・賞味期限より前の日付を設定してください。");
return;
}
try {
if (Number(editStock.amount) === 0) {
// 数量が 0 の場合は削除処理へ誘導
setIsEditOpen(false); // 編集ダイアログを閉じる
// setIsEditOpen(false); // 編集ダイアログを閉じる
setSelectedRow(editStock); // 削除対象をセット
setIsDeleteOpen(true); // 削除ダイアログを開く
return;
@ -292,7 +332,6 @@ const StockPage: React.FC = () => {
<Table>
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
<TableRow>
<TableCell padding="checkbox" />
<TableCell>食材名</TableCell>
<TableCell>数量</TableCell>
<TableCell>消費・賞味期限</TableCell>
@ -300,26 +339,28 @@ const StockPage: React.FC = () => {
</TableHead>
<TableBody>
{filteredStocks.map(stock => {
const isSelected = selectedRow?.stockId === stock.stockId;
const today = new Date();
const expDate = new Date(stock.expDate);
const timeDiff = expDate.getTime() - today.getTime();
// 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
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();
const 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 (
<TableRow
key={stock.stockId}
sx={{
backgroundColor: isSelected ? 'yellow' : 'white',
}}
onClick={() => handleRowClick(stock)}
style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
onChange={() => handleCheckboxChange(stock)}
/>
</TableCell>
<TableCell>{stock.stuffName}</TableCell>
<TableCell>{stock.amount}</TableCell>
<TableCell
@ -337,11 +378,15 @@ const StockPage: React.FC = () => {
{/* 編集ダイアログ */}
<Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
<DialogTitle>在庫の編集</DialogTitle>
<DialogTitle>
<Typography variant="h5" >
在庫の編集
</Typography>
</DialogTitle>
<DialogContent>
{editStock && (
<>
<Typography variant="h4">{editStock.stuffName}</Typography>
<Typography variant="h4">【{editStock.stuffName}】</Typography>
<TextField
label="数量"
fullWidth
@ -425,9 +470,10 @@ const StockPage: React.FC = () => {
<Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
キャンセル
</Button>
<Button variant="contained" color="success" onClick={handleApplyChanges}>
<Button variant="contained" color="success" onClick={handleApplyChanges} sx={{ mt: 3, mb: 2 }}>
変更を適用
</Button>
<Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button>
</Box>
</>
)}
@ -441,7 +487,11 @@ const StockPage: React.FC = () => {
maxWidth="sm"
sx={{ overflow: "hidden" }}
>
<DialogTitle>食材の削除</DialogTitle>
<DialogTitle>
<Typography variant="h5" >
食材の削除
</Typography>
</DialogTitle>
<DialogContent>
{selectedRow && (
<>
@ -451,7 +501,7 @@ const StockPage: React.FC = () => {
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
<Button onClick={() => {
setIsDeleteOpen(false);
setSelectedRow(null);
// setSelectedRow(null);
}}>
キャンセル
</Button>
@ -462,6 +512,7 @@ const StockPage: React.FC = () => {
handleDeleteStock(selectedRow.stockId);
setIsDeleteOpen(false);
setSelectedRow(null);
setIsEditOpen(false);
}}
>
削除
@ -475,11 +526,10 @@ const StockPage: React.FC = () => {
);
};
return (
<Container>
<Typography variant="h4" component="h1" gutterBottom>
在庫一覧
<Typography variant="h3" component="h1" gutterBottom>
在庫リスト
</Typography>
{/* <Box sx={{ textAlign: 'right' }}> */}
@ -499,14 +549,39 @@ const StockPage: React.FC = () => {
>
{/* 在庫の食材追加ボタン */}
<Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
{/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
追加
</Button> */}
{/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
追加
</Button>
</Button> */}
{/* <Typography variant="caption" color="textSecondary">
食材の追加
</Typography>
<Fab
color="primary"
onClick={handleOpenAdd}
>
<AddIcon />
</Fab> */}
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Typography variant="caption" color="textSecondary">
食材の追加
</Typography>
<Fab color="primary" onClick={handleOpenAdd}>
<AddIcon />
</Fab>
</Box>
{/* 新規タスク作成ダイアログ */}
<Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
<Box display="flex" alignItems="center" >
<DialogTitle sx={{ flexGrow: 1 }}>在庫に食材を追加</DialogTitle>
<DialogTitle sx={{ flexGrow: 1 }}>
<Typography variant="h5" >
在庫に食材を追加
</Typography>
</DialogTitle>
<FormGroup row>
<FormControlLabel
control={<Checkbox />}
@ -644,15 +719,15 @@ const StockPage: React.FC = () => {
</DialogActions>
</Dialog>
{/* 在庫の食材編集ボタン（全テーブル共通） */}
{/* 在庫の食材編集ボタン（全テーブル共通）
<Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
mt: 3, mb: 2, mr: 1
}}>
詳細・編集
</Button>
</Button> */}
{/* 在庫の食材削除ボタン （全テーブル共通） */}
<Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button>
{/* 在庫の食材削除ボタン （全テーブル共通）
<Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button> */}
</Box>

Write Preview
Loading…
Cancel
Save