Merge pull request #1405 from onaio/1388-patient-details-view

Update patient details view

app/src/App/fhir-apps.tsx

@@ -220,6 +220,15 @@ const FHIRApps = () => {
         permissions={['Patient.read']}
         component={PatientDetails}
       />
+      <PrivateComponent
+        redirectPath={APP_CALLBACK_URL}
+        disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+        exact
+        path={`${LIST_PATIENTS_URL}/:${'id'}/:resourceType/:resourceId`}
+        {...patientProps}
+        permissions={['Patient.read']}
+        component={PatientDetails}
+      />
       <PrivateComponent
         redirectPath={APP_CALLBACK_URL}
         disableLoginProtection={DISABLE_LOGIN_PROTECTION}

packages/fhir-client/src/components/PatientDetails/PopulatedTableTabs/index.tsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import {
+  GenericTabsView,
+  GenericTabsViewProps,
+  TabTableProps,
+  TabsTable,
+  TabsTitle,
+  sideViewQuery,
+  useSearchParams,
+} from '@opensrp/react-utils';
+import {
+  carePlanResourceType,
+  conditionResourceType,
+  encounterResourceType,
+  immunizationResourceType,
+  taskResourceType,
+} from '../../../constants';
+import { useTranslation } from '../../../mls';
+import { defaultSearchParamsFactory, sidePreviewDetailsExtractor } from '../utils';
+import {
+  parseCareplanList,
+  columns as carePlanColumns,
+  carePlanSideViewData,
+} from '../ResourceSchema/CarePlan';
+import {
+  parseImmunizationList,
+  columns as immunizationColumns,
+  immunizationSearchParams,
+  immunizationSideViewData,
+} from '../ResourceSchema/Immunization';
+import {
+  parseEncounterList,
+  columns as encounterColumns,
+  encounterPreviewExtractor,
+} from '../ResourceSchema/Encounter';
+import {
+  parseConditionList,
+  columns as conditionColumns,
+  conditionSideViewData,
+} from '../ResourceSchema/Condition';
+import {
+  parseTaskList,
+  columns as taskColumns,
+  taskSearchParams,
+  taskSideViewData,
+} from '../ResourceSchema/Task';
+import { IImmunization } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IImmunization';
+import { IEncounter } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IEncounter';
+import { ICondition } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICondition';
+import { ITask } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ITask';
+import { ICarePlan } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICarePlan';
+import { Coding } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/coding';
+import { Button } from 'antd';
+
+/** Populated table tabs wrapper props */
+export interface PopulatedTableTabsProps {
+  fhirBaseURL: string;
+  patientId: string;
+}
+
+/**
+ * Patient details view table tabs
+ *
+ * @param props - PopulatedTableTabs component props
+ */
+export const PopulatedTableTabs: React.FC<PopulatedTableTabsProps> = (
+  props: PopulatedTableTabsProps
+) => {
+  const { fhirBaseURL, patientId } = props;
+  const { t } = useTranslation();
+
+  const { addParams, removeParam } = useSearchParams();
+
+  const defaultTableData = {
+    resourceId: patientId,
+    fhirBaseURL,
+    searchParamsFactory: defaultSearchParamsFactory,
+  };
+
+  const tableActionColumn = {
+    title: t('Actions'),
+    render: (value: Coding) => (
+      <Button onClick={() => addParams({ [sideViewQuery]: value.id })} type="link">
+        {t('View')}
+      </Button>
+    ),
+  };
+
+  const carePlanTableData: TabTableProps<ICarePlan> = {
+    ...defaultTableData,
+    resourceType: carePlanResourceType,
+    tableColumns: [...carePlanColumns(t), tableActionColumn],
+    tableDataGetter: parseCareplanList,
+    extractSideViewDetails: sidePreviewDetailsExtractor<ICarePlan>(
+      patientId,
+      carePlanSideViewData,
+      () => removeParam(sideViewQuery)
+    ),
+  };
+
+  const conditionTableData: TabTableProps<ICondition> = {
+    ...defaultTableData,
+    resourceType: conditionResourceType,
+    tableColumns: [...conditionColumns(t), tableActionColumn],
+    tableDataGetter: parseConditionList,
+    extractSideViewDetails: sidePreviewDetailsExtractor<ICondition>(
+      patientId,
+      conditionSideViewData,
+      () => removeParam(sideViewQuery)
+    ),
+  };
+
+  const taskTableData: TabTableProps<ITask> = {
+    ...defaultTableData,
+    resourceType: taskResourceType,
+    tableColumns: [...taskColumns(t), tableActionColumn],
+    tableDataGetter: parseTaskList,
+    searchParamsFactory: taskSearchParams,
+    extractSideViewDetails: sidePreviewDetailsExtractor<ITask>(patientId, taskSideViewData, () =>
+      removeParam(sideViewQuery)
+    ),
+  };
+
+  const immunizationTableData: TabTableProps<IImmunization> = {
+    ...defaultTableData,
+    resourceType: immunizationResourceType,
+    tableColumns: [...immunizationColumns(t), tableActionColumn],
+    tableDataGetter: parseImmunizationList,
+    searchParamsFactory: immunizationSearchParams,
+    extractSideViewDetails: sidePreviewDetailsExtractor<IImmunization>(
+      patientId,
+      immunizationSideViewData,
+      () => removeParam(sideViewQuery)
+    ),
+  };
+
+  const patientEncounterTableData: TabTableProps<IEncounter> = {
+    ...defaultTableData,
+    resourceType: encounterResourceType,
+    tableColumns: [...encounterColumns(t), tableActionColumn],
+    tableDataGetter: parseEncounterList,
+    extractSideViewDetails: sidePreviewDetailsExtractor<IEncounter>(
+      patientId,
+      encounterPreviewExtractor,
+      () => removeParam(sideViewQuery)
+    ),
+  };
+
+  const tabViewProps: GenericTabsViewProps = {
+    tabViewId: 'tabView',
+    sideViewQueryName: sideViewQuery,
+    size: 'small',
+    items: [
+      {
+        label: (
+          <TabsTitle
+            fhirBaseURL={fhirBaseURL}
+            resourceType={carePlanResourceType}
+            title={t('Care plan')}
+            resourceFilters={defaultSearchParamsFactory(patientId)}
+          />
+        ),
+        key: 'carePlan',
+        children: <TabsTable<ICarePlan> {...carePlanTableData} />,
+      },
+      {
+        label: (
+          <TabsTitle
+            fhirBaseURL={fhirBaseURL}
+            resourceType={conditionResourceType}
+            title={t('Condition')}
+            resourceFilters={defaultSearchParamsFactory(patientId)}
+          />
+        ),
+        key: 'condition',
+        children: <TabsTable<ICondition> {...conditionTableData} />,
+      },
+      {
+        label: (
+          <TabsTitle
+            fhirBaseURL={fhirBaseURL}
+            resourceType={taskResourceType}
+            title={t('Task')}
+            resourceFilters={taskSearchParams(patientId)}
+          />
+        ),
+        key: 'task',
+        children: <TabsTable<ITask> {...taskTableData} />,
+      },
+      {
+        label: (
+          <TabsTitle
+            fhirBaseURL={fhirBaseURL}
+            resourceType={immunizationResourceType}
+            title={t('Immunization')}
+            resourceFilters={immunizationSearchParams(patientId)}
+          />
+        ),
+        key: 'immunization',
+        children: <TabsTable<IImmunization> {...immunizationTableData} />,
+      },
+      {
+        label: (
+          <TabsTitle
+            fhirBaseURL={fhirBaseURL}
+            resourceType={encounterResourceType}
+            title={t('Patient encounter')}
+            resourceFilters={defaultSearchParamsFactory(patientId)}
+          />
+        ),
+        key: 'patientEncounter',
+        children: <TabsTable<IEncounter> {...patientEncounterTableData} />,
+      },
+    ],
+  };
+
+  return <GenericTabsView {...tabViewProps} />;
+};
+
+export const MemoizePopulatedTableTabs = React.memo(PopulatedTableTabs);

packages/fhir-client/src/components/PatientDetails/PopulatedTableTabs/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Condition tab renders correctly 1`] = `"77386006confirmedID: 349d8947-3009-4fb3-b3d5-99ff30aa5614CategorystageOnset dateClinical statusactiveView full details"`;
+
+exports[`Patient encounter tab renders correctly 1`] = `"AMBfinishedID: a1f3a048-8863-42b7-9d2e-2e9efbbca9a8ReasonPeriodInvalid Date-Invalid DateService Type581Episode of careView full details"`;
+
+exports[`Task tab renders correctly 1`] = `"Hygiene VisitcompletedID: 14205Period9/30/2021-10/1/2021PriorityStatuscompletedIntentorderView full details"`;
+
+exports[`immunization encounter tab renders correctly 1`] = `"SARSCoV2  mRNA vaccinecompletedID: 979Date recorded2021-07-29T12:37:03+03:00protocol applied1statuscompletedReasonView full details"`;