O3-2642 Add configurable link to patient chart on the relationship na…

…me in the relationships widget
openmrs · Dec 7, 2023 · d0b46ae · d0b46ae
1 parent 9f15df7
commit d0b46ae
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/esm-patient-banner-app/src/config-schema.ts b/packages/esm-patient-banner-app/src/config-schema.ts
@@ -26,6 +26,11 @@ export const configSchema = {
       _default: {},
     },
   },
+  useRelationshipNameLink: {
+    _type: Type.Boolean,
+    _description: 'Enable the use of a link to the patient chart in relationship names',
+    _default: false,
+  },
 };
 
 export interface ConfigObject {
@@ -34,4 +39,5 @@ export interface ConfigObject {
     enabled: boolean;
     customAddressLabel: Object;
   };
+  useRelationshipNameLink: boolean;
 }
diff --git a/packages/esm-patient-banner-app/src/contact-details/contact-details.component.tsx b/packages/esm-patient-banner-app/src/contact-details/contact-details.component.tsx
@@ -153,6 +153,7 @@ const Contact: React.FC<{ telecom: Array<fhir.ContactPoint>; patientUuid: string
 const Relationships: React.FC<{ patientId: string }> = ({ patientId }) => {
   const { t } = useTranslation();
   const { data: relationships, isLoading } = useRelationships(patientId);
+  const config = useConfig();
 
   const extractName = (display: string) => {
     const pattern = /-\s*(.*)$/;
@@ -174,7 +175,17 @@ const Relationships: React.FC<{ patientId: string }> = ({ patientId }) => {
             <>
               {relationships.map((r) => (
                 <li key={r.uuid} className={styles.relationship}>
-                  <div>{extractName(r.display)}</div>
+                  {config.useRelationshipNameLink ? (
+                    <ConfigurableLink
+                      style={{ textDecoration: 'none', maxWidth: '50%' }}
+                      to={`${window.getOpenmrsSpaBase()}patient/${r.relativeUuid}/chart`}
+                    >
+                      {r.display}
+                    </ConfigurableLink>
+                  ) : (
+                    <div>{extractName(r.display)}</div>
+                  )}
+
                   <div>{r.relationshipType}</div>
                   <div>
                     {`${r.relativeAge ? r.relativeAge : '--'} ${