|
|
|
|
@ -26,8 +26,9 @@ import { |
|
|
|
|
Select, |
|
|
|
|
MenuItem, |
|
|
|
|
} from '@mui/material'; |
|
|
|
|
import '../App.css'; |
|
|
|
|
import { GENERAL_ERRORS, STOCK_ERRORS } from '../constants/errorMessages'; |
|
|
|
|
import { Add as AddIcon } from '@mui/icons-material'; |
|
|
|
|
import { Add as AddIcon, KeyboardArrowDown as ArrowDownIcon, KeyboardArrowUp as ArrowUpIcon, Inventory as InventoryIcon } from '@mui/icons-material'; |
|
|
|
|
import DatePicker, { registerLocale } from 'react-datepicker'; |
|
|
|
|
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
|
|
|
|
|
import { useMessage } from '../components/MessageContext'; |
|
|
|
|
@ -79,6 +80,19 @@ const StockPage: React.FC = () => { |
|
|
|
|
|
|
|
|
|
const { showErrorMessage, showWarningMessage } = useMessage(); |
|
|
|
|
|
|
|
|
|
// カテゴリ名一覧
|
|
|
|
|
const CATEGORY_NAMES = [ |
|
|
|
|
"乳製品", |
|
|
|
|
"魚・肉", |
|
|
|
|
"野菜", |
|
|
|
|
"調味料", |
|
|
|
|
"その他", |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const [openCategory, setOpenCategory] = useState(Object.fromEntries( |
|
|
|
|
CATEGORY_NAMES.map(category => [category, true]) |
|
|
|
|
)); |
|
|
|
|
|
|
|
|
|
// コンポーネントマウント時にタスク一覧を取得
|
|
|
|
|
useEffect(() => { |
|
|
|
|
fetchStocks(); |
|
|
|
|
@ -209,15 +223,6 @@ const StockPage: React.FC = () => { |
|
|
|
|
}; |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
/** 追加ボタンを押したときにダイアログを開く */ |
|
|
|
|
const handleOpenAdd = () => { |
|
|
|
|
setIsAddOpen(true); |
|
|
|
|
}; |
|
|
|
|
/** 追加ダイアログを閉じる */ |
|
|
|
|
const handleCloseAdd = () => { |
|
|
|
|
setIsAddOpen(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* セルを選択して編集画面 |
|
|
|
|
*/ |
|
|
|
|
@ -358,8 +363,8 @@ const StockPage: React.FC = () => { |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<TableContainer component={Paper}> |
|
|
|
|
<Table> |
|
|
|
|
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
|
|
|
|
<Table size="small"> |
|
|
|
|
<TableHead sx={{ backgroundColor: "#ebcba2", color: "#333" }}> |
|
|
|
|
<TableRow> |
|
|
|
|
<TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>食材名</TableCell> |
|
|
|
|
<TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>数量</TableCell> |
|
|
|
|
@ -588,44 +593,14 @@ const StockPage: React.FC = () => { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Container> |
|
|
|
|
<Typography variant="h3" component="h1" sx={{ mb: 4 }} > |
|
|
|
|
<div className="mainContainer"> |
|
|
|
|
<div className="mainTitle"> |
|
|
|
|
<InventoryIcon sx={{ mr: "0.5em" }} /> |
|
|
|
|
在庫リスト |
|
|
|
|
</Typography> |
|
|
|
|
|
|
|
|
|
<Box |
|
|
|
|
sx={{ |
|
|
|
|
position: 'fixed', // ← sticky から fixed に変更
|
|
|
|
|
bottom: 55, // ← 下に固定
|
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
zIndex: 1300, // ダイアログよりは低く
|
|
|
|
|
backgroundColor: '#f5f5f5', |
|
|
|
|
// backgroundColor: 'white',
|
|
|
|
|
// padding: 2,
|
|
|
|
|
px: 2, |
|
|
|
|
py: 1, |
|
|
|
|
display: 'flex', |
|
|
|
|
justifyContent: 'flex-end', // ← 左寄せ
|
|
|
|
|
boxShadow: 'none', // 軽めの上向きシャドウ
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
{/* 在庫の食材追加ボタン */} |
|
|
|
|
<Box sx={{ |
|
|
|
|
display: 'flex', flexDirection: 'column', alignItems: 'flex-end', |
|
|
|
|
mr: 2 |
|
|
|
|
}}> |
|
|
|
|
<Typography variant="caption" color="textSecondary"> |
|
|
|
|
食材の追加 |
|
|
|
|
</Typography> |
|
|
|
|
<Fab color="primary" onClick={handleOpenAdd} > |
|
|
|
|
<AddIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
</Box> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 新規タスク作成ダイアログ */} |
|
|
|
|
<Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}> |
|
|
|
|
<Dialog open={isAddOpen} onClose={() => setIsAddOpen(false)} disableScrollLock={true}> |
|
|
|
|
<Box display="flex" alignItems="center" > |
|
|
|
|
<DialogTitle sx={{ flexGrow: 1 }}> |
|
|
|
|
<Typography variant="h5" > |
|
|
|
|
@ -641,6 +616,7 @@ const StockPage: React.FC = () => { |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
|
<DialogContent> |
|
|
|
|
<Box sx={{ pt: 1 }}> |
|
|
|
|
{/*材料カテゴリ選択 */} |
|
|
|
|
@ -792,40 +768,33 @@ const StockPage: React.FC = () => { |
|
|
|
|
</Button> |
|
|
|
|
</DialogActions> |
|
|
|
|
</Dialog> |
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
|
{/* 在庫一覧リスト */} |
|
|
|
|
{/* 乳製品 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>乳製品</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["乳製品"])} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 肉・魚 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["魚・肉"])} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 野菜 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>野菜</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["野菜"])} |
|
|
|
|
</div> |
|
|
|
|
{/* 各カテゴリを表示 */} |
|
|
|
|
{CATEGORY_NAMES.map(category => { |
|
|
|
|
return ( |
|
|
|
|
<Box sx={{ padding: "1rem" }}> |
|
|
|
|
<Typography variant="h5" component="h1" gutterBottom |
|
|
|
|
onClick={() => setOpenCategory({...openCategory, [category]: !openCategory[category]})} |
|
|
|
|
> |
|
|
|
|
{!openCategory[category] ? <ArrowDownIcon color="primary" /> : <ArrowUpIcon color="primary" />} |
|
|
|
|
{category} |
|
|
|
|
</Typography> |
|
|
|
|
{openCategory[category] && StockTable(stocks, [category])} |
|
|
|
|
</Box> |
|
|
|
|
) |
|
|
|
|
})} |
|
|
|
|
|
|
|
|
|
{/* 調味料 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>調味料</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["調味料"])} |
|
|
|
|
</div> |
|
|
|
|
{/* 材料ボタン - 画面下部に固定表示 */} |
|
|
|
|
<Box className="plusButtonWrapper"> |
|
|
|
|
<Fab color="primary" onClick={() => setIsAddOpen(true)} className="plusButton"> |
|
|
|
|
<AddIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
{/* <Typography className="plusButtonLabel"> |
|
|
|
|
材料の追加 |
|
|
|
|
</Typography> */} |
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
|
{/* その他 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>その他</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["その他"])} |
|
|
|
|
</div> |
|
|
|
|
<Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */} |
|
|
|
|
</Container> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
Masaharu.Kato
4 months ago