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

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operations-status.tsx

@@ -0,0 +1,45 @@
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './stock-operation-expanded-row.scss';
+
+type Props = {
+  status: string;
+  statusFilledDate: string;
+  statusFillerGivenName?: string;
+  statusFillerFamilyName?: string;
+  extraStatusinfo?: React.ReactNode;
+};
+
+const StockOpertationStatus: React.FC<Props> = ({
+  status,
+  statusFillerFamilyName,
+  statusFillerGivenName,
+  statusFilledDate,
+  extraStatusinfo,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <span className={styles.textHeading}>{status}:</span>
+      <div className={styles.statusDescriptions}>
+        <span className={styles.text}>
+          {formatDate(parseDate(statusFilledDate), {
+            time: true,
+            mode: 'standard',
+          })}
+        </span>
+
+        <span className={styles.text}>{t('by', 'By')}</span>
+
+        <span className={styles.text}>
+          {statusFillerFamilyName} &nbsp;
+          {statusFillerGivenName}
+        </span>
+        {extraStatusinfo}
+      </div>
+    </div>
+  );
+};
+
+export default StockOpertationStatus;

package/src/stock-operations/edit-stock-operation/edit-stock-operation-action-menu.component.tsx

@@ -4,7 +4,7 @@ import { showSnackbar } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
-import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
 import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 import { useStockOperationAndItems } from '../stock-operations.resource';
 
