diff --git a/src/compforge/src/FormsDisplay.js b/src/compforge/src/FormsDisplay.js index aa04585a6df66f76631176e34ea44c15045d4a6b..516898151e9047102b7c064420da3cbd51d816b9 100644 --- a/src/compforge/src/FormsDisplay.js +++ b/src/compforge/src/FormsDisplay.js @@ -1,49 +1,40 @@ import React from 'react'; -import { Grid } from '@material-ui/core'; +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles({ + table: { + minWidth: 650, + }, + }); const FormsDisplay = ({ formItems }) => { + const classes = useStyles(); return ( <div> - {formItems.map( - (formItem, i) => - <Grid - container - direction="column" - justify="space-evenly" - alignItems="stretch" - spacing={3} - item - xs={9} - key={i}> - <FormItem - name={formItem.name} - owner={formItem.owner} - dateModified={formItem.dateModified} /> - </Grid> - )} + <TableContainer component={Paper}> + <Table className={classes.table} aria-label="simple table"> + <TableHead> + <TableRow> + <TableCell>Form name</TableCell> + <TableCell align="right">Owner</TableCell> + <TableCell align="right">Date modified</TableCell> + </TableRow> + </TableHead> + <TableBody> + {formItems.map(formItem => ( + <TableRow key={formItem.name}> + <TableCell component="th" scope="row"> + {formItem.name} + </TableCell> + <TableCell align="right">{formItem.owner}</TableCell> + <TableCell align="right">{formItem.dateModified}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> </div> ) } -const FormItem = ({ name, owner, dateModified }) => { - return ( - <Grid - container - direction="row" - spacing={3}> - <Grid item xs={3}> - <h3>{name}</h3> - </Grid> - <Grid item xs={3}> - <h3>{owner}</h3> - </Grid> - <Grid item xs={3}> - <div outline="2px solid black"> - <h3>{dateModified}</h3> - </div> - </Grid> - </Grid> - ) -} - export default FormsDisplay \ No newline at end of file diff --git a/src/compforge/src/index.js b/src/compforge/src/index.js index d8bacca7cbad60bd7599d1a3eff446a2a52fe925..57e55e0a9eb4de6e650769473ca95b9753abb15b 100644 --- a/src/compforge/src/index.js +++ b/src/compforge/src/index.js @@ -34,6 +34,8 @@ const Page = () => { const classes = useStyles(); return ( <Grid container spacing={3}> + + {/* Header */} <Grid item xs={12}> <AppBar position="static"> <Toolbar> @@ -44,22 +46,17 @@ const Page = () => { </Toolbar> </AppBar> </Grid> - <Grid - item - xs={3} - > + + {/* Side Menu */} + <Grid item xs={2}> <Menu menuItems={menuItems} /> </Grid> - <Grid - container - item - xs={9} - direction="column" - justify="space-evenly" - spacing={3} - > + + {/* Form Area */} + <Grid item xs={10}> <FormsDisplay formItems={formItems} /> </Grid> + </Grid> ) }