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

Jump to bottom

(feat) Update start visit and visit notes forms to the new tablet design #1245

Merged
merged 5 commits into from
Jun 30, 2023
Merged

(feat) Update start visit and visit notes forms to the new tablet design #1245

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dd37355
update tablet view for start visit and visit notes forms
Jexsie Jun 28, 2023
f8594a7
updates
Jexsie Jun 30, 2023
70b640d
merge main
Jexsie Jun 30, 2023
a4fb089
final update
Jexsie Jun 30, 2023
6ff1ba4
Fix translations
denniskigen Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/esm-patient-chart-app/src/visit/visit-form/location-selection.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const LocationSelector: React.FC<LocationSelectorProps> = ({ selectedLocation, s
return (
<section data-testid="combo">
<div className={styles.sectionTitle}>{t('visitLocation', 'Visit Location')}</div>
<div className={styles.selectContainer}>
<div className={`${styles.selectContainer} ${styles['sectionField']}`}>
Jexsie marked this conversation as resolved.
Show resolved Hide resolved
<ComboBox
titleText={t('selectLocation', 'Select a location')}
aria-label={t('selectLocation', 'Select a location')}
Expand Down
143 changes: 81 additions & 62 deletions packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,9 +274,9 @@ const StartVisitForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWor
)}
<Stack gap={1} className={styles.container}>
{/* Date and time of visit. Defaults to the current date and time. */}
<section className={styles.section}>
<section>
<div className={styles.sectionTitle}>{t('dateAndTimeOfVisit', 'Date and time of visit')}</div>
<div className={styles.dateTimeSection}>
<div className={`${styles.dateTimeSection} ${styles.sectionField}`}>
<DatePicker
dateFormat="d/m/Y"
datePickerType="single"
Expand Down Expand Up @@ -319,7 +319,12 @@ const StartVisitForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWor

{/* Upcoming appointments. This get shown when upcoming appointments are configured */}
{config.showUpcomingAppointments && (
<ExtensionSlot state={upcomingAppointmentState} name="upcoming-appointment-slot" />
<section>
<div className={styles.sectionTitle}></div>
Jexsie marked this conversation as resolved.
Show resolved Hide resolved
<div className={styles.sectionField}>
<ExtensionSlot state={upcomingAppointmentState} name="upcoming-appointment-slot" />
</div>
</section>
)}

{/* This field lets the user select a location for the visit. The location is required for the visit to be saved. Defaults to the active session location */}
Expand All @@ -330,7 +335,7 @@ const StartVisitForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWor
{config.showRecommendedVisitTypeTab && (
<section>
<div className={styles.sectionTitle}>{t('program', 'Program')}</div>
<FormGroup legendText={t('selectProgramType', 'Select program type')}>
<FormGroup legendText={t('selectProgramType', 'Select program type')} className={styles.sectionField}>
<RadioButtonGroup
defaultSelected={enrollment?.program?.uuid ?? ''}
orientation="vertical"
Expand All @@ -356,76 +361,90 @@ const StartVisitForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWor
{/* Lists available visit types. The content switcher only gets shown when recommended visit types are enabled */}
<section>
<div className={styles.sectionTitle}>{t('visitType_title', 'Visit Type')}</div>

{config.showRecommendedVisitTypeTab ? (
<>
<ContentSwitcher
selectedIndex={contentSwitcherIndex}
onChange={({ index }) => setContentSwitcherIndex(index)}
>
<Switch name="recommended" text={t('recommended', 'Recommended')} />
<Switch name="all" text={t('all', 'All')} />
</ContentSwitcher>
{contentSwitcherIndex === 0 && !isLoading && (
<MemoizedRecommendedVisitType
onChange={(visitType) => {
setVisitType(visitType);
setIsMissingVisitType(false);
}}
patientUuid={patientUuid}
patientProgramEnrollment={enrollment}
locationUuid={selectedLocation}
/>
)}
{contentSwitcherIndex === 1 && (
<BaseVisitType
onChange={(visitType) => {
setVisitType(visitType);
setIsMissingVisitType(false);
}}
visitTypes={allVisitTypes}
patientUuid={patientUuid}
/>
)}
</>
) : (
// Defaults to showing all possible visit types if recommended visits are not enabled
<BaseVisitType
onChange={(visitType) => {
setVisitType(visitType);
setIsMissingVisitType(false);
}}
visitTypes={allVisitTypes}
patientUuid={patientUuid}
/>
)}
<div className={styles.sectionField}>
{config.showRecommendedVisitTypeTab ? (
<>
<ContentSwitcher
selectedIndex={contentSwitcherIndex}
onChange={({ index }) => setContentSwitcherIndex(index)}
>
<Switch name="recommended" text={t('recommended', 'Recommended')} />
<Switch name="all" text={t('all', 'All')} />
</ContentSwitcher>
{contentSwitcherIndex === 0 && !isLoading && (
<MemoizedRecommendedVisitType
onChange={(visitType) => {
setVisitType(visitType);
setIsMissingVisitType(false);
}}
patientUuid={patientUuid}
patientProgramEnrollment={enrollment}
locationUuid={selectedLocation}
/>
)}
{contentSwitcherIndex === 1 && (
<BaseVisitType
onChange={(visitType) => {
setVisitType(visitType);
setIsMissingVisitType(false);
}}
visitTypes={allVisitTypes}
patientUuid={patientUuid}
/>
)}
</>
) : (
// Defaults to showing all possible visit types if recommended visits are not enabled
<BaseVisitType
onChange={(visitType) => {
setVisitType(visitType);
setIsMissingVisitType(false);
}}
visitTypes={allVisitTypes}
patientUuid={patientUuid}
/>
)}
</div>
</section>

{isMissingVisitType && (
<section>
<InlineNotification
role="alert"
style={{ margin: '0', minWidth: '100%' }}
kind="error"
lowContrast={true}
title={t('missingVisitType', 'Missing visit type')}
subtitle={t('selectVisitType', 'Please select a Visit Type')}
/>
<div className={styles.sectionTitle}></div>
<div className={styles.sectionField}>
<InlineNotification
role="alert"
style={{ margin: '0', minWidth: '100%' }}
kind="error"
lowContrast={true}
title={t('missingVisitType', 'Missing visit type')}
subtitle={t('selectVisitType', 'Please select a Visit Type')}
/>
</div>
</section>
)}

{/* Visit type attribute fields. These get shown when visit attribute types are configured */}
<section>
<VisitAttributeTypeFields
setVisitAttributes={setVisitAttributes}
isMissingRequiredAttributes={isMissingRequiredAttributes}
visitAttributes={visitAttributes}
setErrorFetchingResources={setErrorFetchingResources}
/>
<div className={styles.sectionTitle}>{isTablet && t('visitAttributes', 'Visit attributes')}</div>
<div className={styles.sectionField}>
<VisitAttributeTypeFields
setVisitAttributes={setVisitAttributes}
isMissingRequiredAttributes={isMissingRequiredAttributes}
visitAttributes={visitAttributes}
setErrorFetchingResources={setErrorFetchingResources}
/>
</div>
</section>

{/* Queue location and queue fields. These get shown when queue location and queue fields are configured */}
{config.showServiceQueueFields && <ExtensionSlot name="add-queue-entry-slot" />}
{config.showServiceQueueFields && (
<section>
<div className={styles.sectionTitle}></div>
<div className={styles.sectionField}>
<ExtensionSlot name="add-queue-entry-slot" />
</div>
</section>
)}
</Stack>
</div>
<ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
Expand Down
19 changes: 19 additions & 0 deletions packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,22 @@
margin-top: spacing.$spacing-04;
}

:global(.omrs-breakpoint-lt-desktop) {
.container {
& section {
display: flex;
gap: 4rem;

.sectionTitle {
flex-basis: 30%;
min-width: 8rem;
text-align: left;
}

.sectionField {
flex-basis: 70%;
}
}
}
}

1 change: 1 addition & 0 deletions packages/esm-patient-chart-app/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@
"unknown": "Unknown",
"updateError": "Error updating upcoming appointment",
"visit": "Visit",
"visitAttributes": "Visit Attributes",
Jexsie marked this conversation as resolved.
Show resolved Hide resolved
"visitCanceled": "Canceled active visit successfully",
"visitEnded": "Visit ended",
"visitEndSuccessfully": "Ended current visit successfully",
Expand Down
6 changes: 4 additions & 2 deletions packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patie
</Row>
<Row className={styles.row}>
<Column sm={1}>
<span className={styles.columnLabel}>{t('diagnosis', 'Diagnosis')}</span>
<span className={styles.columnLabel}>{t('primaryDiagnosis', 'Primary diagnosis')}</span>
</Column>
<Column sm={3}>
<div className={styles.diagnosesText} style={{ marginBottom: '1.188rem' }}>
Expand Down Expand Up @@ -385,7 +385,9 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patie
</Column>
</Row>
<Row className={styles.row}>
<Column sm={1}></Column>
<Column sm={1}>
<span className={styles.columnLabel}>{t('secondaryDiagnosis', 'Secondary diagnosis')}</span>
</Column>
<Column sm={3}>
<FormGroup legendText={t('searchForSecondaryDiagnosis', 'Search for a secondary diagnosis')}>
<Search
Expand Down
20 changes: 19 additions & 1 deletion packages/esm-patient-notes-app/src/notes/visit-notes-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,4 +91,22 @@

.row {
margin: 0.5rem 0rem 2.75rem;
}
}

:global(.omrs-breakpoint-lt-desktop) {
.row {
display: flex;
gap: 4rem;

:global(.cds--col-sm-1) {
flex-basis: 30%;
min-width: 8rem;
text-align: left;
}

:global(.cds--col-sm-3) {
flex-basis: 70%;
}
}
}

3 changes: 2 additions & 1 deletion packages/esm-patient-notes-app/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
"clinicalNotePlaceholder": "Write any notes here",
"date": "Date",
"diagnoses": "Diagnoses",
"diagnosis": "Diagnosis",
"discard": "Discard",
"emptyDiagnosisText": "No diagnosis selected — Enter a diagnosis below",
"emptyStateText": "There are no {{displayText}} to display for this patient",
Expand All @@ -19,11 +18,13 @@
"noMatchingDiagnoses": "No diagnoses found matching",
"note": "Note",
"noVisitNoteToDisplay": "No visit note to display",
"primaryDiagnosis": "Primary diagnosis",
"primaryDiagnosisInputPlaceholder": "Choose a primary diagnosis",
"record": "Record",
"saveAndClose": "Save and close",
"searchForPrimaryDiagnosis": "Search for a primary diagnosis",
"searchForSecondaryDiagnosis": "Search for a secondary diagnosis",
"secondaryDiagnosis": "Secondary diagnosis",
"secondaryDiagnosisInputPlaceholder": "Choose a secondary diagnose",
"seeAll": "See all",
"visitDate": "Visit date",
Expand Down