(feat) Update start visit and visit notes forms to the new tablet des…

…ign (#1245) * update tablet view for start visit and visit notes forms * updates * final update * Fix translations --------- Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
openmrs · Jun 30, 2023 · 3c9e229 · 3c9e229
1 parent 168b85e
commit 3c9e229
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 69 deletions.
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/location-selection.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/location-selection.component.tsx
@@ -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}`}>
         <ComboBox
           titleText={t('selectLocation', 'Select a location')}
           aria-label={t('selectLocation', 'Select a location')}

diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx
@@ -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"
@@ -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>
+              <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 */}
@@ -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"
@@ -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}>

diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
@@ -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%;
+      }
+    }
+  }
+}
+
diff --git a/packages/esm-patient-chart-app/translations/en.json b/packages/esm-patient-chart-app/translations/en.json
@@ -135,6 +135,7 @@
   "unknown": "Unknown",
   "updateError": "Error updating upcoming appointment",
   "visit": "Visit",
+  "visitAttributes": "Visit Attributes",
   "visitCanceled": "Canceled active visit successfully",
   "visitEnded": "Visit ended",
   "visitEndSuccessfully": "Ended current visit successfully",

diff --git a/packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx b/packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx
@@ -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' }}>
@@ -385,14 +385,16 @@ 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
                 size="lg"
                 id="diagnosisSecondarySearch"
                 labelText={t('enterSecondaryDiagnoses', 'Enter Secondary diagnoses')}
-                placeholder={t('secondaryDiagnosisInputPlaceholder', 'Choose a secondary diagnose')}
+                placeholder={t('secondaryDiagnosisInputPlaceholder', 'Choose a secondary diagnosis')}
                 onChange={handleSecondarySearchChange}
                 value={(() => {
                   if (secondarySearchTerm) {

diff --git a/packages/esm-patient-notes-app/src/notes/visit-notes-form.scss b/packages/esm-patient-notes-app/src/notes/visit-notes-form.scss
@@ -92,3 +92,19 @@
   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%;
+    }
+  }
+}
diff --git a/packages/esm-patient-notes-app/translations/en.json b/packages/esm-patient-notes-app/translations/en.json
@@ -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",
@@ -19,16 +18,18 @@
   "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",
-  "secondaryDiagnosisInputPlaceholder": "Choose a secondary diagnose",
+  "secondaryDiagnosis": "Secondary diagnosis",
+  "secondaryDiagnosisInputPlaceholder": "Choose a secondary diagnosis",
   "seeAll": "See all",
   "visitDate": "Visit date",
   "visitNote": "Visit note",
-  "visitNoteNowVisible": "It is now visible on the Encounters     page",
+  "visitNoteNowVisible": "It is now visible on the Encounters page",
   "visitNotes": "Visit notes",
   "visitNoteSaved": "Visit note saved",
   "visitNoteSaveError": "Error saving visit note"