Skip to content

Commit

Permalink
ui: update table format, scrolling, icons, bolding and delete action
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattystank
mattystank committed Aug 25, 2023
1 parent f92ff62 commit e0ee5fb
Showing 1 changed file with 205 additions and 72 deletions.
277 changes: 205 additions & 72 deletions src/app/pages/compare/compare.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, { useContext, useEffect, useState } from 'react';
import {
Box,
Card,
CircularProgress,
Container,
IconButton,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
Expand All @@ -16,6 +18,10 @@ import InfoIcon from '@material-ui/icons/Info';
import {
arrayOf, number, oneOfType, string,
} from 'prop-types';
import CloseIcon from '@material-ui/icons/Close';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';
import ThumbDownIcon from '@material-ui/icons/ThumbDown';
import PanToolIcon from '@material-ui/icons/PanTool';

import { useFetchListing } from 'api/listing';
import ChplActionButton from 'components/action-widget/action-button';
Expand All @@ -29,6 +35,31 @@ import { palette, utilStyles } from 'themes';

const useStyles = makeStyles({
...utilStyles,
container: {
padding: '32px 0',
backgroundColor: palette.background,
},
pageHeader: {
padding: '32px',
backgroundColor: palette.white,
},
headerRow: {
boxShadow: 'rgba(149, 157, 165, 0.1) 0 16px 8px',
'&.MuiTableRow-root.MuiTableRow-hover:hover': {
backgroundColor: '#fff!important',
},
},
headerColumnContent: {
padding: '4px 16px 16px 16px',
},
Table: {
height: '100vh',
},
MuiTableCellStickyHeader: {
'&.TableCell-stickyHeader': {
top: '75px',
},
},
});

function ChplComparePage({ ids }) {
Expand Down Expand Up @@ -79,10 +110,10 @@ function ChplComparePage({ ids }) {

const makeRow = (title, getData) => (
<TableRow>
<TableCell>{ title }</TableCell>
{ listings.map((listing) => (
<TableCell><strong>{title}</strong></TableCell>
{listings.map((listing) => (
<TableCell key={listing.id}>
{ getData(listing) }
{getData(listing)}
</TableCell>
))}
</TableRow>
Expand All @@ -91,11 +122,11 @@ function ChplComparePage({ ids }) {
const makeCriterionRow = (criterion) => (
<TableRow key={criterion.id}>
<TableCell>
{ criterion.removed ? 'Removed | ' : '' }
{ criterion.number }
{criterion.removed ? 'Removed | ' : ''}
<strong>{criterion.number}</strong>
{': '}
{ criterion.title }
{ criterion.removed
{criterion.title}
{criterion.removed
&& (
<ChplTooltip title="This certification criterion has been removed from the Program.">
<IconButton className={classes.infoIcon}>
Expand All @@ -106,12 +137,44 @@ function ChplComparePage({ ids }) {
</ChplTooltip>
)}
</TableCell>
{ listings.map((listing) => (
{listings.map((listing) => (
<TableCell key={listing.id}>
{ listing.certificationResults
{listing.certificationResults
.some((cr) => cr.criterion.id === criterion.id)
? (listing.certificationResults.find((cr) => cr.criterion.id === criterion.id).success ? 'meets' : 'does not meet')
: 'cannot meet'}
? (listing.certificationResults.find((cr) => cr.criterion.id === criterion.id).success
? (
<span>
<Box>
<ChplTooltip
title="Meets"
>
<ThumbUpIcon color="primary" />
</ChplTooltip>
</Box>
</span>
)
: (
<span>
<Box>
<ChplTooltip
title="Does Not Meet"
>
<ThumbDownIcon color="disabled" />
</ChplTooltip>
</Box>
</span>
))
: (
<span>
<Box>
<ChplTooltip
title="Can Not Meet"
>
<PanToolIcon color="error" />
</ChplTooltip>
</Box>
</span>
)}
</TableCell>
))}
</TableRow>
Expand All @@ -122,27 +185,80 @@ function ChplComparePage({ ids }) {
if (cqm.cmsId) {
res = listing.cqmResults.find((c) => c.cmsId === cqm.cmsId);
if (res) {
return res.success ? res.successVersions.join('; ') : 'does not meet';
return res.success ? res.successVersions.join('; ')
: (
<span>
<Box>
<ChplTooltip
title="Does Not Meet"
>
<ThumbDownIcon color="disabled" />
</ChplTooltip>
</Box>
</span>
);
}
return 'cannot meet';
return (
<span>
<Box>
<ChplTooltip
title="Can Not Meet"
>
<PanToolIcon color="error" />
</ChplTooltip>
</Box>
</span>
);
}
res = listing.cqmResults.find((c) => c.nqfNumber === cqm.nqfNumber);
if (res) {
return res.success ? 'meets' : 'does not meet';
return res.success
? (
<span>
<Box>
<ChplTooltip
title="Meets"
>
<ThumbUpIcon color="primary" />
</ChplTooltip>
</Box>
</span>
)
: (
<span>
<Box>
<ChplTooltip
title="Does Not Meet"
>
<ThumbDownIcon color="disabled" />
</ChplTooltip>
</Box>
</span>
);
}
return 'cannot meet';
return (
<span>
<Box>
<ChplTooltip
title="Can Not Meet"
>
<PanToolIcon color="error" />
</ChplTooltip>
</Box>
</span>
);
};

const makeCqmRow = (cqm) => (
<TableRow key={cqm.id}>
<TableCell>
{ cqm.cmsId ?? `NQF-${cqm.nqfNumber}` }
<strong>{cqm.cmsId ?? `NQF-${cqm.nqfNumber}`}</strong>
{': '}
{ cqm.title }
{cqm.title}
</TableCell>
{ listings.map((listing) => (
{listings.map((listing) => (
<TableCell key={listing.id}>
{ getCqmValue(cqm, listing) }
{getCqmValue(cqm, listing)}
</TableCell>
))}
</TableRow>
Expand All @@ -153,7 +269,7 @@ function ChplComparePage({ ids }) {
}

return (
<Box bgcolor={palette.background}>
<Box bgcolor={palette.white}>
<div className={classes.pageHeader}>
<Container maxWidth="lg">
<Box className={classes.listingHeaderBox}>
Expand All @@ -164,62 +280,79 @@ function ChplComparePage({ ids }) {
Compare Listings
</Typography>
</Box>
<Box>
<Typography
variant="body1"
>
6 Products
</Typography>

</Box>
</Box>
</Container>
</div>
<Container maxWidth="lg">
<div className={classes.container} id="main-content" tabIndex="-1">
<Table>
<TableHead>
<TableRow>
<TableCell>Data item</TableCell>
{ listings.map((listing) => (
<TableCell key={listing.id}>
{ listing.product.name }
<ChplBrowserComparedWidget
listing={listing}
/>
<Box>
<ChplActionButton
listing={listing}
horizontal={false}
<Box className={classes.container}>
<Container maxWidth="lg">
<div id="main-content" tabIndex="-1">
<Card>
<TableContainer className={classes.Table}>
<Table size="small">
<TableHead>
<TableRow hover="false" className={classes.headerRow}>
<TableCell className={classes.headerColumnContent}><span className="sr-only">Data item</span></TableCell>
{listings.map((listing) => (
<TableCell className={classes.headerColumnContent} key={listing.id}>
<Box mb={2} display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
{listing.product.name}
<ChplBrowserComparedWidget
listing={listing}
/>
<IconButton size="small"><CloseIcon /></IconButton>
</Box>
<Box>
<ChplActionButton
listing={listing}
horizontal={false}
/>
</Box>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{makeRow('Developer', (listing) => listing.developer.name)}
{makeRow('Version', (listing) => listing.version.version)}
{editionlessIsOn ? '' : makeRow('Certification Edition', (listing) => {
if (!listing.edition) { return ''; }
return `${listing.edition.name}${listing.curesUpdate ? ' Cures Update' : ''}`;
})}
{makeRow('Certification Status', (listing) => listing.currentStatus.status.name)}
{showPracticeType ? makeRow('Practice Type', (listing) => (listing.practiceType.name ? listing.practiceType.name : 'N/A')) : ''}
{makeRow('Certifying Body', (listing) => listing.certifyingBody.name)}
{makeRow('Certification Date', (listing) => getDisplayDateFormat(listing.certificationDay))}
{makeRow('Inactive/Decertified Date', (listing) => getDisplayDateFormat(listing.decertificationDate))}
{makeRow('CHPL Product Number', (listing) => listing.chplProductNumber)}
{makeRow('Number of Open Non-Conformities', (listing) => listing.countOpenNonconformities)}
{makeRow('Certification Criteria', (listing) => `${listing.countCerts} met`)}
{criteria.map(makeCriterionRow)}
{makeRow('Clinical Quality Measures', (listing) => `${listing.countCqms} met`)}
{cqms.map(makeCqmRow)}
{makeRow('View listing details', (listing) => (
<ChplLink
href={`#/listing/${listing.id}`}
text="details"
analytics={{ event: 'Go to Listing Details page', category: 'Compare Page', label: listing.chplProductNumber }}
external={false}
router={{ sref: 'listing', options: { id: listing.id } }}
/>
</Box>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{ makeRow('Developer', (listing) => listing.developer.name) }
{ makeRow('Version', (listing) => listing.version.version) }
{ editionlessIsOn ? '' : makeRow('Certification Edition', (listing) => {
if (!listing.edition) { return ''; }
return `${listing.edition.name}${listing.curesUpdate ? ' Cures Update' : ''}`;
}) }
{ makeRow('Certification Status', (listing) => listing.currentStatus.status.name) }
{ showPracticeType ? makeRow('Practice Type', (listing) => (listing.practiceType.name ? listing.practiceType.name : 'N/A')) : '' }
{ makeRow('Certifying Body', (listing) => listing.certifyingBody.name) }
{ makeRow('Certification Date', (listing) => getDisplayDateFormat(listing.certificationDay)) }
{ makeRow('Inactive/Decertified Date', (listing) => getDisplayDateFormat(listing.decertificationDate)) }
{ makeRow('CHPL Product Number', (listing) => listing.chplProductNumber) }
{ makeRow('Number of Open Non-Conformities', (listing) => listing.countOpenNonconformities) }
{ makeRow('Certification Criteria', (listing) => `${listing.countCerts} met`) }
{ criteria.map(makeCriterionRow)}
{ makeRow('Clinical Quality Measures', (listing) => `${listing.countCqms} met`) }
{ cqms.map(makeCqmRow)}
{ makeRow('View listing details', (listing) => (
<ChplLink
href={`#/listing/${listing.id}`}
text="details"
analytics={{ event: 'Go to Listing Details page', category: 'Compare Page', label: listing.chplProductNumber }}
external={false}
router={{ sref: 'listing', options: { id: listing.id } }}
/>
))}
</TableBody>
</Table>
</div>
</Container>
))}
</TableBody>
</Table>
</TableContainer>
</Card>
</div>
</Container>
</Box>
</Box>
);
}
Expand Down

0 comments on commit e0ee5fb

Please sign in to comment.