@@ -32,7 +32,7 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
   );
 
   const handleEdit = useCallback(() => {
-    launchStockoperationAddOrEditDialog(
+    launchStockoperationAddOrEditWorkSpace(
       t,
       activeOperationType,
       stockOperation,

package/src/stock-operations/stock-operation-actions.component.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
+import {
+  operationFromString,
+  OperationType,
+  StockOperationType,
+  StockOperationTypeHasPrint,
+} from '../core/api/types/stockOperation/StockOperationType';
+import StockOperationApprovalButton from './stock-operations-dialog/stock-operations-approve-button.component';
+import StockOperationApproveDispatchButton from './stock-operations-dialog/stock-operations-approve-dispatch-button.component';
+import StockOperationCancelButton from './stock-operations-dialog/stock-operations-cancel-button.component';
+import StockOperationCompleteDispatchButton from './stock-operations-dialog/stock-operations-completed-dispatch-button.component';
+import StockOperationIssueStockButton from './stock-operations-dialog/stock-operations-issue-stock-button.component';
+import StockOperationPrintButton from './stock-operations-dialog/stock-operations-print-button.component';
+import StockOperationRejectButton from './stock-operations-dialog/stock-operations-reject-button.component';
+import StockOperationReturnButton from './stock-operations-dialog/stock-operations-return-button.component';
+import useOperationTypePermisions from './stock-operations-forms/hooks/useOperationTypePermisions';
+import styles from './stock-operations-table.scss';
+
+type Props = {
+  stockOperation: StockOperationDTO;
+  stockOperationType: StockOperationType;
+};
+
+const StockoperationActions: React.FC<Props> = ({ stockOperation, stockOperationType }) => {
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const operationType = useMemo(() => {
+    return operationFromString(stockOperationType.operationType);
+  }, [stockOperationType]);
+  return (
+    <>
+      {((!stockOperation.permission?.canEdit &&
+        (stockOperation.permission?.canApprove || stockOperation.permission?.canReceiveItems)) ||
+        stockOperation.permission?.canEdit ||
+        StockOperationTypeHasPrint(operationType) ||
+        (stockOperation?.permission?.isRequisitionAndCanIssueStock ?? false) ||
+        stockOperation.permission?.isRequisitionAndCanIssueStock) && (
+        <div className={styles.actionBtns}>
+          <>
+            {!stockOperation.permission?.canEdit && stockOperation.permission?.canApprove && (
+              <>
+                {!operationTypePermision.requiresDispatchAcknowledgement && (
+                  <StockOperationApprovalButton operation={stockOperation} />
+                )}
+
+                {operationTypePermision.requiresDispatchAcknowledgement && (
+                  <StockOperationApproveDispatchButton operation={stockOperation} />
+                )}
+
+                <StockOperationRejectButton operation={stockOperation} />
+                <StockOperationReturnButton operation={stockOperation} />
+                <StockOperationCancelButton operation={stockOperation} />
+              </>
+            )}
+
+            {!stockOperation.permission?.canEdit && stockOperation.permission?.canReceiveItems && (
+              <>
+                <StockOperationCompleteDispatchButton operation={stockOperation} reason={false} />
+                <StockOperationReturnButton operation={stockOperation} />
+              </>
+            )}
+
+            {stockOperation.permission?.canEdit && <StockOperationCancelButton operation={stockOperation} />}
+            {stockOperation.permission?.isRequisitionAndCanIssueStock && (
+              <StockOperationIssueStockButton operation={stockOperation} />
+            )}
+            {(stockOperation.permission?.isRequisitionAndCanIssueStock ||
+              stockOperation.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE ||
+              stockOperation.operationType === OperationType.REQUISITION_OPERATION_TYPE ||
+              stockOperation.operationType === OperationType.RECEIPT_OPERATION_TYPE ||
+              stockOperation.operationType === OperationType.TRANSFER_OUT_OPERATION_TYPE) && (
+              <StockOperationPrintButton operation={stockOperation} />
+            )}
+          </>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default StockoperationActions;

package/src/stock-operations/stock-operation-links.component.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
+import { OperationType, StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
+import useStockOperationLinks from './stock-operations-forms/hooks/useStockOperationLinks';
+import styles from './stock-operations-table.scss';
+import StockOperationRelatedLink from './stock-operations-forms/stock-operation-related-link.component';
+
+type Props = {
+  stockOperation: StockOperationDTO;
+  stockOperationType: StockOperationType;
+};
+
+const StockOperationLinks: React.FC<Props> = ({ stockOperation, stockOperationType }) => {
+  const requisitionOperationUuid = useMemo(() => {
+    if (
+      stockOperationType?.operationType === OperationType.REQUISITION_OPERATION_TYPE ||
+      stockOperation?.operationType === OperationType.REQUISITION_OPERATION_TYPE ||
+      stockOperationType?.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE ||
+      stockOperation?.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE
+    ) {
+      return stockOperation.uuid;
+    }
+    return null;
+  }, [stockOperationType, stockOperation]);
+  const { error, isLoading, operationLinks } = useStockOperationLinks(requisitionOperationUuid);
+  if (isLoading || error) return null;
+  return (
+    <div>
+      {' '}
+      {operationLinks && operationLinks.length > 0 && (
+        <div>
+          <h6 className={styles.relatedTransactionHeader}>Related Transactions:</h6>
+          {operationLinks.map(
+            (item) =>
+              (stockOperation.uuid === item?.parentUuid || stockOperationType?.uuid === item?.parentUuid) && (
+                <React.Fragment key={item.uuid}>
+                  <span>{item?.childOperationTypeName}</span>
+                  <span className={item?.childVoided ? 'voided' : ''}>
+                    {' '}
+                    {item?.childVoided && item?.childOperationNumber}
+                    {!item?.childVoided && (
+                      <span className={styles.relatedLink}>
+                        <StockOperationRelatedLink
+                          stockOperationUuid={item?.childUuid}
+                          operationNumber={item?.childOperationNumber}
+                        />
+                      </span>
+                    )}
+                  </span>{' '}
+                  <span>[{item?.childStatus}]</span>
+                </React.Fragment>
+              ),
+          )}
+          <span> </span>
+          {operationLinks.map(
+            (item) =>
+              (stockOperation.uuid === item?.childUuid || stockOperationType.uuid === item?.childUuid) && (
+                <React.Fragment key={item.uuid}>
+                  <span>{item?.parentOperationTypeName}</span>
+                  <span className={item?.parentVoided ? 'voided' : ''}>
+                    {' '}
+                    {item?.parentVoided && item?.parentOperationNumber}
+                    {!item?.parentVoided && (
+                      <span className={styles.relatedLink}>
+                        <StockOperationRelatedLink
+                          stockOperationUuid={item?.parentUuid}
+                          operationNumber={item?.parentOperationNumber}
+                        />
+                      </span>
+                    )}
+                  </span>{' '}
+                  <span>[{item?.parentStatus}]</span>
+                </React.Fragment>
+              ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StockOperationLinks;

package/src/stock-operations/stock-operation-reference.component.tsx

@@ -3,7 +3,7 @@ import { showSnackbar } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStockOperationTypes } from '../stock-lookups/stock-lookups.resource';
-import { launchStockoperationAddOrEditDialog } from './stock-operation.utils';
+import { launchStockoperationAddOrEditWorkSpace } from './stock-operation.utils';
 import { useStockOperationAndItems } from './stock-operations.resource';
 
 interface StockOperationReferenceProps {
@@ -25,7 +25,7 @@ const StockOperationReference = ({ operationNumber, operationUuid }: StockOperat
     if (!operationType) {
       return;
     }
-    launchStockoperationAddOrEditDialog(
+    launchStockoperationAddOrEditWorkSpace(
       t,
       operationType,
       stockOperation,

package/src/stock-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx

@@ -4,7 +4,7 @@ import { showSnackbar } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OperationType, StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
 import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 
 const StockOperationTypesSelector = () => {
@@ -15,7 +15,7 @@ const StockOperationTypesSelector = () => {
     (stockOperationType: StockOperationType) => {
       const isStockIssueOperation = stockOperationType.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE;
 
-      launchStockoperationAddOrEditDialog(t, stockOperationType, undefined);
+      launchStockoperationAddOrEditWorkSpace(t, stockOperationType, undefined);
     },
     [t],
   );

package/src/stock-operations/stock-operation.utils.tsx

@@ -1,32 +1,27 @@
-import { showModal } from '@openmrs/esm-framework';
-import React from 'react';
+import { launchWorkspace, showModal } from '@openmrs/esm-framework';
 import { TFunction } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
 import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
-import { launchOverlay } from '../core/components/overlay/hook';
-import StockOperationForm from './stock-operations-forms/stock-operation-form.component';
 
-export const launchStockoperationAddOrEditDialog = (
+export const launchStockoperationAddOrEditWorkSpace = (
   t: TFunction,
   operationType: StockOperationType,
   stockOperation?: StockOperationDTO,
   stockRequisitionUuid?: string, // Only suplied on stock issue (when overlay is launched for stock issue)
 ) => {
-  launchOverlay(
-    stockOperation
+  launchWorkspace('stock-operation-form-workspace', {
+    workspaceTitle: stockOperation
       ? t('editOperationTitle', 'Edit {{operationType}}', {
           operationType: stockOperation?.operationTypeName,
         })
       : t('newOperationTitle', 'New: {{operationName}}', {
           operationName: operationType?.name,
         }),
-    <StockOperationForm
-      stockOperationType={operationType}
-      stockOperation={stockOperation}
-      stockRequisitionUuid={stockRequisitionUuid}
-    />,
-  );
+    stockOperationType: operationType,
+    stockOperation: stockOperation,
+    stockRequisitionUuid: stockRequisitionUuid,
+  });
 };
 
 export const useUrlQueryParams = () => {

package/src/stock-operations/stock-operations-dialog/stock-operations-issue-stock-button.component.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
 import { OperationType } from '../../core/api/types/stockOperation/StockOperationType';
 import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
-import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import { launchStockoperationAddOrEditWorkSpace } from '../stock-operation.utils';
 import { showSnackbar } from '@openmrs/esm-framework';
 
 interface StockOperationIssueStockButtonProps {
@@ -22,7 +22,7 @@ const StockOperationIssueStockButton: React.FC<StockOperationIssueStockButtonPro
   );
 
   const handleButtonClick = () => {
-    launchStockoperationAddOrEditDialog(t, stockIssueOperationType, undefined, operation.uuid);
+    launchStockoperationAddOrEditWorkSpace(t, stockIssueOperationType, undefined, operation.uuid);
   };
 
   useEffect(() => {

package/src/stock-operations/stock-operations-forms/input-components/stock-item-search.component.tsx

@@ -1,10 +1,11 @@
 import { ClickableTile, Search } from '@carbon/react';
-import { useDebounce } from '@openmrs/esm-framework';
-import React, { useEffect, useState } from 'react';
+import { useConfig, useDebounce } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
 import { useFilterableStockItems } from '../hooks/useFilterableStockItems';
 import styles from './input-components-styles.scss';
+import { ConfigObject } from '../../../config-schema';
 
 type StockItemSearchProps = {
   onSelectedItem?: (stockItem: StockItemDTO) => void;
@@ -15,7 +16,24 @@ const StockItemSearch: React.FC<StockItemSearchProps> = ({ onSelectedItem }) =>
   const { isLoading, stockItemsList, setSearchString } = useFilterableStockItems({});
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
+  const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
+  const getDrugName = useCallback(
+    (item: StockItemDTO) => {
+      if (useItemCommonNameAsDisplay) return;
+      const commonName = item?.commonName ? `(Common name: ${item.commonName})` : undefined;
+      return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
+    },
+    [useItemCommonNameAsDisplay, t],
+  );
 
+  const getCommonName = useCallback(
+    (item: StockItemDTO) => {
+      if (!useItemCommonNameAsDisplay) return;
+      const drugName = item?.drugName ? `(Drug name: ${item.drugName})` : undefined;
+      return `${item?.commonName || t('noCommonNameAvailable', 'No common name available') + (drugName ?? '')}`;
+    },
+    [useItemCommonNameAsDisplay, t],
+  );
   useEffect(() => {
     if (debouncedSearchTerm?.length !== 0) {
       setSearchString(debouncedSearchTerm);
@@ -26,6 +44,7 @@ const StockItemSearch: React.FC<StockItemSearchProps> = ({ onSelectedItem }) =>
     onSelectedItem?.(stockItem);
     setSearchTerm('');
   };
+
   return (
     <div className={styles.stockItemSearchContainer}>
       <div style={{ display: 'flex' }}>
@@ -42,11 +61,15 @@ const StockItemSearch: React.FC<StockItemSearchProps> = ({ onSelectedItem }) =>
       </div>
       {searchTerm && stockItemsList?.length > 0 && (
         <div className={styles.searchResults}>
-          {stockItemsList?.slice(0, 5).map((stockItem) => (
-            <ClickableTile onClick={() => handleOnSearchResultClick(stockItem)} key={stockItem?.uuid}>
-              {stockItem?.commonName}
-            </ClickableTile>
-          ))}
+          {stockItemsList?.slice(0, 5).map((stockItem) => {
+            const commonName = getCommonName(stockItem);
+            const drugName = getDrugName(stockItem);
+            return (
+              <ClickableTile onClick={() => handleOnSearchResultClick(stockItem)} key={stockItem?.uuid}>
+                {useItemCommonNameAsDisplay ? commonName : drugName}
+              </ClickableTile>
+            );
+          })}
         </div>
       )}
     </div>