feat: added empty account add dialog

This commit is contained in:
overflowerror 2021-08-21 14:23:37 +02:00
parent 9493979e4f
commit c07f3261a8
3 changed files with 101 additions and 26 deletions

View file

@ -0,0 +1,39 @@
import {FunctionComponent} from "react";
import {Button, Dialog, DialogActions, DialogContent, DialogTitle} from "@material-ui/core";
export type AccountFormDialogProps = {
open: boolean
onSuccess: () => void
onCancel: () => void
}
const AccountDialog: FunctionComponent<AccountFormDialogProps> = (
{
open,
onSuccess,
onCancel
}
) => {
return (
<Dialog open={open}>
<DialogTitle title={"New Account"}/>
<DialogContent>
</DialogContent>
<DialogActions>
<Button onClick={() => {
onCancel()
}} color="secondary">
Cancel
</Button>
<Button onClick={() => {
onSuccess()
}} color="primary">
Submit
</Button>
</DialogActions>
</Dialog>
)
}
export default AccountDialog

View file

@ -0,0 +1,5 @@
.addButton {
position: fixed !important;
bottom: 50px;
right: 50px;
}

View file

@ -1,10 +1,13 @@
import {FunctionComponent, useEffect, useState} from "react";
import {CircularProgress, Grid, Typography} from "@material-ui/core";
import {CircularProgress, Fab, Grid, Typography} from "@material-ui/core";
import Account from "../../api/entities/Account";
import {useAuth} from "../../auth/AuthProvider";
import AccountEndpoint from "../../api/endpoints/AccountEndpoint";
import {ClosedMessageBox, MessageBox, MessageBoxProps} from "../../components/MessageBox";
import AccountCard from "../../components/AccountCard";
import AddIcon from "@material-ui/icons/Add";
import styles from "./Dashboard.module.css"
import AccountDialog from "../../components/AccountDialog";
type DashboardProps = {}
@ -25,6 +28,8 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
const {client} = useAuth()
const accountEndpoint = new AccountEndpoint(client)
const [openNewAccountDialog, setOpenNewAccountDialog] = useState<boolean>(false)
useEffect(() => {
accountEndpoint.getAll()
.then(accounts => {
@ -44,32 +49,58 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
})
}, [])
return <Grid container style={{
marginTop: "40px",
boxSizing: "border-box",
}}>
{loading &&
<CircularProgress/>
}
{!loading && accounts.length == 0 &&
<Typography variant={"h3"} style={{
color: "grey",
}}>
No accounts yet.
</Typography>
}
<Grid item container spacing={4}>
{
accounts.map((account) => (
<Grid item xs={4} key={account.id}>
<AccountCard account={account}/>
</Grid>
))
}
</Grid>
return (
<>
<Grid container style={{
marginTop: "40px",
boxSizing: "border-box",
}}>
{loading &&
<CircularProgress/>
}
{!loading && accounts.length == 0 &&
<Typography variant={"h3"} style={{
color: "grey",
}}>
No accounts yet.
</Typography>
}
<Grid item container spacing={4}>
{
accounts.map((account) => (
<Grid item xs={4} key={account.id}>
<AccountCard account={account}/>
</Grid>
))
}
</Grid>
</Grid>
<MessageBox {...message} />
</Grid>
<AccountDialog
open={openNewAccountDialog}
onSuccess={() => {
setOpenNewAccountDialog(false)
}}
onCancel={() => {
setOpenNewAccountDialog(false)
}}
/>
<Fab
size={"large"}
color="primary"
aria-label="add"
className={styles.addButton}
onClick={() => {
setOpenNewAccountDialog(true)
}}
>
<AddIcon/>
</Fab>
<MessageBox {...message} />
</>
)
}
export default Dashboard