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

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

@@ -14,6 +14,7 @@ import {
   Button,
 } from '@carbon/react';
 import styles from './stock-operation-items-form-step.scc.scss';
+import { ArrowLeft } from '@carbon/react/icons';
 
 const formatDate = (date: Date | string | null) => {
   if (!date) return ' ';
@@ -68,13 +69,6 @@ const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPreviou
       <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 }) => (
@@ -102,6 +96,13 @@ const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPreviou
             </TableContainer>
           )}
         </DataTable>
+        <div className={styles.btnSet}>
+          {typeof onPrevious === 'function' && (
+            <Button kind="secondary" onClick={onPrevious} renderIcon={ArrowLeft} hasIconOnly data-testid="previous-btn">
+              {/* {t('previous', 'Previous')} */}
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );

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

@@ -1,12 +1,10 @@
-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 { ConfigurableLink, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ConfigObject } from '../../../config-schema';
+import { URL_STOCK_ITEM } from '../../../constants';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
 
 type StockOperationItemCellProps = {
   stockItemUuid: string;
@@ -16,6 +14,7 @@ const StockOperationItemCell: React.FC<StockOperationItemCellProps> = ({ stockIt
   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;
@@ -41,9 +40,9 @@ const StockOperationItemCell: React.FC<StockOperationItemCellProps> = ({ stockIt
   if (error) return <>--</>;
 
   return (
-    <Link target={'_blank'} to={URL_STOCK_ITEM(stockItemUuid)}>
+    <ConfigurableLink target={'_blank'} to={window.spaBase + URL_STOCK_ITEM(stockItemUuid)}>
       {useItemCommonNameAsDisplay ? commonName : drugName}
-    </Link>
+    </ConfigurableLink>
   );
 };
 

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

@@ -9,8 +9,7 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { Edit, TrashCan } from '@carbon/react/icons';
-import { isDesktop, launchWorkspace } from '@openmrs/esm-framework';
+import { ArrowLeft, ArrowRight, Edit, TrashCan } from '@carbon/react/icons';
 import React, { useCallback, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +19,6 @@ 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';
@@ -33,12 +31,14 @@ type StockOperationItemsFormStepProps = {
   stockOperationType: StockOperationType;
   onNext?: () => void;
   onPrevious?: () => void;
+  onLaunchItemsForm?: (stockOperationItem?: BaseStockOperationItemFormData) => void;
 };
 const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> = ({
   stockOperationType,
   stockOperation,
   onNext,
   onPrevious,
+  onLaunchItemsForm,
 }) => {
   const { t } = useTranslation();
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
@@ -103,29 +103,6 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
     ];
   }, [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);
@@ -183,7 +160,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               kind="ghost"
               renderIcon={Edit}
               onClick={() => {
-                handleLaunchStockItem(item);
+                onLaunchItemsForm?.(item);
               }}
             />
             <Button
@@ -194,14 +171,14 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               kind="ghost"
               renderIcon={TrashCan}
               onClick={() => {
-                handleDeleteStockOperationItem(item);
+                onLaunchItemsForm?.(item);
               }}
             />
           </>
         ),
       };
     });
-  }, [observableOperationItems, handleLaunchStockItem, handleDeleteStockOperationItem, stockOperationType]);
+  }, [observableOperationItems, onLaunchItemsForm, stockOperationType]);
 
   const headerTitle = t('stockoperationItems', 'Stock operation items');
 
