Khp3 6316 add ability to print manifest and specimen label (#297)

* Manifest dashboard summary done * Lab manifest listing ui adaptation done * Manifest detail header ui refactor done, * Delete dialog refactored to have samples table for thos selected * Previewing selected orders to be added to manifest in the sample dialog form * Cleaned up code * Fixed bug on lab manifest form and also on mutating links * Printing specimen labels and lab manifest * Addedd print manifest button to manifet detail header * Conditionally showing active valid orders for Draft and onHold * Removed time from start date field of pns contacts table, improoved ui colors as per design
palladiumkenya · Aug 7, 2024 · 3ff61a6 · 3ff61a6
1 parent b07fe0b
commit 3ff61a6
Show file tree

Hide file tree

Showing 15 changed files with 176 additions and 38 deletions.
diff --git a/packages/esm-lab-manifest-app/src/forms/lab-manifest-form.workspace.tsx b/packages/esm-lab-manifest-app/src/forms/lab-manifest-form.workspace.tsx
@@ -61,8 +61,9 @@ const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manif
   };
   return (
     <Form onSubmit={form.handleSubmit(onSubmit)}>
-      <span className={styles.formTitle}>{t('formTitle', 'Fill in the form details')}</span>
       <Stack gap={4} className={styles.grid}>
+        <span className={styles.sectionHeader}>Manifest Date range</span>
+
         <Column>
           <Controller
             control={form.control}
@@ -134,7 +135,7 @@ const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manif
             )}
           />
         </Column>
-        <span className={styles.sectionHeader}>Dispatch status</span>
+        <span className={styles.sectionHeader}>Dispatch Details</span>
         <Column>
           <Controller
             control={form.control}

diff --git a/packages/esm-lab-manifest-app/src/header/lab-manifest-detail-header.component.tsx b/packages/esm-lab-manifest-app/src/header/lab-manifest-detail-header.component.tsx
@@ -1,10 +1,11 @@
 import { Button, ButtonSet, Layer, Row, SkeletonText, Tile } from '@carbon/react';
-import { ArrowLeft, Edit } from '@carbon/react/icons';
-import { formatDate, launchWorkspace, navigate, parseDate } from '@openmrs/esm-framework';
+import { ArrowLeft, Edit, Printer } from '@carbon/react/icons';
+import { formatDate, launchWorkspace, navigate, parseDate, showSnackbar } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLabManifest } from '../hooks';
 import styles from './lab-manifest-header.scss';
+import { printableManifestStatus, printManifest } from '../lab-manifest.resources';
 
 interface LabManifestDetailHeaderProps {
   manifestUuid: string;
@@ -25,6 +26,14 @@ const LabManifestDetailHeader: React.FC<LabManifestDetailHeaderProps> = ({ manif
     });
   };
 
