From 81255d80c04e28c8d0e0dd212ea4418406e8393b Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Sat, 9 Jan 2021 16:28:26 -0500 Subject: [PATCH 1/8] Align Triage field for a deleted patient --- src/components/CCPDashboard/PatientInfoTable.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/CCPDashboard/PatientInfoTable.tsx b/src/components/CCPDashboard/PatientInfoTable.tsx index 4a16c48..3af13b3 100644 --- a/src/components/CCPDashboard/PatientInfoTable.tsx +++ b/src/components/CCPDashboard/PatientInfoTable.tsx @@ -393,8 +393,10 @@ export const PatientInfoTable = ({ case 'triageLevel': content = triageLevels[content].label; border = { - borderLeft: `${isActive ? '16px' : '0px'} solid ${ - triageLevels[patient.triageLevel].colour + borderLeft: `16px solid ${ + isActive + ? triageLevels[patient.triageLevel].colour + : Colours.White }`, }; break; From 35543617d627eab6870958bb1ea059c1ce8d3741 Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Sat, 9 Jan 2021 19:26:54 -0500 Subject: [PATCH 2/8] Add CTAs and format lastUpdated columns in PatientInfoTable --- .../CCPDashboard/PatientInfoTable.tsx | 5 +++-- src/utils/format.ts | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/CCPDashboard/PatientInfoTable.tsx b/src/components/CCPDashboard/PatientInfoTable.tsx index 3af13b3..7d939c7 100644 --- a/src/components/CCPDashboard/PatientInfoTable.tsx +++ b/src/components/CCPDashboard/PatientInfoTable.tsx @@ -36,7 +36,7 @@ import ConfirmModal from '../common/ConfirmModal'; import { CCPDashboardTabOptions } from './CCPDashboardPage'; import { EDIT_PATIENT, DELETE_PATIENT } from '../../graphql/mutations/patients'; import { PatientDetailsDialog } from './PatientDetailsDialog'; -import { capitalize } from '../../utils/format'; +import { capitalize, formatLastUpdated } from '../../utils/format'; const useStyles = makeStyles({ visuallyHidden: { @@ -211,6 +211,7 @@ export const PatientInfoTable = ({ { headerId: 'barcodeValue', label: 'Barcode', width: '94px' }, { headerId: 'gender', label: 'Gender', width: '72px' }, { headerId: 'age', label: 'Age', width: '34px' }, + { headerId: 'ctas', label: 'CTAS', width: '46px' }, { headerId: 'status', label: 'Status', width: '104px' }, ...(type === CCPDashboardTabOptions.PatientOverview ? [ @@ -404,7 +405,7 @@ export const PatientInfoTable = ({ content = patient.hospitalId?.name; break; case 'updatedAt': - content = moment(patient[value]).format('MMM D YYYY, h:mm A'); + content = formatLastUpdated(patient[value], false); break; case 'status': content = statusLabels[patient[value]]; diff --git a/src/utils/format.ts b/src/utils/format.ts index ca808ae..85e3378 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -1,3 +1,5 @@ +import moment from 'moment'; + const months = [ 'Jan', 'Feb', @@ -40,6 +42,23 @@ export const formatDate = (date: string): string => { return `${month} ${day}, ${year}`; }; +export const formatLastUpdated = ( + date: string, + includeTime: boolean +): string => { + const currentDate = new Date(); + const updatedDay = moment(date).format('D'); // 21 + const updatedMonth = moment(date).format('MMM'); // Nov + const updatedYear = moment(date).format('YYYY'); // 2020 + + // Checks if patient was last updated within 24 hours + return updatedDay === currentDate.getDate().toString() && + updatedMonth === months[currentDate.getMonth()] && + updatedYear === currentDate.getFullYear().toString() + ? moment(date).format('h:mm A') + : moment(date).format(`MMM D YYYY ${includeTime ? ', h:mm A' : ''}`); +}; + export const capitalize = (s: string): string => { const sArray = s.split(' '); const formattedArray = sArray.map((word) => { From 20964f231256f3781b12b8655b7fcd3dc5fd1335 Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Sat, 9 Jan 2021 20:28:34 -0500 Subject: [PATCH 3/8] Update Patient Dialog & format lastUpdated in Patient Transport Table --- .../CCPDashboard/PatientDetailsDialog.tsx | 70 ++++++++++++------- .../CCPDashboard/PatientInfoTable.tsx | 15 ++-- src/utils/format.ts | 7 +- 3 files changed, 53 insertions(+), 39 deletions(-) diff --git a/src/components/CCPDashboard/PatientDetailsDialog.tsx b/src/components/CCPDashboard/PatientDetailsDialog.tsx index a8d0b4f..5301009 100644 --- a/src/components/CCPDashboard/PatientDetailsDialog.tsx +++ b/src/components/CCPDashboard/PatientDetailsDialog.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Typography, Box, + Grid, makeStyles, DialogContent, IconButton, @@ -9,8 +10,9 @@ import { } from '@material-ui/core'; import { Close } from '@material-ui/icons'; import { Colours } from '../../styles/Constants'; +import { statusLabels } from './PatientInfoTable'; import { Patient } from '../../graphql/queries/patients'; -import { capitalize } from '../../utils/format'; +import { capitalize, formatLastUpdated } from '../../utils/format'; const useStyles = makeStyles({ label: { @@ -54,16 +56,18 @@ export const PatientDetailsDialog = (props: PatientDetailsDialogProps) => { { label: 'Triage', value: patient.triageLevel, - styles: { - color: Colours[`Triage${capitalize(patient.triageLevel)}`], - }, }, { label: 'Run Number', value: patient.runNumber }, { label: 'Hospital', value: patient.hospitalId?.name }, + { label: 'Ambulance', value: patient.ambulanceId?.vehicleNumber }, { label: 'CCP', value: patient.collectionPointId.name }, - { label: 'Status', value: patient.status }, + { label: 'Status', value: statusLabels[patient.status] }, { label: 'Gender', value: patient.gender }, { label: 'Age', value: patient.age }, + { + label: 'Last Edited', + value: formatLastUpdated(patient.updatedAt, true), + }, ]; return ( @@ -81,28 +85,40 @@ export const PatientDetailsDialog = (props: PatientDetailsDialogProps) => { > - {patientDetails.map((d: PatientDetail) => ( - - - {`${d.label}:`} - - {d.label === 'Run Number' ? ( - updateRunNumber(e.target.value)} - value={runNumber === null ? '' : runNumber} - /> - ) : ( - - {d.value} - - )} - - ))} + + {patientDetails.map((d: PatientDetail) => ( + <> + + + {`${d.label}:`} + + + + {d.label === 'Run Number' ? ( + updateRunNumber(e.target.value)} + value={runNumber === null ? '' : runNumber} + /> + ) : ( + + {d.value} + + )} + + + ))} + { ); }; +export const statusLabels = { + [Status.ON_SITE]: 'On Scene', + [Status.TRANSPORTED]: 'Transported', + [Status.RELEASED]: 'Released', + [Status.DELETED]: 'Deleted', +}; + export const PatientInfoTable = ({ patients, type, @@ -186,13 +193,6 @@ export const PatientInfoTable = ({ }, }; - const statusLabels = { - [Status.ON_SITE]: 'On Scene', - [Status.TRANSPORTED]: 'Transported', - [Status.RELEASED]: 'Released', - [Status.DELETED]: 'Deleted', - }; - const [editPatient] = useMutation(EDIT_PATIENT, { update(cache): void { const patientId = ((selectedPatient as unknown) as Patient).id; @@ -405,6 +405,7 @@ export const PatientInfoTable = ({ content = patient.hospitalId?.name; break; case 'updatedAt': + case 'transportTime': content = formatLastUpdated(patient[value], false); break; case 'status': diff --git a/src/utils/format.ts b/src/utils/format.ts index 85e3378..911c729 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -42,10 +42,7 @@ export const formatDate = (date: string): string => { return `${month} ${day}, ${year}`; }; -export const formatLastUpdated = ( - date: string, - includeTime: boolean -): string => { +export const formatLastUpdated = (date: Date, includeTime: boolean): string => { const currentDate = new Date(); const updatedDay = moment(date).format('D'); // 21 const updatedMonth = moment(date).format('MMM'); // Nov @@ -56,7 +53,7 @@ export const formatLastUpdated = ( updatedMonth === months[currentDate.getMonth()] && updatedYear === currentDate.getFullYear().toString() ? moment(date).format('h:mm A') - : moment(date).format(`MMM D YYYY ${includeTime ? ', h:mm A' : ''}`); + : moment(date).format(`MMM D YYYY${includeTime ? ', h:mm A' : ''}`); }; export const capitalize = (s: string): string => { From eb98dd6d4495f66a856594f7eb39520e1bc42a9c Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Sun, 10 Jan 2021 04:29:46 +0000 Subject: [PATCH 4/8] Reorder Patient Dialog & Align CCP Dashboard --- src/components/CCPDashboard/CCPDashboardPage.tsx | 5 ++--- .../CCPDashboard/PatientDetailsDialog.tsx | 8 ++++---- src/components/CCPDashboard/PatientOverview.tsx | 15 +++++++++------ src/components/CCPDashboard/TotalPatientCard.tsx | 3 --- src/components/CCPDashboard/TriageCard.tsx | 3 +-- 5 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/components/CCPDashboard/CCPDashboardPage.tsx b/src/components/CCPDashboard/CCPDashboardPage.tsx index 4715765..69a384b 100644 --- a/src/components/CCPDashboard/CCPDashboardPage.tsx +++ b/src/components/CCPDashboard/CCPDashboardPage.tsx @@ -61,12 +61,11 @@ const useStyles = makeStyles({ background: Colours.BackgroundGray, }, tabPanel: { - paddingLeft: '30px', - paddingRight: '30px', + padding: '0 56px', }, tabs: { background: Colours.White, - padding: '0 165px', + padding: '0 56px', }, fullHeightGridItem: { display: 'flex', diff --git a/src/components/CCPDashboard/PatientDetailsDialog.tsx b/src/components/CCPDashboard/PatientDetailsDialog.tsx index 5301009..6933556 100644 --- a/src/components/CCPDashboard/PatientDetailsDialog.tsx +++ b/src/components/CCPDashboard/PatientDetailsDialog.tsx @@ -53,15 +53,15 @@ export const PatientDetailsDialog = (props: PatientDetailsDialogProps) => { const patientDetails: PatientDetail[] = [ { label: 'Barcode Number', value: patient.barcodeValue }, + { label: 'Status', value: statusLabels[patient.status] }, { label: 'Triage', value: patient.triageLevel, }, { label: 'Run Number', value: patient.runNumber }, { label: 'Hospital', value: patient.hospitalId?.name }, - { label: 'Ambulance', value: patient.ambulanceId?.vehicleNumber }, + { label: 'Ambulance Number', value: patient.ambulanceId?.vehicleNumber }, { label: 'CCP', value: patient.collectionPointId.name }, - { label: 'Status', value: statusLabels[patient.status] }, { label: 'Gender', value: patient.gender }, { label: 'Age', value: patient.age }, { @@ -90,7 +90,7 @@ export const PatientDetailsDialog = (props: PatientDetailsDialogProps) => { <> { {`${d.label}:`} - + {d.label === 'Run Number' ? ( { }); return ( - - + + - + diff --git a/src/components/CCPDashboard/TotalPatientCard.tsx b/src/components/CCPDashboard/TotalPatientCard.tsx index 40f2e9c..dc601f8 100644 --- a/src/components/CCPDashboard/TotalPatientCard.tsx +++ b/src/components/CCPDashboard/TotalPatientCard.tsx @@ -4,9 +4,6 @@ import { Box, Typography, makeStyles, Card } from '@material-ui/core'; const useStyles = makeStyles({ card: { padding: '24px', - marginTop: '16px', - marginRight: '24px', - height: '100%', }, }); diff --git a/src/components/CCPDashboard/TriageCard.tsx b/src/components/CCPDashboard/TriageCard.tsx index b1fd8b6..b6f331d 100644 --- a/src/components/CCPDashboard/TriageCard.tsx +++ b/src/components/CCPDashboard/TriageCard.tsx @@ -7,8 +7,7 @@ import { TriageTag } from './TriageTag'; const useStyles = makeStyles({ card: { padding: '24px', - marginTop: '16px', - height: '100%', + marginTop: '24px', }, }); From a31400859ebaa9ad027a828504f053c97d682c6d Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Sun, 10 Jan 2021 04:36:19 +0000 Subject: [PATCH 5/8] Run linter --- src/components/CCPDashboard/PatientInfoTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/CCPDashboard/PatientInfoTable.tsx b/src/components/CCPDashboard/PatientInfoTable.tsx index 33adf7a..4d29a99 100644 --- a/src/components/CCPDashboard/PatientInfoTable.tsx +++ b/src/components/CCPDashboard/PatientInfoTable.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import moment from 'moment'; import { useHistory } from 'react-router-dom'; import clsx from 'clsx'; import { From ef5ffbafd5720efaa1d5593673684229ff069979 Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Wed, 13 Jan 2021 03:03:25 +0000 Subject: [PATCH 6/8] Fix width --- src/components/CCPDashboard/PatientInfoTable.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/CCPDashboard/PatientInfoTable.tsx b/src/components/CCPDashboard/PatientInfoTable.tsx index 4d29a99..aa982c3 100644 --- a/src/components/CCPDashboard/PatientInfoTable.tsx +++ b/src/components/CCPDashboard/PatientInfoTable.tsx @@ -102,7 +102,8 @@ const EnhancedTableHead = (props: EnhancedTableProps) => { sortDirection={orderBy === headCell.headerId ? order : false} width={headCell.width} style={{ - minWidth: headCell.width, + width: headCell.width, + maxWidth: headCell.width, ...(index === 0 && { borderLeft: '16px hidden' }), }} > @@ -208,7 +209,7 @@ export const PatientInfoTable = ({ const headCells: HeadCell[] = [ { headerId: 'triageLevel', label: 'Triage', width: '78px' }, { headerId: 'barcodeValue', label: 'Barcode', width: '94px' }, - { headerId: 'gender', label: 'Gender', width: '72px' }, + { headerId: 'gender', label: 'Gender', width: '62px' }, { headerId: 'age', label: 'Age', width: '34px' }, { headerId: 'ctas', label: 'CTAS', width: '46px' }, { headerId: 'status', label: 'Status', width: '104px' }, From ec507de8bda10758aa7d052869735e90bd656834 Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Sat, 16 Jan 2021 19:49:28 +0000 Subject: [PATCH 7/8] Add CTAS to patients --- .../CCPDashboard/PatientDetailsDialog.tsx | 4 +++ .../PatientProfile/PatientProfilePage.tsx | 32 +++++++++++++++++++ src/graphql/fragments/patients.ts | 1 + src/graphql/mutations/patients.ts | 7 ++++ src/graphql/queries/patients.ts | 3 ++ src/graphql/subscriptions/patients.ts | 2 ++ 6 files changed, 49 insertions(+) diff --git a/src/components/CCPDashboard/PatientDetailsDialog.tsx b/src/components/CCPDashboard/PatientDetailsDialog.tsx index 6933556..202a65e 100644 --- a/src/components/CCPDashboard/PatientDetailsDialog.tsx +++ b/src/components/CCPDashboard/PatientDetailsDialog.tsx @@ -58,6 +58,10 @@ export const PatientDetailsDialog = (props: PatientDetailsDialogProps) => { label: 'Triage', value: patient.triageLevel, }, + { + label: 'CTAS', + value: patient.ctas, + }, { label: 'Run Number', value: patient.runNumber }, { label: 'Hospital', value: patient.hospitalId?.name }, { label: 'Ambulance Number', value: patient.ambulanceId?.vehicleNumber }, diff --git a/src/components/PatientProfile/PatientProfilePage.tsx b/src/components/PatientProfile/PatientProfilePage.tsx index 9e54db0..4818c07 100644 --- a/src/components/PatientProfile/PatientProfilePage.tsx +++ b/src/components/PatientProfile/PatientProfilePage.tsx @@ -40,6 +40,7 @@ interface FormFields { triage: TriageLevel | null; gender: Gender; age: number | null; + ctas: number | null; notes: string; runNumber?: number | null; collectionPointId?: number; @@ -108,6 +109,7 @@ const PatientProfilePage = ({ barcodeValue: mode === 'new' && !!barcodeValue ? barcodeValue : '', triage: TriageLevel.GREEN, gender: Gender.M, + ctas: null, age: null, notes: '', status: Status.ON_SITE, @@ -182,6 +184,7 @@ const PatientProfilePage = ({ barcodeValue, triageLevel, gender, + ctas, age, notes, status, @@ -192,6 +195,7 @@ const PatientProfilePage = ({ barcodeValue: string; triageLevel: TriageLevel; gender: Gender; + ctas: number | null; age: number; notes: string; status: Status; @@ -205,6 +209,7 @@ const PatientProfilePage = ({ barcodeValue, triage: triageLevel, gender, + ctas, age, notes, status: formStatus, @@ -285,6 +290,7 @@ const PatientProfilePage = ({ addPatient({ variables: { gender: formFields.gender, + ctas: formFields.ctas ? parseInt(formFields.ctas.toString()) : null, age: formFields.age ? parseInt(formFields.age.toString()) : -1, runNumber: formFields.runNumber ? parseInt(formFields.runNumber.toString()) @@ -311,6 +317,7 @@ const PatientProfilePage = ({ variables: { id: patientId, gender: formFields.gender, + ctas: formFields.ctas ? parseInt(formFields.ctas.toString()) : null, age: formFields.age ? parseInt(formFields.age.toString()) : -1, runNumber: formFields.runNumber ? parseInt(formFields.runNumber.toString()) @@ -436,6 +443,31 @@ const PatientProfilePage = ({ } }} /> + ) => { + setFormFields({ + ...formFields, + ctas: parseInt((e.target as HTMLInputElement).value), + }); + }} + value={formFields.ctas ? formFields.ctas.toString() : ''} + isValidated + validators={[ + 'minNumber:1', + 'maxNumber: 9999', + 'matchRegexp:^[0-9]*$', + 'required', + ]} + errorMessages={[ + 'Invalid CTAS', + 'Invalid CTAS', + 'Invalid CTAS', + 'This is a mandatory field', + ]} + numeric + /> { @@ -71,6 +72,7 @@ export const GET_PATIENT_BY_ID = (id: string) => { id vehicleNumber } + ctas } } `; @@ -106,6 +108,7 @@ export const GET_ALL_PATIENTS = gql` id vehicleNumber } + ctas } } `; diff --git a/src/graphql/subscriptions/patients.ts b/src/graphql/subscriptions/patients.ts index dece62b..3017809 100644 --- a/src/graphql/subscriptions/patients.ts +++ b/src/graphql/subscriptions/patients.ts @@ -30,6 +30,7 @@ export const PATIENT_UPDATED = gql` id vehicleNumber } + ctas } } `; @@ -64,6 +65,7 @@ export const PATIENT_ADDED = gql` id vehicleNumber } + ctas } } `; From 46261ea5451b1744eb83043aad6feb539bd58f1b Mon Sep 17 00:00:00 2001 From: Patrick Du Date: Sat, 23 Jan 2021 00:07:50 -0500 Subject: [PATCH 8/8] Address PR comments --- .../CCPDashboard/HospitalOverview.tsx | 19 +++++++++++++++---- .../CCPDashboard/PatientDetailsDialog.tsx | 12 +++--------- .../CCPDashboard/PatientOverview.tsx | 3 ++- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/src/components/CCPDashboard/HospitalOverview.tsx b/src/components/CCPDashboard/HospitalOverview.tsx index 6db36e1..cbee0d6 100644 --- a/src/components/CCPDashboard/HospitalOverview.tsx +++ b/src/components/CCPDashboard/HospitalOverview.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles({ height: '100%', }, select: { - minWidth: '300px', + minWidth: '240px', }, menuItem: { boxSizing: 'border-box', @@ -44,6 +44,12 @@ const useStyles = makeStyles({ patientTableCard: { marginTop: '24px', marginBottom: '145px', + width: '100%', + }, + remainingWidthGridItem: { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, }, }); @@ -94,8 +100,13 @@ export const HospitalOverview = (props: HospitalOverviewProps) => { }; return ( - - + +