diff --git a/ui/src/components/SignoffSummary/index.jsx b/ui/src/components/SignoffSummary/index.jsx index 7d94b0e578..355c88ea64 100644 --- a/ui/src/components/SignoffSummary/index.jsx +++ b/ui/src/components/SignoffSummary/index.jsx @@ -7,8 +7,18 @@ import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import ListSubheader from '@material-ui/core/ListSubheader'; import Typography from '@material-ui/core/Typography'; +import CheckCircleIcon from 'mdi-react/CheckCircleIcon'; +import AccountClockIcon from 'mdi-react/AccountClockIcon'; const useStyles = makeStyles(theme => ({ + approval: { + display: 'flex', + width: 'max-content', + flexFlow: 'row nowrap', + justifyContent: 'center', + alignItems: 'center', + margin: '0 2px 0 2px', + }, listSubheader: { lineHeight: 1.5, marginBottom: theme.spacing(0.5), @@ -21,7 +31,11 @@ const useStyles = makeStyles(theme => ({ marginBottom: 0, marginTop: 0, }, + signoffsContainer: { + display: 'flex', + }, signoffsList: { + width: 'max-content', marginRight: theme.spacing(6), paddingTop: 0, paddingBottom: 0, @@ -33,9 +47,10 @@ const useStyles = makeStyles(theme => ({ })); function SignoffSummary(props) { - const classes = useStyles(); const { requiredSignoffs, signoffs, className } = props; const listOfSignoffs = Object.entries(signoffs); + const theRequiredSignoffs = Object.entries(requiredSignoffs); + const classes = useStyles(); return (
@@ -46,56 +61,81 @@ function SignoffSummary(props) { Requires Signoffs From }> - {Object.entries(requiredSignoffs).map(([role, count], index) => { + {theRequiredSignoffs.map(([role, count], index) => { const key = `${role}-${index}`; + // allSigned Returns all that have signed + let allSigned = []; + + if (listOfSignoffs) { + allSigned = listOfSignoffs.filter(arr => { + return role === arr[1]; + }); + } + + // allNotSigned() Gets and returns all that haven't signed + const allNotSigned = () => { + const leftarr = []; + const allleft = count - allSigned.length; + + // Disabled eslint because "i+1" runs loop till eternity + // eslint-disable-next-line no-plusplus + for (let i = 0; i < allleft; i++) { + leftarr.push([]); + } + + return leftarr; + }; return ( - - - {`${count} member${count > 1 ? 's' : ''} of ${role}`} - - } - className={classes.listItemText} - /> - +
+ + + {`${count} member${count > 1 ? 's' : ''} of ${role} -`} + + } + className={classes.listItemText} + /> + {listOfSignoffs && ( + + {allSigned.map((arr, index) => { + const no = index; + + return ( +
+ + + {`${arr[0]}`} + +
+ ); + })} + {allNotSigned().map(arr => { + const no = arr; + + return ( +
+ + + Awaiting approval... + +
+ ); + })} +
+ )} +
+
); })} - {listOfSignoffs && Boolean(listOfSignoffs.length) && ( - - Signed By - - }> - {listOfSignoffs.map(([username, signoffRole]) => ( - - - {username} -   -   - - {signoffRole} - - - } - className={classes.listItemText} - /> - - ))} - - )}
); }