(feat) follow up changes on the case management: discontinuity of case (

#540) * (feat) follow up changes on the case management: discontinuity of case * (fix) fix the translation en.json * (fix) addressed the PR suggestions * (refactor) update the translation * (fix) provided fix for the empty translation * (fix) fix build failure
palladiumkenya · Jan 13, 2025 · c25cb34 · c25cb34
1 parent 380a213
commit c25cb34
Show file tree

Hide file tree

Showing 17 changed files with 383 additions and 100 deletions.
diff --git a/packages/esm-billing-app/src/billing-dashboard/clock-out-strip.component.tsx b/packages/esm-billing-app/src/billing-dashboard/clock-out-strip.component.tsx
@@ -32,8 +32,8 @@ export const ClockOutStrip = () => {
       <div className={styles.clockOutInfo}>
         <Alarm />
         <p className={styles.clockInTime}>
-          {t('clockInTime', `Clocked in on {{clockInDateTime}}`, {
-            clockInDateTime: dayjs(globalActiveSheet.clockIn).format('D MMM YYYY, HH:mm A'),
+          {t('clockInTime', 'Clocked in on {{clockInDate}}', {
+            clockInDate: dayjs(globalActiveSheet.clockIn).format('D MMM YYYY, HH:mm A'),
           })}
         </p>
         <span className={styles.middot}>&middot;</span>

diff --git a/packages/esm-billing-app/translations/en.json b/packages/esm-billing-app/translations/en.json
@@ -70,7 +70,7 @@
   "claimSummary": "Claim Summary",
   "clear": "Clear",
   "clearSearch": "Clear search input",
-  "clockInTime": "Clocked in on {{clockInDateTime}}",
+  "clockInTime": "Clocked in on {{clockInDate}}",
   "close": "Close",
   "create": "Create",
   "createClaimError": "Create Claim error",

diff --git a/...nt-clinical-view-app/src/case-management/encounters/case-encounter-overview.component.tsx b/...nt-clinical-view-app/src/case-management/encounters/case-encounter-overview.component.tsx
@@ -68,7 +68,7 @@ const CaseEncounterHeader = ({ patientUuid, mutate, onFilterChange }: CaseEncoun
             id="serviceFilter"
             initialSelectedItem={{ text: t('all', 'All'), filterUuid: '' }}
             label=""
-            titleText={t('filterByForm', 'Filter by formz') + ':'}
+            titleText={t('filterByForm', 'Filter by form') + ':'}
             type="inline"
             items={[{ text: t('all', 'All'), filterUuid: '' }, ...items]}
             itemToString={(item) => (item ? item.text : '')}

diff --git a/...atient-clinical-view-app/src/case-management/metrics/case-management-header.component.tsx b/...atient-clinical-view-app/src/case-management/metrics/case-management-header.component.tsx
@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { WatsonHealthStressBreathEditor } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import styles from './case-management-header.scss';
-import { launchWorkspace, navigate, useSession } from '@openmrs/esm-framework';
+import { launchWorkspace, useSession } from '@openmrs/esm-framework';
 
-const MetricsHeader = () => {
+interface MetricsHeaderProps {
+  activeTabIndex: number;
+}
+
+const MetricsHeader: React.FC<MetricsHeaderProps> = ({ activeTabIndex }) => {
   const { t } = useTranslation();
   const { user } = useSession();
   const metricsTitle = t(' ', 'Case Manager');
@@ -14,14 +18,18 @@ const MetricsHeader = () => {
       workspaceTitle: 'Case Management Form',
     });
   };
+
+  const isDiscontinuationTab = activeTabIndex === 1;
+
   return (
     <div className={styles.metricsContainer}>
       <div className={styles.actionBtn}>
         <Button
           kind="tertiary"
           renderIcon={(props) => <WatsonHealthStressBreathEditor size={16} {...props} />}
           iconDescription={t('addCase', 'Add case')}
-          onClick={handleAddCase}>
+          onClick={handleAddCase}
+          disabled={isDiscontinuationTab}>
           {t('addCase', 'Add case')}
         </Button>
       </div>

diff --git a/...ent-clinical-view-app/src/case-management/table/case-management-list-active-component.tsx b/...ent-clinical-view-app/src/case-management/table/case-management-list-active-component.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   DataTable,
@@ -14,18 +14,29 @@ import {
   Layer,
   Tile,
   OverflowMenu,
+  Tag,
+  OverflowMenuItem,
 } from '@carbon/react';
 import { CardHeader, EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
-import { ConfigurableLink, isDesktop, useLayoutType, useSession } from '@openmrs/esm-framework';
+import {
+  ConfigurableLink,
+  isDesktop,
+  launchWorkspace,
+  showModal,
+  showSnackbar,
+  useLayoutType,
+  useSession,
+} from '@openmrs/esm-framework';
 import styles from './case-management-list.scss';
 import { useActivecases } from '../workspace/case-management.resource';
 import { extractNameString, uppercaseText } from '../../utils/expression-helper';
 
 interface CaseManagementListActiveProps {
   setActiveCasesCount: (count: number) => void;
+  activeTabIndex: number;
 }
 
-const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ setActiveCasesCount }) => {
+const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ setActiveCasesCount, activeTabIndex }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const [pageSize, setPageSize] = useState(10);
@@ -35,47 +46,76 @@ const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ set
   const { user } = useSession();
   const caseManagerPersonUuid = user?.person.uuid;
 
-  const { data: activeCasesData, error: activeCasesError } = useActivecases(caseManagerPersonUuid);
+  const { data: activeCasesData } = useActivecases(caseManagerPersonUuid);
 
   const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/case-management-encounters';
 
   const headers = [
     { key: 'names', header: t('names', 'Names') },
     { key: 'dateofstart', header: t('dateofstart', 'Start Date') },
     { key: 'dateofend', header: t('dateofend', 'End Date') },
+    { key: 'actions', header: t('actions', 'Actions') },
   ];
 
-  const filteredCases = activeCasesData?.data.results.filter(
-    (caseData) =>
-      caseData.endDate === null &&
-      (extractNameString(caseData.personB.display).toLowerCase().includes(searchTerm.toLowerCase()) ||
-        caseData.personB.display.toLowerCase().includes(searchTerm.toLowerCase())),
+  const filteredCases = useMemo(
+    () =>
+      activeCasesData?.data.results.filter(
+        (caseData) =>
+          caseData.endDate === null &&
+          (extractNameString(caseData.personB.display).toLowerCase().includes(searchTerm.toLowerCase()) ||
+            caseData.personB.display.toLowerCase().includes(searchTerm.toLowerCase())),
+      ) || [],
+    [activeCasesData, searchTerm],
+  );
+
+  const paginatedCases = useMemo(
+    () => filteredCases.slice((currentPage - 1) * pageSize, currentPage * pageSize),
+    [filteredCases, currentPage, pageSize],
   );
 
-  const tableRows = filteredCases
-    ?.slice((currentPage - 1) * pageSize, currentPage * pageSize)
-    .map((caseData, index) => ({
-      id: caseData.uuid,
-      names: (
-        <ConfigurableLink
-          style={{ textDecoration: 'none', maxWidth: '50%' }}
-          to={patientChartUrl}
-          templateParams={{ patientUuid: caseData.personB.uuid }}>
-          {uppercaseText(extractNameString(caseData.personB.display))}
-        </ConfigurableLink>
-      ),
-      dateofstart: new Date(caseData.startDate).toLocaleDateString(),
-      dateofend: caseData.endDate ? new Date(caseData.endDate).toLocaleDateString() : '-',
-    }));
+  const tableRows = paginatedCases.map((caseData) => ({
+    id: caseData.uuid,
+    names: (
+      <ConfigurableLink
+        className={styles.configurableLink}
+        to={patientChartUrl}
+        templateParams={{ patientUuid: caseData.personB.uuid }}>
+        {uppercaseText(extractNameString(caseData.personB.display))}
+      </ConfigurableLink>
+    ),
+    dateofstart: new Date(caseData.startDate).toLocaleDateString(),
+    dateofend: caseData.endDate ? (
+      new Date(caseData.endDate).toLocaleDateString()
+    ) : (
+      <Tag type="green" size="lg">
+        {t('enrolled', 'Enrolled')}
+      </Tag>
+    ),
+    actions: (
+      <OverflowMenu size="md">
+        <OverflowMenuItem
+          isDelete
+          itemText={t('discontinue', 'Discontinue')}
+          disabled={activeTabIndex === 1}
+          onClick={() => handleDiscontinueACase(caseData.uuid)}
+        />
+      </OverflowMenu>
+    ),
+  }));
+
+  const handleDiscontinueACase = async (relationshipUuid: string) => {
+    launchWorkspace('end-relationship-form', {
+      relationshipUuid,
+    });
+  };
 
   useEffect(() => {
-    const count = filteredCases?.length || 0;
-    setActiveCasesCount(count);
+    setActiveCasesCount(filteredCases.length);
   }, [filteredCases, setActiveCasesCount]);
 
   const headerTitle = `${t('activeCases', 'Active Cases')}`;
 
-  if (filteredCases?.length === 0) {
+  if (!filteredCases.length) {
     return (
       <Layer>
         <Tile className={styles.tile}>
@@ -91,7 +131,7 @@ const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ set
 
   return (
     <div className={styles.widgetContainer}>
-      <CardHeader title={headerTitle} children={''}></CardHeader>
+      <CardHeader title={headerTitle} children={''} />
       <Search
         labelText=""
         placeholder={t('filterTable', 'Filter table')}
@@ -101,7 +141,7 @@ const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ set
       <DataTable
         useZebraStyles
         size="sm"
-        rows={tableRows || []}
+        rows={tableRows}
         headers={headers}
         render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
           <TableContainer {...getTableContainerProps()}>
@@ -132,7 +172,7 @@ const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ set
         page={currentPage}
         pageSize={pageSize}
         pageSizes={[5, 10, 15]}
-        totalItems={filteredCases?.length || 0}
+        totalItems={filteredCases.length}
         onChange={({ page, pageSize }) => {
           setCurrentPage(page);
           setPageSize(pageSize);

diff --git a/...t-clinical-view-app/src/case-management/table/case-management-list-inactive-component.tsx b/...t-clinical-view-app/src/case-management/table/case-management-list-inactive-component.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   DataTable,
@@ -13,7 +13,7 @@ import {
   Search,
   Layer,
   Tile,
-  OverflowMenu,
+  Tag,
 } from '@carbon/react';
 import { CardHeader, EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
 import { ConfigurableLink, isDesktop, useLayoutType, useSession } from '@openmrs/esm-framework';
@@ -43,39 +43,53 @@ const CaseManagementListInActive: React.FC<CaseManagementListInActiveProps> = ({
     { key: 'names', header: t('names', 'Names') },
     { key: 'dateofstart', header: t('dateofstart', 'Start Date') },
     { key: 'dateofend', header: t('dateofend', 'End Date') },
+    { key: 'status', header: t('status', 'Status') },
   ];
 
-  const filteredCases = inactiveCasesData?.data.results.filter(
-    (caseData) =>
-      caseData.endDate !== null &&
-      (extractNameString(caseData.personB.display).toLowerCase().includes(searchTerm.toLowerCase()) ||
-        caseData.personB.display.toLowerCase().includes(searchTerm.toLowerCase())),
+  const filteredCases = useMemo(
+    () =>
+      inactiveCasesData?.data.results.filter(
+        (caseData) =>
+          caseData.endDate !== null &&
+          (extractNameString(caseData.personB.display).toLowerCase().includes(searchTerm.toLowerCase()) ||
+            caseData.personB.display.toLowerCase().includes(searchTerm.toLowerCase())),
+      ) || [],
+    [inactiveCasesData, searchTerm],
   );
 
-  const tableRows = filteredCases
-    ?.slice((currentPage - 1) * pageSize, currentPage * pageSize)
-    .map((caseData, index) => ({
-      id: caseData.uuid,
-      names: (
-        <ConfigurableLink
-          style={{ textDecoration: 'none', maxWidth: '50%' }}
-          to={patientChartUrl}
-          templateParams={{ patientUuid: caseData.personB.uuid }}>
-          {uppercaseText(extractNameString(caseData.personB.display))}
-        </ConfigurableLink>
-      ),
-      dateofstart: new Date(caseData.startDate).toLocaleDateString(),
-      dateofend: new Date(caseData.endDate).toLocaleDateString(),
-    }));
+  const paginatedCases = useMemo(
+    () => filteredCases.slice((currentPage - 1) * pageSize, currentPage * pageSize),
+    [filteredCases, currentPage, pageSize],
+  );
+
+  const tableRows = paginatedCases.map((caseData) => ({
+    id: caseData.uuid,
+    names: (
+      <ConfigurableLink
+        className={styles.configurableLink}
+        to={patientChartUrl}
+        templateParams={{ patientUuid: caseData.personB.uuid }}>
+        {uppercaseText(extractNameString(caseData.personB.display))}
+      </ConfigurableLink>
+    ),
+    dateofstart: new Date(caseData.startDate).toLocaleDateString(),
+    dateofend: new Date(caseData.endDate).toLocaleDateString(),
+    status: caseData.endDate ? (
+      <Tag type="red" size="lg">
+        {t('discontinued', 'Discontinued')}
+      </Tag>
+    ) : (
+      '--'
+    ),
+  }));
 
   useEffect(() => {
-    const count = filteredCases?.length || 0;
-    setInactiveCasesCount(count);
+    setInactiveCasesCount(filteredCases.length);
   }, [filteredCases, setInactiveCasesCount]);
 
   const headerTitle = `${t('inactiveCases', 'Inactive Cases')}`;
 
-  if (filteredCases?.length === 0) {
+  if (!filteredCases.length) {
     return (
       <Layer>
         <Tile className={styles.tile}>
@@ -93,7 +107,7 @@ const CaseManagementListInActive: React.FC<CaseManagementListInActiveProps> = ({
 
   return (
     <div className={styles.widgetContainer}>
-      <CardHeader title={headerTitle} children={''}></CardHeader>
+      <CardHeader title={headerTitle} children={''} />
       <Search
         labelText=""
         placeholder={t('filterTable', 'Filter table')}
@@ -103,7 +117,7 @@ const CaseManagementListInActive: React.FC<CaseManagementListInActiveProps> = ({
       <DataTable
         useZebraStyles
         size="sm"
-        rows={tableRows || []}
+        rows={tableRows}
         headers={headers}
         render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
           <TableContainer {...getTableContainerProps()}>
@@ -134,7 +148,7 @@ const CaseManagementListInActive: React.FC<CaseManagementListInActiveProps> = ({
         page={currentPage}
         pageSize={pageSize}
         pageSizes={[5, 10, 15]}
-        totalItems={filteredCases?.length || 0}
+        totalItems={filteredCases.length}
         onChange={({ page, pageSize }) => {
           setCurrentPage(page);
           setPageSize(pageSize);

diff --git a/packages/esm-patient-clinical-view-app/src/case-management/table/case-management-list.scss b/packages/esm-patient-clinical-view-app/src/case-management/table/case-management-list.scss
@@ -47,3 +47,7 @@
     }
   }
 }
+.configurableLink {
+  text-decoration: none;
+  max-width: 50%;
+}
diff --git a/...esm-patient-clinical-view-app/src/case-management/tabs/case-management-tabs.component.tsx b/...esm-patient-clinical-view-app/src/case-management/tabs/case-management-tabs.component.tsx
@@ -5,13 +5,18 @@ import styles from './case-management-tabs.scss';
 import CaseManagementListActive from '../table/case-management-list-active-component';
 import CaseManagementListInActive from '../table/case-management-list-inactive-component';
 
-const CaseManagementTabs: React.FC = () => {
+interface CaseManagementTabsProps {
+  setActiveTabIndex: (index: number) => void;
+}
+
+const CaseManagementTabs: React.FC<CaseManagementTabsProps> = ({ setActiveTabIndex }) => {
   const { t } = useTranslation();
-  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
+  const [activeTabIndex, setLocalActiveTabIndex] = useState<number>(0);
   const [activeCasesCount, setActiveCasesCount] = useState<number>(0);
   const [inactiveCasesCount, setInactiveCasesCount] = useState<number>(0);
 
   const handleTabChange = ({ selectedIndex }: { selectedIndex: number }) => {
+    setLocalActiveTabIndex(selectedIndex);
     setActiveTabIndex(selectedIndex);
   };
 
@@ -30,7 +35,7 @@ const CaseManagementTabs: React.FC = () => {
         </div>
         <TabPanels>
           <TabPanel className={styles.tabPanel}>
-            <CaseManagementListActive setActiveCasesCount={setActiveCasesCount} />
+            <CaseManagementListActive setActiveCasesCount={setActiveCasesCount} activeTabIndex={activeTabIndex} />
           </TabPanel>
           <TabPanel className={styles.tabPanel}>
             <CaseManagementListInActive setInactiveCasesCount={setInactiveCasesCount} />