@openmrs/esm-stock-management-app 1.0.1-pre.783 → 1.0.1-pre.788

package/src/stock-operations/stock-operations-forms/steps/stock-operation-item-batch-no-cell.component.tsx

@@ -0,0 +1,40 @@
+import { InlineLoading } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
+
+type StockOperationitemBatchNoCellProps = {
+  operation: StockOperationType;
+  stockBatchUuid?: string;
+  batchNo?: string;
+  stockItemUuid: string;
+};
+
+const StockOperationItemBatchNoCell: React.FC<StockOperationitemBatchNoCellProps> = ({
+  operation,
+  batchNo,
+  stockBatchUuid,
+  stockItemUuid,
+}) => {
+  const operationTypePermision = useOperationTypePermisions(operation);
+  const { isLoading, stockItemBatchNos } = useStockItemBatchNumbers(stockItemUuid);
+  const { t } = useTranslation();
+  const _batchno = useMemo(
+    () => stockItemBatchNos?.find((item) => item.uuid === stockBatchUuid)?.batchNo,
+    [stockItemBatchNos, stockBatchUuid],
+  );
+
+  if (isLoading) <InlineLoading description={t('loading', 'Loading')} iconDescription={t('loading', 'Loading')} />;
+
+  if (operationTypePermision.requiresBatchUuid && !operationTypePermision.requiresActualBatchInfo)
+    return <p>{_batchno ?? '--'}</p>;
+
+  if (operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid)
+    return <p>{batchNo ?? '--'}</p>;
+
+  return <p>--</p>;
+};
+
+export default StockOperationItemBatchNoCell;

