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

Add a widget to select a movement

Browse Source
This commit is contained in:
Pierre HUBERT
2025-05-13 19:29:26 +02:00
parent 3772dce01c
commit 5e4de364e0
9 changed files with 269 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
moneymgr_web/src/widgets/MovementWidget.tsx
View File

@@ -3,13 +3,12 @@ import CallReceivedIcon from "@mui/icons-material/CallReceived";
import React from "react";
import { Movement, MovementApi } from "../api/MovementsApi";
import { useAccounts } from "../hooks/AccountsListProvider";
import { fmtDateFromTime } from "../utils/DateUtils";
import { AccountIconWidget } from "./AccountIconWidget";
import { AmountWidget } from "./AmountWidget";
import { AsyncWidget } from "./AsyncWidget";
export function MovementWidget(p: { id: number }): React.ReactElement {
const accounts = useAccounts();
export function AsyncMovementWidget(p: { id: number }): React.ReactElement {
const [movement, setMovement] = React.useState<Movement | undefined>();
const load = async () => {
@@ -21,46 +20,51 @@ export function MovementWidget(p: { id: number }): React.ReactElement {
loadKey={p.id}
load={load}
errMsg="Failed to load movement!"
build={() => (
<span
style={{
display: "inline-flex",
alignItems: "center",
height: "100%",
}}
>
{movement!.amount > 0 ? (
<CallReceivedIcon color="success" />
) : (
<CallMadeIcon color="error" />
)}
<span
style={{
marginLeft: "5px",
display: "inline-flex",
flexDirection: "column",
justifyContent: "center",
height: "100%",
}}
>
<span style={{ height: "1em", lineHeight: 1 }}>
{movement?.label}
</span>
<span
style={{ display: "flex", alignItems: "center", lineHeight: 1 }}
>
<AmountWidget amount={movement!.amount} />
<span style={{ width: "0.5em" }} />
&bull;
<span style={{ width: "0.5em" }} />
<AccountIconWidget
account={accounts.get(movement!.account_id)!}
/>
{accounts.get(movement!.account_id)?.name}
</span>
</span>
</span>
)}
build={() => <MovementWidget movement={movement!} />}
/>
);
}
export function MovementWidget(p: { movement: Movement }): React.ReactElement {
const accounts = useAccounts();
return (
<span
style={{
display: "inline-flex",
alignItems: "center",
height: "100%",
}}
>
{p.movement!.amount > 0 ? (
<CallReceivedIcon color="success" />
) : (
<CallMadeIcon color="error" />
)}
<span
style={{
marginLeft: "5px",
display: "inline-flex",
flexDirection: "column",
justifyContent: "center",
height: "100%",
}}
>
<span style={{ height: "1em", lineHeight: 1 }}>
{p.movement?.label}
</span>
<span style={{ display: "flex", alignItems: "center", lineHeight: 1 }}>
<AmountWidget amount={p.movement!.amount} />
<span style={{ width: "0.5em" }} />
&bull;
<span style={{ width: "0.5em" }} />
<AccountIconWidget account={accounts.get(p.movement!.account_id)!} />
{accounts.get(p.movement!.account_id)?.name}
<span style={{ width: "0.5em" }} />
&bull; <span style={{ width: "0.5em" }} />
{fmtDateFromTime(p.movement.time)}
</span>
</span>
</span>
);
}