From c07f3261a8c1d1971feb7b6eb893f7495e96417e Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sat, 21 Aug 2021 14:23:37 +0200 Subject: [PATCH] feat: added empty account add dialog --- .../src/components/AccountDialog/index.tsx | 39 +++++++++ .../src/pages/Dashboard/Dashboard.module.css | 5 ++ frontend/src/pages/Dashboard/index.tsx | 83 +++++++++++++------ 3 files changed, 101 insertions(+), 26 deletions(-) create mode 100644 frontend/src/components/AccountDialog/index.tsx create mode 100644 frontend/src/pages/Dashboard/Dashboard.module.css diff --git a/frontend/src/components/AccountDialog/index.tsx b/frontend/src/components/AccountDialog/index.tsx new file mode 100644 index 0000000..dc7498d --- /dev/null +++ b/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 = ( + { + open, + onSuccess, + onCancel + } +) => { + return ( + + + + + + + + + + + ) +} + +export default AccountDialog \ No newline at end of file diff --git a/frontend/src/pages/Dashboard/Dashboard.module.css b/frontend/src/pages/Dashboard/Dashboard.module.css new file mode 100644 index 0000000..df7976a --- /dev/null +++ b/frontend/src/pages/Dashboard/Dashboard.module.css @@ -0,0 +1,5 @@ +.addButton { + position: fixed !important; + bottom: 50px; + right: 50px; +} \ No newline at end of file diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index 5489ce2..b3c977a 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/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 = () => { const {client} = useAuth() const accountEndpoint = new AccountEndpoint(client) + const [openNewAccountDialog, setOpenNewAccountDialog] = useState(false) + useEffect(() => { accountEndpoint.getAll() .then(accounts => { @@ -44,32 +49,58 @@ const Dashboard: FunctionComponent = () => { }) }, []) - return - {loading && - - } - {!loading && accounts.length == 0 && - - No accounts yet. - - } - - { - accounts.map((account) => ( - - - - )) - } - + return ( + <> + + {loading && + + } + {!loading && accounts.length == 0 && + + No accounts yet. + + } + + { + accounts.map((account) => ( + + + + )) + } + + - - + { + setOpenNewAccountDialog(false) + }} + onCancel={() => { + setOpenNewAccountDialog(false) + }} + /> + + { + setOpenNewAccountDialog(true) + }} + > + + + + + + ) } export default Dashboard \ No newline at end of file