+  const handlePrintManifest = async () => {
+    try {
+      await printManifest(manifest.uuid);
+    } catch (error) {
+      showSnackbar({ title: 'Failure', subtitle: 'Error printing manifest', kind: 'error' });
+    }
+  };
+
   if (isLoading) {
     return (
       <Layer className={styles.detailHeaderContainer}>
@@ -63,14 +72,21 @@ const LabManifestDetailHeader: React.FC<LabManifestDetailHeaderProps> = ({ manif
           <span className={styles.samplesCountValue}>{manifest.samples.length}</span>
         </Row>
       </Tile>
-      <ButtonSet className={styles.btnSet}>
+      <Row className={styles.btnSet}>
         <Button kind="tertiary" renderIcon={ArrowLeft} onClick={handleGoBack}>
           {t('back', 'Back')}
         </Button>
-        <Button kind="primary" renderIcon={Edit} onClick={handleEditManifest}>
-          {t('editManifest', 'Edit Manifest')}
-        </Button>
-      </ButtonSet>
+        <Row className={styles.btnSetRight}>
+          <Button kind="primary" renderIcon={Edit} onClick={handleEditManifest}>
+            {t('editManifest', 'Edit Manifest')}
+          </Button>
+          {printableManifestStatus.includes(manifest.manifestStatus) && (
+            <Button kind="secondary" renderIcon={Printer} onClick={handlePrintManifest}>
+              {t('printManifest', 'Print Manifest')}
+            </Button>
+          )}
+        </Row>
+      </Row>
     </Layer>
   );
 };

diff --git a/packages/esm-lab-manifest-app/src/header/lab-manifest-header.scss b/packages/esm-lab-manifest-app/src/header/lab-manifest-header.scss
@@ -1,5 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
+@use '@carbon/colors';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .header {
@@ -101,24 +102,30 @@ svg.iconOverrides {
   justify-content: space-between;
   margin-top: spacing.$spacing-05;
   margin-bottom: spacing.$spacing-05;
-
   flex-flow: row wrap;
   align-items: center;
 }
 
+.btnSetRight {
+  display: flex;
+  flex-direction: row;
+  // gap: spacing.$spacing-05;
+  align-items: center;
+}
+
 .detailHeaderContainer {
   margin: spacing.$spacing-05;
   flex-flow: row wrap;
   justify-content: space-between;
 }
 
 .detailHeaderContent {
-  background-color: $color-gray-30;
+  background-color: colors.$gray-10;
   width: fit-content;
 }
 
 .detailHeaderContentLoading {
-  background-color: $color-gray-30;
+  background-color: colors.$gray-10;
   max-width: 70%;
 }
 

diff --git a/packages/esm-lab-manifest-app/src/lab-manifest.resources.ts b/packages/esm-lab-manifest-app/src/lab-manifest.resources.ts
@@ -3,6 +3,10 @@ import { z } from 'zod';
 import { LabManifest, MappedLabManifest } from './types';
 import { mutate } from 'swr';
 
+export const printableManifestStatus = ['Submitted', 'Complete results'];
+
+export const activeOrdersSupportManifestStatus = ['Draft', 'On Hold'];
+
 export const LabManifestFilters = [
   {
     label: 'Draft',
@@ -159,3 +163,25 @@ export const extractLabManifest = (manifest: LabManifest) =>
     subCounty: manifest.subCounty,
     samples: manifest.labManifestOrders ?? [],
   } as MappedLabManifest);
+
+const printFile = async (url: string) => {
+  const res = await fetch(url, {
+    headers: {
+      'Content-Type': 'application/pdf',
+    },
+  });
+  const fileData = await res.arrayBuffer();
+  const blob = new Blob([fileData], { type: 'application/pdf' });
+  const _url = URL.createObjectURL(blob);
+  window.open(_url, '_blank');
+};
+
+export const printManifest = async (manifestUid: string) => {
+  const url = `/openmrs${restBaseUrl}/kemrorder/printmanifest?manifestUuid=${manifestUid}`;
+  return await printFile(url);
+};
+
+export const printSpecimentLabel = async (manifestOrderUuid: string) => {
+  const url = `/openmrs${restBaseUrl}/kemrorder/printspecimenlabel?manifestOrderUuid=${manifestOrderUuid}`;
+  return await printFile(url);
+};
diff --git a/packages/esm-lab-manifest-app/src/metrics/lab-manifest-metrics.component.tsx b/packages/esm-lab-manifest-app/src/metrics/lab-manifest-metrics.component.tsx
@@ -1,5 +1,5 @@
 import { Button, Layer } from '@carbon/react';
-import { ArrowRight } from '@carbon/react/icons';
+import { Add, ArrowRight } from '@carbon/react/icons';
 import { launchWorkspace } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -55,8 +55,8 @@ function LabManifestMetrics() {
       </Layer>
       <Layer className={styles.btnLayer}>
         <Button
-          kind="tertiary"
-          renderIcon={(props) => <ArrowRight size={16} {...props} />}
+          kind="ghost"
+          renderIcon={Add}
           iconDescription={t('addNewManifest', 'Add new Manifest')}
           onClick={handleAddLabManifest}>
           {t('addNewManifest', 'Add new Manifest')}

diff --git a/packages/esm-lab-manifest-app/src/metrics/lab-manifest-metrics.scss b/packages/esm-lab-manifest-app/src/metrics/lab-manifest-metrics.scss
@@ -25,6 +25,10 @@
   flex-direction: row;
   justify-content: flex-end;
   width: 100%;
+
+  & > button {
+    border-color: colors.$blue-60;
+  }
 }
 
 .metricCardContainer {

diff --git a/packages/esm-lab-manifest-app/src/tables/filter-table-header.component.tsx b/packages/esm-lab-manifest-app/src/tables/filter-table-header.component.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './lab-manifest-table.scss';
+import { Search } from '@carbon/react';
+
+interface FilterTableHeaderProps {
+  searchText?: string;
+  onSearch?: (string: string) => void;
+}
+
+const FilterTableHeader: React.FC<FilterTableHeaderProps> = ({ onSearch, searchText = '' }) => {
+  return (
+    <div>
+      <Search
+        placeholder="Search this table"
+        onClear={() => {
+          onSearch('');
+        }}
+        value={searchText}
+        onChange={({ target: { value } }) => {
+          onSearch(value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default FilterTableHeader;
diff --git a/packages/esm-lab-manifest-app/src/tables/lab-manifest-active-requests.component.tsx b/packages/esm-lab-manifest-app/src/tables/lab-manifest-active-requests.component.tsx
@@ -13,7 +13,7 @@ import {
   TableSelectAll,
   TableSelectRow,
 } from '@carbon/react';
-import { Add } from '@carbon/react/icons';
+import { Add, ArrowRight } from '@carbon/react/icons';
 import { ErrorState, showModal, usePagination } from '@openmrs/esm-framework';
 import { CardHeader, EmptyState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import React, { useState } from 'react';
@@ -84,9 +84,10 @@ const LabManifestActiveRequests: React.FC<LabManifestActiveRequestsProps> = ({ m
         dateRequested: activeRequest.dateRequested,
         actions: (
           <Button
-            kind="tertiary"
+            kind="ghost"
             iconDescription={t('addToManifest', 'Add To manifest')}
             renderIcon={Add}
+            hasIconOnly
             onClick={() =>
               handleAddSelectedToManifest([
                 {
@@ -154,7 +155,7 @@ const LabManifestActiveRequests: React.FC<LabManifestActiveRequestsProps> = ({ m
 
                   handleAddSelectedToManifest(data);
                 }}
-                renderIcon={Add}
+                renderIcon={ArrowRight}
                 kind="ghost">
                 {t('addSelectedSamples', 'Add Selected Samples')}
               </Button>

diff --git a/packages/esm-lab-manifest-app/src/tables/lab-manifest-samples.component.tsx b/packages/esm-lab-manifest-app/src/tables/lab-manifest-samples.component.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  ButtonSet,
   DataTable,
   DataTableSkeleton,
   Pagination,
@@ -13,13 +14,13 @@ import {
   TableSelectAll,
   TableSelectRow,
 } from '@carbon/react';
-import { TrashCan } from '@carbon/react/icons';
+import { ArrowRight, Printer, TrashCan } from '@carbon/react/icons';
 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 { mutateManifestLinks, removeSampleFromTheManifest } from '../lab-manifest.resources';
+import { mutateManifestLinks, printSpecimentLabel, removeSampleFromTheManifest } from '../lab-manifest.resources';
 import { LabManifestSample } from '../types';
 import styles from './lab-manifest-table.scss';
 
@@ -107,6 +108,14 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
     }
   };
 
+  async function handlePrintSpecimenLabel(sample: LabManifestSample) {
+    try {
+      await printSpecimentLabel(sample.uuid);
+    } catch (error) {
+      showSnackbar({ title: 'Failure', subtitle: 'Error specimen label', kind: 'error' });
+    }
+  }
+
   const tableRows =
     (results as LabManifestSample[])?.map((sample) => {
       return {
@@ -119,13 +128,24 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
         resultDate: sample.resultDate ? formatDate(parseDate(sample.resultDate)) : '--',
         result: sample.result ?? '--',
         actions: (
-          <Button
-            renderIcon={TrashCan}
-            hasIconOnly
-            kind="ghost"
-            iconDescription={t('removeFromManifest', 'Remove from Manifest')}
-            onClick={() => handleDeleteManifestSample(sample.uuid)}
-          />
+          <ButtonSet className={styles.btnSet}>
+            <Button
+              renderIcon={TrashCan}
+              className={styles.btn}
+              hasIconOnly
+              kind="ghost"
+              iconDescription={t('removeFromManifest', 'Remove from Manifest')}
+              onClick={() => handleDeleteManifestSample(sample.uuid)}
+            />
+            <Button
+              className={styles.btn}
+              renderIcon={Printer}
+              hasIconOnly
+              kind="ghost"
+              iconDescription={t('printSpecimenLabel', 'Print Specimen Label')}
+              onClick={() => handlePrintSpecimenLabel(sample)}
+            />
+          </ButtonSet>
         ),
       };
     }) ?? [];
@@ -169,7 +189,7 @@ const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid })
                   const data = selectedRows.map(({ id }) => samples.find((s) => s.uuid === id));
                   handleDeleteSelectedSamples(data);
                 }}
-                renderIcon={TrashCan}
+                renderIcon={ArrowRight}
                 kind="ghost">
                 {t('deleteSelectedSamples', 'Remove Selected Samples')}
               </Button>

diff --git a/packages/esm-lab-manifest-app/src/tables/lab-manifest-table.component.tsx b/packages/esm-lab-manifest-app/src/tables/lab-manifest-table.component.tsx
@@ -15,14 +15,15 @@ import {
   TableRow,
   Tile,
 } from '@carbon/react';
-import { Edit, View } from '@carbon/react/icons';
+import { Edit, Printer, View } from '@carbon/react/icons';
 import {
   ErrorState,
   formatDate,
   isDesktop,
   launchWorkspace,
   navigate,
   parseDate,
+  showSnackbar,
   useConfig,
   useLayoutType,
   usePagination,
@@ -32,7 +33,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LabManifestConfig } from '../config-schema';
 import { useLabManifests } from '../hooks';
-import { LabManifestFilters } from '../lab-manifest.resources';
+import { LabManifestFilters, printableManifestStatus, printManifest } from '../lab-manifest.resources';
 import { MappedLabManifest } from '../types';
 import styles from './lab-manifest-table.scss';
 
@@ -100,6 +101,14 @@ const LabManifestsTable = () => {
     });
   };
 
+  const handlePrintManifest = async (manifest: MappedLabManifest) => {
+    try {
+      await printManifest(manifest.uuid);
+    } catch (error) {
+      showSnackbar({ title: 'Failure', subtitle: 'Error printing manifest', kind: 'error' });
+    }
+  };
+
   const tableRows =
     results?.map((manifest) => {
       return {
@@ -131,6 +140,16 @@ const LabManifestsTable = () => {
               iconDescription={t('edit', 'Edit')}
               onClick={() => handleEditManifest(manifest)}
             />
+            {printableManifestStatus.includes(manifest.manifestStatus) && (
+              <Button
+                className={styles.btn}
+                renderIcon={Printer}
+                hasIconOnly
+                kind="ghost"
+                iconDescription={t('printManifest', 'Print Manifest')}
+                onClick={() => handlePrintManifest(manifest)}
+              />
+            )}
           </ButtonSet>
         ),
       };

diff --git a/packages/esm-lab-manifest-app/src/tables/lab-manifest-table.scss b/packages/esm-lab-manifest-app/src/tables/lab-manifest-table.scss
@@ -82,3 +82,4 @@
   width: 100%;
   margin-bottom: spacing.$spacing-05;
 }
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -82,3 +82,4 @@
		width: 100%;
		margin-bottom: spacing.$spacing-05;
		}