pierre/MoneyMgr
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases 2 Wiki Activity

Can create new movement when performing mapping

Browse Source
This commit is contained in:
Pierre HUBERT 2025-05-14 19:44:37 +02:00
parent 7c1cd96691
commit cc512e648c
2 changed files with 149 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
moneymgr_web/src/dialogs/UpdateMovementDialog.tsx
View File

@ -130,7 +130,7 @@ export function UpdateMovementDialog(p: {
setMovement((m) => { setMovement((m) => {
return { return {
...m, ...m,
amount: m.amount, amount: l,
}; };
}) })
} }

222
moneymgr_web/src/widgets/SelectMovementWidget.tsx
View File

@ -1,6 +1,15 @@
import { ListItem, ListItemButton, Paper, Typography } from "@mui/material"; import AddIcon from "@mui/icons-material/Add";
import {
Fab,
ListItem,
ListItemButton,
Paper,
Tooltip,
Typography,
} from "@mui/material";
import React from "react"; import React from "react";
import { Movement, MovementApi } from "../api/MovementsApi"; import { Movement, MovementApi } from "../api/MovementsApi";
import { UpdateMovementDialog } from "../dialogs/UpdateMovementDialog";
import { AsyncWidget } from "./AsyncWidget"; import { AsyncWidget } from "./AsyncWidget";
import { AccountInput } from "./forms/AccountInput"; import { AccountInput } from "./forms/AccountInput";
import { AmountInput } from "./forms/AmountInput"; import { AmountInput } from "./forms/AmountInput";
@ -18,6 +27,8 @@ export function SelectMovementWidget(p: {
label?: string; label?: string;
}; };
}): React.ReactElement { }): React.ReactElement {
const loadKey = React.useRef(1);
const [amount, setAmount] = React.useState<number | undefined>( const [amount, setAmount] = React.useState<number | undefined>(
p.initialValues?.amount p.initialValues?.amount
); );
@ -48,80 +59,143 @@ export function SelectMovementWidget(p: {
else setList(undefined); else setList(undefined);
}; };
const [creating, setCreating] = React.useState(false);
const handleStartCreateNewMovement = () => {
setCreating(true);
};
const handleCloseCreateNewMovement = () => {
setCreating(false);
};
const handleCreatedNewMovement = (m: Movement) => {
setAmount(m.amount);
setAccountId(m.account_id);
setTime(m.time);
setLabel(m.label);
p.onChange(m);
loadKey.current += 1;
setCreating(false);
};
return ( return (
<Paper style={{ padding: "10px", flex: 1 }}> <>
<div <Paper
style={{ display: "flex", flexDirection: "row", alignItems: "center" }} style={{
> padding: "10px",
<AccountInput flex: 1,
value={accountId} display: "flex",
onChange={setAccountId} flexDirection: "column",
style={{ flex: 20 }}
/>
<span style={{ flex: 1 }} />
<AmountInput
editable
value={amount ?? 0}
onValueChange={setAmount}
label="Amount"
placeholder="Amount"
variant="outlined"
style={{ height: "100%", flex: 20 }}
/>
<span style={{ flex: 1 }} />
<DateInput
editable
value={time}
onValueChange={setTime}
label="Date"
style={{ flex: 20 }}
variant="outlined"
/>
<span style={{ flex: 1 }} />
<TextInput
editable
value={label}
onValueChange={setLabel}
label="Label"
variant="outlined"
style={{ flex: 20 }}
/>
</div>
<AsyncWidget
loadKey={accountId + "/" + JSON.stringify(filters)}
load={load}
errMsg="Failed to load the list of movements!"
build={() => {
if (list === null)
return (
<Typography style={{ textAlign: "center", padding: "20px" }}>
Select an account to begin research.
</Typography>
);
if (list?.length === 0)
return (
<Typography style={{ textAlign: "center", padding: "20px" }}>
No result.
</Typography>
);
return (
<>
{list?.map((entry) => (
<ListItem>
<ListItemButton
selected={entry.id === p.value}
onClick={() => p.onChange(entry)}
>
<MovementWidget movement={entry} />
</ListItemButton>
</ListItem>
))}
</>
);
}} }}
/> >
</Paper> <div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<AccountInput
value={accountId}
onChange={setAccountId}
style={{ flex: 20 }}
/>
<span style={{ flex: 1 }} />
<AmountInput
editable
value={amount ?? 0}
onValueChange={setAmount}
label="Amount"
placeholder="Amount"
variant="outlined"
style={{ height: "100%", flex: 20 }}
/>
<span style={{ flex: 1 }} />
<DateInput
editable
value={time}
onValueChange={setTime}
label="Date"
style={{ flex: 20 }}
variant="outlined"
/>
<span style={{ flex: 1 }} />
<TextInput
editable
value={label}
onValueChange={setLabel}
label="Label"
variant="outlined"
style={{ flex: 20 }}
/>
</div>
<div style={{ flex: 1 }}>
<AsyncWidget
loadKey={
loadKey.current + "/" + accountId + "/" + JSON.stringify(filters)
}
load={load}
errMsg="Failed to load the list of movements!"
build={() => {
if (list === null)
return (
<Typography style={{ textAlign: "center", padding: "20px" }}>
Select an account to begin research.
</Typography>
);
if (list?.length === 0)
return (
<Typography style={{ textAlign: "center", padding: "20px" }}>
No result.
</Typography>
);
return (
<>
{list?.map((entry) => (
<ListItem>
<ListItemButton
selected={entry.id === p.value}
onClick={() => p.onChange(entry)}
>
<MovementWidget movement={entry} />
</ListItemButton>
</ListItem>
))}
</>
);
}}
/>
</div>
<div style={{ textAlign: "right" }}>
<Tooltip title="Create a new movement">
<Fab
color="primary"
aria-label="Create a new movement"
onClick={handleStartCreateNewMovement}
>
<AddIcon />
</Fab>
</Tooltip>
</div>
</Paper>
{creating && accountId && (
<UpdateMovementDialog
open
initial={{
account_id: accountId,
amount: amount ?? 0,
checked: false,
label: label ?? "",
time: time ?? 0,
}}
onClose={handleCloseCreateNewMovement}
onFinished={handleCreatedNewMovement}
/>
)}
</>
); );
} }