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

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

@@ -1,33 +1,58 @@
-import React from 'react';
-import { Button } from '@carbon/react';
+import { Button, InlineLoading } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
+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 { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { launchAddOrEditDialog } from '../stock-operation.utils';
+import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
+import { useStockOperationAndItems } from '../stock-operations.resource';
 
 interface EditStockOperationActionMenuProps {
-  model: StockOperationDTO;
-  operations: StockOperationType[];
-  operationUuid: string;
-  operationNumber: string;
-  onEdit: (operation: StockOperationDTO) => void;
+  stockOperation: StockOperationDTO;
   showIcon?: boolean;
   showprops?: boolean;
 }
 
 const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps> = ({
-  model,
-  operations,
+  stockOperation: _stockOperation,
   showIcon = true,
   showprops = true,
 }) => {
   const { t } = useTranslation();
+  const { error, isLoading, operationTypes } = useFilteredOperationTypesByRoles();
+  const {
+    isLoading: isLoadingStockoperation,
+    items: stockOperation,
+    error: stockOperationError,
+  } = useStockOperationAndItems(_stockOperation.uuid);
+  const activeOperationType = useMemo(
+    () => operationTypes?.find((op) => op?.uuid === stockOperation?.operationTypeUuid),
+    [operationTypes, stockOperation],
+  );
+
+  const handleEdit = useCallback(() => {
+    launchStockoperationAddOrEditDialog(
+      t,
+      activeOperationType,
+      stockOperation,
+      stockOperation?.requisitionStockOperationUuid,
+    );
+  }, [t, activeOperationType, stockOperation]);
+
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockOperationError', 'Error loading stock operation types'),
+        subtitle: error?.message ?? stockOperationError?.message,
+      });
+    }
+  }, [error, t, stockOperationError]);
+
+  if (isLoading || isLoadingStockoperation) return <InlineLoading status="active" iconDescription="Loading" />;
 
-  const handleEdit = () => {
-    const operation = operations?.find((op) => op?.uuid === model?.operationTypeUuid);
-    launchAddOrEditDialog(t, model, true, operation, operations, false);
-  };
+  if (error || stockOperationError) return <>--</>;
 
   return (
     <Button
@@ -37,7 +62,7 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
       iconDescription={t('editStockOperation', 'Edit Stock Operation')}
       renderIcon={showIcon ? Edit : undefined}
     >
-      {showprops && model?.operationNumber}
+      {showprops && stockOperation?.operationNumber}
     </Button>
   );
 };

