@openmrs/esm-fast-data-entry-app 1.2.1-pre.238 → 1.2.1-pre.244

package/src/add-group-modal/AddGroupModal.tsx

@@ -2,10 +2,19 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { ComposedModal, Button, ModalHeader, ModalFooter, ModalBody, TextInput, FormLabel } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { ExtensionSlot, fetchCurrentPatient, showToast, useConfig, usePatient } from '@openmrs/esm-framework';
+import {
+  ExtensionSlot,
+  fetchCurrentPatient,
+  showToast,
+  useConfig,
+  usePatient,
+  useSession,
+} from '@openmrs/esm-framework';
 import styles from './styles.scss';
 import GroupFormWorkflowContext from '../context/GroupFormWorkflowContext';
 import { usePostCohort } from '../hooks';
+import PatientLocationMismatchModal from '../form-entry-workflow/patient-search-header/PatienMismatchedLocationModal';
+import { useHsuIdIdentifier } from '../hooks/location-tag.resource';
 
 const MemExtension = React.memo(ExtensionSlot);
 
@@ -112,6 +121,10 @@ const AddGroupModal = ({
   const [patientList, setPatientList] = useState(patients || []);
   const { post, result, error } = usePostCohort();
   const config = useConfig();
+  const [patientLocationMismatchModalOpen, setPatientLocationMismatchModalOpen] = useState(false);
+  const [selectedPatientUuid, setSelectedPatientUuid] = useState();
+  const { hsuIdentifier } = useHsuIdIdentifier(selectedPatientUuid);
+  const { sessionLocation } = useSession();
 
   const removePatient = useCallback(
     (patientUuid: string) =>
@@ -147,27 +160,44 @@ const AddGroupModal = ({
     [name, patientList.length],
   );
 
-  const updatePatientList = useCallback(
-    (patientUuid) => {
-      function getPatientName(patient) {
-        return [patient?.name?.[0]?.given, patient?.name?.[0]?.family].join(' ');
-      }
-      if (!patientList.find((p) => p.uuid === patientUuid)) {
-        fetchCurrentPatient(patientUuid).then((result) => {
-          const newPatient = { uuid: patientUuid, ...result };
-          setPatientList(
-            [...patientList, newPatient].sort((a, b) =>
-              getPatientName(a).localeCompare(getPatientName(b), undefined, {
-                sensitivity: 'base',
-              }),
-            ),
-          );
-        });
-      }
-      setErrors((errors) => ({ ...errors, patientList: null }));
-    },
-    [patientList, setPatientList],
-  );
+  const addSelectedPatientToList = useCallback(() => {
+    function getPatientName(patient) {
+      return [patient?.name?.[0]?.given, patient?.name?.[0]?.family].join(' ');
+    }
+    if (!patientList.find((p) => p.uuid === selectedPatientUuid)) {
+      fetchCurrentPatient(selectedPatientUuid).then((result) => {
+        const newPatient = { uuid: selectedPatientUuid, ...result };
+        setPatientList(
+          [...patientList, newPatient].sort((a, b) =>
+            getPatientName(a).localeCompare(getPatientName(b), undefined, {
+              sensitivity: 'base',
+            }),
+          ),
+        );
+      });
+    }
+    setErrors((errors) => ({ ...errors, patientList: null }));
+  }, [selectedPatientUuid, patientList, setPatientList]);
+
+  const updatePatientList = (patientUuid) => {
+    setSelectedPatientUuid(patientUuid);
+  };
+
+  useEffect(() => {
+    if (!selectedPatientUuid || !hsuIdentifier) return;
+
+    if (config.patientLocationMismatchCheck && hsuIdentifier && sessionLocation.uuid != hsuIdentifier.location.uuid) {
+      setPatientLocationMismatchModalOpen(true);
+    } else {
+      addSelectedPatientToList();
+    }
+  }, [
+    selectedPatientUuid,
+    sessionLocation,
+    hsuIdentifier,
+    addSelectedPatientToList,
+    config.patientLocationMismatchCheck,
+  ]);
 
   const handleSubmit = () => {
     if (validate()) {
@@ -216,33 +246,47 @@ const AddGroupModal = ({
     }
   }, [error, t]);
 
+  const onPatientLocationMismatchModalCancel = () => {
+    setSelectedPatientUuid(null);
+  };
+
   return (
-    <div className={styles.modal}>
-      <ComposedModal open={isOpen} onClose={handleCancel}>
-        <ModalHeader>{isCreate ? t('createNewGroup', 'Create New Group') : t('editGroup', 'Edit Group')}</ModalHeader>
-        <ModalBody>
-          <NewGroupForm
-            {...{
-              name,
-              setName,
-              patientList,
-              updatePatientList,
-              errors,
-              validate,
-              removePatient,
-            }}
-          />
-        </ModalBody>
-        <ModalFooter>
-          <Button kind="secondary" onClick={handleCancel}>
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button kind="primary" onClick={handleSubmit}>
-            {isCreate ? t('createGroup', 'Create Group') : t('save', 'Save')}
-          </Button>
-        </ModalFooter>
-      </ComposedModal>
-    </div>
+    <>
+      <div className={styles.modal}>
+        <ComposedModal open={isOpen} onClose={handleCancel}>
+          <ModalHeader>{isCreate ? t('createNewGroup', 'Create New Group') : t('editGroup', 'Edit Group')}</ModalHeader>
+          <ModalBody>
+            <NewGroupForm
+              {...{
+                name,
+                setName,
+                patientList,
+                updatePatientList,
+                errors,
+                validate,
+                removePatient,
+              }}
+            />
+          </ModalBody>
+          <ModalFooter>
+            <Button kind="secondary" onClick={handleCancel}>
+              {t('cancel', 'Cancel')}
+            </Button>
+            <Button kind="primary" onClick={handleSubmit}>
+              {isCreate ? t('createGroup', 'Create Group') : t('save', 'Save')}
+            </Button>
+          </ModalFooter>
+        </ComposedModal>
+      </div>
+      <PatientLocationMismatchModal
+        open={patientLocationMismatchModalOpen}
+        setOpen={setPatientLocationMismatchModalOpen}
+        onConfirm={addSelectedPatientToList}
+        onCancel={onPatientLocationMismatchModalCancel}
+        sessionLocation={sessionLocation}
+        hsuLocation={hsuIdentifier?.location}
+      />
+    </>
   );
 };
 

package/src/config-schema.ts

@@ -26,6 +26,11 @@ export const configSchema = {
             _type: Type.String,
             _description: 'Name of form',
           },
+          disableGroupSession: {
+            _type: Type.Boolean,
+            _description: 'Disable group sessions for this form',
+            _default: false,
+          },
         },
       },
     },
@@ -36,6 +41,7 @@ export const configSchema = {
           {
             formUUID: '0cefb866-110c-4f16-af58-560932a1db1f',
             name: 'Adult Triage',
+            disableGroupSession: false,
           },
         ],
       },