package/src/stock-operations/stock-operations-forms/steps/stock-operation-item-cell.component.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { InlineLoading } from '@carbon/react';
+import { StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
+import { URL_STOCK_ITEM } from '../../../constants';
+import { Link } from 'react-router-dom';
+import { ConfigObject } from '../../../config-schema';
+
+type StockOperationItemCellProps = {
+  stockItemUuid: string;
+};
+
+const StockOperationItemCell: React.FC<StockOperationItemCellProps> = ({ stockItemUuid }) => {
+  const { isLoading, error, item } = useStockItem(stockItemUuid);
+  const { t } = useTranslation();
+  const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
+  const commonName = useMemo(() => {
+    if (!useItemCommonNameAsDisplay) return;
+    const drugName = item?.drugName ? `(Drug name: ${item.drugName})` : undefined;
+    return `${item?.commonName || t('noCommonNameAvailable', 'No common name available') + (drugName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
+
+  const drugName = useMemo(() => {
+    if (useItemCommonNameAsDisplay) return;
+    const commonName = item?.commonName ? `(Common name: ${item.commonName})` : undefined;
+    return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockItemError', 'Error loading stock item'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+
+  if (isLoading) return <InlineLoading status="active" iconDescription="Loading" />;
+  if (error) return <>--</>;
+
+  return (
+    <Link target={'_blank'} to={URL_STOCK_ITEM(stockItemUuid)}>
+      {useItemCommonNameAsDisplay ? commonName : drugName}
+    </Link>
+  );
+};
+
+export default StockOperationItemCell;

package/src/stock-operations/stock-operations-forms/steps/stock-operation-item-expiry-cell.component.tsx

@@ -0,0 +1,41 @@
+import { InlineLoading } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatForDatePicker } from '../../../constants';
+import { StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
+
+type StockoperationItemExpiryCellProps = {
+  operation: StockOperationType;
+  stockBatchUuid?: string;
+  expiration?: Date;
+  stockItemUuid: string;
+};
+
+const StockoperationItemExpiryCell: React.FC<StockoperationItemExpiryCellProps> = ({
+  operation,
+  stockItemUuid,
+  expiration,
+  stockBatchUuid,
+}) => {
+  const operationTypePermision = useOperationTypePermisions(operation);
+  const { isLoading, stockItemBatchNos } = useStockItemBatchNumbers(stockItemUuid);
+  const { t } = useTranslation();
+  const _expiration = useMemo(
+    () => stockItemBatchNos?.find((item) => item.uuid === stockBatchUuid)?.expiration,
+    [stockItemBatchNos, stockBatchUuid],
+  );
+
+  if (isLoading) <InlineLoading description={t('loading', 'Loading')} iconDescription={t('loading', 'Loading')} />;
+
+  if (operationTypePermision.requiresBatchUuid && !operationTypePermision.requiresActualBatchInfo)
+    return <p>{_expiration ? formatForDatePicker(_expiration) : '--'}</p>;
+
+  if (operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid)
+    return <p>{expiration ? formatForDatePicker(expiration) : '--'}</p>;
+
+  return <p>--</p>;
+};
+
+export default StockoperationItemExpiryCell;

package/src/stock-operations/stock-operations-forms/steps/stock-operation-items-form-step.component.tsx

@@ -0,0 +1,281 @@
+import {
+  Button,
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { Edit, TrashCan } from '@carbon/react/icons';
+import { isDesktop, launchWorkspace } from '@openmrs/esm-framework';
+import React, { useCallback, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import { StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import { getStockOperationUniqueId } from '../../stock-operation.utils';
+import { BaseStockOperationItemFormData, StockOperationItemDtoSchema } from '../../validation-schema';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import StockItemSearch from '../input-components/stock-item-search.component';
+import { StockItemFormProps } from '../stock-item-form/stock-item-form.workspace';
+import QuantityUomCell from './quantity-uom-cell.component';
+import StockAvailability from './stock-availability-cell.component';
+import StockOperationItemBatchNoCell from './stock-operation-item-batch-no-cell.component';
+import StockOperationItemCell from './stock-operation-item-cell.component';
+import StockoperationItemExpiryCell from './stock-operation-item-expiry-cell.component';
+import styles from './stock-operation-items-form-step.scc.scss';
+
+type StockOperationItemsFormStepProps = {
+  stockOperation?: StockOperationDTO;
+  stockOperationType: StockOperationType;
+  onNext?: () => void;
+  onPrevious?: () => void;
+};
+const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> = ({
+  stockOperationType,
+  stockOperation,
+  onNext,
+  onPrevious,
+}) => {
+  const { t } = useTranslation();
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+
+  const form = useFormContext<StockOperationItemDtoSchema>();
+  const observableOperationItems = form.watch('stockOperationItems');
+  const headers = useMemo(() => {
+    return [
+      {
+        key: 'item',
+        header: t('item', 'Item'),
+        styles: { width: '40% !important' },
+      },
+      {
+        key: 'itemDetails',
+        header: t('itemDetails', 'Item Details'),
+        styles: { width: '20% !important' },
+      },
+      ...(operationTypePermision.requiresBatchUuid || operationTypePermision.requiresActualBatchInfo
+        ? [
+            {
+              key: 'batch',
+              header: t('batchNo', 'Batch No'),
+              styles: { width: '15% !important' },
+            },
+          ]
+        : []),
+      ...(operationTypePermision.requiresActualBatchInfo
+        ? [
+            {
+              key: 'expiry',
+              header: t('expiry', 'Expiry'),
+            },
+          ]
+        : []),
+      ...(operationTypePermision.requiresBatchUuid
+        ? [
+            {
+              key: 'expiry',
+              header: t('expiry', 'Expiry'),
+            },
+          ]
+        : []),
+
+      {
+        key: 'quantity',
+        header: t('qty', 'Qty'),
+      },
+      {
+        key: 'quantityuom',
+        header: t('quantityUom', 'Qty UoM'),
+      },
+      ...(operationTypePermision.canCaptureQuantityPrice
+        ? [
+            {
+              key: 'purchasePrice',
+              header: t('purchasePrice', 'Purchase Price'),
+            },
+          ]
+        : []),
+      { key: 'actions', header: t('actions', 'Actions') },
+    ];
+  }, [operationTypePermision, t]);
+
+  const handleLaunchStockItem = useCallback(
+    (stockOperationItem?: BaseStockOperationItemFormData) => {
+      launchWorkspace('stock-operation-stock-items-form', {
+        workspaceTitle: t('stockItem', 'StockItem'),
+        ...({
+          stockOperationType,
+          stockOperationItem,
+          onSave: (data) => {
+            const items = (form.getValues('stockOperationItems') ?? []) as Array<BaseStockOperationItemFormData>;
+            const index = items.findIndex((i) => i.uuid === data.uuid);
+            if (index === -1) {
+              items.push(data);
+            } else {
+              items[index] = data;
+            }
+            form.setValue('stockOperationItems', items as any);
+          },
+        } as StockItemFormProps),
+      });
+    },
+    [stockOperationType, t, form],
+  );
+
+  const handleDeleteStockOperationItem = useCallback(
+    (item: BaseStockOperationItemFormData) => {
+      form.setValue('stockOperationItems', observableOperationItems.filter((i) => i.uuid !== item.uuid) as any);
+    },
+    [form, observableOperationItems],
+  );
+
+  const tableRows = useMemo(() => {
+    return observableOperationItems?.map((item) => {
+      const {
+        batchNo,
+        expiration,
+        quantity,
+        purchasePrice,
+        uuid,
+        stockItemUuid,
+        stockItemPackagingUOMUuid,
+        stockBatchUuid,
+      } = item;
+
+      return {
+        id: uuid,
+        item: stockItemUuid ? <StockOperationItemCell stockItemUuid={stockItemUuid} /> : '--',
+        itemDetails: stockItemUuid ? <StockAvailability stockItemUuid={stockItemUuid} /> : '--',
+        batch: (
+          <StockOperationItemBatchNoCell
+            operation={stockOperationType}
+            stockBatchUuid={stockBatchUuid}
+            batchNo={batchNo}
+            stockItemUuid={stockItemUuid}
+          />
+        ),
+        expiry: (
+          <StockoperationItemExpiryCell
+            operation={stockOperationType}
+            stockBatchUuid={stockBatchUuid}
+            expiration={expiration}
+            stockItemUuid={stockItemUuid}
+          />
+        ),
+        quantity: quantity?.toLocaleString(),
+        quantityuom: stockItemPackagingUOMUuid ? (
+          <QuantityUomCell stockItemPackagingUOMUuid={stockItemPackagingUOMUuid} stockItemUuid={stockItemUuid} />
+        ) : (
+          '--'
+        ),
+        purchasePrice: purchasePrice,
+        actions: (
+          <>
+            <Button
+              type="button"
+              size="sm"
+              className="submitButton clear-padding-margin"
+              iconDescription={'Edit'}
+              kind="ghost"
+              renderIcon={Edit}
+              onClick={() => {
+                handleLaunchStockItem(item);
+              }}
+            />
+            <Button
+              type="button"
+              size="sm"
+              className="submitButton clear-padding-margin"
+              iconDescription={'Delete'}
+              kind="ghost"
+              renderIcon={TrashCan}
+              onClick={() => {
+                handleDeleteStockOperationItem(item);
+              }}
+            />
+          </>
+        ),
+      };
+    });
+  }, [observableOperationItems, handleLaunchStockItem, handleDeleteStockOperationItem, stockOperationType]);
+
+  const headerTitle = t('stockoperationItems', 'Stock operation items');
+
+  return (
+    <div style={{ margin: '10px' }}>
+      <div className={styles.tableContainer}>
+        <div className={styles.heading}>
+          <h4>{headerTitle}</h4>
+          <div className={styles.btnSet}>
+            {typeof onPrevious === 'function' && (
+              <Button kind="secondary" onClick={onPrevious}>
+                {t('previous', 'Previous')}
+              </Button>
+            )}
+            {typeof onNext === 'function' && (
+              <Button kind="primary" onClick={onNext}>
+                {t('next', 'Next')}
+              </Button>
+            )}
+          </div>
+        </div>
+        <StockItemSearch
+          onSelectedItem={(stockItem) =>
+            handleLaunchStockItem({
+              uuid: `new-item-${getStockOperationUniqueId()}`,
+              stockItemUuid: stockItem.uuid,
+              hasExpiration: stockItem.hasExpiration,
+              purchasePrice: stockItem.purchasePrice,
+            })
+          }
+        />
+
+        <DataTable
+          rows={tableRows ?? []}
+          headers={headers}
+          isSortable={false}
+          useZebraStyles={true}
+          className={styles.dataTable}
+          render={({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header: any) => (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          isSortable: false,
+                        })}
+                        className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
+                        style={header?.styles}
+                        key={`${header.key}`}
+                      >
+                        {header.header?.content ?? header?.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        ></DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default StockOperationItemsFormStep;

package/src/stock-operations/stock-operations-forms/steps/stock-operation-items-form-step.scc.scss

@@ -0,0 +1,64 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tableContainer {
+  :global(.cds--data-table-content) {
+    height: calc(100vh - 150px);
+  }
+}
+
+.tableHeader {
+  width: 3% !important;
+}
+
+.tableBody {
+  display: flex;
+  flex-direction: row;
+  width: 3% !important;
+  gap: 8px;
+}
+
+.dataTable {
+  width: 100%;
+}
+
+.availability {
+  font-size: 0.875rem;
+
+  .outOfStock {
+    color: #da1e28;
+  }
+}
+
+.heading {
+  text-align: left;
+  text-transform: capitalize;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: layout.$spacing-03 0 layout.$spacing-03 0;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.btnSet {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  align-items: center;
+}