(feat) O3-2485: Allow view only field for visit location in the start visit form

packages/esm-patient-chart-app/src/config-schema.ts

@@ -112,6 +112,11 @@ export const esmPatientChartSchema = {
       'An array of concept UUIDs. If an observation has a concept UUID that matches any of the ones in this array, it will be hidden from the observations list in the Encounters summary table.',
     _default: [],
   },
+  viewOnlyVisitLocationField: {
+    _type: Type.Boolean,
+    _description: 'Whether the visit location field in the start visit form should be view only',
+    _default: false,
+  },
 };
 
 export interface ChartConfig {
@@ -133,6 +138,7 @@ export interface ChartConfig {
     alt: string;
     name: string;
   };
+  viewOnlyVisitLocationField: boolean;
 }
 
 export const configSchema = {

packages/esm-patient-chart-app/src/visit/visit-form/location-selection.component.tsx

@@ -1,20 +1,24 @@
 import React, { useState } from 'react';
 import styles from './visit-form.scss';
-import { Location, OpenmrsResource, useLayoutType, useSession } from '@openmrs/esm-framework';
-import { ComboBox, InlineNotification } from '@carbon/react';
+import { Location, OpenmrsResource, useConfig, useSession } from '@openmrs/esm-framework';
+import { ComboBox } from '@carbon/react';
 import { useDefaultLoginLocation } from '../hooks/useDefaultLocation';
 import { useTranslation } from 'react-i18next';
 import { useLocations } from '../hooks/useLocations';
 import isEmpty from 'lodash/isEmpty';
 import { useFormContext, Controller } from 'react-hook-form';
 import { VisitFormData } from './visit-form.component';
+import { ChartConfig } from '../../config-schema';
 
 const LocationSelector = () => {
   const { t } = useTranslation();
+  const session = useSession();
   const [searchTerm, setSearchTerm] = useState('');
   const selectedSessionLocation = useSession().sessionLocation;
   const { locations, isLoading: isLoadingLocations, error } = useLocations(searchTerm);
   const { defaultFacility, isLoading: loadingDefaultFacility } = useDefaultLoginLocation();
+  const config = useConfig() as ChartConfig;
+  const viewOnlyVisitLocationField = config?.viewOnlyVisitLocationField;
   const locationsToShow: Array<OpenmrsResource> =
     !loadingDefaultFacility && !isEmpty(defaultFacility)
       ? [defaultFacility]
@@ -34,24 +38,29 @@ const LocationSelector = () => {
     <section data-testid="combo">
       <div className={styles.sectionTitle}>{t('visitLocation', 'Visit Location')}</div>
       <div className={`${styles.selectContainer} ${styles.sectionField}`}>
-        <Controller
-          name="visitLocation"
-          control={control}
-          render={({ field: { onBlur, onChange, value } }) => (
-            <ComboBox
-              titleText={t('selectLocation', 'Select a location')}
-              aria-label={t('selectLocation', 'Select a location')}
-              id="location"
-              invalidText="Required"
-              items={locationsToShow}
-              selectedItem={value}
-              onChange={({ selectedItem }) => onChange(selectedItem)}
-              onBlur={onBlur}
-              itemToString={(loc: Location) => loc?.display}
-              onInputChange={(loc) => handleSearch(loc)}
-            />
-          )}
-        />
+        {!viewOnlyVisitLocationField ? (
+          <Controller
+            name="visitLocation"
+            control={control}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <ComboBox
+                titleText={t('selectLocation', 'Select a location')}
+                aria-label={t('selectLocation', 'Select a location')}
+                id="location"
+                invalidText="Required"
+                items={locationsToShow}
+                selectedItem={value}
+                onChange={({ selectedItem }) => onChange(selectedItem)}
+                onBlur={onBlur}
+                itemToString={(loc: Location) => loc?.display}
+                onInputChange={(loc) => handleSearch(loc)}
+                disabled={viewOnlyVisitLocationField}
+              />
+            )}
+          />
+        ) : (
+          <p className={styles.bodyShort02}>{session?.sessionLocation?.display}</p>
+        )}
       </div>
     </section>
   );

packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss

@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
+@import '../../root.scss';
 
 .container {
   margin: spacing.$spacing-05;
@@ -81,6 +82,11 @@
   margin-top: spacing.$spacing-04;
 }
 
+.label {
+  @include type.type-style("label-01");
+  color: $text-02;
+}
+
 :global(.omrs-breakpoint-lt-desktop) {
   .container {
     & section {
@@ -99,4 +105,3 @@
     }
   }
 }
-

packages/esm-patient-flags-app/translations/es.json

@@ -10,6 +10,7 @@
   "editFlags": "Editar banderas",
   "enabledFlag": "Bandera activada",
   "enablingFlag": "Activando bandera...",
+  "flagCountfalsemany": "{count} risk flag{plural}",
   "flagCountfalseone": "{count} bandera de riesgo",
   "flagCountfalseother": "{count} banderas de riesgo",
   "flagDisabled": "Bandera desactivada",
@@ -19,6 +20,7 @@
   "flagEnabledSuccessfully": "Bandera activada con éxito",
   "flagEnableError": "Error al activar la bandera",
   "loading": "Cargando",
+  "matchesForSearchTermfalsemany": "{count} flag{plural}",
   "matchesForSearchTermfalseone": "{count} bandera",
   "matchesForSearchTermfalseother": "{count} banderas",
   "noFlagsFound": "Lo siento, no se encontraron banderas que coincidan con su búsqueda",