@openmrs/esm-stock-management-app 1.0.1-pre.740 → 1.0.1-pre.742

package/src/stock-items/add-stock-item/transactions/printout/transactions-print-action.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button, Stack, ComboButton, MenuItem } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { useStockItem } from '../../../stock-items.resource';
+import { showModal } from '@openmrs/esm-framework';
+import styles from './printable-transaction.scss';
+
+type Props = {
+  itemUuid: string;
+  columns: any;
+  data: any;
+};
+
+const TransactionsPrintAction: React.FC<Props> = ({ columns, data, itemUuid }) => {
+  const { t } = useTranslation();
+
+  const { item: stockItem, isLoading: isStockItemLoading } = useStockItem(itemUuid);
+
+  const handleClick = () => {
+    // stockItem.drugName || stockItem.conceptName || ''
+    const dispose = showModal('transactions-print-preview-modal', {
+      onClose: () => dispose(),
+      title: stockItem.drugName || stockItem.conceptName || '',
+      columns,
+      data,
+    });
+  };
+
+  return (
+    <>
+      <ComboButton label="Print">
+        <MenuItem
+          label={t('printStockCard', 'Print Stock Card')}
+          renderIcon={(props) => <Printer size={24} {...props} />}
+          iconDescription="Print Stock Card"
+        />
+        <MenuItem
+          label={t('printBinCard', 'Print Bin Card')}
+          renderIcon={(props) => <Printer size={24} {...props} />}
+          iconDescription="Print Bin Card"
+          onClick={handleClick}
+          disabled={isStockItemLoading}
+        />
+      </ComboButton>
+    </>
+  );
+};
+
+export default TransactionsPrintAction;

