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

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

@@ -1,7 +1,7 @@
 import { CircleDash } from '@carbon/react/icons';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { parseDate, showSnackbar, useConfig, useSession } from '@openmrs/esm-framework';
-import React, { useEffect, useMemo, useState } from 'react';
+import { DefaultWorkspaceProps, parseDate, showSnackbar, useConfig, useSession } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FieldError, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { ConfigObject } from '../../config-schema';
@@ -15,19 +15,20 @@ 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 {
+  BaseStockOperationItemFormData,
   getStockOperationFormSchema,
   getStockOperationItemFormSchema,
   StockOperationItemDtoSchema,
 } from '../validation-schema';
 import useOperationTypePermisions from './hooks/useOperationTypePermisions';
 import BaseOperationDetailsFormStep from './steps/base-operation-details-form-step';
+import ReceivedItems from './steps/received-items.component';
 import StockOperationItemsFormStep from './steps/stock-operation-items-form-step.component';
 import StockOperationSubmissionFormStep from './steps/stock-operation-submission-form-step.component';
-import StockOperationFormHeader from './stock-operation-form-header.component';
-import StockOperationStepper from './stock-operation-stepper/stock-operation-stepper.component';
 import StockIssueFormInitializerWithRelatedRequisitionOperation from './stock-issue-form-initializer-with-related-requisition-operation.component';
+import StockItemForm, { StockItemFormProps } from './stock-item-form/stock-item-form.workspace';
+import StockOperationStepper from './stock-operation-stepper/stock-operation-stepper.component';
 
 /**
  * Props interface for the StockOperationForm component
@@ -37,7 +38,7 @@ import StockIssueFormInitializerWithRelatedRequisitionOperation from './stock-is
  * @property {string} [stockRequisitionUuid] - Requisition operation uuid used in stock issue stockOperation type
  * When undefined or null, the form will be in creation mode.
  */
-type StockOperationFormProps = {
+type StockOperationFormProps = DefaultWorkspaceProps & {
   stockOperation?: StockOperationDTO;
   stockOperationType: StockOperationType;
   stockRequisitionUuid?: string;
@@ -47,6 +48,7 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
   stockOperation,
   stockOperationType,
   stockRequisitionUuid,
+  closeWorkspace,
 }) => {
   const { t } = useTranslation();
   const operationType = useMemo(() => {
@@ -59,6 +61,71 @@ 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 {
+    user: { uuid: defaultLoggedUserUuid },
+  } = useSession();
+  const { autoPopulateResponsiblePerson } = useConfig<ConfigObject>();
+  const form = useForm<StockOperationItemDtoSchema>({
+    defaultValues: {
+      responsiblePersonUuid:
+        stockOperation?.responsiblePersonUuid ?? // if person uuid exist, make it default
+        (stockOperation?.responsiblePersonOther ? otherUser.uuid : undefined) ?? // if other resp person exist, default other user uuid
+        (autoPopulateResponsiblePerson ? defaultLoggedUserUuid : undefined), //Else default login user if configured
+      operationDate: stockOperation?.operationDate ? parseDate(stockOperation!.operationDate as any) : today(),
+      remarks: stockOperation?.remarks ?? '',
+
+      operationTypeUuid: stockOperation?.operationTypeUuid ?? stockOperationType?.uuid,
+      reasonUuid: stockOperation?.reasonUuid ?? '',
+      responsiblePersonOther: stockOperation?.responsiblePersonOther ?? '',
+      stockOperationItems:
+        stockOperation?.stockOperationItems?.map((item) =>
+          pick(
+            { ...item, expiration: item.expiration ? parseDate(item.expiration as any) : undefined },
+            stockOperationItemFormSchema.keyof().options,
+          ),
+        ) ?? [],
+      sourceUuid: stockOperation?.sourceUuid ?? '',
+      destinationUuid: stockOperation?.destinationUuid ?? '',
+    },
+    mode: 'all',
+    resolver: zodResolver(formschema),
+  });
+  const [renderItemForm, setRenderItemForm] = useState(false);
+  const [itemsFormProps, setItemFormProps] = useState<StockItemFormProps>();
+
+  const handleLaunchStockItem = useCallback(
+    (stockOperationItem?: BaseStockOperationItemFormData) => {
+      setItemFormProps({
+        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);
+          setRenderItemForm(false);
+          setItemFormProps(undefined);
+        },
+        onBack: () => {
+          setRenderItemForm(false);
+          setItemFormProps(undefined);
+        },
+      });
+      setRenderItemForm(true);
+    },
+    [stockOperationType, form, setItemFormProps, setRenderItemForm],
+  );
   const steps: TabItem[] = useMemo(() => {
     return [
       {
@@ -70,7 +137,7 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
             onNext={() => setSelectedIndex(1)}
           />
         ),
-        disabled: true,
+        disabled: false,
       },
       {
         name: t('stockItems', 'Stock Items'),
@@ -80,9 +147,10 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
             stockOperationType={stockOperationType}
             onNext={() => setSelectedIndex(2)}
             onPrevious={() => setSelectedIndex(0)}
+            onLaunchItemsForm={handleLaunchStockItem}
           />
         ),
-        disabled: true,
+        disabled: false,
       },
       {
         name: operationTypePermision?.requiresDispatchAcknowledgement ? 'Submit/Dispatch' : 'Submit/Complete',
@@ -91,64 +159,43 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
             stockOperation={stockOperation}
             stockOperationType={stockOperationType}
             onPrevious={() => setSelectedIndex(1)}
+            onNext={showReceivedItems ? () => setSelectedIndex(3) : undefined}
+            dismissWorkspace={closeWorkspace}
           />
         ),
-        disabled: true,
+        disabled: false,
       },
     ].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: false,