package/src/stock-operations/{add-stock-operation/received-items.component.tsx → received-items.component.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
 import {
   DataTable,
   Table,

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

@@ -0,0 +1,64 @@
+import { InlineLoading } from '@carbon/react';
+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 { useStockOperationAndItems } from './stock-operations.resource';
+
+interface StockOperationReferenceProps {
+  operationUuid: string;
+  operationNumber: string;
+}
+
+const StockOperationReference = ({ operationNumber, operationUuid }: StockOperationReferenceProps) => {
+  const { t } = useTranslation();
+  const { types, isLoading: istypesLoading, error: typesError } = useStockOperationTypes();
+  const {
+    items: stockOperation,
+    error: stockOperationError,
+    isLoading: isStockOperationloading,
+  } = useStockOperationAndItems(operationUuid ?? null);
+
+  const handleEdit = useCallback(() => {
+    const operationType = types.results?.find((op) => op?.uuid === stockOperation?.operationTypeUuid);
+    if (!operationType) {
+      return;
+    }
+    launchStockoperationAddOrEditDialog(
+      t,
+      operationType,
+      stockOperation,
+      stockOperation?.requisitionStockOperationUuid,
+    );
+  }, [stockOperation, t, types.results]);
+
+  useEffect(() => {
+    if (stockOperationError) {
+      showSnackbar({
+        title: t('errorLoadingStockOperation', 'Error loading stock operation'),
+        subtitle: stockOperationError?.message,
+        kind: 'error',
+      });
+    }
+    if (typesError) {
+      showSnackbar({
+        title: t('errorLoadingStockOperationTypes', 'Error loading stock operation types'),
+        subtitle: typesError?.message,
+        kind: 'error',
+      });
+    }
+  }, [stockOperationError, typesError, t]);
+
+  if (istypesLoading || isStockOperationloading) {
+    return <InlineLoading description={t('loading', 'Loading')} />;
+  }
+
+  return (
+    <a onClick={handleEdit} style={{ cursor: 'pointer' }}>
+      {operationNumber}
+    </a>
+  );
+};
+
+export default StockOperationReference;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import styles from './stock-operation-status.scss';
+import StockOpertationStatus from './stock-operation-status';
+import { useTranslation } from 'react-i18next';
+import { Row } from '@carbon/react';
+type Props = {
+  stockOperation: StockOperationDTO;
+};
+const StockOperationStatusRow: React.FC<Props> = ({ stockOperation }) => {
+  const { t } = useTranslation();
+  return (
+    <Row className={styles.statusContainerRow}>
+      {stockOperation.dateCreated && (
+        <StockOpertationStatus
+          status={t('started', 'Started')}
+          statusFilledDate={stockOperation.dateCreated.toString()}
+          statusFillerFamilyName={stockOperation.creatorFamilyName}
+          statusFillerGivenName={stockOperation.creatorGivenName}
+        />
+      )}
+      {stockOperation?.submittedDate && (
+        <StockOpertationStatus
+          status={t('submitted', 'Submitted')}
+          statusFilledDate={stockOperation.submittedDate.toString()}
+          statusFillerFamilyName={stockOperation.submittedByFamilyName}
+          statusFillerGivenName={stockOperation.submittedByGivenName}
+        />
+      )}
+      {stockOperation.dispatchedDate && (
+        <StockOpertationStatus
+          status={t('dispatched', 'Dispatched')}
+          statusFilledDate={stockOperation.dispatchedDate.toString()}
+          statusFillerFamilyName={stockOperation.dispatchedByFamilyName}
+          statusFillerGivenName={stockOperation.dispatchedByGivenName}
+        />
+      )}
+      {stockOperation.returnedDate && (
+        <StockOpertationStatus
+          status={t('returned', 'Returned')}
+          statusFilledDate={stockOperation.returnedDate.toString()}
+          statusFillerFamilyName={stockOperation.returnedByFamilyName}
+          statusFillerGivenName={stockOperation.returnedByGivenName}
+          extraStatusinfo={<span className={styles.text}>{stockOperation.returnReason}</span>}
+        />
+      )}
+      {stockOperation.completedDate && (
+        <StockOpertationStatus
+          status={t('completed', 'Completed')}
+          statusFilledDate={stockOperation.completedDate.toString()}
+          statusFillerFamilyName={stockOperation.completedByFamilyName}
+          statusFillerGivenName={stockOperation.completedByGivenName}
+        />
+      )}
+      {stockOperation.status === 'CANCELLED' && (
+        <StockOpertationStatus
+          status={t('cancelled', 'Cancelled')}
+          statusFilledDate={stockOperation.cancelledDate.toString()}
+          statusFillerFamilyName={stockOperation.cancelledByFamilyName}
+          statusFillerGivenName={stockOperation.cancelledByGivenName}
+          extraStatusinfo={<span className={styles.text}>{stockOperation.cancelReason}</span>}
+        />
+      )}
+      {stockOperation.status === 'REJECTED' && (
+        <StockOpertationStatus
+          status={t('rejected', 'Rejected')}
+          statusFilledDate={stockOperation.rejectedDate.toString()}
+          statusFillerFamilyName={stockOperation.rejectedByFamilyName}
+          statusFillerGivenName={stockOperation.rejectedByGivenName}
+          extraStatusinfo={<span>{stockOperation.rejectionReason}</span>}
+        />
+      )}
+    </Row>
+  );
+};
+
+export default StockOperationStatusRow;

package/src/stock-operations/stock-operation-status/stock-operation-status.scss

@@ -0,0 +1,32 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.textHeading {
+  font-weight: bold;
+}
+
+.statusDescriptions {
+  margin-top: 4px;
+
+  .text {
+    margin-right: 4px;
+  }
+}
+
+.statusContainer {
+  display: flex;
+  margin: 10px;
+  gap: layout.$spacing-05;
+  flex-direction: column;
+  padding: layout.$spacing-05;
+}
+
+.statusContainerRow {
+  display: flex;
+  width: 100%;
+  border: none;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+  justify-content: flex-start;
+}

package/src/stock-operations/stock-operation-status/stock-operation-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-status.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/stock-operation-types-selector/stock-operation-types-selector.component.tsx

@@ -1,39 +1,40 @@
-import React, { useEffect, useMemo } from 'react';
 import { ButtonSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
-import { useStockOperationTypes, useUserRoles } from '../../stock-lookups/stock-lookups.resource';
-import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
+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 useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 
-interface StockOperationTypesSelectorProps {
-  onOperationTypeSelected?: (operation: StockOperationType) => void;
-  onOperationLoaded?: (operation: StockOperationType[]) => void;
-}
+const StockOperationTypesSelector = () => {
+  const { t } = useTranslation();
+  const { error, isLoading, operationTypes } = useFilteredOperationTypesByRoles();
 
-const StockOperationTypesSelector: React.FC<StockOperationTypesSelectorProps> = ({
-  onOperationTypeSelected,
-  onOperationLoaded,
-}) => {
-  const {
-    types: { results: createOperationTypes },
-    isLoading,
-    error,
-  } = useStockOperationTypes();
-  const { userRoles } = useUserRoles();
+  const handleSelect = useCallback(
+    (stockOperationType: StockOperationType) => {
+      const isStockIssueOperation = stockOperationType.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE;
 
-  const filterOperationTypes = useMemo(() => {
-    const applicablePrivilegeScopes = userRoles?.operationTypes?.map((p) => p.operationTypeUuid) || [];
-    const uniqueApplicablePrivilegeScopes = [...new Set(applicablePrivilegeScopes)];
-
-    return createOperationTypes?.filter((p) => uniqueApplicablePrivilegeScopes.includes(p.uuid)) || [];
-  }, [createOperationTypes, userRoles]);
+      launchStockoperationAddOrEditDialog(t, stockOperationType, undefined);
+    },
+    [t],
+  );
 
   useEffect(() => {
-    onOperationLoaded?.(filterOperationTypes);
-  }, [filterOperationTypes, onOperationLoaded]);
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockOperationError', 'Error loading stock operation types'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+
+  if (isLoading) return <ButtonSkeleton />;
 
-  if (isLoading || error) return <ButtonSkeleton />;
+  if (error) return null;
 
-  return filterOperationTypes && filterOperationTypes.length ? (
+  return operationTypes && operationTypes.length ? (
     <OverflowMenu
       renderIcon={() => (
         <>
@@ -53,14 +54,14 @@ const StockOperationTypesSelector: React.FC<StockOperationTypesSelectorProps> =
         whiteSpace: 'nowrap',
       }}
     >
-      {filterOperationTypes
+      {operationTypes
         .sort((a, b) => a.name.localeCompare(b.name))
         .map((operation) => (
           <OverflowMenuItem
             key={operation.uuid}
             itemText={operation.name}
             onClick={() => {
-              onOperationTypeSelected?.(operation);
+              handleSelect(operation);
             }}
           />
         ))}

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

@@ -1,93 +1,30 @@
+import { showModal } from '@openmrs/esm-framework';
 import React from 'react';
-import { closeOverlay, launchOverlay } from '../core/components/overlay/hook';
-import { FetchResponse, restBaseUrl, showModal, showSnackbar } from '@openmrs/esm-framework';
 import { TFunction } from 'react-i18next';
-import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
-import { createStockOperation, updateStockOperation } from './stock-operations.resource';
-import AddStockOperation from './add-stock-operation/add-stock-operation.component';
-import { OperationType, StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
 import { useLocation } from 'react-router-dom';
-import { extractErrorMessagesFromResponse } from '../constants';
-import { handleMutate } from '../utils';
-
-export const addOrEditStockOperation = async (
-  t: TFunction,
-  stockOperation: StockOperationDTO,
-  isEditing: boolean,
-  operation?: StockOperationType,
-) => {
-  const payload = stockOperation;
-  try {
-    if (operation.operationType === 'requisition') {
-      delete payload.destinationName;
-    }
-    if (operation.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE) {
-      const stockIssueOpsTypeUuid = '66666666-6666-6666-6666-666666666666';
-      delete payload.completedDate;
-      delete payload.completedBy;
-      delete payload.completedByFamilyName;
-      delete payload.completedByGivenName;
-      delete payload.operationTypeUuid;
-      delete payload.permission;
-      delete payload.locked;
-
-      payload['operationTypeUuid'] = stockIssueOpsTypeUuid;
-    }
-    const response: FetchResponse<StockOperationDTO> = await (isEditing ? updateStockOperation : createStockOperation)(
-      payload,
-    );
-
-    if (response?.data) {
-      handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
-      showSnackbar({
-        isLowContrast: true,
-        title: isEditing
-          ? t('editStockOperation', 'Edit stock operation')
-          : t('addStockOperation', 'Add stock operation'),
-        kind: 'success',
-        subtitle: isEditing
-          ? t('stockOperationEdited', 'Stock operation edited successfully')
-          : t('stockOperationAdded', 'Stock operation added successfully'),
-      });
-
-      closeOverlay();
-    }
-  } catch (error) {
-    const errorMessages = extractErrorMessagesFromResponse(error);
-    showSnackbar({
-      subtitle: errorMessages.join(', '),
-      title: t('errorSavingForm', 'Error on saving form'),
-      kind: 'error',
-      isLowContrast: true,
-    });
-  }
-};
+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 launchAddOrEditDialog = (
+export const launchStockoperationAddOrEditDialog = (
   t: TFunction,
-  stockOperation: StockOperationDTO,
-  isEditing: boolean,
-  operation?: StockOperationType,
-  operations?: StockOperationType[],
-  canPrint?: boolean,
+  operationType: StockOperationType,
+  stockOperation?: StockOperationDTO,
+  stockRequisitionUuid?: string, // Only suplied on stock issue (when overlay is launched for stock issue)
 ) => {
-  const printEnabled = canPrint !== undefined ? canPrint : stockOperation?.status === 'COMPLETED';
-
   launchOverlay(
-    isEditing
+    stockOperation
       ? t('editOperationTitle', 'Edit {{operationType}}', {
           operationType: stockOperation?.operationTypeName,
         })
       : t('newOperationTitle', 'New: {{operationName}}', {
-          operationName: operation?.name,
+          operationName: operationType?.name,
         }),
-    <AddStockOperation
-      model={stockOperation}
-      onSave={(stockOperation) => addOrEditStockOperation(t, stockOperation, isEditing, operation)}
-      isEditing={isEditing}
-      operation={operation}
-      canEdit={isEditing ? (stockOperation?.status === 'NEW' ? true : false) : true}
-      canPrint={printEnabled}
+    <StockOperationForm
+      stockOperationType={operationType}
+      stockOperation={stockOperation}
+      stockRequisitionUuid={stockRequisitionUuid}
     />,
   );
 };
@@ -100,7 +37,7 @@ export function getStockOperationUniqueId() {
   return `${new Date().getTime()}-${Math.random().toString(36).substring(2, 16)}`;
 }
 
-export const showActionDialogButton = async (title: string, requireReason: boolean, operation: StockOperationDTO) => {
+export const showActionDialogButton = (title: string, requireReason: boolean, operation: StockOperationDTO) => {
   const dispose = showModal('stock-operation-dialog', {
     title: title,
     operation: operation,

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

@@ -1,60 +1,48 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 
-import { Button } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading } from '@carbon/react';
 import { DeliveryTruck } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
 import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
-import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { launchAddOrEditDialog } from '../stock-operation.utils';
+import { OperationType } from '../../core/api/types/stockOperation/StockOperationType';
+import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import { showSnackbar } from '@openmrs/esm-framework';
 
 interface StockOperationIssueStockButtonProps {
   operation: StockOperationDTO;
-  operations: StockOperationType[];
 }
 
-const StockOperationIssueStockButton: React.FC<StockOperationIssueStockButtonProps> = ({ operation, operations }) => {
+const StockOperationIssueStockButton: React.FC<StockOperationIssueStockButtonProps> = ({ operation }) => {
   const { t } = useTranslation();
-  const type: StockOperationType = {
-    uuid: '',
-    name: 'Stock Issue',
-    description: '',
-    operationType: 'stockissue',
-    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 { error, isLoading, types } = useStockOperationTypes();
+  const stockIssueOperationType = useMemo(
+    () => types?.results?.find((type) => type.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE),
+    [types],
+  );
 
-  const modifiedOperation = addRequisitionStockOperation(operation);
   const handleButtonClick = () => {
-    launchAddOrEditDialog(t, modifiedOperation, false, type, operations, false);
+    launchStockoperationAddOrEditDialog(t, stockIssueOperationType, undefined, operation.uuid);
   };
 
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockOperationError', 'Error loading stock operation types'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+
+  if (isLoading)
+    return <InlineLoading description="" iconDescription={t('loadingOperationTypes', 'Loading operation types')} />;
+
   return (
     <Button onClick={handleButtonClick} kind="tertiary" renderIcon={(props) => <DeliveryTruck size={16} {...props} />}>
       {t('issueStock', 'Issue Stock ')}
     </Button>
   );
 };
-function addRequisitionStockOperation(stockOperation) {
-  const { uuid } = stockOperation;
-  return {
-    ...stockOperation,
-    requisitionStockOperationUuid: uuid,
-  };
-}
 
 export default StockOperationIssueStockButton;