Masaharu.Kato
4 months ago
parent
a20c77b682
commit
1153f69d09
@ -0,0 +1,134 @@ |
||||
import { useState } from 'react'; |
||||
import { |
||||
Dialog, |
||||
DialogTitle, |
||||
DialogContent, |
||||
DialogActions, |
||||
TextField, |
||||
Button, |
||||
Box, |
||||
InputLabel, |
||||
FormGroup, |
||||
FormControl, |
||||
FormControlLabel, |
||||
Checkbox, |
||||
Select, |
||||
MenuItem, |
||||
} from '@mui/material'; |
||||
import { NewToBuy, Stuff } from '../types/types'; |
||||
import { stuffApi } from '../services/api'; |
||||
|
||||
|
||||
|
||||
const AddStuffAmountDialog = ({ |
||||
openDialog, |
||||
setOpenDialog, |
||||
newToBuy, |
||||
setNewToBuy, |
||||
onSubmit, |
||||
}: { |
||||
openDialog: boolean, |
||||
setOpenDialog: (open: boolean) => void, |
||||
newToBuy: NewToBuy, |
||||
setNewToBuy: (tobuy: NewToBuy) => void, |
||||
onSubmit: () => void, |
||||
}) => { |
||||
|
||||
const onChangeCategory = async (category: string) => { |
||||
setNewToBuy({ ...newToBuy, category }) |
||||
const result = await stuffApi.getStuffs(category) |
||||
setStuffs(result) |
||||
} |
||||
|
||||
const [stuffs, setStuffs] = useState<Stuff[]>([]); |
||||
|
||||
return ( |
||||
|
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}> |
||||
<Box display="flex" alignItems="center"> |
||||
<DialogTitle sx={{ flexGrow: 1 }}>材料の追加</DialogTitle> |
||||
<FormGroup row> |
||||
<FormControlLabel |
||||
control={<Checkbox />} |
||||
label="食材を新規追加" |
||||
checked={newToBuy.newAddition} |
||||
onChange={(e) => setNewToBuy({ ...newToBuy, newAddition: (e.target as HTMLInputElement).checked })} |
||||
/> |
||||
</FormGroup> |
||||
</Box> |
||||
<DialogContent> |
||||
<Box sx={{ pt: 1 }}> |
||||
{/*材料カテゴリ選択 */} |
||||
|
||||
<FormControl sx={{ width: "50%", marginBottom: 2 }}> |
||||
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel> |
||||
<Select |
||||
labelId="demo-simple-select-label" |
||||
value={newToBuy.category} |
||||
onChange={(e) => onChangeCategory(e.target.value)} |
||||
> |
||||
<MenuItem value="乳製品">乳製品</MenuItem> |
||||
<MenuItem value="魚・肉">魚・肉</MenuItem> |
||||
<MenuItem value="野菜">野菜</MenuItem> |
||||
<MenuItem value="調味料">調味料</MenuItem> |
||||
<MenuItem value="その他">その他</MenuItem> |
||||
</Select> |
||||
</FormControl> |
||||
|
||||
{!newToBuy.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}> |
||||
<InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel> |
||||
<Select |
||||
labelId="demo-simple-select-label" |
||||
value={newToBuy.stuffId} |
||||
onChange={(e) => setNewToBuy({ ...newToBuy, stuffId: Number(e.target.value) })} |
||||
> |
||||
{stuffs.map((stuff) => ( |
||||
<MenuItem key={stuff.stuffId} value={stuff.stuffId}> |
||||
{stuff.stuffName} |
||||
</MenuItem> |
||||
))} |
||||
</Select> |
||||
</FormControl>} |
||||
|
||||
{/* タスクタイトル入力フィールド */} |
||||
{newToBuy.newAddition && <TextField |
||||
autoFocus |
||||
margin="dense" |
||||
label="材料名" |
||||
fullWidth |
||||
value={newToBuy.stuffName} |
||||
onChange={(e) => setNewToBuy({ ...newToBuy, stuffName: e.target.value })} |
||||
sx={{ marginBottom: 2 }} |
||||
/>} |
||||
{/* 数量入力フィールド */} |
||||
<TextField |
||||
margin="dense" |
||||
label="数量" |
||||
fullWidth |
||||
value={newToBuy.amount} |
||||
onChange={(e) => { |
||||
const value = e.target.value; |
||||
const parsedValue = parseInt(value, 10); // 数値に変換
|
||||
if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外
|
||||
setNewToBuy({ ...newToBuy, amount: parsedValue }); // number型で保存
|
||||
} |
||||
}} |
||||
sx={{ width: "20%" }} |
||||
type="number" |
||||
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
||||
|
||||
/> |
||||
</Box> |
||||
</DialogContent> |
||||
<DialogActions> |
||||
<Button onClick={() => setOpenDialog(false)}>キャンセル</Button> |
||||
<Button onClick={onSubmit} variant="contained"> |
||||
追加 |
||||
</Button> |
||||
</DialogActions> |
||||
</Dialog> |
||||
|
||||
) |
||||
} |
||||
|
||||
export default AddStuffAmountDialog; |
||||
@ -0,0 +1,83 @@ |
||||
import { useState } from 'react'; |
||||
import { |
||||
Dialog, |
||||
DialogTitle, |
||||
DialogContent, |
||||
DialogActions, |
||||
TextField, |
||||
Button, |
||||
Box, |
||||
} from '@mui/material'; |
||||
import { NewStock } from '../types/types'; |
||||
|
||||
|
||||
const BuyDialog = ({ |
||||
openDialog, |
||||
setOpenDialog, |
||||
newStock, |
||||
setNewStock, |
||||
onSubmit, |
||||
}: { |
||||
openDialog: boolean, |
||||
setOpenDialog: (open: boolean) => void, |
||||
newStock: NewStock, |
||||
setNewStock: (tobuy: NewStock) => void, |
||||
onSubmit: () => void, |
||||
}) => { |
||||
|
||||
return ( |
||||
|
||||
|
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}> |
||||
<DialogTitle>在庫登録</DialogTitle> |
||||
<DialogContent> |
||||
<Box sx={{ pt: 1 }}> |
||||
{/* 価格入力フィールド */} |
||||
<TextField |
||||
autoFocus |
||||
margin="dense" |
||||
label="価格" |
||||
fullWidth |
||||
value={newStock.price} |
||||
onChange={(e) => { |
||||
const value = e.target.value; |
||||
if (/^\d*$/.test(value)) { |
||||
setNewStock({ ...newStock, price: value }) |
||||
}; |
||||
}} |
||||
/> |
||||
{/* 購入日入力フィールド */} |
||||
<TextField |
||||
margin="dense" |
||||
label="購入日(yyyy/MM/dd)" |
||||
fullWidth |
||||
value={newStock.buyDate} |
||||
onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })} |
||||
/> |
||||
{/* 消費・賞味期限入力フィールド */} |
||||
<TextField |
||||
margin="dense" |
||||
label="消費・賞味期限(yyyy/MM/dd)" |
||||
fullWidth |
||||
value={newStock.expDate} |
||||
onChange={(e) => setNewStock({ ...newStock, expDate: e.target.value })} |
||||
/> |
||||
{/* 購入店舗入力フィールド */} |
||||
{/* TODO: 実装 */} |
||||
<TextField |
||||
margin="dense" |
||||
label="店舗" |
||||
fullWidth |
||||
/> |
||||
</Box> |
||||
</DialogContent> |
||||
<DialogActions> |
||||
<Button onClick={() => setOpenDialog(false)}>キャンセル</Button> |
||||
<Button onClick={() => { onSubmit() }} variant="contained">登録</Button> |
||||
</DialogActions> |
||||
</Dialog> |
||||
|
||||
) |
||||
} |
||||
|
||||
export default BuyDialog; |
||||
@ -0,0 +1,76 @@ |
||||
import { |
||||
Dialog, |
||||
DialogTitle, |
||||
DialogContent, |
||||
DialogActions, |
||||
TextField, |
||||
Button, |
||||
Box, |
||||
} from '@mui/material'; |
||||
import { ToBuy } from '../types/types'; |
||||
|
||||
const EditAmountDialog = ({ |
||||
openDialog, |
||||
setOpenDialog, |
||||
editingTobuy, |
||||
setEditingTobuy, |
||||
onSubmit |
||||
}: { |
||||
openDialog: boolean, |
||||
setOpenDialog: (open: boolean) => void, |
||||
editingTobuy: ToBuy, |
||||
setEditingTobuy: (tobuy: ToBuy) => void, |
||||
onSubmit: () => void, |
||||
}) => { |
||||
|
||||
return ( |
||||
|
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(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={editingTobuy.stuffName} |
||||
disabled |
||||
sx={{ marginBottom: 2 }} |
||||
/> |
||||
{/* 数量入力フィールド */} |
||||
<TextField |
||||
margin="dense" |
||||
label="数量" |
||||
fullWidth |
||||
value={editingTobuy.amount} |
||||
onChange={(e) => { |
||||
const value = e.target.value; |
||||
const parsedValue = parseInt(value, 10); // 数値に変換
|
||||
if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外
|
||||
setEditingTobuy({ ...editingTobuy, amount: parsedValue }); // number型で保存
|
||||
} |
||||
}} |
||||
sx={{ width: "20%" }} |
||||
type="number" |
||||
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
||||
|
||||
/> |
||||
</Box> |
||||
</DialogContent> |
||||
<DialogActions> |
||||
<Button onClick={() => setOpenDialog(false)}>キャンセル</Button> |
||||
<Button onClick={onSubmit} variant="contained"> |
||||
確定 |
||||
</Button> |
||||
</DialogActions> |
||||
</Dialog> |
||||
|
||||
) |
||||
} |
||||
|
||||
export default EditAmountDialog; |
||||
Loading…
Reference in new issue