@@ -45,6 +51,7 @@ export const configSchema = {
           {
             formUUID: '9f26aad4-244a-46ca-be49-1196df1a8c9a',
             name: 'POC Sample Form 1',
+            disableGroupSession: false,
           },
         ],
       },
@@ -121,11 +128,18 @@ export const configSchema = {
     },
     _default: [],
   },
+  patientLocationMismatchCheck: {
+    _type: Type.Boolean,
+    _description:
+      'Whether to prompt for confirmation if the selected patient is not at the same location as the current session.',
+    _default: false,
+  },
 };
 
 export type Form = {
   formUUID: Type.UUID;
   name: Type.String;
+  disableGroupSession: Type.Boolean;
 };
 
 export type Category = {
@@ -136,4 +150,5 @@ export type Category = {
 export type Config = {
   formCategories: Array<Category>;
   formCategoriesToShow: Array<string>;
+  patientLocationMismatchCheck: Type.Boolean;
 };

package/src/form-entry-workflow/FormEntryWorkflow.tsx

@@ -73,7 +73,7 @@ const FormWorkspace = () => {
 
   useEffect(() => {
     if (encounter && visit) {
-      // Update encounter so that it belongs to the created visit
+      // Update the encounter so that it belongs to the created visit
       updateEncounter({ uuid: encounter.uuid, visit: visit.uuid });
     }
   }, [encounter, visit, updateEncounter]);

package/src/form-entry-workflow/patient-search-header/PatienMismatchedLocationModal.tsx

@@ -0,0 +1,46 @@
+import { Button, ComposedModal, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const PatientLocationMismatchModal = ({ open, setOpen, onConfirm, onCancel, sessionLocation, hsuLocation }) => {
+  const { t } = useTranslation();
+
+  const hsuDisplay = hsuLocation?.display || t('unknown', 'Unknown');
+  const sessionDisplay = sessionLocation?.display || t('unknown', 'Unknown');
+
+  const handleCancel = () => {
+    onCancel?.();
+    setOpen(false);
+  };
+
+  const handleConfirm = () => {
+    onConfirm?.();
+    setOpen(false);
+  };
+
+  return (
+    <ComposedModal open={open}>
+      <ModalHeader>{t('confirmPatientSelection', 'Confirm patient selection')}</ModalHeader>
+      <ModalBody>
+        {t(
+          'patientLocationMismatch',
+          `The selected HSU location (${hsuLocation}) does not match the current session location (${sessionLocation}). Are you sure you want to proceed?`,
+          {
+            hsuLocation: hsuDisplay,
+            sessionLocation: sessionDisplay,
+          },
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={handleCancel}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="primary" onClick={handleConfirm}>
+          {t('continue', 'Continue')}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default PatientLocationMismatchModal;

package/src/form-entry-workflow/patient-search-header/PatientSearchHeader.tsx

@@ -1,17 +1,46 @@
 import { Add, Close } from '@carbon/react/icons';
-import { ExtensionSlot, interpolateUrl, navigate } from '@openmrs/esm-framework';
+import { ExtensionSlot, interpolateUrl, navigate, useConfig, useSession } from '@openmrs/esm-framework';
 import { Button } from '@carbon/react';
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import FormWorkflowContext from '../../context/FormWorkflowContext';
 import styles from './styles.scss';
 import { useTranslation } from 'react-i18next';
+import { useHsuIdIdentifier } from '../../hooks/location-tag.resource';
+import PatientLocationMismatchModal from './PatienMismatchedLocationModal';
 
 const PatientSearchHeader = () => {
+  const [patientLocationMismatchModalOpen, setPatientLocationMismatchModalOpen] = useState(false);
+  const [selectedPatientUuid, setSelectedPatientUuid] = useState();
+  const { hsuIdentifier } = useHsuIdIdentifier(selectedPatientUuid);
+  const { sessionLocation } = useSession();
+  const config = useConfig();
   const { addPatient, workflowState, activeFormUuid } = useContext(FormWorkflowContext);
-  const handleSelectPatient = (patient) => {
-    addPatient(patient);
-  };
+
+  const onPatientMismatchedLocationModalConfirm = useCallback(() => {
+    addPatient(selectedPatientUuid);
+    setSelectedPatientUuid(null);
+  }, [addPatient, selectedPatientUuid]);
+
+  const onPatientMismatchedLocationModalCancel = useCallback(() => {
+    setPatientLocationMismatchModalOpen(false);
+    setSelectedPatientUuid(null);
+  }, []);
+
+  const handleSelectPatient = useCallback((patientUuid) => {
+    setSelectedPatientUuid(patientUuid);
+  }, []);
+
+  useEffect(() => {
+    if (!selectedPatientUuid || !hsuIdentifier) return;
+
+    if (config.patientLocationMismatchCheck && hsuIdentifier && sessionLocation.uuid != hsuIdentifier.location.uuid) {
+      setPatientLocationMismatchModalOpen(true);
+    } else {
+      addPatient(selectedPatientUuid);
+    }
+  }, [selectedPatientUuid, sessionLocation, hsuIdentifier, addPatient, config.patientLocationMismatchCheck]);
+
   const { t } = useTranslation();
 
   if (workflowState !== 'NEW_PATIENT') return null;
@@ -20,34 +49,44 @@ const PatientSearchHeader = () => {
   const patientRegistrationUrl = interpolateUrl(`\${openmrsSpaBase}/patient-registration?afterUrl=${afterUrl}`);
 
   return (
-    <div className={styles.searchHeaderContainer}>
-      <span className={styles.padded}>{t('nextPatient', 'Next patient')}:</span>
-      <span className={styles.searchBarWrapper}>
-        <ExtensionSlot
-          name="patient-search-bar-slot"
-          state={{
-            selectPatientAction: handleSelectPatient,
-            buttonProps: {
-              kind: 'primary',
-            },
-          }}
-        />
-      </span>
-      <span className={styles.padded}>{t('or', 'or')}</span>
-      <span>
-        <Button onClick={() => navigate({ to: patientRegistrationUrl })}>
-          {t('createNewPatient', 'Create new patient')} <Add size={20} />
-        </Button>
-      </span>
-      <span style={{ flexGrow: 1 }} />
-      <span>
-        <Link to="../">
-          <Button kind="ghost">
-            {t('cancel', 'Cancel')} <Close size={20} />
+    <>
+      <div className={styles.searchHeaderContainer}>
+        <span className={styles.padded}>{t('nextPatient', 'Next patient')}:</span>
+        <span className={styles.searchBarWrapper}>
+          <ExtensionSlot
+            name="patient-search-bar-slot"
+            state={{
+              selectPatientAction: handleSelectPatient,
+              buttonProps: {
+                kind: 'primary',
+              },
+            }}
+          />
+        </span>
+        <span className={styles.padded}>{t('or', 'or')}</span>
+        <span>
+          <Button onClick={() => navigate({ to: patientRegistrationUrl })}>
+            {t('createNewPatient', 'Create new patient')} <Add size={20} />
           </Button>
-        </Link>
-      </span>
-    </div>
+        </span>
+        <span style={{ flexGrow: 1 }} />
+        <span>
+          <Link to="../">
+            <Button kind="ghost">
+              {t('cancel', 'Cancel')} <Close size={20} />
+            </Button>
+          </Link>
+        </span>
+      </div>
+      <PatientLocationMismatchModal
+        open={patientLocationMismatchModalOpen}
+        setOpen={setPatientLocationMismatchModalOpen}
+        onConfirm={onPatientMismatchedLocationModalConfirm}
+        onCancel={onPatientMismatchedLocationModalCancel}
+        sessionLocation={sessionLocation}
+        hsuLocation={hsuIdentifier?.location}
+      />
+    </>
   );
 };
 

package/src/forms-page/FormsPage.tsx

@@ -24,17 +24,29 @@ export const getFormPermissions = (forms) => {
   return output;
 };
 
-// Function adds `id` field to rows so they will be accepted by DataTable
-// "display" is prefered for display name if present, otherwise fall back on "name'"
-const prepareRowsForTable = (rawFormData) => {
-  if (rawFormData) {
-    return rawFormData?.map((form) => ({
-      ...form,
-      id: form.uuid,
-      display: form.display || form.name,
-    }));
-  }
-  return null;
+/**
+ * Prepares the raw form data to be used in a DataTable.
+ * Adds an `id` field based on the `uuid` property of the form.
+ * Sets the `display` field based on the `display` property if present, otherwise falls back to the `name` field.
+ * Also attaches the `disableGroupSession` flag from form categories config, if available.
+ *
+ * @param {Array} rawFormData
+ * @param {Array} formCategories
+ * @returns {Array}
+ */
+const prepareRowsForTable = (rawFormData = [], formCategories = []) => {
+  const formCategoryMap = new Map(
+    formCategories.flatMap(({ forms }) =>
+      forms.map(({ formUUID, disableGroupSession }) => [formUUID, disableGroupSession]),
+    ),
+  );
+
+  return rawFormData.map((form) => ({
+    ...form,
+    id: form.uuid,
+    display: form.display || form.name,
+    disableGroupSession: formCategoryMap.get(form.uuid),
+  }));
 };
 
 const FormsPage = () => {
@@ -42,7 +54,7 @@ const FormsPage = () => {
   const { t } = useTranslation();
   const { formCategories, formCategoriesToShow } = config;
   const { forms, isLoading, error } = useGetAllForms();
-  const cleanRows = prepareRowsForTable(forms);
+  const cleanRows = prepareRowsForTable(forms, formCategories);
   const { user } = useSession();
   const savedFormsData = localStorage.getItem(fdeWorkflowStorageName + ':' + user?.uuid);
   const savedGroupFormsData = localStorage.getItem(fdeGroupWorkflowStorageName + ':' + user?.uuid);

package/src/forms-page/forms-table/FormsTable.tsx

@@ -45,7 +45,7 @@ const FormsTable = ({ rows, error, isLoading, activeForms, activeGroupForms }) =
         {activeForms.includes(row.uuid) ? t('resumeSession', 'Resume Session') : t('fillForm', 'Fill Form')}
       </Link>
     ),
-    actions2: (
+    actions2: !row.disableGroupSession && (
       <Link to={`groupform/${row.uuid}`}>
         {activeGroupForms.includes(row.uuid)
           ? t('resumeGroupSession', 'Resume Group Session')

package/src/hooks/location-tag.resource.ts

@@ -0,0 +1,33 @@
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export interface Identifier {
+  uuid: string;
+  identifier: string;
+  display: string;
+  identifierType: {
+    uuid: string;
+    display: string;
+  };
+  location: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export function useHsuIdIdentifier(patientUuid: string) {
+  const hsuIdType = '05a29f94-c0ed-11e2-94be-8c13b969e334';
+  const url = patientUuid ? `ws/rest/v1/patient/${patientUuid}/identifier` : null;
+  const { data, error, isValidating } = useSWR<{ data: { results: Array<Identifier> } }, Error>(url, openmrsFetch);
+
+  const hsuIdentifier = data?.data?.results.length
+    ? data.data.results.find((id: Identifier) => id.identifierType.uuid == hsuIdType)
+    : undefined;
+
+  return {
+    hsuIdentifier: hsuIdentifier,
+    isLoading: !data && !error,
+    isError: error,
+    isValidating,
+  };
+}

package/translations/en.json

@@ -9,6 +9,8 @@
   "chooseGroupError": "Please choose a group.",
   "clearSearch": "Clear",
   "complete": "Complete",
+  "confirmPatientSelection": "Confirm patient selection",
+  "continue": "Continue",
   "createGroup": "Create Group",
   "createNewGroup": "Create New Group",
   "createNewPatient": "Create new patient",
@@ -41,6 +43,7 @@
   "or": "or",
   "orLabelName": "OR label name",
   "patientIsPresent": "Patient is present",
+  "patientLocationMismatch": "The selected HSU location ({{hsuLocation}}) does not match the current session location ({{sessionLocation}}). Are you sure you want to proceed?",
   "patientsInGroup": "Patients in group",
   "postError": "POST Error",
   "practitionerName": "Practitioner Name",

package/translations/es.json

@@ -9,6 +9,8 @@
   "chooseGroupError": "Por favor, elige un grupo.",
   "clearSearch": "Limpiar",
   "complete": "Completar",
+  "confirmPatientSelection": "Confirmar la selección del paciente",
+  "continue": "Continue",
   "createGroup": "Crear Grupo",
   "createNewGroup": "Crear Nuevo Grupo",
   "createNewPatient": "Crear nuevo paciente",
@@ -41,6 +43,7 @@
   "or": "o",
   "orLabelName": "Nombre de Etiqueta OR",
   "patientIsPresent": "Paciente está presente",
+  "patientLocationMismatch": "La ubicación de HSU seleccionada ({{hsuLocation}}) no coincide con la ubicación de la sesión actual ({{sessionLocation}}). ¿Está seguro de que desea continuar?",
   "patientsInGroup": "Pacientes en el grupo",
   "postError": "Error de POST",
   "practitionerName": "Nombre del Practicante",

package/translations/fr.json

@@ -9,6 +9,8 @@
   "chooseGroupError": "Veuillez sélectionner un groupe",
   "clearSearch": "Clair",
   "complete": "Terminer",
+  "confirmPatientSelection": "Confirmer la sélection du patient",
+  "continue": "Continue",
   "createGroup": "Créer un groupe",
   "createNewGroup": "Créer un nouveau groupe",
   "createNewPatient": "Créer un nouveau patient",
@@ -41,6 +43,7 @@
   "or": "ou",
   "orLabelName": "OU nom de l'étiquette",
   "patientIsPresent": "Le patient est présent",
+  "patientLocationMismatch": "L'emplacement HSU sélectionné ({{hsuLocation}}) ne correspond pas à l'emplacement de la session actuelle ({{sessionLocation}}). Voulez-vous vraiment continuer\u00a0?",
   "patientsInGroup": "Patients dans le groupe",
   "postError": "Erreur de POST",
   "practitionerName": "Nom du praticien",