+            },
+          ]
         : [],
     ) as TabItem[];
-  }, [stockOperation, stockOperationType, t, operationTypePermision]);
-  const {
-    user: { uuid: defaultLoggedUserUuid },
-  } = useSession();
-  const { autoPopulateResponsiblePerson } = useConfig<ConfigObject>();
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const form = useForm<StockOperationItemDtoSchema>({
-    // defaultValues: operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE ? issueStockOperation : model,
-    defaultValues: {
-      responsiblePersonUuid:
-        stockOperation?.responsiblePersonUuid ?? // if person uuid exist, make it default
-        (stockOperation?.responsiblePersonOther ? otherUser.uuid : undefined) ?? // if other resp person exist, default other user uuid
-        (autoPopulateResponsiblePerson ? defaultLoggedUserUuid : undefined), //Else default login user if configured
-      operationDate: stockOperation?.operationDate ? parseDate(stockOperation!.operationDate as any) : today(),
-      remarks: stockOperation?.remarks ?? '',
+  }, [
+    stockOperation,
+    stockOperationType,
+    t,
+    operationTypePermision,
+    showReceivedItems,
+    handleLaunchStockItem,
+    closeWorkspace,
+  ]);
 
-      operationTypeUuid: stockOperation?.operationTypeUuid ?? stockOperationType?.uuid,
-      reasonUuid: stockOperation?.reasonUuid ?? '',
-      responsiblePersonOther: stockOperation?.responsiblePersonOther ?? '',
-      stockOperationItems:
-        stockOperation?.stockOperationItems?.map((item) =>
-          pick(
-            { ...item, expiration: item.expiration ? parseDate(item.expiration as any) : undefined },
-            stockOperationItemFormSchema.keyof().options,
-          ),
-        ) ?? [],
-      sourceUuid: stockOperation?.sourceUuid ?? '',
-      destinationUuid: stockOperation?.destinationUuid ?? '',
-    },
-    mode: 'all',
-    resolver: zodResolver(formschema),
-  });
+  const [selectedIndex, setSelectedIndex] = useState(0);
 
   useEffect(() => {
-    // Show error snackbar
+    // Display fields errors for stock operation items and operation type uuid
     Object.entries(form.formState.errors ?? {}).forEach(([key, val]) => {
       if (['stockOperationItems', 'operationTypeUuid'].includes(key)) {
-        showSnackbar({ kind: 'error', title: key, subtitle: (val[key] as FieldError)?.message });
+        showSnackbar({ kind: 'error', title: key, subtitle: (val as FieldError)?.message });
       }
     });
+
     // Navigate to step where the error is
     const fieldSteps = [
       [
@@ -173,26 +220,26 @@ const StockOperationForm: React.FC<StockOperationFormProps> = ({
 
   return (
     <FormProvider {...form}>
-      {stockOperation && (
-        <StockOperationFormHeader stockOperationType={stockOperationType} stockOperation={stockOperation} />
-      )}
       {stockOperationType.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE && (
         <StockIssueFormInitializerWithRelatedRequisitionOperation
           stockRequisitionUuid={stockRequisitionUuid as string}
           stockOperationType={stockOperationType}
         />
       )}
-      <StockOperationStepper
-        steps={steps.map((tab, index) => ({
-          title: tab.name,
-          component: tab.component,
-          disabled: tab.disabled,
-          // subTitle: `Subtitle  for ${tab.name}`,
-          icon: <CircleDash />,
-        }))}
-        selectedIndex={selectedIndex}
-        onChange={setSelectedIndex}
-      />
+      {renderItemForm ? (
+        <StockItemForm {...itemsFormProps} />
+      ) : (
+        <StockOperationStepper
+          steps={steps.map((tab, index) => ({
+            title: tab.name,
+            component: tab.component,
+            disabled: tab.disabled,
+            icon: <CircleDash />,
+          }))}
+          selectedIndex={selectedIndex}
+          onChange={setSelectedIndex}
+        />
+      )}
     </FormProvider>
   );
 };

package/src/stock-operations/stock-operations-forms/stock-operation-form.scss

@@ -66,15 +66,13 @@
 }
 
 .btnSet {
+  width: 100%;
+  flex: 1;
   display: flex;
-  flex-direction: row;
+  flex-direction: row-reverse;
   gap: layout.$spacing-03;
   align-items: center;
-}
-
-.relatedLink {
-  margin-left: layout.$spacing-02;
-  color: colors.$blue-60;
+  margin-top: layout.$spacing-03;
 }
 
 .textHeading {
@@ -90,22 +88,5 @@
 .statusBody {
   display: flex;
   justify-content: space-between;
-  margin: layout.$spacing-02;
-}
-
-.actionBtns {
-  margin: layout.$spacing-03;
-  display: flex;
-  flex-direction: row;
-  gap: layout.$spacing-03;
-  flex-wrap: wrap;
-  height: fit-content;
-}
-
-.operationlinkscontainer {
-  margin: layout.$spacing-05;
-}
-
-.relatedTransactionHeader {
-  color: colors.$green-50;
+  align-items: center;
 }

package/src/stock-operations/stock-operations-forms/stock-operation-related-link.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } 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 StockOperationRelatedLinkProps {
@@ -26,7 +26,7 @@ const StockOperationRelatedLink: React.FC<StockOperationRelatedLinkProps> = ({
     if (!operationType) {
       return;
     }
-    launchStockoperationAddOrEditDialog(
+    launchStockoperationAddOrEditWorkSpace(
       t,
       operationType,
       stockOperation,

package/src/stock-operations/stock-operations-forms/stock-operation-stepper/stepper.scss

@@ -4,31 +4,29 @@
 
 .layer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: layout.$spacing-05;
-  padding: layout.$spacing-05;
+  padding: layout.$spacing-03;
+  height: 100%;
 }
 
 .stepperContainer {
   display: flex;
   gap: layout.$spacing-03;
-  flex: 1;
-  align-items: center;
-  width: 100%;
+  align-items: baseline;
+  flex-direction: column;
+  width: 200px;
+  background-color: colors.$gray-10;
 }
 
 .stepperItem {
-  flex: 1;
-  height: 100%;
-  display: flex;
   gap: layout.$spacing-03;
-  align-items: center;
   padding: layout.$spacing-03;
-  border-top: layout.$spacing-01 solid colors.$gray-30;
+  border-left: layout.$spacing-02 solid colors.$gray-30;
 }
 
 .stepperItemActive {
-  border-top: layout.$spacing-02 solid var(--brand-03);
+  border-left: layout.$spacing-02 solid var(--brand-03);
 }
 
 .subtTitle {
@@ -39,3 +37,8 @@
 .title {
   @include type.type-style('heading-02');
 }
+
+.content {
+  flex: 1;
+  overflow: auto;
+}

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

@@ -35,16 +35,12 @@ const StockOperationStepper: React.FC<StockOperationStepperProps> = ({
               key={index}
               onClick={!disabled ? () => onChange?.(index) : undefined}
             >
-              {icon}
-              <div>
-                <p className={styles.title}>{title}</p>
-                <p className={styles.subtTitle}>{subTitle}</p>
-              </div>
+              <p className={styles.title}>{title}</p>
             </li>
           );
         })}
       </ol>
-      <Layer>{steps[selectedIndex].component}</Layer>
+      <Layer className={styles.content}>{steps[selectedIndex].component}</Layer>
     </Layer>
   );
 };

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} />

package/src/stock-operations/stock-operations-table.scss

@@ -1,5 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
+@use '@carbon/colors';
 @use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .tileContainer {
@@ -76,3 +77,22 @@
     margin-right: 4px;
   }
 }
+
+.actionBtns {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  flex-wrap: wrap;
+  height: fit-content;
+  justify-content: flex-end;
+  flex: 1;
+}
+
+.relatedLink {
+  margin-left: layout.$spacing-02;
+  color: colors.$blue-60;
+}
+
+.relatedTransactionHeader {
+  color: colors.$green-50;
+}