Refactor: Relationships UI improvements (#278)

* feat: created relationship workspace and revalidating functionality * feat: translations and filtering relationship types * Update packages/esm-patient-clinical-view-app/src/family-partner-history/family-relationship.workspace.tsx Co-authored-by: Makombe Kennedy <[email protected]> * Apply suggestions from code review from @makombe Co-authored-by: Makombe Kennedy <[email protected]> * feat: other relationships tab on relationships page * fix: correctly filtering relationships based on tab * refactor: filter relationship types from useConfig object * refactor: misplaced aria label --------- Co-authored-by: Makombe Kennedy <[email protected]>
palladiumkenya · Jul 26, 2024 · 33583c7 · 33583c7
1 parent 60baae7
commit 33583c7
Show file tree

Hide file tree

Showing 17 changed files with 975 additions and 49 deletions.
diff --git a/...s/esm-patient-clinical-view-app/src/case-management/workspace/case-management.resource.ts b/...s/esm-patient-clinical-view-app/src/case-management/workspace/case-management.resource.ts
@@ -19,10 +19,7 @@ interface RelationshipType {
   display: string;
 }
 
-interface RelationshipTypeResponse {
-  results: RelationshipType[];
-}
-interface RelationshipTypeResponse {
+export interface RelationshipTypeResponse {
   results: RelationshipType[];
 }
 

diff --git a/packages/esm-patient-clinical-view-app/src/config-schema.ts b/packages/esm-patient-clinical-view-app/src/config-schema.ts
@@ -138,39 +138,39 @@ export const configSchema = {
     _default: [
       {
         uuid: '8d91a01c-c2cc-11de-8d13-0010c6dffd0f',
-        displayAIsToB: 'Sibling',
+        display: 'Sibling/Sibling',
       },
       {
         uuid: '8d91a210-c2cc-11de-8d13-0010c6dffd0f',
-        displayAIsToB: 'Parent',
+        display: 'Parent/Child',
       },
       {
         uuid: '8d91a3dc-c2cc-11de-8d13-0010c6dffd0f',
-        displayAIsToB: 'Aunt/Uncle',
+        display: 'Aunt/Uncle/Niece/Nephew',
       },
       {
         uuid: '5f115f62-68b7-11e3-94ee-6bef9086de92',
-        displayAIsToB: 'Guardian',
+        display: 'Guardian/Dependant',
       },
       {
         uuid: 'd6895098-5d8d-11e3-94ee-b35a4132a5e3',
-        displayAIsToB: 'Spouse',
+        display: 'Spouse/Spouse',
       },
       {
         uuid: '007b765f-6725-4ae9-afee-9966302bace4',
-        displayAIsToB: 'Partner',
+        display: 'Partner/Partner',
       },
       {
         uuid: '2ac0d501-eadc-4624-b982-563c70035d46',
-        displayAIsToB: 'Co-wife',
+        display: 'Co-wife/Co-wife',
       },
       {
         uuid: '58da0d1e-9c89-42e9-9412-275cef1e0429',
-        displayAIsToB: 'Injectable-drug-user',
+        display: 'Injectable-drug-user/Injectable-druguser',
       },
       {
         uuid: '76edc1fe-c5ce-4608-b326-c8ecd1020a73',
-        displayAIsToB: 'SNS',
+        display: 'SNS/SNS',
       },
     ],
   },
@@ -205,7 +205,7 @@ export interface ConfigObject {
     preferedPnsAproach: string;
     livingWithContact: string;
   };
-  familyRelationshipsTypeList: Array<{ uuid: string; displayAIsToB: string }>;
+  familyRelationshipsTypeList: Array<{ uuid: string; display: string }>;
 }
 
 export interface PartograpyComponents {

diff --git a/packages/esm-patient-clinical-view-app/src/contact-list/contact-list.component.tsx b/packages/esm-patient-clinical-view-app/src/contact-list/contact-list.component.tsx
@@ -141,7 +141,7 @@ const ContactList: React.FC<ContactListProps> = ({ patientUuid }) => {
             {t('noContactToDisplay', 'There is no contact data to display for this patient.')}
           </p>
           <Button onClick={handleAddContact} renderIcon={Add} kind="ghost">
-            {t('recordContact', 'Record Contact')}
+            {t('addPNSContact', 'Add PNS Contact')}
           </Button>
         </Tile>
       </Layer>

diff --git a/packages/esm-patient-clinical-view-app/src/contact-list/contact-list.workspace.tsx b/packages/esm-patient-clinical-view-app/src/contact-list/contact-list.workspace.tsx
@@ -317,9 +317,7 @@ const ContactListForm: React.FC<ContactListFormProps> = ({
                 initialSelectedItem={field.value}
                 label="Select Realtionship"
                 items={config.familyRelationshipsTypeList.map((r) => r.uuid)}
-                itemToString={(item) =>
-                  config.familyRelationshipsTypeList.find((r) => r.uuid === item)?.displayAIsToB ?? ''
-                }
+                itemToString={(item) => config.familyRelationshipsTypeList.find((r) => r.uuid === item)?.display ?? ''}
               />
             )}
           />

diff --git a/packages/esm-patient-clinical-view-app/src/dashboard.meta.tsx b/packages/esm-patient-clinical-view-app/src/dashboard.meta.tsx
@@ -57,6 +57,15 @@ export const contactListDashboardMeta = {
   config: {},
 };
 
+export const otherRelationshipsDashboardMeta = {
+  slot: 'patient-chart-relationships-slot',
+  columns: 1,
+  title: 'Other Relationships',
+  path: 'other-relationships',
+  moduleName: '@kenyaemr/esm-patient-clinical-view-app',
+  config: {},
+};
+
 export const relationshipsDashboardMeta = {
   slot: 'patient-chart-relationships-slot',
   columns: 1,
@@ -65,6 +74,7 @@ export const relationshipsDashboardMeta = {
   moduleName: '@kenyaemr/esm-patient-clinical-view-app',
   config: {},
 };
+
 export const labourDeliveryDashboardMeta = {
   slot: 'patient-chart-labour-delivery-slot',
   columns: 1,

diff --git a/...ges/esm-patient-clinical-view-app/src/family-partner-history/family-history.component.tsx b/...ges/esm-patient-clinical-view-app/src/family-partner-history/family-history.component.tsx
@@ -17,27 +17,35 @@ import {
 } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import { EmptyDataIllustration, ErrorState, CardHeader, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
-import { ConfigurableLink, isDesktop, navigate, useConfig, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import {
+  ConfigurableLink,
+  isDesktop,
+  launchWorkspace,
+  useConfig,
+  useLayoutType,
+  usePagination,
+} from '@openmrs/esm-framework';
 import { useRelationships } from './relationships.resource';
 import ConceptObservations from './concept-obs.component';
 import type { ConfigObject } from '../config-schema';
 import styles from './family-history.scss';
 
 interface FamilyHistoryProps {
-  encounterTypeUuid?: string;
-  formEntrySub?: any;
   patientUuid: string;
 }
 
 const FamilyHistory: React.FC<FamilyHistoryProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const config = useConfig<ConfigObject>();
+  const { concepts, familyRelationshipsTypeList } = config;
   const layout = useLayoutType();
-  const { concepts } = config;
   const [pageSize, setPageSize] = useState(10);
   const { relationships, error, isLoading, isValidating } = useRelationships(patientUuid);
-  const headerTitle = t('familyHistory', 'Family history');
-  const { results, totalPages, currentPage, goTo } = usePagination(relationships, pageSize);
+  const familyRelationshipTypeUUIDs = new Set(familyRelationshipsTypeList.map((type) => type.uuid));
+  const familyRelationships = relationships.filter((r) => familyRelationshipTypeUUIDs.has(r.relationshipTypeUUID));
+
+  const headerTitle = t('familyContacts', 'Family contacts');
+  const { results, totalPages, currentPage, goTo } = usePagination(familyRelationships, pageSize);
   const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
 
   const headers = [
@@ -68,7 +76,10 @@ const FamilyHistory: React.FC<FamilyHistoryProps> = ({ patientUuid }) => {
   ];
 
   const handleAddHistory = () => {
-    navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/edit` });
+    launchWorkspace('family-relationship-form', {
+      workspaceTitle: 'Family Relationship Form',
+      rootPersonUuid: patientUuid,
+    });
   };
 
   const tableRows =
@@ -95,15 +106,26 @@ const FamilyHistory: React.FC<FamilyHistoryProps> = ({ patientUuid }) => {
       };
     }) ?? [];
 
-  if (isLoading) {
-    return <DataTableSkeleton rowCount={5} />;
+  if (isLoading || isValidating) {
+    return (
+      <DataTableSkeleton
+        headers={headers}
+        aria-label="patient family table"
+        showToolbar={false}
+        showHeader={false}
+        rowCount={3}
+        zebra
+        columnCount={3}
+        className={styles.dataTableSkeleton}
+      />
+    );
   }
 
   if (error) {
     return <ErrorState headerTitle={headerTitle} error={error} />;
   }
 
-  if (relationships.length === 0) {
+  if (familyRelationships.length === 0) {
     return (
       <Layer>
         <Tile className={styles.tile}>
@@ -113,7 +135,7 @@ const FamilyHistory: React.FC<FamilyHistoryProps> = ({ patientUuid }) => {
           <EmptyDataIllustration />
           <p className={styles.content}>There is no family history data to display for this patient.</p>
           <Button onClick={handleAddHistory} renderIcon={Add} kind="ghost">
-            {t('recordHistory', 'Record History')}
+            {t('addRelationship', 'Add relationship')}
           </Button>
         </Tile>
       </Layer>

diff --git a/...sm-patient-clinical-view-app/src/family-partner-history/family-partner-dashboard.meta.tsx b/...sm-patient-clinical-view-app/src/family-partner-history/family-partner-dashboard.meta.tsx
diff --git a/packages/esm-patient-clinical-view-app/src/family-partner-history/family-relationship.scss b/packages/esm-patient-clinical-view-app/src/family-partner-history/family-relationship.scss
@@ -0,0 +1,104 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+}
+
+.warningContainer {
+  background-color: $carbon--red-50;
+  padding: spacing.$spacing-04;
+  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  display: flex;
+  justify-content: space-between;
+  .warning {
+    @include type.type-style('heading-compact-01');
+    color: $ui-05;
+  }
+}
+
+.datePickerInput span,
+.datePickerInput div,
+.datePickerInput input,
+.datePickerInput {
+  width: 100% !important;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-bottom: 20px;
+}
+
+.buttonSet {
+  margin-top: auto;
+  display: flex;
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: center;
+  max-width: 50%;
+  min-width: 50%;
+  width: 50%;
+}
+
+.grid {
+  margin: 0 spacing.$spacing-05;
+  padding: 0rem;
+}
+.textbox {
+  margin-bottom: spacing.$spacing-08;
+}
+
+.caseFormTitle {
+  @include type.type-style('heading-02');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-07;
+  row-gap: 1.5rem;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+    position: absolute;
+    bottom: -0.75rem;
+    left: 0;
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+
+.sectionHeader {
+  @include type.type-style('heading-02');
+  margin-top: spacing.$spacing-05;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: var(--tablet-workspace-window-height);
+  }
+
+  .buttonSet {
+    padding: spacing.$spacing-06 spacing.$spacing-05;
+    background-color: $ui-02;
+    justify-content: flex-end;
+    gap: spacing.$spacing-05;
+    padding: 0;
+    margin-top: auto;
+    display: flex;
+    justify-content: end;
+  }
+}