Conversation
| }) { | ||
| const { hasAnyRole, user } = useContext(UserContext); | ||
| const { listing } = useContext(ListingContext); | ||
| const { data: allCodeSets } = useFetchCodeSets(); |
There was a problem hiding this comment.
Should also use the isError and isLoading elements to either leave a blank space or a processing indicator while the network call is being made
| className={classes.notUpToDate} | ||
| /> | ||
| <Typography variant="body2"> | ||
| {'This listing\u2019s code set does not meet the requirement that took effect'} |
There was a problem hiding this comment.
We generally use the HTML encoding instead of the \u encodings. My guess is this should be ' instead of \u2019\
| { hasAnyRole(['chpl-admin', 'chpl-onc', 'chpl-onc-acb']) && ( | ||
| <> | ||
| <List> | ||
| { criterion.codeSets.map((cs) => ( | ||
| <ListItem key={cs.id}> | ||
| { cs.codeSet.name } | ||
| </ListItem> | ||
| ))} | ||
| </List> | ||
| { criterion.codeSets?.length === 0 && 'None' } | ||
| </> | ||
| )} | ||
| { !hasAnyRole(['chpl-admin', 'chpl-onc', 'chpl-onc-acb']) && (() => { |
There was a problem hiding this comment.
I would extract both of these out of the JSX portion of the component and make a function called something like getDisplayValue that has this same logic. We usually try to more complicated logic out of the "html-ish structure" stuff so it can be reasoned about a little more cleanly
| const getCodeSetStatus = () => { | ||
| if (!allCodeSets || !criterion.codeSets) return null; | ||
| const criterionId = criterion.criterion.id; | ||
| const today = new Date().toISOString().split('T')[0]; |
There was a problem hiding this comment.
I think we need to use moment or LocalDay for this. Our mandate has been to base all date values on Eastern Time, and with this code I believe there'd be a window of time where the code set is not expired yet in ET, but expired in GMT, and so might show the tag/chip/text/whatever incorrectly. I could be wrong, but it's worth looking into
2 participants
This pull request enhances the display of code set information in the
ChplCriterionDetailsViewcomponent, especially for users without admin roles. It introduces a visual indicator for code set compliance, improves the code set status calculation, and refines the UI for different user roles.Code Set Status Display Improvements:
Chipcomponents with "Up-to-date" and "Not up-to-date" labels, including icons and explanatory text, for non-admin users viewing code set requirements.getCodeSetStatusfunction to determine if the listing's code sets are current with requirements, factoring in required dates and applicable code sets.Role-Based UI Adjustments:
Dependency and Utility Updates:
These changes improve the clarity and user experience around code set compliance for different types of users.[#OCD-5234]