From bfe2bcde7e77d8a58adc01c4568e5cd6c50507b1 Mon Sep 17 00:00:00 2001 From: johnny2smooth Date: Mon, 29 Aug 2022 08:11:36 -0700 Subject: [PATCH 1/2] button to view patient appointment list added to provider desktop view --- src/Practitioner/PatientProfile/Buttons.js | 299 +++++++++++++-------- 1 file changed, 188 insertions(+), 111 deletions(-) diff --git a/src/Practitioner/PatientProfile/Buttons.js b/src/Practitioner/PatientProfile/Buttons.js index 5a4ecb27..2234183e 100644 --- a/src/Practitioner/PatientProfile/Buttons.js +++ b/src/Practitioner/PatientProfile/Buttons.js @@ -4,11 +4,24 @@ import useStores from '../../Basics/UseStores'; import { useTranslation } from 'react-i18next'; import NewButton from '../../Basics/NewButton'; import SectionTitle from './MobileView/SectionTitle'; -import { Box, Button, Collapse, Grid, makeStyles, IconButton } from '@material-ui/core'; import { - Event, KeyboardArrowDown, KeyboardArrowUp, - Edit, Restore as Archive, VpnKey as Key, AddCircle as Add, - ChatBubble as Message, MoreVert + Box, + Button, + Collapse, + Grid, + makeStyles, + IconButton, +} from '@material-ui/core'; +import { + Event, + KeyboardArrowDown, + KeyboardArrowUp, + Edit, + Restore as Archive, + VpnKey as Key, + AddCircle as Add, + ChatBubble as Message, + MoreVert, } from '@material-ui/icons'; import useToggle from '../../Hooks/useToggle'; import { useLocation } from 'react-router-dom'; @@ -18,123 +31,187 @@ import Colors from '../../Basics/Colors'; import isIndonesiaPilot from '../../Utility/check-indonesia-flag'; const useStyles = makeStyles({ - button: { - padding: ".5em" - }, - toggle: { - textTransform: "capitalize" - }, - desktopButtons: { - width: "unset", - "& > *": { - margin: "3px", - } + button: { + padding: '.5em', + }, + toggle: { + textTransform: 'capitalize', + }, + desktopButtons: { + width: 'unset', + '& > *': { + margin: '3px', }, - redButton:{ - backgroundColor: Colors.warningRed - } -}) + }, + redButton: { + backgroundColor: Colors.warningRed, + }, +}); const ButtonList = observer(({ isDesktopView }) => { + const classes = useStyles(); - const classes = useStyles(); - - const [showActions, toggleShowActions] = useToggle(false); - - const { patientProfileStore } = useStores(); - const { t } = useTranslation('translation'); - - const channelId = patientProfileStore.selectedPatient.details.channelId; - - const baseUrl = useLocation().pathname - - const buttons = [ - { to: `/messaging/channels/${channelId}`, icon: , text: t("coordinator.patientProfile.options.message") }, - { to: `${baseUrl}/add-note`, icon: , text: t("coordinator.patientProfile.options.note") }, - { to: `${baseUrl}/edit`, icon: , text: t("coordinator.patientProfile.options.edit") }, - { to: `${baseUrl}/reset-password`, icon: , text: t("coordinator.patientProfile.options.resetPassword") }, - { to: `${baseUrl}/add-appointment`, icon: , text: t('appointments.addAppointment'), hide: !isIndonesiaPilot() }, - { to: `${baseUrl}/archive`, icon: , text: t("coordinator.patientProfile.options.archive"), hide: patientProfileStore.isArchived, red: true }, - ] - - if (isDesktopView) { - return ( - - {buttons.map(each => { - if (each.hide) return; - return {each.icon}{each.text} - })} - - - ) - } - - return (<> - - {t('mobileUpdate.showActions')} - - - - - - -
- {buttons.splice(1).map(each => { - if (each.hide) return; - return - })} -
- - ) -}) + const [showActions, toggleShowActions] = useToggle(false); + const { patientProfileStore } = useStores(); + const { t } = useTranslation('translation'); -const MoreOptions = () => { - - const { patientProfileStore } = useStores(); + const channelId = patientProfileStore.selectedPatient.details.channelId; - const [anchorEl, setAnchorEl] = React.useState(null); + const baseUrl = useLocation().pathname; - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleTestNotification = () => { - patientProfileStore.sendTestReminder(); - handleClose(); - } + const buttons = [ + { + to: `/messaging/channels/${channelId}`, + icon: , + text: t('coordinator.patientProfile.options.message'), + }, + { + to: `${baseUrl}/appointments`, + icon: , + text: t('patient.reminders.appointments'), + hide: !isIndonesiaPilot(), + }, + { + to: `${baseUrl}/add-note`, + icon: , + text: t('coordinator.patientProfile.options.note'), + }, + { + to: `${baseUrl}/edit`, + icon: , + text: t('coordinator.patientProfile.options.edit'), + }, + { + to: `${baseUrl}/reset-password`, + icon: , + text: t('coordinator.patientProfile.options.resetPassword'), + }, + { + to: `${baseUrl}/add-appointment`, + icon: , + text: t('appointments.addAppointment'), + hide: !isIndonesiaPilot(), + }, + { + to: `${baseUrl}/archive`, + icon: , + text: t('coordinator.patientProfile.options.archive'), + hide: patientProfileStore.isArchived, + red: true, + }, + ]; + if (isDesktopView) { return ( -
- - - - + {buttons.map((each) => { + if (each.hide) return; + return ( + - Send a test report reminder - + {each.icon} + {each.text} + + ); + })} + + + ); + } + + return ( + <> + + {t('mobileUpdate.showActions')} + + + + + + +
+ {buttons.splice(1).map((each) => { + if (each.hide) return; + return ( + + ); + })}
- ); v -} + + + ); +}); -export default ButtonList; \ No newline at end of file +const MoreOptions = () => { + const { patientProfileStore } = useStores(); + + const [anchorEl, setAnchorEl] = React.useState(null); + + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleTestNotification = () => { + patientProfileStore.sendTestReminder(); + handleClose(); + }; + + return ( +
+ + + + + + Send a test report reminder + + +
+ ); +}; + +export default ButtonList; From 5c02eee0475ae0e617d8853eba086757424ddb4e Mon Sep 17 00:00:00 2001 From: johnny2smooth Date: Mon, 29 Aug 2022 08:51:21 -0700 Subject: [PATCH 2/2] few untranslated texts translated --- .../PatientProfile/Details/ProgressVis.js | 231 ++++++++++-------- .../PatientProfile/ReportingHistory.js | 167 ++++++++----- 2 files changed, 233 insertions(+), 165 deletions(-) diff --git a/src/Practitioner/PatientProfile/Details/ProgressVis.js b/src/Practitioner/PatientProfile/Details/ProgressVis.js index 0d126d55..934d4c3d 100644 --- a/src/Practitioner/PatientProfile/Details/ProgressVis.js +++ b/src/Practitioner/PatientProfile/Details/ProgressVis.js @@ -7,120 +7,151 @@ import Grid from '@material-ui/core/Grid'; import { observer } from 'mobx-react'; import { DateTime } from 'luxon'; import Item from './Item'; +import { useTranslation } from 'react-i18next'; const useStyles = makeStyles({ - container: { - width: "100%", - maxWidth: "400px", - margin: "auto", - marginBottom: "1em" + container: { + width: '100%', + maxWidth: '400px', + margin: 'auto', + marginBottom: '1em', + }, + visContainer: { + display: 'flex', + flexWrap: 'nowrap', + width: '100%', + justifyContent: 'flex-start', + }, + element: { + '&:first-of-type': { + borderRadius: '5px 0 0 5px', }, - visContainer: { - display: "flex", - flexWrap: "nowrap", - width: '100%', - justifyContent: "flex-start", + '&:last-of-type': { + borderRadius: '0px 5px 5px 0', + borderRight: 'none', }, - element: { - "&:first-of-type": { - borderRadius: "5px 0 0 5px" - }, - "&:last-of-type": { - borderRadius: "0px 5px 5px 0", - borderRight: "none" - }, - borderRight: `1px solid ${Colors.textDarkGray}`, - width: `${1 / 26 * 100}%`, - height: "20px", - backgroundColor: props => props.completed ? Colors.accentBlue : Colors.gray, - position: "relative" - + borderRight: `1px solid ${Colors.textDarkGray}`, + width: `${(1 / 26) * 100}%`, + height: '20px', + backgroundColor: (props) => + props.completed ? Colors.accentBlue : Colors.gray, + position: 'relative', + }, + endsLayout: { + width: '100%', + marginTop: '.5em', + paddingBottom: '1em', + borderBottom: `1px solid ${Colors.gray}`, + '& > div': { + flex: '1 1 0', + alignItems: 'center', }, - endsLayout: { - width: "100%", - marginTop: ".5em", - paddingBottom: "1em", - borderBottom: `1px solid ${Colors.gray}`, - "& > div": { - flex: "1 1 0", - alignItems: "center" - }, - "& > div:first-of-type, & > div:nth-of-type(2)": { - borderRight: "solid 1px gray" - } + '& > div:first-of-type, & > div:nth-of-type(2)': { + borderRight: 'solid 1px gray', }, - currentWeek: { - position: "absolute", - bottom: ".5em", - zIndex: "2", - right: "-.5em", - color: Colors.red - } -}) + }, + currentWeek: { + position: 'absolute', + bottom: '.5em', + zIndex: '2', + right: '-.5em', + color: Colors.red, + }, +}); const ProgressVis = observer(() => { - - const classes = useStyles(); - const { patientProfileStore } = useStores(); - - const treatmentWeek = patientProfileStore.selectedPatient.details.weeksInTreatment - - const getDate = (iso) => { - return (DateTime.fromISO(iso).toLocaleString({ day: 'numeric', month: 'short' })) - } - - const start = getDate(patientProfileStore.selectedPatient.details.treatmentStart); - const end = getDate(patientProfileStore.selectedPatient.details.treatmentEndDate); - - return ( -
- - -
- ) - -}) + const classes = useStyles(); + const { patientProfileStore } = useStores(); + + const treatmentWeek = + patientProfileStore.selectedPatient.details.weeksInTreatment; + + const getDate = (iso) => { + return DateTime.fromISO(iso).toLocaleString({ + day: 'numeric', + month: 'short', + }); + }; + + const start = getDate( + patientProfileStore.selectedPatient.details.treatmentStart + ); + const end = getDate( + patientProfileStore.selectedPatient.details.treatmentEndDate + ); + + return ( +
+ + +
+ ); +}); const EndsLayout = ({ start, end, week }) => { - const classes = useStyles(); - return ( - - - - - ) -} + const classes = useStyles(); + const { t } = useTranslation('translation'); + return ( + + + + + + ); +}; const Element = ({ completed, current }) => { - const classes = useStyles({ completed: completed }); - return (
- {current && } -
) -} + const classes = useStyles({ completed: completed }); + return ( +
+ {current && } +
+ ); +}; const Visualization = ({ treatmentWeek }) => { - - const classes = useStyles(); - - let list = [] - let i = 0; - - //Track if the marker has been set (treatment week < 26 weeks) if not put it at the end of the visual - let markerSet = false; - - while (i < 26) { //Iterate over the 26 weeks of treatment - if (i === treatmentWeek) { - list.push(); - markerSet = true; - } else if (i < treatmentWeek) { - list.push(); - } else { - list.push(); - } - i++; + const classes = useStyles(); + + let list = []; + let i = 0; + + //Track if the marker has been set (treatment week < 26 weeks) if not put it at the end of the visual + let markerSet = false; + + while (i < 26) { + //Iterate over the 26 weeks of treatment + if (i === treatmentWeek) { + list.push( + + ); + markerSet = true; + } else if (i < treatmentWeek) { + list.push( + + ); + } else { + list.push(); } + i++; + } - return (
{list}
) -} + return
{list}
; +}; -export default ProgressVis; \ No newline at end of file +export default ProgressVis; diff --git a/src/Practitioner/PatientProfile/ReportingHistory.js b/src/Practitioner/PatientProfile/ReportingHistory.js index 2f1e743e..f4376260 100644 --- a/src/Practitioner/PatientProfile/ReportingHistory.js +++ b/src/Practitioner/PatientProfile/ReportingHistory.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import useStores from '../../Basics/UseStores'; -import { observer } from 'mobx-react' +import { observer } from 'mobx-react'; import CalendarTest from './Calendar'; import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; @@ -15,77 +15,114 @@ import ReportTable from './ReportTable'; import PhotoReportsList from './PhotoReportsList'; const useStyles = makeStyles({ - reportingHistoryContainer: { - width: "100%", - "& > h2": { - textTransform: "uppercase", - padding: ".5em" - } + reportingHistoryContainer: { + width: '100%', + '& > h2': { + textTransform: 'uppercase', + padding: '.5em', }, - reportingHistory: { - width: "100%", - height: "100%" + }, + reportingHistory: { + width: '100%', + height: '100%', + }, + reportsHeader: { + padding: '1em 0', + display: 'flex', + alignItems: 'center', + '& > h2': { + marginRight: '1em', + ...Styles.patientPageTitle, }, - reportsHeader: { - padding: "1em 0", - display: "flex", - alignItems: "center", - "& > h2": { - marginRight: "1em", - ...Styles.patientPageTitle - } + }, + buttonGroup: { + marginLeft: 'auto', + '& > button.selected': { + color: 'white', + backgroundColor: Colors.textDarkGray, }, - buttonGroup: { - marginLeft: "auto", - "& > button.selected": { - color: "white", - backgroundColor: Colors.textDarkGray - } - } -}) + }, +}); const ReportingHistory = observer(() => { - const [visible, setVisible] = useState('reports'); - const [day, setDay] = useState(new Date()) - const classes = useStyles(); - const { patientProfileStore } = useStores(); + const [visible, setVisible] = useState('reports'); + const [day, setDay] = useState(new Date()); + const classes = useStyles(); + const { patientProfileStore } = useStores(); - const handleChange = (change) => { - setDay(change) - } - return ( -
- - {patientProfileStore.selectedPatient.reportsLoaded ?
- {visible === "calendar" && } - {visible === "reports" && } - {visible === "notes" && } - {visible === "photos" && } - -
: } + const handleChange = (change) => { + setDay(change); + }; + return ( +
+ + {patientProfileStore.selectedPatient.reportsLoaded ? ( +
+ {visible === 'calendar' && ( + + )} + {visible === 'reports' && } + {visible === 'notes' && } + {visible === 'photos' && }
- ) - -}) + ) : ( + + )} +
+ ); +}); const ReportingHistoryLabel = (props) => { - const classes = useStyles(); - const { t } = useTranslation('translation'); - return ( -
- {t('coordinator.patientProfile.reportingHistory')} - - - - - - -
) -} + const classes = useStyles(); + const { t } = useTranslation('translation'); + return ( +
+ + {t('coordinator.patientProfile.reportingHistory')} + + + + + + + +
+ ); +}; -export default ReportingHistory; \ No newline at end of file +export default ReportingHistory;