mirror of
https://github.com/sigmasternchen/threadule
synced 2025-03-15 08:09:01 +00:00
feat: added empty account add dialog
This commit is contained in:
parent
9493979e4f
commit
c07f3261a8
3 changed files with 101 additions and 26 deletions
39
frontend/src/components/AccountDialog/index.tsx
Normal file
39
frontend/src/components/AccountDialog/index.tsx
Normal 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
|
5
frontend/src/pages/Dashboard/Dashboard.module.css
Normal file
5
frontend/src/pages/Dashboard/Dashboard.module.css
Normal file
|
@ -0,0 +1,5 @@
|
|||
.addButton {
|
||||
position: fixed !important;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
}
|
|
@ -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
|
Loading…
Reference in a new issue