Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Capture counts to Grower Details dialog #222

Merged
merged 7 commits into from
Dec 12, 2021
Merged

feat: add Capture counts to Grower Details dialog #222

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5bc75ff
feat: add captures count list to grower details
tranquanghuy0801 Nov 30, 2021
14332c3
feat: finish the frontend for captures count in grower detail dialog
tranquanghuy0801 Nov 30, 2021
73c0dd3
feat: display the count of for each capture status in grower detail
tranquanghuy0801 Dec 1, 2021
25e3d62
fix: call api to get related captures for each grower for counting st…
tranquanghuy0801 Dec 6, 2021
b67ce9e
fix: get captures async for each grower
tranquanghuy0801 Dec 6, 2021
0a8caf0
fix: filter captures test
tranquanghuy0801 Dec 6, 2021
ff24f2c
fix: change the query to get captures count for each verification status
tranquanghuy0801 Dec 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 123 additions & 0 deletions src/components/GrowerDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import Box from '@material-ui/core/Box';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import Drawer from '@material-ui/core/Drawer';
import Close from '@material-ui/icons/Close';
import Person from '@material-ui/icons/Person';
import Divider from '@material-ui/core/Divider';
import EditIcon from '@material-ui/icons/Edit';
import { Done, Clear, HourglassEmptyOutlined } from '@material-ui/icons';
import Fab from '@material-ui/core/Fab';
import api from '../api/growers';
import { getDateTimeStringLocale } from '../common/locale';
Expand All @@ -21,6 +27,8 @@ import OptimizedImage from './OptimizedImage';
import LinkToWebmap from './common/LinkToWebmap';
import { CopyButton } from './common/CopyButton';
import CopyNotification from './common/CopyNotification';
import { getVerificationStatus } from '../common/utils';
import { verificationStates } from '../common/variables';

const GROWER_IMAGE_SIZE = 441;

Expand Down Expand Up @@ -56,11 +64,34 @@ const useStyle = makeStyles((theme) => ({
position: 'relative',
height: `${GROWER_IMAGE_SIZE}px`,
},
listCaptures: {
display: 'flex',
alignItems: 'center',
},
rejectedChip: {
backgroundColor: theme.palette.stats.red.replace(/[^,]+(?=\))/, '0.2'), // Change opacity of rgba
color: theme.palette.stats.red,
fontWeight: 700,
fontSize: '0.8em',
},
awaitingChip: {
backgroundColor: theme.palette.stats.orange.replace(/[^,]+(?=\))/, '0.2'), // Change opacity of rgba
color: theme.palette.stats.orange,
fontWeight: 700,
fontSize: '0.8em',
},
approvedChip: {
backgroundColor: theme.palette.stats.green.replace(/[^,]+(?=\))/, '0.2'), // Change opacity of rgba
color: theme.palette.stats.green,
fontWeight: 700,
fontSize: '0.8em',
},
}));

const GrowerDetail = (props) => {
// console.log('render: grower detail');
const classes = useStyle();
const emptyStatusCount = { approved: 0, awaiting: 0, rejected: 0 };
const { growerId } = props;
const appContext = useContext(AppContext);
const growerContext = useContext(GrowerContext);
Expand All @@ -70,6 +101,9 @@ const GrowerDetail = (props) => {
const [deviceIdentifiers, setDeviceIdentifiers] = useState([]);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [snackbarLabel, setSnackbarLabel] = useState('');
const [verificationStatus, setVerificationStatus] = useState(
emptyStatusCount,
);

useEffect(() => {
async function loadGrowerDetail() {
Expand Down Expand Up @@ -106,6 +140,23 @@ const GrowerDetail = (props) => {
}))
.filter((id) => id),
);
let statusCount = emptyStatusCount;
registrations.map((reg) => {
nmcharlton marked this conversation as resolved.
Show resolved Hide resolved
const verificationState = getVerificationStatus(
reg.active,
reg.approved,
);
if (verificationState === verificationStates.APPROVED) {
statusCount.approved += 1;
} else if (verificationState === verificationStates.AWAITING) {
statusCount.awaiting += 1;
} else {
statusCount.rejected += 1;
}
});
setVerificationStatus(statusCount);
} else {
setVerificationStatus(emptyStatusCount);
}
});
}
Expand Down Expand Up @@ -205,6 +256,78 @@ const GrowerDetail = (props) => {
</Typography>
</Grid>
<Divider />
<Grid container direction="column" className={classes.box}>
<Typography variant="subtitle1">Captures</Typography>
<List className={classes.listCaptures}>
<Box
borderColor="grey.300"
borderRadius={10}
border={0.5}
m={0.5}
>
<ListItem>
<ListItemAvatar>
<Avatar className={classes.approvedChip}>
<Done />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<Typography variant="h5">
{verificationStatus.approved}
</Typography>
}
secondary="Approved"
/>
</ListItem>
</Box>
<Box
borderColor="grey.300"
borderRadius={10}
border={0.5}
m={0.5}
>
<ListItem>
<ListItemAvatar>
<Avatar className={classes.awaitingChip}>
<HourglassEmptyOutlined />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<Typography variant="h5">
{verificationStatus.awaiting}
</Typography>
}
secondary="Awaiting"
/>
</ListItem>
</Box>
<Box
borderColor="grey.300"
borderRadius={10}
border={0.5}
m={0.5}
>
<ListItem>
<ListItemAvatar>
<Avatar className={classes.rejectedChip}>
<Clear />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<Typography variant="h5">
{verificationStatus.rejected}
</Typography>
}
secondary="Rejected"
/>
</ListItem>
</Box>
</List>
</Grid>
<Divider />
<Grid container direction="column" className={classes.box}>
<Typography variant="subtitle1">Email address</Typography>
<Typography variant="body1">{grower.email || '---'}</Typography>
Expand Down