@@ -210,22 +187,10 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
       <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({
+            onLaunchItemsForm({
               uuid: `new-item-${getStockOperationUniqueId()}`,
               stockItemUuid: stockItem.uuid,
               hasExpiration: stockItem.hasExpiration,
@@ -233,7 +198,6 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
             })
           }
         />
-
         <DataTable
           rows={tableRows ?? []}
           headers={headers}
@@ -245,13 +209,12 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
-                    {headers.map((header: any) => (
+                    {headers.map((header) => (
                       <TableHeader
                         {...getHeaderProps({
                           header,
                           isSortable: false,
                         })}
-                        className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
                         style={header?.styles}
                         key={`${header.key}`}
                       >
@@ -272,7 +235,19 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
               </Table>
             </TableContainer>
           )}
-        ></DataTable>
+        />
+        <div className={styles.btnSet}>
+          {typeof onNext === 'function' && (
+            <Button kind="primary" onClick={onNext} renderIcon={ArrowRight}>
+              {t('next', 'Next')}
+            </Button>
+          )}
+          {typeof onPrevious === 'function' && (
+            <Button kind="secondary" onClick={onPrevious} renderIcon={ArrowLeft} hasIconOnly data-testid="previous-btn">
+              {/* {t('previous', 'Previous')} */}
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );

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

@@ -3,23 +3,6 @@
 @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%;
 }
@@ -57,8 +40,11 @@
 }
 
 .btnSet {
+  width: 100%;
+  flex: 1;
   display: flex;
-  flex-direction: row;
+  flex-direction: row-reverse;
   gap: layout.$spacing-03;
   align-items: center;
+  margin-top: layout.$spacing-03;
 }

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

@@ -1,5 +1,5 @@
 import { Button, Column, InlineLoading, RadioButton, RadioButtonGroup, Stack } from '@carbon/react';
-import { Departure, ListChecked, Save, SendFilled } from '@carbon/react/icons';
+import { ArrowLeft, ArrowRight, Departure, ListChecked, Save, SendFilled } from '@carbon/react/icons';
 import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -21,12 +21,14 @@ type StockOperationSubmissionFormStepProps = {
   stockOperation?: StockOperationDTO;
   stockOperationType: StockOperationType;
   onNext?: () => void;
+  dismissWorkspace?: () => void;
 };
 const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormStepProps> = ({
   onPrevious,
   stockOperationType,
   stockOperation,
   onNext,
+  dismissWorkspace,
 }) => {
   const { t } = useTranslation();
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
@@ -95,6 +97,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
           : createStockOperation(payload as any));
         result = resp.data; // Store the response data
         handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
+        dismissWorkspace?.();
         showSnackbar({
           isLowContrast: true,
           title: stockOperation
@@ -117,7 +120,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
       }
     })(); // Call handleSubmit to trigger validation and submission
     return result; // Return the result after handleSubmit completes
-  }, [form, stockOperation, t, approvalRequired, isStockIssueOperation]);
+  }, [form, stockOperation, t, approvalRequired, isStockIssueOperation, dismissWorkspace]);
 
   const handleComplete = useCallback(() => {
     handleSave().then((operation) => {
@@ -143,18 +146,6 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
             ? t('submitAndDispatch', 'Submit/Dispatch')
             : t('submitAndComplete', 'Submit/Complete')}
         </h4>
-        <div className={styles.btnSet}>
-          {typeof onPrevious === 'function' && (
-            <Button kind="secondary" onClick={onPrevious}>
-              Previous
-            </Button>
-          )}
-          {typeof onNext === 'function' && (
-            <Button kind="primary" onClick={onNext}>
-              Next
-            </Button>
-          )}
-        </div>
       </div>
 
       <Column>
@@ -163,7 +154,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
           legendText={t('doesThisTransactionRequireApproval', 'Does the transaction require approval ?')}
           onChange={handleRadioButtonChange}
           readOnly={!editable}
-          valueSelected={approvalRequired === true}
+          valueSelected={approvalRequired === true ? true : approvalRequired === false ? false : null}
         >
           <RadioButton value={true} id="rbgApprovelRequired-true" labelText={t('yes', 'Yes')} />
           <RadioButton value={false} id="rbgApprovelRequired-false" labelText={t('no', 'No')} />
@@ -176,6 +167,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
               {!operationTypePermision.requiresDispatchAcknowledgement && !approvalRequired && (
                 <Button
                   name="complete"
+                  data-testid="complete-button"
                   type="button"
                   style={{ margin: '4px' }}
                   className="submitButton"
@@ -191,6 +183,7 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
                   name="dispatch"
                   type="button"
                   style={{ margin: '4px' }}
+                  data-testid="dipatch-button"
                   className="submitButton"
                   kind="primary"
                   onClick={handleDispatch}
@@ -236,6 +229,18 @@ const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormSte
           </Button>
         </Column>
       )}
+      <div className={styles.btnSet}>
+        {typeof onNext === 'function' && (
+          <Button kind="tertiary" onClick={onNext} renderIcon={ArrowRight}>
+            {t('next', 'Next')}
+          </Button>
+        )}
+        {typeof onPrevious === 'function' && (
+          <Button kind="tertiary" onClick={onPrevious} renderIcon={ArrowLeft} hasIconOnly data-testid="previous-btn">
+            {/* {t('previous', 'Previous')} */}
+          </Button>
+        )}
+      </div>
     </Stack>
   );
 };

package/src/stock-operations/stock-operations-forms/stock-issue-form-initializer-with-related-requisition-operation.component.tsx

@@ -1,10 +1,12 @@
-import { showSnackbar } from '@openmrs/esm-framework';
+import { parseDate, showSnackbar } from '@openmrs/esm-framework';
 import React, { useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { OperationType, StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { useStockOperation } from '../stock-operations.resource';
+import { useStockOperationAndItems } from '../stock-operations.resource';
 import { getStockOperationItemFormSchema, StockOperationItemDtoSchema } from '../validation-schema';
+import { pick } from '../../core/utils/utils';
+import { Loading } from '@carbon/react';
 
 type StockIssueFormInitializerWithRelatedRequisitionOperationProps = {
   stockRequisitionUuid: string;
@@ -16,11 +18,12 @@ const StockIssueFormInitializerWithRelatedRequisitionOperation: React.FC<
 > = ({ stockRequisitionUuid, stockOperationType }) => {
   const form = useFormContext<StockOperationItemDtoSchema>();
   const { t } = useTranslation();
-  const { error, items: stockOperation, isLoading } = useStockOperation(stockRequisitionUuid);
+  const { error, items: stockOperation, isLoading } = useStockOperationAndItems(stockRequisitionUuid);
   const { setValue } = form;
   const stockOperationItemFormSchema = useMemo(() => {
     return getStockOperationItemFormSchema(OperationType.STOCK_ISSUE_OPERATION_TYPE);
   }, []);
+
   const items = form.watch('stockOperationItems');
   // initialize form values with requisition values for Stock issue operation type
   useEffect(() => {
@@ -30,6 +33,17 @@ const StockIssueFormInitializerWithRelatedRequisitionOperation: React.FC<
       setValue('destinationUuid', stockOperation.destinationUuid);
       setValue('requisitionStockOperationUuid', stockRequisitionUuid);
       setValue('operationTypeUuid', stockOperationType.uuid);
+      setValue('responsiblePersonUuid', stockOperation.responsiblePersonUuid);
+      setValue('responsiblePersonOther', stockOperation.responsiblePersonOther);
+      setValue(
+        'stockOperationItems',
+        (stockOperation?.stockOperationItems?.map((item) =>
+          pick(
+            { ...item, expiration: item.expiration ? parseDate(item.expiration as any) : undefined },
+            stockOperationItemFormSchema.keyof().options,
+          ),
+        ) ?? []) as any,
+      );
     }
   }, [stockOperation, stockOperationItemFormSchema, setValue, items, stockOperationType, stockRequisitionUuid]);
 
@@ -49,6 +63,9 @@ const StockIssueFormInitializerWithRelatedRequisitionOperation: React.FC<
       });
     }
   }, [stockRequisitionUuid, error, t]);
+
+  if (isLoading) return <Loading active description="Loading" />;
+
   return <React.Fragment />;
 };
 

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

@@ -30,10 +30,10 @@ export interface StockItemFormProps {
   stockOperationType: StockOperationType;
   stockOperationItem: BaseStockOperationItemFormData;
   onSave?: (data: BaseStockOperationItemFormData) => void;
+  onBack?: () => void;
 }
 
-interface Props extends DefaultWorkspaceProps, StockItemFormProps {}
-const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, stockOperationItem, onSave }) => {
+const StockItemForm: React.FC<StockItemFormProps> = ({ stockOperationType, stockOperationItem, onSave, onBack }) => {
   const operationType = useMemo(() => {
     return operationFromString(stockOperationType.operationType);
   }, [stockOperationType]);
@@ -65,8 +65,6 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
 
   const onSubmit = (data: z.infer<typeof formschema>) => {
     onSave?.(data);
-    closeWorkspace();
-    // Implementation of adding or updating itsms in items table
   };
   return (
     <Form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
@@ -197,7 +195,7 @@ const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, st
       </Stack>
 
       <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+        <Button className={styles.button} kind="secondary" onClick={onBack}>
           {t('discard', 'Discard')}
         </Button>
         <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>