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

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

@@ -0,0 +1,281 @@
+import {
+  Button,
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { Edit, TrashCan } from '@carbon/react/icons';
+import { isDesktop, launchWorkspace } from '@openmrs/esm-framework';
+import React, { useCallback, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import { StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+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';
+import StockOperationItemCell from './stock-operation-item-cell.component';
+import StockoperationItemExpiryCell from './stock-operation-item-expiry-cell.component';
+import styles from './stock-operation-items-form-step.scc.scss';
+
+type StockOperationItemsFormStepProps = {
+  stockOperation?: StockOperationDTO;
+  stockOperationType: StockOperationType;
+  onNext?: () => void;
+  onPrevious?: () => void;
+};
+const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> = ({
+  stockOperationType,
+  stockOperation,
+  onNext,
+  onPrevious,
+}) => {
+  const { t } = useTranslation();
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+
+  const form = useFormContext<StockOperationItemDtoSchema>();
+  const observableOperationItems = form.watch('stockOperationItems');
+  const headers = useMemo(() => {
+    return [
+      {
+        key: 'item',
+        header: t('item', 'Item'),
+        styles: { width: '40% !important' },
+      },
+      {
+        key: 'itemDetails',
+        header: t('itemDetails', 'Item Details'),
+        styles: { width: '20% !important' },
+      },
+      ...(operationTypePermision.requiresBatchUuid || operationTypePermision.requiresActualBatchInfo
+        ? [
+            {
+              key: 'batch',
+              header: t('batchNo', 'Batch No'),
+              styles: { width: '15% !important' },
+            },
+          ]
+        : []),
+      ...(operationTypePermision.requiresActualBatchInfo
+        ? [
+            {
+              key: 'expiry',
+              header: t('expiry', 'Expiry'),
+            },
+          ]
+        : []),
+      ...(operationTypePermision.requiresBatchUuid
+        ? [
+            {
+              key: 'expiry',
+              header: t('expiry', 'Expiry'),
+            },
+          ]
+        : []),
+
+      {
+        key: 'quantity',
+        header: t('qty', 'Qty'),
+      },
+      {
+        key: 'quantityuom',
+        header: t('quantityUom', 'Qty UoM'),
+      },
+      ...(operationTypePermision.canCaptureQuantityPrice
+        ? [
+            {
+              key: 'purchasePrice',
+              header: t('purchasePrice', 'Purchase Price'),
+            },
+          ]
+        : []),
+      { key: 'actions', header: t('actions', 'Actions') },
+    ];
+  }, [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);
+    },
+    [form, observableOperationItems],
+  );
+
+  const tableRows = useMemo(() => {
+    return observableOperationItems?.map((item) => {
+      const {
+        batchNo,
+        expiration,
+        quantity,
+        purchasePrice,
+        uuid,
+        stockItemUuid,
+        stockItemPackagingUOMUuid,
+        stockBatchUuid,
+      } = item;
+
+      return {
+        id: uuid,
+        item: stockItemUuid ? <StockOperationItemCell stockItemUuid={stockItemUuid} /> : '--',
+        itemDetails: stockItemUuid ? <StockAvailability stockItemUuid={stockItemUuid} /> : '--',
+        batch: (
+          <StockOperationItemBatchNoCell
+            operation={stockOperationType}
+            stockBatchUuid={stockBatchUuid}
+            batchNo={batchNo}
+            stockItemUuid={stockItemUuid}
+          />
+        ),
+        expiry: (
+          <StockoperationItemExpiryCell
+            operation={stockOperationType}
+            stockBatchUuid={stockBatchUuid}
+            expiration={expiration}
+            stockItemUuid={stockItemUuid}
+          />
+        ),
+        quantity: quantity?.toLocaleString(),
+        quantityuom: stockItemPackagingUOMUuid ? (
+          <QuantityUomCell stockItemPackagingUOMUuid={stockItemPackagingUOMUuid} stockItemUuid={stockItemUuid} />
+        ) : (
+          '--'
+        ),
+        purchasePrice: purchasePrice,
+        actions: (
+          <>
+            <Button
+              type="button"
+              size="sm"
+              className="submitButton clear-padding-margin"
+              iconDescription={'Edit'}
+              kind="ghost"
+              renderIcon={Edit}
+              onClick={() => {
+                handleLaunchStockItem(item);
+              }}
+            />
+            <Button
+              type="button"
+              size="sm"
+              className="submitButton clear-padding-margin"
+              iconDescription={'Delete'}
+              kind="ghost"
+              renderIcon={TrashCan}
+              onClick={() => {
+                handleDeleteStockOperationItem(item);
+              }}
+            />
+          </>
+        ),
+      };
+    });
+  }, [observableOperationItems, handleLaunchStockItem, handleDeleteStockOperationItem, stockOperationType]);
+
+  const headerTitle = t('stockoperationItems', 'Stock operation 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>
+            )}
+            {typeof onNext === 'function' && (
+              <Button kind="primary" onClick={onNext}>
+                {t('next', 'Next')}
+              </Button>
+            )}
+          </div>
+        </div>
+        <StockItemSearch
+          onSelectedItem={(stockItem) =>
+            handleLaunchStockItem({
+              uuid: `new-item-${getStockOperationUniqueId()}`,
+              stockItemUuid: stockItem.uuid,
+              hasExpiration: stockItem.hasExpiration,
+              purchasePrice: stockItem.purchasePrice,
+            })
+          }
+        />
+
+        <DataTable
+          rows={tableRows ?? []}
+          headers={headers}
+          isSortable={false}
+          useZebraStyles={true}
+          className={styles.dataTable}
+          render={({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header: any) => (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          isSortable: false,
+                        })}
+                        className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
+                        style={header?.styles}
+                        key={`${header.key}`}
+                      >
+                        {header.header?.content ?? header?.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        ></DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default StockOperationItemsFormStep;

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

@@ -0,0 +1,64 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@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%;
+}
+
+.availability {
+  font-size: 0.875rem;
+
+  .outOfStock {
+    color: #da1e28;
+  }
+}
+
+.heading {
+  text-align: left;
+  text-transform: capitalize;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: layout.$spacing-03 0 layout.$spacing-03 0;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.btnSet {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  align-items: center;
+}

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

@@ -0,0 +1,236 @@
+import { Button, Column, InlineLoading, RadioButton, RadioButtonGroup, Stack } from '@carbon/react';
+import { 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';
+import { useTranslation } from 'react-i18next';
+import { extractErrorMessagesFromResponse } from '../../../constants';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import { StockOperationItemDTO } from '../../../core/api/types/stockOperation/StockOperationItemDTO';
+import { OperationType, StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import { otherUser } from '../../../core/utils/utils';
+import { handleMutate } from '../../../utils';
+import { showActionDialogButton } from '../../stock-operation.utils';
+import { createStockOperation, deleteStockOperationItem, updateStockOperation } from '../../stock-operations.resource';
+import { StockOperationItemDtoSchema } from '../../validation-schema';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import styles from '../stock-operation-form.scss';
+
+type StockOperationSubmissionFormStepProps = {
+  onPrevious?: () => void;
+  stockOperation?: StockOperationDTO;
+  stockOperationType: StockOperationType;
+};
+const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormStepProps> = ({
+  onPrevious,
+  stockOperationType,
+  stockOperation,
+}) => {
+  const { t } = useTranslation();
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const editable = useMemo(() => !stockOperation || stockOperation.status === 'NEW', [stockOperation]);
+  const form = useFormContext<StockOperationItemDtoSchema>();
+  const [approvalRequired, setApprovalRequired] = useState<boolean | null>(stockOperation?.approvalRequired);
+  const isStockIssueOperation = useMemo(
+    () => OperationType.STOCK_ISSUE_OPERATION_TYPE === stockOperationType.operationType,
+    [stockOperationType],
+  );
+  const handleRadioButtonChange = (selectedItem: boolean) => {
+    setApprovalRequired(selectedItem);
+  };
+
+  const handleSave = useCallback(async () => {
+    let result: StockOperationDTO; // To store the result for returning
+    await form.handleSubmit(async (formData) => {
+      try {
+        // Get deleted items (items in stock operation bt not i form data)
+        const itemsToDelete =
+          stockOperation?.stockOperationItems?.reduce<Array<StockOperationItemDTO>>((prev, curr) => {
+            const itemDoNotExistInFormData =
+              formData.stockOperationItems.findIndex((item) => item.uuid === curr.uuid) === -1;
+            if (itemDoNotExistInFormData) {
+              return [...prev, curr];
+            }
+            return prev;
+          }, []) ?? [];
+        // Delete them from backend asynchronosely
+        const deleted = await Promise.allSettled(itemsToDelete.map((item) => deleteStockOperationItem(item.uuid)));
+        // Give delete status on completion
+        deleted.forEach((del, index) => {
+          showSnackbar({
+            kind: del.status === 'rejected' ? 'error' : 'success',
+            title:
+              del.status === 'rejected'
+                ? t('stockoperationItemDeleteError', 'Error deleting stock operation item {{item}}', {
+                    item: itemsToDelete[index].commonName,
+                  })
+                : t('success', 'Success'),
+            subtitle:
+              del.status === 'rejected'
+                ? del.reason?.message
+                : t('stockoperationItemDeletSuccess', 'Stock operation item {{item}} deleted succesfully', {
+                    item: itemsToDelete[index].commonName,
+                  }),
+          });
+        });
+        // construct update payload
+        const payload = {
+          ...formData,
+          // Remove other uuid if responsible person is set to other
+          responsiblePersonUuid:
+            formData.responsiblePersonUuid === otherUser.uuid ? undefined : formData.responsiblePersonUuid,
+          approvalRequired: approvalRequired ? true : false,
+          stockOperationItems: [
+            ...formData.stockOperationItems.map((item) => ({
+              ...item,
+              uuid:
+                item.uuid.startsWith('new-item-') || (!stockOperation && isStockIssueOperation) ? undefined : item.uuid, // Remove uuid for newly inserted items and stock issue items derived from requisition to avoid foreign key constraint lookup error
+            })),
+          ],
+        };
+        const resp = await (stockOperation
+          ? updateStockOperation(stockOperation, payload as any)
+          : createStockOperation(payload as any));
+        result = resp.data; // Store the response data
+        handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
+        showSnackbar({
+          isLowContrast: true,
+          title: stockOperation
+            ? t('editStockOperation', 'Edit stock operation')
+            : t('addStockOperation', 'Add stock operation'),
+          kind: 'success',
+          subtitle: stockOperation
+            ? t('stockOperationEdited', 'Stock operation edited successfully')
+            : t('stockOperationAdded', 'Stock operation added successfully'),
+        });
+      } catch (error) {
+        const errorMessages = extractErrorMessagesFromResponse(error);
+        showSnackbar({
+          subtitle: errorMessages.join(', '),
+          title: t('errorSavingForm', 'Error on saving form'),
+          kind: 'error',
+          isLowContrast: true,
+        });
+        throw error;
+      }
+    })(); // Call handleSubmit to trigger validation and submission
+    return result; // Return the result after handleSubmit completes
+  }, [form, stockOperation, t, approvalRequired, isStockIssueOperation]);
+
+  const handleComplete = useCallback(() => {
+    handleSave().then((operation) => {
+      showActionDialogButton('Complete', false, { ...operation, status: 'COMPLETED' });
+    });
+  }, [handleSave]);
+  const handleSubmitForReview = useCallback(() => {
+    handleSave().then((operation) => {
+      showActionDialogButton('Submit', false, { ...operation, status: 'SUBMITTED' });
+    });
+  }, [handleSave]);
+  const handleDispatch = useCallback(() => {
+    handleSave().then((operation) => {
+      showActionDialogButton('Dispatch', false, { ...operation, status: 'DISPATCHED' });
+    });
+  }, [handleSave]);
+
+  return (
+    <Stack gap={4} className={styles.grid}>
+      <div className={styles.heading}>
+        <h4>
+          {operationTypePermision?.requiresDispatchAcknowledgement
+            ? t('submitAndDispatch', 'Submit/Dispatch')
+            : t('submitAndComplete', 'Submit/Complete')}
+        </h4>
+        <div className={styles.btnSet}>
+          {typeof onPrevious === 'function' && (
+            <Button kind="secondary" onClick={onPrevious}>
+              Previous
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <Column>
+        <RadioButtonGroup
+          name="rbgApprovelRequired"
+          legendText={t('doesThisTransactionRequireApproval', 'Does the transaction require approval ?')}
+          onChange={handleRadioButtonChange}
+          readOnly={!editable}
+          valueSelected={approvalRequired === true}
+        >
+          <RadioButton value={true} id="rbgApprovelRequired-true" labelText={t('yes', 'Yes')} />
+          <RadioButton value={false} id="rbgApprovelRequired-false" labelText={t('no', 'No')} />
+        </RadioButtonGroup>
+      </Column>
+      {editable && (
+        <Column>
+          {approvalRequired != null && (
+            <>
+              {!operationTypePermision.requiresDispatchAcknowledgement && !approvalRequired && (
+                <Button
+                  name="complete"
+                  type="button"
+                  style={{ margin: '4px' }}
+                  className="submitButton"
+                  kind="primary"
+                  onClick={handleComplete}
+                  renderIcon={ListChecked}
+                >
+                  {t('complete', 'Complete')}
+                </Button>
+              )}
+              {operationTypePermision.requiresDispatchAcknowledgement && !approvalRequired && (
+                <Button
+                  name="dispatch"
+                  type="button"
+                  style={{ margin: '4px' }}
+                  className="submitButton"
+                  kind="primary"
+                  onClick={handleDispatch}
+                  renderIcon={Departure}
+                >
+                  {form.formState.isSubmitting ? (
+                    <InlineLoading description={t('dispatching', 'Dispatching')} />
+                  ) : (
+                    t('dispatch', 'Dispatch')
+                  )}
+                </Button>
+              )}
+              {approvalRequired && (
+                <Button
+                  name="submit"
+                  type="button"
+                  style={{ margin: '4px' }}
+                  className="submitButton"
+                  kind="primary"
+                  onClick={handleSubmitForReview}
+                  renderIcon={SendFilled}
+                >
+                  {form.formState.isSubmitting ? (
+                    <InlineLoading description={t('submittingForReview', 'Submitting for review')} />
+                  ) : (
+                    t('submitForReview', 'Submit For Review')
+                  )}
+                </Button>
+              )}
+            </>
+          )}
+          <Button
+            name="save"
+            type="button"
+            className="submitButton"
+            style={{ margin: '4px' }}
+            disabled={form.formState.isSubmitting}
+            kind="secondary"
+            onClick={handleSave}
+            renderIcon={Save}
+          >
+            {form.formState.isSubmitting ? <InlineLoading /> : t('save', 'Save')}
+          </Button>
+        </Column>
+      )}
+    </Stack>
+  );
+};
+
+export default StockOperationSubmissionFormStep;

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

@@ -0,0 +1,55 @@
+import { 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 { getStockOperationItemFormSchema, StockOperationItemDtoSchema } from '../validation-schema';
+
+type StockIssueFormInitializerWithRelatedRequisitionOperationProps = {
+  stockRequisitionUuid: string;
+  stockOperationType: StockOperationType;
+};
+
+const StockIssueFormInitializerWithRelatedRequisitionOperation: React.FC<
+  StockIssueFormInitializerWithRelatedRequisitionOperationProps
+> = ({ stockRequisitionUuid, stockOperationType }) => {
+  const form = useFormContext<StockOperationItemDtoSchema>();
+  const { t } = useTranslation();
+  const { error, items: stockOperation, isLoading } = useStockOperation(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(() => {
+    if (stockOperation) {
+      // Initialize form with the values
+      setValue('sourceUuid', stockOperation.sourceUuid);
+      setValue('destinationUuid', stockOperation.destinationUuid);
+      setValue('requisitionStockOperationUuid', stockRequisitionUuid);
+      setValue('operationTypeUuid', stockOperationType.uuid);
+    }
+  }, [stockOperation, stockOperationItemFormSchema, setValue, items, stockOperationType, stockRequisitionUuid]);
+
+  //   Handle errors encountered
+  useEffect(() => {
+    if (!stockRequisitionUuid)
+      showSnackbar({
+        kind: 'error',
+        title: t('stockIssueError', 'StockIssue error'),
+        subtitle: t('relatedStockRequisitionRequired', 'Related stock requisition Required'),
+      });
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockIssueError', 'StockIssue error'),
+        subtitle: error?.message,
+      });
+    }
+  }, [stockRequisitionUuid, error, t]);
+  return <React.Fragment />;
+};
+
+export default StockIssueFormInitializerWithRelatedRequisitionOperation;

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

@@ -0,0 +1,41 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.grid {
+  margin: layout.$spacing-05 layout.$spacing-05;
+  padding: layout.$spacing-05 0 0 0;
+}
+
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.datePickerInput span,
+.datePickerInput div,
+.datePickerInput input,
+.datePickerInput {
+  min-width: 100%;
+}
+
+.title {
+  @include type.type-style('heading-02');
+  padding: layout.$spacing-03;
+}