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) => {
return {
...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 { Movement, MovementApi } from "../api/MovementsApi";
import { UpdateMovementDialog } from "../dialogs/UpdateMovementDialog";
import { AsyncWidget } from "./AsyncWidget";
import { AccountInput } from "./forms/AccountInput";
import { AmountInput } from "./forms/AmountInput";
@ -18,6 +27,8 @@ export function SelectMovementWidget(p: {
label?: string;
};
}): React.ReactElement {
const loadKey = React.useRef(1);
const [amount, setAmount] = React.useState<number | undefined>(
p.initialValues?.amount
);
@ -48,80 +59,143 @@ export function SelectMovementWidget(p: {
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 (
<Paper style={{ padding: "10px", flex: 1 }}>
<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>
<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
style={{
padding: "10px",
flex: 1,
display: "flex",
flexDirection: "column",
}}
/>
</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}
/>
)}
</>
);
}