@kenyaemr/esm-lab-manifest-app 5.4.2-pre.2248 → 5.4.2-pre.2255

package/src/tables/lab-manifest-samples.component.tsx

@@ -4,6 +4,7 @@ import {
   DataTable,
   DataTableSkeleton,
   Pagination,
+  Search,
   Table,
   TableBody,
   TableCell,
@@ -15,29 +16,21 @@ import {
   TableSelectRow,
 } from '@carbon/react';
 import { ArrowRight, Printer, TrashCan } from '@carbon/react/icons';
-import {
-  ConfigurableLink,
-  ErrorState,
-  formatDate,
-  parseDate,
-  showModal,
-  showSnackbar,
-  usePagination,
-} from '@openmrs/esm-framework';
+import { ErrorState, formatDate, parseDate, showModal, showSnackbar, usePagination } from '@openmrs/esm-framework';
 import { CardHeader, EmptyState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLabManifest } from '../hooks';
+import useLabManifestOrders, { LabManifestSample } from '../hooks/useLabManifestOrders';
 import {
   mutateManifestLinks,
   printSpecimentLabel,
   removeSampleFromTheManifest,
   sampleRemovableManifestStatus,
 } from '../lab-manifest.resources';
-import { LabManifestSample } from '../types';
 import styles from './lab-manifest-table.scss';
-import PatientNameCell from './patient-name-cell.component';
 import PatientCCCNumbercell from './patient-ccc-no-cell.component';
+import PatientNameCell from './patient-name-cell.component';
 
 interface LabManifestSamplesProps {
   manifestUuid: string;
@@ -45,11 +38,17 @@ interface LabManifestSamplesProps {
 
 const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid }) => {
   const { error, isLoading, manifest } = useLabManifest(manifestUuid);
-  const samples: Array<LabManifestSample> = manifest?.samples ?? [];
+  const {
+    labmanifestOrders,
+    setSearchvalue,
+    searchValue,
+    isLoading: isLoadingLabOrders,
+    error: labOrderErrors,
+  } = useLabManifestOrders(manifestUuid);
   const { t } = useTranslation();
   const [pageSize, setPageSize] = useState(10);
   const headerTitle = t('labManifestSamples', 'Lab Manifest Samples');
-  const { results, totalPages, currentPage, goTo } = usePagination(samples, pageSize);
+  const { results, totalPages, currentPage, goTo } = usePagination(labmanifestOrders, pageSize);
   const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
 
   const headers = [
@@ -96,7 +95,7 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
   const handleDeleteManifestSample = (sampleUUid: string) => {
     const dispose = showModal('sample-delete-confirm-dialog', {
       onClose: () => dispose(),
-      samples: samples.filter((s) => s.uuid === sampleUUid),
+      samples: labmanifestOrders.filter((s) => s.uuid === sampleUUid),
       onDelete: async () => {
         try {
           await removeSampleFromTheManifest(sampleUUid);
@@ -108,7 +107,7 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
             subtitle: t('sampleRemoveSuccess', 'Sample removed from manifest successfully!'),
           });
         } catch (e: any) {
-          const _sample = samples.find((sample) => sample.uuid === sampleUUid);
+          const _sample = labmanifestOrders.find((sample) => sample.uuid === sampleUUid);
           showSnackbar({
             title: t('errorRemovingSample', 'Error removing sample {{sample}} from the manifest', {
               sample: _sample.id ?? _sample?.uuid,
@@ -169,17 +168,13 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
   }
 
   const tableRows =
-    (results as LabManifestSample[])?.map((sample) => {
+    results?.map((sample) => {
       return {
         id: `${sample.uuid}`,
         sampleType: sample.sampleType ?? '--',
         status: sample.status,
         batchNumber: sample.batchNumber ?? '--',
-        patientName: sample?.order?.patient?.uuid ? (
-          <PatientNameCell patientUuid={sample?.order?.patient?.uuid} />
-        ) : (
-          '--'
-        ),
+        patientName: <PatientNameCell patient={sample?.order?.patient} />,
         cccKDODNumber: sample?.order?.patient ? (
           <PatientCCCNumbercell patientUuid={sample?.order?.patient?.uuid} />
         ) : (
@@ -213,14 +208,14 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
       };
     }) ?? [];
 
-  if (isLoading) {
+  if (isLoading || isLoadingLabOrders) {
     return <DataTableSkeleton rowCount={5} />;
   }
-  if (error) {
+  if (error || labOrderErrors) {
     return <ErrorState headerTitle={headerTitle} error={error} />;
   }
 
-  if (samples.length === 0) {
+  if (labmanifestOrders.length === 0) {
     return (
       <EmptyState
         headerTitle={t('manifestSamples', 'Manifest Samples')}
@@ -228,6 +223,7 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
       />
     );
   }
+
   return (
     <div className={styles.widgetContainer}>
       <DataTable
@@ -249,7 +245,7 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
             <CardHeader title={headerTitle}>
               <Button
                 onClick={() => {
-                  const data = selectedRows.map(({ id }) => samples.find((s) => s.uuid === id));
+                  const data = selectedRows.map(({ id }) => labmanifestOrders.find((s) => s.uuid === id));
                   handleDeleteSelectedSamples(data);
                 }}
                 renderIcon={ArrowRight}
@@ -257,6 +253,7 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
                 {t('deleteSelectedSamples', 'Remove Selected Samples')}
               </Button>
             </CardHeader>
+            <Search labelText={''} value={searchValue} onChange={({ target: { value } }) => setSearchvalue(value)} />
             <TableContainer {...getTableContainerProps()}>
               <Table {...getTableProps()}>
                 <TableHead>
@@ -289,7 +286,7 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
         page={currentPage}
         pageSize={pageSize}
         pageSizes={pageSizes}
-        totalItems={samples.length}
+        totalItems={labmanifestOrders.length}
         onChange={({ page, pageSize }) => {
           goTo(page);
           setPageSize(pageSize);

package/src/tables/lab-manifest-table.component.tsx

@@ -1,7 +1,6 @@
 import {
   DataTable,
   DataTableSkeleton,
-  Dropdown,
   Layer,
   OverflowMenu,
   OverflowMenuItem,
@@ -13,6 +12,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Tile,
 } from '@carbon/react';
 import {
   ErrorState,
@@ -26,10 +26,11 @@ import {
   useLayoutType,
   usePagination,
 } from '@openmrs/esm-framework';
-import { CardHeader, EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LabManifestConfig } from '../config-schema';
+import LabManifestTableFilterHeader from '../header/lab-manifest-table-filters-header.component';
 import { useLabManifests } from '../hooks';
 import {
   editableManifestStatus,
@@ -206,47 +207,21 @@ const LabManifestsTable = () => {
   if (manifests.length === 0) {
     return (
       <Layer className={styles.tile}>
-        <CardHeader title={headerTitle}>
-          <Dropdown
-            titleText={t('manifestStatus', 'Manifest status')}
-            className={styles.dropDownFilter}
-            id="manifestStatus"
-            onChange={({ selectedItem }) => {
-              setCurrFilter(LabManifestFilters.find((lb) => lb.value === selectedItem).params);
-            }}
-            initialSelectedItem={LabManifestFilters.find((lb) => lb.params === currFilter).value}
-            label={t('selectManifestStatus', 'Select manifest status')}
-            items={LabManifestFilters.map((mn) => mn.value)}
-            itemToString={(item) => LabManifestFilters.find((lm) => lm.value === item)?.label ?? ''}
-          />
-        </CardHeader>
-        <EmptyDataIllustration />
-        <p className={styles.content}>
-          {t('notLabManifetToDisplay', 'There are no {{status}} lab manifets data to display.', {
-            status: LabManifestFilters.find((lm) => lm.params === currFilter)?.label ?? '',
-          })}
-        </p>
+        <LabManifestTableFilterHeader filter={currFilter} onFilterChange={setCurrFilter} title={headerTitle} />
+        <Tile>
+          <EmptyDataIllustration />
+          <p className={styles.content}>
+            {t('notLabManifetToDisplay', 'There are no {{status}} lab manifets data to display.', {
+              status: LabManifestFilters.find((lm) => lm.params === currFilter)?.label ?? '',
+            })}
+          </p>
+        </Tile>
       </Layer>
     );
   }
   return (
     <div className={styles.widgetContainer}>
-      <CardHeader title={headerTitle}>
-        <div style={{ padding: '10px' }}>
-          <Dropdown
-            titleText={t('manifestStatus', 'Manifest status')}
-            style={{ minWidth: '300px' }}
-            id="manifestStatus"
-            onChange={({ selectedItem }) => {
-              setCurrFilter(LabManifestFilters.find((lb) => lb.value === selectedItem).params);
-            }}
-            initialSelectedItem={LabManifestFilters.find((lb) => lb.params === currFilter).value}
-            label={t('selectManifestStatus', 'Select manifest status')}
-            items={LabManifestFilters.map((mn) => mn.value)}
-            itemToString={(item) => LabManifestFilters.find((lm) => lm.value === item)?.label ?? ''}
-          />
-        </div>
-      </CardHeader>
+      <LabManifestTableFilterHeader filter={currFilter} onFilterChange={setCurrFilter} title={headerTitle} />
       <DataTable
         useZebraStyles
         size="sm"

package/src/tables/patient-name-cell.component.tsx

@@ -1,27 +1,20 @@
-import React from 'react';
-import { Order } from '../types';
 import { ConfigurableLink } from '@openmrs/esm-framework';
-import usePatient from '../hooks/usePatient';
-import { InlineLoading } from '@carbon/react';
+import React from 'react';
+import { Patient } from '../hooks/useLabManifestOrders';
 
 type Props = {
-  patientUuid: string;
+  patient?: Patient;
 };
 
-const PatientNameCell: React.FC<Props> = ({ patientUuid }) => {
-  const { isLoading, patient } = usePatient(patientUuid);
+const PatientNameCell: React.FC<Props> = ({ patient }) => {
   const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/Patient Summary';
-
-  if (isLoading) {
-    return <InlineLoading status="active" iconDescription="Loading" />;
-  }
-
+  const { display, uuid: patientUuid } = patient ?? {};
   return (
     <ConfigurableLink
       to={patientChartUrl}
       templateParams={{ patientUuid: patientUuid }}
       style={{ textDecoration: 'none' }}>
-      {patient?.person?.display}
+      {display}
     </ConfigurableLink>
   );
 };

package/translations/en.json

@@ -22,7 +22,6 @@
   "labPersonContact": "Lab person Contact",
   "manifestId": "Manifest Id",
   "manifestSamples": "Manifest samples",
-  "manifestStatus": "Manifest status",
   "notLabManifetToDisplay": "There are no {{status}} lab manifets data to display.",
   "patient": "Patient",
   "patientName": "Patient name",