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

package/src/stock-operations/stock-operations-forms/steps/received-items.component.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableCell,
+  DataTableSkeleton,
+  Button,
+} from '@carbon/react';
+import styles from './stock-operation-items-form-step.scc.scss';
+
+const formatDate = (date: Date | string | null) => {
+  if (!date) return ' ';
+  const d = new Date(date);
+  const day = String(d.getDate()).padStart(2, '0');
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const year = d.getFullYear();
+  return `${month}/${day}/${year}`;
+};
+
+interface ReceivedItemsProps {
+  stockOperation?: StockOperationDTO;
+  onPrevious?: () => void;
+}
+
+const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPrevious }) => {
+  const { t } = useTranslation();
+
+  const headers = [
+    { key: 'item', header: t('item', 'Item') },
+    { key: 'requested', header: t('requested', 'Requested') },
+    { key: 'batch', header: t('batch', 'Batch No') },
+    { key: 'expiry', header: t('expiry', 'Expiry Date') },
+    { key: 'qtySent', header: t('quantitySent', 'Quantity Sent') },
+    { key: 'qtyReceived', header: t('quantityReceived', 'Quantity Received') },
+    {
+      key: 'qtyUoM',
+      header: t('quantityUoM', 'Quantity Unit of Measurement(UoM)'),
+    },
+  ];
+
+  const rows =
+    stockOperation?.stockOperationItems?.map((item) => ({
+      id: item.uuid,
+      item: item.stockItemName,
+      requested: item.quantityRequested || ' ',
+      batch: item.batchNo,
+      expiry: formatDate(item.expiration),
+      qtySent: item.quantity || ' ',
+      qtyReceived: item.quantityReceived || ' ',
+      qtyUoM: item.quantityReceivedPackagingUOMName,
+    })) || [];
+
+  if (!stockOperation) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  const headerTitle = t('receivedItems', 'Received 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>
+            )}
+          </div>
+        </div>
+        <DataTable rows={rows} headers={headers}>
+          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })} key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default ReceivedItems;

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

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useStockItem } from '../../../stock-items/stock-items.resource';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar } from '@openmrs/esm-framework';
+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;
@@ -14,7 +15,18 @@ type StockOperationItemCellProps = {
 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({
@@ -30,7 +42,7 @@ const StockOperationItemCell: React.FC<StockOperationItemCellProps> = ({ stockIt
 
   return (
     <Link target={'_blank'} to={URL_STOCK_ITEM(stockItemUuid)}>
-      {(item as StockItemDTO)?.commonName || 'No name available'}
+      {useItemCommonNameAsDisplay ? commonName : drugName}
     </Link>
   );
 };

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

@@ -20,11 +20,13 @@ type StockOperationSubmissionFormStepProps = {
   onPrevious?: () => void;
   stockOperation?: StockOperationDTO;
   stockOperationType: StockOperationType;
+  onNext?: () => void;
 };
 const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormStepProps> = ({
   onPrevious,
   stockOperationType,
   stockOperation,
+  onNext,
 }) => {
   const { t } = useTranslation();
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
@@ -147,6 +149,11 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
               Previous
             </Button>
           )}
+          {typeof onNext === 'function' && (
+            <Button kind="primary" onClick={onNext}>
+              Next
+            </Button>
+          )}
         </div>
       </div>
 

package/src/stock-operations/stock-operations-forms/stock-item-form/stock-item-form.workspace.tsx

@@ -10,7 +10,7 @@ import {
   TextInput,
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import { DefaultWorkspaceProps, useConfig } from '@openmrs/esm-framework';
 import React, { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +24,7 @@ import BatchNoSelector from '../input-components/batch-no-selector.component';
 import QtyUomSelector from '../input-components/quantity-uom-selector.component';
 import styles from './stock-item-form.scss';
 import UniqueBatchNoEntryInput from '../input-components/unique-batch-no-entry-input.component';
+import { ConfigObject } from '../../../config-schema';
 
 export interface StockItemFormProps {
   stockOperationType: StockOperationType;
@@ -40,6 +41,7 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
     return getStockOperationItemFormSchema(operationType);
   }, [operationType]);
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
 
   const fields = formschema.keyof().options;
   const form = useForm<z.infer<typeof formschema>>({
@@ -49,6 +51,18 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
   });
   const { t } = useTranslation();
   const { item } = useStockItem(form.getValues('stockItemUuid'));
+  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]);
+
   const onSubmit = (data: z.infer<typeof formschema>) => {
     onSave?.(data);
     closeWorkspace();
@@ -57,7 +71,7 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
   return (
     <Form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
       <Stack gap={4} className={styles.grid}>
-        {item?.commonName && <p className={styles.title}>{item?.commonName}</p>}
+        <p className={styles.title}>{useItemCommonNameAsDisplay ? commonName : drugName}</p>
 
         {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
           fields.includes('batchNo' as any) && (

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

@@ -15,7 +15,7 @@ import {
 } from '../../core/api/types/stockOperation/StockOperationType';
 import { TabItem } from '../../core/components/tabs/types';
 import { otherUser, pick } from '../../core/utils/utils';
-import ReceivedItems from '../received-items.component';
+import ReceivedItems from './steps/received-items.component';
 import {
   getStockOperationFormSchema,
   getStockOperationItemFormSchema,
@@ -59,6 +59,13 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
   const formschema = useMemo(() => {
     return getStockOperationFormSchema(operationType);
   }, [operationType]);
+  const showReceivedItems = useMemo(() => {
+    return (
+      (StockOperationTypeIsStockIssue(stockOperation?.operationType as OperationType) ||
+        stockOperation?.permission?.canDisplayReceivedItems) &&
+      (stockOperation.status === 'DISPATCHED' || stockOperation.status === 'COMPLETED')
+    );
+  }, [stockOperation]);
   const steps: TabItem[] = useMemo(() => {
     return [
       {
@@ -91,25 +98,23 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
             stockOperation={stockOperation}
             stockOperationType={stockOperationType}
             onPrevious={() => setSelectedIndex(1)}
+            onNext={showReceivedItems ? () => setSelectedIndex(3) : undefined}
           />
         ),
         disabled: true,
       },
     ].concat(
-      StockOperationTypeIsStockIssue(stockOperation?.operationType as OperationType) ||
-        stockOperation?.permission?.canDisplayReceivedItems
-        ? stockOperation.status === 'DISPATCHED' || stockOperation.status === 'COMPLETED'
-          ? [
-              {
-                name: t('receivedItems', 'Received Items'),
-                component: <ReceivedItems model={stockOperation} />,
-                disabled: true,
-              },
-            ]
-          : []
+      showReceivedItems
+        ? [
+            {
+              name: t('receivedItems', 'Received Items'),
+              component: <ReceivedItems stockOperation={stockOperation} onPrevious={() => setSelectedIndex(2)} />,
+              disabled: true,
+            },
+          ]
         : [],
     ) as TabItem[];
-  }, [stockOperation, stockOperationType, t, operationTypePermision]);
+  }, [stockOperation, stockOperationType, t, operationTypePermision, showReceivedItems]);
   const {
     user: { uuid: defaultLoggedUserUuid },
   } = useSession();

package/src/stock-operations/stock-operations-table.component.tsx

@@ -37,8 +37,9 @@ import StockOperationTypesSelector from './stock-operation-types-selector/stock-
 import StockOperationsFilters from './stock-operations-filters.component';
 import { useStockOperationPages } from './stock-operations-table.resource';
 
+import { Link } from '@carbon/react';
+import StockOperationExpandedRow from './add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component';
 import styles from './stock-operations-table.scss';
-import StockOperationStatusRow from './stock-operation-status/stock-operation-status-row';
 
 interface StockOperationsTableProps {
   status?: string;
@@ -49,32 +50,6 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const handleRefresh = () => {
     handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
   };
-  const operation: StockOperationType = useMemo(
-    () => ({
-      uuid: '',
-      name: '',
-      description: '',
-      operationType: '',
-      hasSource: false,
-      sourceType: 'Location',
-      hasDestination: false,
-      destinationType: 'Location',
-      hasRecipient: false,
-      recipientRequired: false,
-      availableWhenReserved: false,
-      allowExpiredBatchNumbers: false,
-      stockOperationTypeLocationScopes: [],
-      creator: undefined,
-      dateCreated: undefined,
-      changedBy: undefined,
-      dateChanged: undefined,
-      dateVoided: undefined,
-      voidedBy: undefined,
-      voidReason: '',
-      voided: false,
-    }),
-    [],
-  );
 
   const [selectedFromDate, setSelectedFromDate] = useState(null);
   const [selectedToDate, setSelectedToDate] = useState(null);
@@ -123,9 +98,13 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
 
   const tableRows = useMemo(() => {
     return items?.map((stockOperation, index) => {
-      const commonNames = stockOperation?.stockOperationItems
-        ? stockOperation?.stockOperationItems.map((item) => item.commonName).join(', ')
-        : '';
+      const threshHold = 1;
+      const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
+      const commonNames =
+        stockOperation?.stockOperationItems
+          ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
+          .map((item) => item.commonName)
+          .join(', ') ?? '';
 
       return {
         ...stockOperation,
@@ -135,7 +114,10 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         operationNumber: (
           <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
         ),
-        stockOperationItems: commonNames,
+        stockOperationItems: {
+          commonNames,
+          more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
+        },
         status: `${stockOperation?.status}`,
         source: `${stockOperation?.sourceName ?? ''}`,
         destination: `${stockOperation?.destinationName ?? ''}`,
@@ -173,7 +155,16 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         headers={tableHeaders}
         isSortable={true}
         useZebraStyles={true}
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getTableProps,
+          getRowProps,
+          onInputChange,
+          getExpandedRowProps,
+          expandRow,
+        }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -241,19 +232,29 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
               </TableHead>
               <TableBody>
                 {rows?.map((row: any, index) => {
+                  const props = getRowProps({ row });
+                  const expandedRowProps = getExpandedRowProps({ row });
                   return (
                     <React.Fragment key={row.id}>
-                      <TableExpandRow
-                        className={isDesktop ? styles.desktopRow : styles.tabletRow}
-                        {...getRowProps({ row })}
-                      >
+                      <TableExpandRow className={isDesktop ? styles.desktopRow : styles.tabletRow} {...props}>
                         {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                          <TableCell key={cell.id}>
+                            {cell?.info?.header === 'stockOperationItems' ? (
+                              <span>
+                                <span>{cell.value.commonNames}</span>
+                                {cell.value.more > 0 && (
+                                  <Link onClick={() => expandRow(row.id)}>{`...(${cell.value.more} more)`}</Link>
+                                )}
+                              </span>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
                         ))}
                       </TableExpandRow>
                       {row.isExpanded ? (
                         <TableExpandedRow colSpan={headers.length + 2}>
-                          <StockOperationStatusRow stockOperation={items[index]} />
+                          <StockOperationExpandedRow model={items[index]} />
                         </TableExpandedRow>
                       ) : (
                         <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />