109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
import CloseIcon from "@mui/icons-material/Close";
|
|
import {
|
|
Alert,
|
|
AppBar,
|
|
Button,
|
|
Dialog,
|
|
Grid,
|
|
IconButton,
|
|
Toolbar,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import { InboxEntry } from "../api/InboxApi";
|
|
import { Movement } from "../api/MovementsApi";
|
|
import { AsyncFileViewerWidget } from "../widgets/FileViewerWidget";
|
|
import { SelectMovementWidget } from "../widgets/SelectMovementWidget";
|
|
import { AmountWidget } from "../widgets/AmountWidget";
|
|
import { fmtDateFromTime } from "../utils/DateUtils";
|
|
|
|
export function AttachInboxEntryToMovementDialog(p: {
|
|
open: boolean;
|
|
entry: InboxEntry;
|
|
onSelected: (m: Movement) => void;
|
|
onClose: () => void;
|
|
}): React.ReactElement {
|
|
const [value, setValue] = React.useState<undefined | Movement>();
|
|
|
|
const handleSubmit = () => {
|
|
if (!value) return;
|
|
p.onSelected(value);
|
|
};
|
|
|
|
return (
|
|
<Dialog fullScreen open={true} onClose={p.onClose}>
|
|
<AppBar sx={{ position: "relative" }}>
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={p.onClose}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
|
Attach inbox entry to movement
|
|
</Typography>
|
|
<Typography
|
|
sx={{ ml: 2, flex: 1 }}
|
|
style={{ display: "flex", flexDirection: "column" }}
|
|
>
|
|
<span>
|
|
{p.entry.amount !== undefined && (
|
|
<>
|
|
<span>
|
|
Amount: <AmountWidget amount={p.entry.amount} />
|
|
</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
<span>{p.entry.label && <>Label: {p.entry.label}</>}</span>
|
|
<span>
|
|
{p.entry.time && <>Date: {fmtDateFromTime(p.entry.time)}</>}
|
|
</span>
|
|
</Typography>
|
|
{Number.isFinite(p.entry.amount) &&
|
|
value !== undefined &&
|
|
p.entry.amount !== value.amount && (
|
|
<Alert severity="warning">Amount mismatch!</Alert>
|
|
)}
|
|
<Button
|
|
autoFocus
|
|
color="inherit"
|
|
onClick={handleSubmit}
|
|
disabled={!value}
|
|
>
|
|
Attach
|
|
</Button>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Grid container style={{ flex: 1 }}>
|
|
<Grid
|
|
size={{ sm: 12, md: 6 }}
|
|
style={{
|
|
display: "flex",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<AsyncFileViewerWidget fileID={p.entry.file_id} />
|
|
</Grid>
|
|
<Grid
|
|
size={{ sm: 12, md: 6 }}
|
|
style={{ display: "flex", height: "100%" }}
|
|
>
|
|
<SelectMovementWidget
|
|
value={value?.id}
|
|
onChange={setValue}
|
|
initialValues={{
|
|
amount: p.entry.amount,
|
|
time: p.entry.time,
|
|
label: p.entry.label,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Dialog>
|
|
);
|
|
}
|