feat: added empty account add dialog

frontend/src/components/AccountDialog/index.tsx

@@ -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

frontend/src/pages/Dashboard/Dashboard.module.css

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

frontend/src/pages/Dashboard/index.tsx

@@ -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