package/src/stock-items/add-stock-item/transactions/printout/transactions-print-preview.modal.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import TransactionsPrintout from './transactions-printout.component';
+import { ModalBody, ModalHeader, ModalFooter, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useReactToPrint } from 'react-to-print';
+type Props = {
+  onClose?: () => void;
+  title?: string;
+  columns: any;
+  data: any;
+};
+
+const TransactionsPrintPreview: React.FC<Props> = ({ onClose, title, columns, data }) => {
+  const { t } = useTranslation();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handlePrint = useReactToPrint({
+    content: () => ref.current,
+  });
+  return (
+    <>
+      <ModalHeader closeModal={onClose} title={t('printbincard', 'Print Bin Card')} />
+      <ModalBody>
+        <div ref={ref}>
+          <TransactionsPrintout title={title} columns={columns} data={data} />
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onClose}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="button" onClick={handlePrint}>
+          {t('print', 'Print')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default TransactionsPrintPreview;

package/src/stock-items/add-stock-item/transactions/printout/transactions-printout.component.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import {
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+} from '@carbon/react';
+import { useStockItem } from '../../../stock-items.resource';
+import PrintableTransactionHeader from './printable-transaction-header.component';
+import PrintableTransactionFooter from './printable-transaction-footer.component';
+import styles from './printable-transaction.scss';
+
+type Props = {
+  title: string;
+  columns: any;
+  data: any;
+};
+
+const TransactionsPrintout: React.FC<Props> = ({ columns, data, title }) => {
+  return (
+    <div>
+      <PrintableTransactionHeader itemName={title} />
+
+      <div className={styles.itemsContainer}>
+        <div className={styles.tableContainer}>
+          <DataTable data-floating-menu-container rows={data} headers={columns} useZebraStyles>
+            {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
+              <div>
+                <TableContainer>
+                  <Table {...getTableProps()}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody style={{ fontSize: '8px' }}>
+                      {rows.map((row) => (
+                        <TableRow key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </div>
+            )}
+          </DataTable>
+        </div>
+      </div>
+
+      <PrintableTransactionFooter title={''} />
+    </div>
+  );
+};
+
+export default TransactionsPrintout;

package/src/stock-items/add-stock-item/transactions/transactions.component.tsx

@@ -1,15 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useStockItemsTransactions } from './transactions.resource';
-import { DataTableSkeleton } from '@carbon/react';
+import { DataTableSkeleton, Button } from '@carbon/react';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
 import { ArrowLeft } from '@carbon/react/icons';
 import DataList from '../../../core/components/table/table.component';
 import { StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
 import TransactionsLocationsFilter from './transaction-filters/transaction-locations-filter.component';
 import { useForm } from 'react-hook-form';
-import { StockItemInventoryFilter } from '../../stock-items.resource';
+import { StockItemInventoryFilter, useStockItem } from '../../stock-items.resource';
 import { useTranslation } from 'react-i18next';
 import StockOperationReference from '../../../stock-operations/add-stock-operation/stock-operation-reference.component';
+import { Add } from '@carbon/react/icons';
+import { Printer } from '@carbon/react/icons';
+import TransactionsPrintout from './printout/transactions-printout.component';
+import TransactionsPrintAction from './printout/transactions-print-action.component';
 
 interface TransactionsProps {
   onSubmit?: () => void;
@@ -20,8 +24,16 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
   const { t } = useTranslation();
 
   const [stockItemFilter, setStockItemFilter] = useState<StockItemInventoryFilter>();
-  const { isLoading, items, tableHeaders, totalCount, setCurrentPage, setStockItemUuid, setLocationUuid } =
-    useStockItemsTransactions(stockItemFilter);
+  const {
+    isLoading,
+    items,
+    tableHeaders,
+    totalCount,
+    setCurrentPage,
+    setStockItemUuid,
+    setLocationUuid,
+    printHeaders,
+  } = useStockItemsTransactions(stockItemFilter);
 
   useEffect(() => {
     setStockItemUuid(stockItemUuid);
@@ -96,6 +108,14 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
               stockItemTransaction?.packagingUomName ?? ''
             } of ${stockItemTransaction.packagingUomFactor}`
           : '',
+      totalin:
+        stockItemTransaction?.quantity >= 0
+          ? `${stockItemTransaction?.quantity * Number(stockItemTransaction.packagingUomFactor)}`
+          : '',
+      totalout:
+        stockItemTransaction?.quantity < 0
+          ? `${-1 * stockItemTransaction?.quantity * Number(stockItemTransaction.packagingUomFactor)}`
+          : '',
     }));
   }, [items]);
 
@@ -106,16 +126,19 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
   return (
     <DataList
       children={() => (
-        <TransactionsLocationsFilter
-          onLocationIdChange={(q) => {
-            setLocationUuid(q);
-            setStockItemFilter({ ...stockItemFilter, locationUuid: q });
-          }}
-          name={'TransactionLocationUuid'}
-          placeholder={t('filterByLocation', 'Filter by Location')}
-          control={control}
-          controllerName="TransactionLocationUuid"
-        />
+        <>
+          <TransactionsPrintAction columns={printHeaders} data={tableRows} itemUuid={stockItemUuid} />
+          <TransactionsLocationsFilter
+            onLocationIdChange={(q) => {
+              setLocationUuid(q);
+              setStockItemFilter({ ...stockItemFilter, locationUuid: q });
+            }}
+            name={'TransactionLocationUuid'}
+            placeholder={t('filterByLocation', 'Filter by Location')}
+            control={control}
+            controllerName="TransactionLocationUuid"
+          />
+        </>
       )}
       columns={tableHeaders}
       data={tableRows}

package/src/stock-items/add-stock-item/transactions/transactions.resource.tsx

@@ -76,6 +76,44 @@ export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
     [],
   );
 
+  const printHeaders = useMemo(
+    () => [
+      {
+        key: 'date',
+        header: 'Date',
+      },
+      {
+        key: 'location',
+        header: 'Location',
+      },
+      {
+        key: 'transaction',
+        header: 'Transaction',
+      },
+      {
+        key: 'totalin',
+        header: 'IN',
+      },
+      {
+        key: 'totalout',
+        header: 'OUT',
+      },
+      {
+        key: 'batch',
+        header: 'Batch',
+      },
+      {
+        key: 'reference',
+        header: 'Reference',
+      },
+      {
+        key: 'status',
+        header: 'Status',
+      },
+    ],
+    [],
+  );
+
   return {
     items: items.results,
     totalCount: items.totalCount,
@@ -92,5 +130,6 @@ export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
     setLocationUuid,
     setPartyUuid,
     setStockBatchUuid,
+    printHeaders,
   };
 }