diff --git a/moneymgr_web/src/dialogs/UpdateMovementDialog.tsx b/moneymgr_web/src/dialogs/UpdateMovementDialog.tsx new file mode 100644 index 0000000..31c2635 --- /dev/null +++ b/moneymgr_web/src/dialogs/UpdateMovementDialog.tsx @@ -0,0 +1,113 @@ +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, +} from "@mui/material"; +import React from "react"; +import { Movement, MovementUpdate } from "../api/MovementsApi"; +import { ServerApi } from "../api/ServerApi"; +import { AmountInput } from "../widgets/forms/AmountInput"; +import { DateInput } from "../widgets/forms/DateInput"; +import { TextInput } from "../widgets/forms/TextInput"; +import { AccountInput } from "../widgets/forms/AccountInput"; + +export function UpdateMovementDialog(p: { + open: boolean; + updateId?: number; + initial: MovementUpdate; + onClose: () => void; + onFinished: (m: Movement) => void; +}): React.ReactElement { + const [movement, setMovement] = React.useState(p.initial); + + const style: React.CSSProperties = { width: "100%", marginBottom: "15px" }; + + const canSubmit = + movement.amount !== 0 && + movement.account_id && + movement.time !== 0 && + movement.label.length > 0; + + const handleSubmit = async () => {}; + + return ( + + + {p.updateId ? `Update a movement` : `Create a movement`} + + + {/* Account */} + + setMovement((m) => { + return { + ...m, + account_id: a ?? 0, + }; + }) + } + /> + {/* Date input */} + + setMovement((m) => { + return { + ...m, + time: t ?? 0, + }; + }) + } + /> + {/* Label input */} + + setMovement((m) => { + return { + ...m, + label: l ?? "", + }; + }) + } + size={ServerApi.Config.constraints.movement_label} + /> + {/* Amount input */} + + setMovement((m) => { + return { + ...m, + amount: m.amount, + }; + }) + } + /> + + + + + + + ); +} diff --git a/moneymgr_web/src/widgets/forms/AccountInput.tsx b/moneymgr_web/src/widgets/forms/AccountInput.tsx index 50707c1..5b74e00 100644 --- a/moneymgr_web/src/widgets/forms/AccountInput.tsx +++ b/moneymgr_web/src/widgets/forms/AccountInput.tsx @@ -1,4 +1,4 @@ -import { MenuItem, Select, Typography } from "@mui/material"; +import { MenuItem, Select, TextFieldVariants, Typography } from "@mui/material"; import { AccountIconWidget } from "../AccountIconWidget"; import { useAccounts } from "../../hooks/AccountsListProvider"; import { AmountWidget } from "../AmountWidget"; @@ -8,6 +8,7 @@ export function AccountInput(p: { onChange: (value: number) => void; label?: string; style?: React.CSSProperties; + variant?: TextFieldVariants; }): React.ReactElement { const accounts = useAccounts(); let current = p.value; @@ -23,6 +24,7 @@ export function AccountInput(p: { onChange={(e) => p.onChange(Number(e.target.value))} size="small" style={p.style} + variant={p.variant} > {accounts.list.list.map((a) => (