(chore) removed metrics on the header (#265)

* (chore) removed metrics on the header

* (chore) removed metrics on the header

* (chore) removed unecessary elements

* (refactor) showing msg on the no inactive cases

packages/esm-patient-clinical-view-app/src/case-management/metrics/case-management-header.component.tsx

@@ -3,26 +3,26 @@ 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 } from '@openmrs/esm-framework';
+import { launchWorkspace, navigate, useSession } from '@openmrs/esm-framework';
 
 const MetricsHeader = () => {
   const { t } = useTranslation();
-  const metricsTitle = t('caseManager', 'Case Manager summaries');
+  const { user } = useSession();
+  const metricsTitle = t(' ', 'Case Manager');
   const handleAddCase = () => {
     launchWorkspace('case-management-form', {
       workspaceTitle: 'Case Management Form',
     });
   };
   return (
     <div className={styles.metricsContainer}>
-      <span className={styles.metricsTitle}>{metricsTitle}</span>
       <div className={styles.actionBtn}>
         <Button
           kind="tertiary"
           renderIcon={(props) => <WatsonHealthStressBreathEditor size={16} {...props} />}
-          iconDescription={t('addCase', 'Add a case')}
+          iconDescription={t('addCase', 'Add case')}
           onClick={handleAddCase}>
-          {t('addCase', 'Add a case')}
+          {t('addCase', 'Add case')}
         </Button>
       </div>
     </div>

packages/esm-patient-clinical-view-app/src/case-management/metrics/case-management-header.scss

@@ -9,6 +9,7 @@
   height: layout.$spacing-10;
   align-items: center;
   padding: 0 layout.$spacing-06;
+  float: right;
 }
 
 .metricsTitle {

packages/esm-patient-clinical-view-app/src/case-management/table/case-management-list-active-component.tsx

@@ -13,19 +13,19 @@ import {
   Search,
   Layer,
   Tile,
-  Button,
   OverflowMenu,
-  OverflowMenuItem,
 } from '@carbon/react';
 import { CardHeader, EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
 import { ConfigurableLink, isDesktop, 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';
 
-const CaseManagementListActive: React.FC<{ setActiveCasesCount: (count: number) => void }> = ({
-  setActiveCasesCount,
-}) => {
+interface CaseManagementListActiveProps {
+  setActiveCasesCount: (count: number) => void;
+}
+
+const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ setActiveCasesCount }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const [pageSize, setPageSize] = useState(10);
@@ -37,16 +37,13 @@ const CaseManagementListActive: React.FC<{ setActiveCasesCount: (count: number)
 
   const { data: activeCasesData, error: activeCasesError } = useActivecases(caseManagerPersonUuid);
 
-  const headerTitle = t('activeCases', 'Active Cases');
   const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/Patient%20Summary';
 
   const headers = [
     { key: 'sno', header: t('s/No', 'S/No') },
     { key: 'names', header: t('names', 'Names') },
-    // { key: 'reason', header: t('reason', 'Reason for assigned') },
     { key: 'dateofstart', header: t('dateofstart', 'Start Date') },
     { key: 'dateofend', header: t('dateofend', 'End Date') },
-    // { key: 'notes', header: t('notes', 'Notes') },
     { key: 'action', header: t('action', 'Action') },
   ];
 
@@ -56,12 +53,12 @@ const CaseManagementListActive: React.FC<{ setActiveCasesCount: (count: number)
       (extractNameString(caseData.personB.display).toLowerCase().includes(searchTerm.toLowerCase()) ||
         caseData.personB.display.toLowerCase().includes(searchTerm.toLowerCase())),
   );
+
   const tableRows = filteredCases
     ?.slice((currentPage - 1) * pageSize, currentPage * pageSize)
     .map((caseData, index) => ({
       id: caseData.uuid,
       sno: (currentPage - 1) * pageSize + index + 1,
-
       names: (
         <ConfigurableLink
           style={{ textDecoration: 'none', maxWidth: '50%' }}
@@ -70,11 +67,8 @@ const CaseManagementListActive: React.FC<{ setActiveCasesCount: (count: number)
           {uppercaseText(extractNameString(caseData.personB.display))}
         </ConfigurableLink>
       ),
-
-      // reason: t('assignedTo', 'Assigned to ') + caseData.personB.display,
       dateofstart: new Date(caseData.startDate).toLocaleDateString(),
       dateofend: caseData.endDate ? new Date(caseData.endDate).toLocaleDateString() : '-',
-      notes: '-',
       action: (
         <OverflowMenu flipped={document?.dir === 'rtl'} aria-label="overflow-menu">
           {/* <OverflowMenuItem itemText="Transfer Case" />
@@ -84,9 +78,12 @@ const CaseManagementListActive: React.FC<{ setActiveCasesCount: (count: number)
     }));
 
   useEffect(() => {
-    setActiveCasesCount(filteredCases?.length || 0);
+    const count = filteredCases?.length || 0;
+    setActiveCasesCount(count);
   }, [filteredCases, setActiveCasesCount]);
 
+  const headerTitle = `${t('activeCases', 'Active Cases')}`;
+
   if (filteredCases?.length === 0) {
     return (
       <Layer>

packages/esm-patient-clinical-view-app/src/case-management/table/case-management-list-inactive-component.tsx

@@ -11,21 +11,21 @@ import {
   TableHeader,
   TableRow,
   Search,
-  Button,
   Layer,
   Tile,
   OverflowMenu,
-  OverflowMenuItem,
 } from '@carbon/react';
 import { CardHeader, EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
 import { ConfigurableLink, isDesktop, useLayoutType, useSession } from '@openmrs/esm-framework';
 import styles from './case-management-list.scss';
 import { extractNameString, uppercaseText } from '../../utils/expression-helper';
-import { useActivecases, saveRelationship } from '../workspace/case-management.resource';
+import { useActivecases } from '../workspace/case-management.resource';
 
-const CaseManagementListInActive: React.FC<{ setInactiveCasesCount: (count: number) => void }> = ({
-  setInactiveCasesCount,
-}) => {
+interface CaseManagementListInActiveProps {
+  setInactiveCasesCount: (count: number) => void;
+}
+
+const CaseManagementListInActive: React.FC<CaseManagementListInActiveProps> = ({ setInactiveCasesCount }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const [pageSize, setPageSize] = useState(10);
@@ -37,15 +37,13 @@ const CaseManagementListInActive: React.FC<{ setInactiveCasesCount: (count: numb
 
   const { data: inactiveCasesData } = useActivecases(caseManagerPersonUuid);
 
-  const headerTitle = t('inactiveCases', 'Inactive Cases');
+  const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/Patient%20Summary';
 
   const headers = [
     { key: 'sno', header: t('s/No', 'S/No') },
     { key: 'names', header: t('names', 'Names') },
-    // { key: 'reason', header: t('reason', 'Reason for assigned') },
     { key: 'dateofstart', header: t('dateofstart', 'Start Date') },
     { key: 'dateofend', header: t('dateofend', 'End Date') },
-    // { key: 'notes', header: t('notes', 'Notes') },
     { key: 'action', header: t('action', 'Action') },
   ];
 
@@ -55,7 +53,6 @@ const CaseManagementListInActive: React.FC<{ setInactiveCasesCount: (count: numb
       (extractNameString(caseData.personB.display).toLowerCase().includes(searchTerm.toLowerCase()) ||
         caseData.personB.display.toLowerCase().includes(searchTerm.toLowerCase())),
   );
-  const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/Patient%20Summary';
 
   const tableRows = filteredCases
     ?.slice((currentPage - 1) * pageSize, currentPage * pageSize)
@@ -70,10 +67,8 @@ const CaseManagementListInActive: React.FC<{ setInactiveCasesCount: (count: numb
           {uppercaseText(extractNameString(caseData.personB.display))}
         </ConfigurableLink>
       ),
-      // reason: t('assignedTo', 'Assigned to ') + caseData.personB.display,
       dateofstart: new Date(caseData.startDate).toLocaleDateString(),
       dateofend: new Date(caseData.endDate).toLocaleDateString(),
-      // notes: '-',
       action: (
         <OverflowMenu flipped={document?.dir === 'rtl'} aria-label="overflow-menu">
           {/* <OverflowMenuItem itemText="Transfer Case" /> */}
@@ -82,9 +77,12 @@ const CaseManagementListInActive: React.FC<{ setInactiveCasesCount: (count: numb
     }));
 
   useEffect(() => {
-    setInactiveCasesCount(filteredCases?.length || 0);
+    const count = filteredCases?.length || 0;
+    setInactiveCasesCount(count);
   }, [filteredCases, setInactiveCasesCount]);
 
+  const headerTitle = `${t('inactiveCases', 'Inactive Cases')}`;
+
   if (filteredCases?.length === 0) {
     return (
       <Layer>
@@ -94,7 +92,7 @@ const CaseManagementListInActive: React.FC<{ setInactiveCasesCount: (count: numb
           </div>
           <EmptyDataIllustration />
           <p className={styles.content}>
-            {t('noContactToDisplay', 'There is no contact data to display for this patient.')}
+            {t('noInActiveCasesToDisplay', 'There is no inactive cases data to display.')}
           </p>
         </Tile>
       </Layer>