Masaharu.Kato
5 months ago
commit
ad810e58cd
@ -0,0 +1,28 @@ |
||||
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 ( |
||||
<FormControl sx={{ width: "50%", marginBottom:2 }}> |
||||
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel> |
||||
<Select |
||||
labelId="demo-simple-select-label" |
||||
value={selectedValue} |
||||
onChange={(event) => setSelectedValue(event.target.value)} |
||||
> |
||||
<MenuItem value="乳製品">乳製品</MenuItem> |
||||
<MenuItem value="肉・魚">肉・魚</MenuItem> |
||||
<MenuItem value="野菜">野菜</MenuItem> |
||||
<MenuItem value="調味料">調味料</MenuItem> |
||||
<MenuItem value="その他">その他</MenuItem> |
||||
</Select> |
||||
</FormControl> |
||||
); |
||||
}; |
||||
|
||||
export default CategoryDropDown; |
||||
@ -0,0 +1,274 @@ |
||||
/** |
||||
* テストページコンポーネント |
||||
* 白紙の状態で表示されるテスト用のページ |
||||
*/ |
||||
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, |
||||
Box, |
||||
|
||||
} from '@mui/material'; |
||||
import { TASK_ERRORS } from '../constants/errorMessages'; |
||||
import CategoryDropDown from "../components/CategoryDropDown"; |
||||
|
||||
const StockPage: React.FC = () => { |
||||
|
||||
const [stocks, setStocks] = useState<Stock[]>([]); |
||||
// 在庫編集ダイアログの表示状態
|
||||
const [openDialog, setOpenDialog] = useState(false); |
||||
|
||||
// コンポーネントマウント時にタスク一覧を取得
|
||||
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); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 文字列(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 ( |
||||
<Container> |
||||
<Typography variant="h4" component="h1" gutterBottom> |
||||
在庫一覧 |
||||
</Typography> |
||||
|
||||
{/* タスク編集ボタン */} |
||||
<Button color="success" |
||||
type="submit" |
||||
variant="contained" |
||||
sx={{ mt: 3, mb: 2, left: '80%' }} |
||||
> |
||||
編集 |
||||
</Button> |
||||
|
||||
{/* タスク削除ボタン */} |
||||
<Button color="error" |
||||
type="submit" |
||||
variant="contained" |
||||
sx={{ mt: 3, mb: 2, left: '82%' }} |
||||
> |
||||
削除 |
||||
</Button> |
||||
|
||||
<Typography variant="h4" component="h1" gutterBottom> |
||||
乳製品 |
||||
</Typography> |
||||
{/* 乳製品一覧表示エリア - 青い背景のコンテナ */} |
||||
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
||||
|
||||
{/* 要素が無かったら表示しない */} |
||||
{stocks.filter(stock => stock.category === "乳製品").length === 0 ? null : ( |
||||
<TableContainer component={Paper}> |
||||
<Table> |
||||
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
||||
<TableRow> |
||||
<TableCell>食材名</TableCell> |
||||
<TableCell>数量</TableCell> |
||||
<TableCell>購入価格</TableCell> |
||||
<TableCell>賞味・消費期限</TableCell> |
||||
<TableCell>購入日</TableCell> |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{stocks |
||||
.filter(stock => stock.category == "乳製品") // 乳製品だけ抽出
|
||||
.map(stock => ( |
||||
<TableRow key={stock.stock_id} |
||||
> |
||||
<TableCell>{stock.stuff_name}</TableCell> |
||||
<TableCell>{stock.amount}</TableCell> |
||||
<TableCell>{stock.price}</TableCell> |
||||
<TableCell>{formatDate(stock.exp_date)}</TableCell> |
||||
<TableCell>{formatDate(stock.buy_date)}</TableCell> |
||||
</TableRow> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
)} |
||||
</div> |
||||
|
||||
<Typography variant="h4" component="h1" gutterBottom> |
||||
肉・魚 |
||||
</Typography> |
||||
{/* 肉・魚一覧表示エリア - 青い背景のコンテナ */} |
||||
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
||||
|
||||
{stocks.filter(stock => stock.category == "肉" || stock.category == "魚").length === 0 ? null : ( |
||||
<TableContainer component={Paper}> |
||||
<Table> |
||||
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
||||
<TableRow> |
||||
<TableCell>食材名</TableCell> |
||||
<TableCell>数量</TableCell> |
||||
<TableCell>購入価格</TableCell> |
||||
<TableCell>賞味・消費期限</TableCell> |
||||
<TableCell>購入日</TableCell> |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{stocks |
||||
.filter(stock => stock.category == "肉" || stock.category == "魚") // 肉と魚だけ抽出
|
||||
.map(stock => ( |
||||
<TableRow key={stock.stock_id}> |
||||
<TableCell>{stock.stuff_name}</TableCell> |
||||
<TableCell>{stock.amount}</TableCell> |
||||
<TableCell>{stock.price}</TableCell> |
||||
<TableCell>{formatDate(stock.exp_date)}</TableCell> |
||||
<TableCell>{formatDate(stock.buy_date)}</TableCell> |
||||
</TableRow> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
)} |
||||
|
||||
</div> |
||||
|
||||
<Typography variant="h4" component="h1" gutterBottom> |
||||
野菜 |
||||
</Typography> |
||||
{/* 野菜一覧表示エリア - 青い背景のコンテナ */} |
||||
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
||||
{stocks.filter(stock => stock.category === "野菜").length === 0 ? null : ( |
||||
<TableContainer component={Paper}> |
||||
<Table> |
||||
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
||||
<TableRow> |
||||
<TableCell>食材名</TableCell> |
||||
<TableCell>数量</TableCell> |
||||
<TableCell>購入価格</TableCell> |
||||
<TableCell>賞味・消費期限</TableCell> |
||||
<TableCell>購入日</TableCell> |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{stocks |
||||
.filter(stock => stock.category == "野菜") // 野菜だけ抽出
|
||||
.map(stock => ( |
||||
<TableRow key={stock.stock_id}> |
||||
<TableCell>{stock.stuff_name}</TableCell> |
||||
<TableCell>{stock.amount}</TableCell> |
||||
<TableCell>{stock.price}</TableCell> |
||||
<TableCell>{formatDate(stock.exp_date)}</TableCell> |
||||
<TableCell>{formatDate(stock.buy_date)}</TableCell> |
||||
</TableRow> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
)} |
||||
</div> |
||||
|
||||
<Typography variant="h4" component="h1" gutterBottom> |
||||
調味料 |
||||
</Typography> |
||||
{/* 調味料一覧表示エリア - 青い背景のコンテナ */} |
||||
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
||||
{stocks.filter(stock => stock.category === "調味料").length === 0 ? null : ( |
||||
<TableContainer component={Paper}> |
||||
<Table> |
||||
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
||||
<TableRow> |
||||
<TableCell>食材名</TableCell> |
||||
<TableCell>数量</TableCell> |
||||
<TableCell>購入価格</TableCell> |
||||
<TableCell>賞味・消費期限</TableCell> |
||||
<TableCell>購入日</TableCell> |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{stocks |
||||
.filter(stock => stock.category == "調味料") // 調味料だけ抽出
|
||||
.map(stock => ( |
||||
<TableRow key={stock.stock_id}> |
||||
<TableCell>{stock.stuff_name}</TableCell> |
||||
<TableCell>{stock.amount}</TableCell> |
||||
<TableCell>{stock.price}</TableCell> |
||||
<TableCell>{formatDate(stock.exp_date)}</TableCell> |
||||
<TableCell>{formatDate(stock.buy_date)}</TableCell> |
||||
</TableRow> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
)} |
||||
</div> |
||||
|
||||
<Typography variant="h4" component="h1" gutterBottom> |
||||
その他 |
||||
</Typography> |
||||
{/* その他一覧表示エリア - 青い背景のコンテナ */} |
||||
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
||||
{stocks.filter(stock => stock.category === "その他").length === 0 ? null : ( |
||||
<TableContainer component={Paper}> |
||||
<Table> |
||||
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
||||
<TableRow> |
||||
<TableCell>食材名</TableCell> |
||||
<TableCell>数量</TableCell> |
||||
<TableCell>購入価格</TableCell> |
||||
<TableCell>賞味・消費期限</TableCell> |
||||
<TableCell>購入日</TableCell> |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{stocks |
||||
.filter(stock => stock.category == "その他") // その他だけ抽出
|
||||
.map(stock => ( |
||||
<TableRow key={stock.stock_id}> |
||||
<TableCell>{stock.stuff_name}</TableCell> |
||||
<TableCell>{stock.amount}</TableCell> |
||||
<TableCell>{stock.price}</TableCell> |
||||
<TableCell>{formatDate(stock.exp_date)}</TableCell> |
||||
<TableCell>{formatDate(stock.buy_date)}</TableCell> |
||||
</TableRow> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
)} |
||||
</div> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
export default StockPage; |
||||
@ -0,0 +1,24 @@ |
||||
{ |
||||
"name": "joint_exc", |
||||
"lockfileVersion": 3, |
||||
"requires": true, |
||||
"packages": { |
||||
"node_modules/react": { |
||||
"version": "19.1.0", |
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", |
||||
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", |
||||
"peer": true, |
||||
"engines": { |
||||
"node": ">=0.10.0" |
||||
} |
||||
}, |
||||
"node_modules/react-icons": { |
||||
"version": "5.5.0", |
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", |
||||
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", |
||||
"peerDependencies": { |
||||
"react": "*" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue