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

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

@@ -0,0 +1,243 @@
+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;
+  onNext?: () => void;
+};
+const StockOperationSubmissionFormStep: React.FC<StockOperationSubmissionFormStepProps> = ({
+  onPrevious,
+  stockOperationType,
+  stockOperation,
+  onNext,
+}) => {
+  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>
+          )}
+          {typeof onNext === 'function' && (
+            <Button kind="primary" onClick={onNext}>
+              Next
+            </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;
+}

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

@@ -0,0 +1,211 @@
+import {
+  Button,
+  ButtonSet,
+  Column,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  NumberInput,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DefaultWorkspaceProps, useConfig } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, formatForDatePicker, today } from '../../../constants';
+import { operationFromString, StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+import { BaseStockOperationItemFormData, getStockOperationItemFormSchema } from '../../validation-schema';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import BatchNoSelector from '../input-components/batch-no-selector.component';
+import QtyUomSelector from '../input-components/quantity-uom-selector.component';
+import styles from './stock-item-form.scss';
+import UniqueBatchNoEntryInput from '../input-components/unique-batch-no-entry-input.component';
+import { ConfigObject } from '../../../config-schema';
+
+export interface StockItemFormProps {
+  stockOperationType: StockOperationType;
+  stockOperationItem: BaseStockOperationItemFormData;
+  onSave?: (data: BaseStockOperationItemFormData) => void;
+}
+
+interface Props extends DefaultWorkspaceProps, StockItemFormProps {}
+const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, stockOperationItem, onSave }) => {
+  const operationType = useMemo(() => {
+    return operationFromString(stockOperationType.operationType);
+  }, [stockOperationType]);
+  const formschema = useMemo(() => {
+    return getStockOperationItemFormSchema(operationType);
+  }, [operationType]);
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
+
+  const fields = formschema.keyof().options;
+  const form = useForm<z.infer<typeof formschema>>({
+    resolver: zodResolver(formschema),
+    defaultValues: stockOperationItem,
+    mode: 'all',
+  });
+  const { t } = useTranslation();
+  const { item } = useStockItem(form.getValues('stockItemUuid'));
+  const commonName = useMemo(() => {
+    if (!useItemCommonNameAsDisplay) return;
+    const drugName = item?.drugName ? `(Drug name: ${item.drugName})` : undefined;
+    return `${item?.commonName || t('noCommonNameAvailable', 'No common name available') + (drugName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
+
+  const drugName = useMemo(() => {
+    if (useItemCommonNameAsDisplay) return;
+    const commonName = item?.commonName ? `(Common name: ${item.commonName})` : undefined;
+    return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
+  }, [item, useItemCommonNameAsDisplay, t]);
+
+  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}>
+      <Stack gap={4} className={styles.grid}>
+        <p className={styles.title}>{useItemCommonNameAsDisplay ? commonName : drugName}</p>
+
+        {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
+          fields.includes('batchNo' as any) && (
+            <Column>
+              <Controller
+                control={form.control}
+                defaultValue={stockOperationItem?.batchNo}
+                name={'batchNo' as any}
+                render={({ field, fieldState: { error } }) => (
+                  <UniqueBatchNoEntryInput
+                    defaultValue={field.value}
+                    onValueChange={field.onChange}
+                    stockItemUuid={stockOperationItem.stockItemUuid}
+                    error={error?.message}
+                    stockOperationItemUuid={stockOperationItem.uuid}
+                  />
+                )}
+              />
+            </Column>
+          )}
+
+        {operationTypePermision.requiresBatchUuid && !operationTypePermision.requiresActualBatchInfo && (
+          <Column>
+            <Controller
+              control={form.control}
+              name={'stockBatchUuid' as any}
+              render={({ field, fieldState: { error } }) => (
+                <BatchNoSelector
+                  initialValue={stockOperationItem?.stockBatchUuid}
+                  onValueChange={field.onChange}
+                  stockItemUuid={stockOperationItem.stockItemUuid}
+                  error={error?.message}
+                />
+              )}
+            />
+          </Column>
+        )}
+        {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
+          fields.includes('expiration' as any) && (
+            <Column>
+              <Controller
+                control={form.control}
+                name={'expiration' as any}
+                render={({ field, fieldState: { error } }) => (
+                  <DatePicker
+                    id={`expiration`}
+                    datePickerType="single"
+                    minDate={formatForDatePicker(today())}
+                    locale="en"
+                    className={styles.datePickerInput}
+                    dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                    {...field}
+                    onChange={([newDate]) => {
+                      field.onChange(newDate);
+                    }}
+                  >
+                    <DatePickerInput
+                      autoComplete="off"
+                      id={`expiration-input`}
+                      name="operationDate"
+                      placeholder={DATE_PICKER_FORMAT}
+                      labelText={t('expiriation', 'Expiration Date')}
+                      invalid={error?.message}
+                    />
+                  </DatePicker>
+                )}
+              />
+            </Column>
+          )}
+
+        <Column>
+          <Controller
+            control={form.control}
+            name="quantity"
+            render={({ field, fieldState: { error } }) => (
+              <NumberInput
+                allowEmpty
+                className="small-placeholder-text"
+                disableWheel
+                hideSteppers
+                id={`qty`}
+                {...field}
+                label={t('qty', 'Qty')}
+                invalidText={error?.message}
+                invalid={error?.message}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name={'stockItemPackagingUOMUuid'}
+            render={({ field, fieldState: { error } }) => (
+              <QtyUomSelector
+                stockItemUuid={stockOperationItem?.stockItemUuid}
+                intiallvalue={field.value}
+                error={error?.message}
+                onValueChange={field.onChange}
+              />
+            )}
+          />
+        </Column>
+
+        {operationTypePermision?.canCaptureQuantityPrice && fields.includes('purchasePrice' as any) && (
+          <Column>
+            <Controller
+              control={form.control}
+              name={'purchasePrice' as any}
+              render={({ field, fieldState: { error } }) => (
+                <TextInput
+                  {...field}
+                  labelText={t('purchasePrice', 'Purchase Price')}
+                  invalid={error?.message}
+                  invalidText={error?.message}
+                  id={`purchaseprice`}
+                  placeholder={t('purchasePrice', 'Purchase Price')}
+                />
+              )}
+            />
+          </Column>
+        )}
+      </Stack>
+
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default StockItemForm;