@openmrs/esm-stock-management-app 1.0.1-pre.327

package/src/stock-operations/add-stock-operation/stock-items-addition-row.component.tsx

@@ -0,0 +1,347 @@
+import React, { ChangeEvent, useState } from "react";
+import styles from "./stock-items-addition-row.scss";
+import { isDesktop } from "@openmrs/esm-framework";
+import {
+  Button,
+  DatePicker,
+  DatePickerInput,
+  Link,
+  NumberInput,
+  TableCell,
+  TableRow,
+  TextInput,
+} from "@carbon/react";
+import { TrashCan } from "@carbon/react/icons";
+import { StockOperationItemFormData } from "../validation-schema";
+import StockItemSelector from "../stock-item-selector/stock-item-selector.component";
+import {
+  Control,
+  FieldArrayWithId,
+  FieldErrors,
+  UseFieldArrayAppend,
+  UseFieldArrayRemove,
+  UseFormSetValue,
+} from "react-hook-form";
+import {
+  DATE_PICKER_CONTROL_FORMAT,
+  DATE_PICKER_FORMAT,
+  URL_STOCK_ITEM,
+  formatForDatePicker,
+  today,
+} from "../../constants";
+import { StockBatchDTO } from "../../core/api/types/stockItem/StockBatchDTO";
+import { StockItemPackagingUOMDTO } from "../../core/api/types/stockItem/StockItemPackagingUOM";
+import { StockItemInventory } from "../../core/api/types/stockItem/StockItemInventory";
+import { StockOperationItemDTO } from "../../core/api/types/stockOperation/StockOperationItemDTO";
+import { StockItemDTO } from "../../core/api/types/stockItem/StockItem";
+import QtyUomSelector from "../qty-uom-selector/qty-uom-selector.component";
+import BatchNoSelector from "../batch-no-selector/batch-no-selector.component";
+
+interface StockItemsAdditionRowProps {
+  canEdit?: boolean;
+  rows: StockOperationItemFormData[];
+  showQuantityRequested?: boolean;
+  requiresActualBatchInformation?: boolean;
+  requiresBatchUuid?: boolean;
+  canUpdateBatchInformation?: boolean;
+  canCapturePurchasePrice?: boolean;
+  batchNos?: {
+    [key: string]: StockBatchDTO[];
+  };
+  itemUoM?: {
+    [key: string]: StockItemPackagingUOMDTO[];
+  };
+  batchBalance?: {
+    [key: string]: StockItemInventory;
+  };
+  control: Control<{
+    stockItems: StockOperationItemDTO[];
+  }>;
+  setValue: UseFormSetValue<{
+    stockItems: StockOperationItemDTO[];
+  }>;
+  errors: FieldErrors<{
+    stockItems: StockOperationItemDTO[];
+  }>;
+  remove: UseFieldArrayRemove;
+  append: UseFieldArrayAppend<
+    {
+      stockItems: StockOperationItemDTO[];
+    },
+    "stockItems"
+  >;
+  fields: FieldArrayWithId<
+    {
+      stockItems: StockOperationItemDTO[];
+    },
+    "stockItems"
+  >[];
+}
+
+const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
+  canEdit,
+  showQuantityRequested,
+  requiresActualBatchInformation,
+  requiresBatchUuid,
+  canUpdateBatchInformation,
+  canCapturePurchasePrice,
+  batchBalance,
+  control,
+  setValue,
+  errors,
+  remove,
+  fields,
+}) => {
+  const [stockItemUuid, setStockItemUuid] = useState<
+    string | null | undefined
+  >();
+  const [stockItemExpiry, setStockItemExpiy] = useState<
+    Date | null | undefined
+  >();
+
+  const handleStockItemChange = (index: number, data?: StockItemDTO) => {
+    if (!data) return;
+    const item = fields[index];
+    if (item) {
+      item.stockItemName =
+        (data?.drugName
+          ? `${data?.drugName}${
+              data?.commonName ?? data?.conceptName
+                ? ` (${data?.commonName ?? data?.conceptName})`
+                : ""
+            }`
+          : null) ?? data?.conceptName;
+
+      const configureExpiration = data?.hasExpiration ?? true;
+      item.hasExpiration = configureExpiration;
+      if (!configureExpiration) {
+        item.expiration = null;
+      }
+
+      item.stockItemUuid = data?.uuid;
+
+      item.stockItemPackagingUOMUuid = null;
+      item.stockItemPackagingUOMName = null;
+
+      item.stockBatchUuid = null;
+      if (requiresBatchUuid) {
+        // handleStockBatchSearch(row, "", data.selectedItem?.uuid);
+      }
+    }
+  };
+
+  return (
+    <>
+      {fields?.map((row, index) => {
+        const stockItemId = `stockItems.${index}.stockItemUuid`;
+        return (
+          <TableRow
+            className={isDesktop ? styles.desktopRow : styles.tabletRow}
+            key={row?.uuid}
+          >
+            <TableCell>
+              {canEdit && row?.uuid.startsWith("new-item") && (
+                <StockItemSelector
+                  placeholder="Select an item"
+                  controllerName={`stockItems.${index}.stockItemUuid`}
+                  name={stockItemId}
+                  control={control as unknown as Control}
+                  invalid={!!errors?.stockItems?.[index]?.stockItemUuid}
+                  onStockItemChanged={(item) => {
+                    handleStockItemChange(index, item);
+                    setValue(
+                      `stockItems.${index}.packagingUnits`,
+                      item?.packagingUnits
+                    );
+                    setStockItemUuid(item?.uuid ?? "");
+                  }}
+                />
+              )}
+              {(!canEdit || !row.uuid.startsWith("new-item")) && (
+                <Link
+                  target={"_blank"}
+                  to={URL_STOCK_ITEM(row?.stockItemUuid)}
+                >{`${row?.stockItemName}`}</Link>
+              )}
+            </TableCell>
+            {showQuantityRequested && (
+              <TableCell>
+                {row?.quantityRequested?.toLocaleString() ?? ""}{" "}
+                {row?.quantityRequestedPackagingUOMName ?? ""}
+              </TableCell>
+            )}
+            {(requiresActualBatchInformation || requiresBatchUuid) && (
+              <TableCell>
+                {requiresActualBatchInformation &&
+                  (canEdit ||
+                    (canUpdateBatchInformation &&
+                      row?.permission?.canUpdateBatchInformation)) && (
+                    <TextInput
+                      size="sm"
+                      maxLength={50}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        setValue(`stockItems.${index}.batchNo`, e.target.value)
+                      }
+                      defaultValue={row.batchNo}
+                      invalidText=""
+                      invalid={errors?.stockItems?.[index]?.batchNo}
+                    />
+                  )}
+                {requiresBatchUuid &&
+                  !requiresActualBatchInformation &&
+                  canEdit && (
+                    <BatchNoSelector
+                      batchUuid={row?.stockBatchUuid}
+                      onBatchNoChanged={(item) => {
+                        setValue(`stockItems.${index}.batchNo`, item?.batchNo);
+                        setValue(
+                          `stockItems.${index}.expiration`,
+                          item?.expiration
+                        );
+                        setStockItemExpiy(item?.expiration);
+                      }}
+                      placeholder={"Filter..."}
+                      invalid={!!errors?.stockItems?.[index]?.stockBatchUuid}
+                      control={control as unknown as Control}
+                      controllerName={`stockItems.${index}.stockBatchUuid`}
+                      name={`stockItems.${index}.stockBatchUuid`}
+                      stockItemUuid={row.stockItemUuid}
+                    />
+                  )}
+                {!(
+                  canUpdateBatchInformation &&
+                  row?.permission?.canUpdateBatchInformation
+                ) &&
+                  !canEdit &&
+                  row?.batchNo}
+              </TableCell>
+            )}
+            {(requiresActualBatchInformation || requiresBatchUuid) && (
+              <TableCell>
+                {(canEdit ||
+                  (canUpdateBatchInformation &&
+                    row?.permission?.canUpdateBatchInformation)) &&
+                  requiresActualBatchInformation && (
+                    <DatePicker
+                      id={`expiration-${row.uuid}`}
+                      datePickerType="single"
+                      minDate={formatForDatePicker(today())}
+                      locale="en"
+                      dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                      onChange={([newDate]) => {
+                        setValue(`stockItems.${index}.expiration`, newDate);
+                      }}
+                    >
+                      <DatePickerInput
+                        size="sm"
+                        autoComplete="off"
+                        id={`expiration-input-${row.uuid}`}
+                        name="operationDate"
+                        placeholder={DATE_PICKER_FORMAT}
+                        defaultValue={formatForDatePicker(row?.expiration)}
+                        invalid={!!errors?.stockItems?.[index]?.expiration}
+                      />
+                    </DatePicker>
+                  )}
+                {((!(
+                  canUpdateBatchInformation &&
+                  row?.permission?.canUpdateBatchInformation
+                ) &&
+                  !canEdit) ||
+                  requiresBatchUuid) &&
+                  formatForDatePicker(row.expiration)}
+              </TableCell>
+            )}
+            <TableCell>
+              {canEdit && (
+                <NumberInput
+                  className="small-placeholder-text"
+                  size="sm"
+                  id={`qty-${row?.uuid}`}
+                  allowEmpty={true}
+                  onChange={(e: any) =>
+                    setValue(`stockItems.${index}.quantity`, e?.target?.value)
+                  }
+                  value={row?.quantity ?? ""}
+                  invalidText={errors?.stockItems?.[index]?.quantity?.message}
+                  placeholder={
+                    requiresBatchUuid &&
+                    !requiresActualBatchInformation &&
+                    row?.stockBatchUuid in batchBalance
+                      ? `Bal: ${
+                          batchBalance[
+                            row?.stockBatchUuid
+                          ]?.quantity?.toLocaleString() ?? ""
+                        } ${
+                          batchBalance[row?.stockBatchUuid]?.quantityUoM ?? ""
+                        }`
+                      : ""
+                  }
+                  invalid={!!errors?.stockItems?.[index]?.quantity}
+                />
+              )}
+              {!canEdit && row?.quantity?.toLocaleString()}
+            </TableCell>
+            <TableCell>
+              {canEdit && (
+                <QtyUomSelector
+                  stockItemUuid={row.stockItemUuid}
+                  onStockPackageChanged={(selectedItem) => {
+                    setValue(
+                      `stockItems.${index}.stockItemPackagingUOMUuid`,
+                      selectedItem?.uuid
+                    );
+                  }}
+                  placeholder={"Filter..."}
+                  invalid={
+                    !!errors?.stockItems?.[index]?.stockItemPackagingUOMUuid
+                  }
+                  control={control as unknown as Control}
+                  controllerName={`stockItems.${index}.stockItemPackagingUOMUuid`}
+                  name={`stockItems.${index}.stockItemPackagingUOMUuid`}
+                />
+              )}
+              {!canEdit && row?.stockItemPackagingUOMName}
+            </TableCell>
+            {canCapturePurchasePrice && (
+              <TableCell>
+                {canEdit && (
+                  <NumberInput
+                    size="sm"
+                    invalid={!!errors?.stockItems?.[index]?.purchasePrice}
+                    invalidText=""
+                    id={`purchaseprice-${row.uuid}`}
+                    allowEmpty={true}
+                    onChange={(e: any) =>
+                      setValue(
+                        `stockItems.${index}.purchasePrice`,
+                        e?.target?.value
+                      )
+                    }
+                    value={row?.purchasePrice ?? ""}
+                    title=""
+                  />
+                )}
+                {!canEdit && row?.purchasePrice?.toLocaleString()}
+              </TableCell>
+            )}
+            {canEdit && (
+              <TableCell>
+                <Button
+                  type="button"
+                  size="sm"
+                  className="submitButton clear-padding-margin"
+                  iconDescription={"Delete"}
+                  kind="ghost"
+                  renderIcon={TrashCan}
+                  onClick={() => remove(index)}
+                />
+              </TableCell>
+            )}
+          </TableRow>
+        );
+      })}
+    </>
+  );
+};
+export default StockItemsAdditionRow;

package/src/stock-operations/add-stock-operation/stock-items-addition-row.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { render, cleanup } from "@testing-library/react";
+import StockItemsAdditionRow from "./stock-items-addition-row.component";
+
+describe("Test the stock items addition row", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<StockItemsAdditionRow />);
+  });
+});

package/src/stock-operations/add-stock-operation/stock-items-addition.component.scss

@@ -0,0 +1,5 @@
+.tableContainer{
+  :global(.cds--data-table-content){
+    height: calc(100vh - 150px);
+  }
+}

package/src/stock-operations/add-stock-operation/stock-items-addition.component.tsx

@@ -0,0 +1,272 @@
+import React, { useEffect, useState } from "react";
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+import { SaveStockOperation } from "../../stock-items/types";
+import { StockOperationType } from "../../core/api/types/stockOperation/StockOperationType";
+import { InitializeResult } from "./types";
+import {
+  Button,
+  DataTable,
+  InlineLoading,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@carbon/react";
+import { isDesktop } from "@openmrs/esm-framework";
+import { StockOperationItemDTO } from "../../core/api/types/stockOperation/StockOperationItemDTO";
+import { getStockOperationUniqueId } from "../stock-operation.utils";
+import { useTranslation } from "react-i18next";
+import { useFieldArray, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useValidationSchema } from "./validationSchema";
+import StockItemsAdditionRow from "./stock-items-addition-row.component";
+import { Add, ArrowRight } from "@carbon/react/icons";
+import styles from "./stock-items-addition.component.scss";
+import { errorAlert } from "../../core/utils/alert";
+import { useStockOperationContext } from "./stock-operation-context/useStockOperationContext";
+
+interface StockItemsAdditionProps {
+  isEditing?: boolean;
+  canEdit?: boolean;
+  model?: StockOperationDTO;
+  onSave?: SaveStockOperation;
+  operation: StockOperationType;
+  setup: InitializeResult;
+}
+
+const StockItemsAddition: React.FC<StockItemsAdditionProps> = ({
+  setup: {
+    hasQtyRequested: showQuantityRequested,
+    requiresBatchUuid,
+    requiresActualBatchInfo: requiresActualBatchInformation,
+    canCaptureQuantityPrice,
+    batchBalance,
+    batchNos,
+    canUpdateItemsBatchInformation: canUpdateBatchInformation,
+    itemUoM,
+  },
+  canEdit = true,
+  model,
+  onSave,
+  operation,
+}) => {
+  const { t } = useTranslation();
+  const { operationType } = operation ?? {};
+  const { formContext } = useStockOperationContext();
+  const validationSchema = useValidationSchema(operationType);
+  const handleSave = async (item: { stockItems: StockOperationItemDTO[] }) => {
+    if (item.stockItems.length == 0) {
+      errorAlert(
+        "No stock items",
+        "You haven't added any stock items, tap the add button to add some."
+      );
+      return;
+    }
+
+    // const data = Object.assign(model, item);
+    model.stockOperationItems = item?.stockItems;
+    await onSave?.(model);
+  };
+
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(validationSchema),
+    defaultValues: {
+      stockItems: model?.stockOperationItems ?? [
+        { uuid: `new-item-1`, id: `new-item-1` },
+      ],
+    },
+    mode: "onSubmit",
+  });
+
+  const [isSaving] = useState(false);
+
+  const { fields, append, remove } = useFieldArray({
+    name: "stockItems",
+    control,
+  });
+
+  useEffect(() => {
+    if (formContext?.stockItems) {
+      const stockItems =
+        formContext?.stockItems as Array<StockOperationItemDTO>;
+      stockItems?.forEach((item) => append(item));
+    }
+  }, [append, formContext?.stockItems]);
+
+  const headers = [
+    {
+      key: "item",
+      header: t("item", "Item"),
+      styles: { width: "40% !important" },
+    },
+    ...(showQuantityRequested
+      ? [
+          {
+            key: "quantityrequested",
+            header: t("quantityRequested", "Quantity Requested"),
+          },
+        ]
+      : []),
+    ...(requiresBatchUuid || requiresActualBatchInformation
+      ? [
+          {
+            key: "batch",
+            header: t("batchNo", "Batch No"),
+            styles: { width: "15% !important" },
+          },
+        ]
+      : []),
+    ...(requiresActualBatchInformation
+      ? [
+          {
+            key: "expiry",
+            header: t("expiry", "Expiry"),
+          },
+        ]
+      : []),
+    ...(requiresBatchUuid
+      ? [
+          {
+            key: "expiry",
+            header: t("expiry", "Expiry"),
+          },
+        ]
+      : []),
+
+    {
+      key: "quantity",
+      header: showQuantityRequested
+        ? t("qtyIssued", "Qty Issued")
+        : t("qty", "Qty"),
+    },
+    {
+      key: "quantityuom",
+      header: t("quantityUom", "Qty UoM"),
+    },
+    ...(canCaptureQuantityPrice
+      ? [
+          {
+            key: "purchaseprice",
+            header: t("purchasePrice", "Purchase Price"),
+          },
+        ]
+      : []),
+  ];
+
+  const addNewItem = () => {
+    const itemId = `new-item-${getStockOperationUniqueId()}`;
+    append({ uuid: itemId, id: itemId });
+  };
+
+  return (
+    <div style={{ margin: "10px" }}>
+      <div className={styles.tableContainer}>
+        <DataTable
+          rows={
+            model?.stockOperationItems ?? [
+              { uuid: `new-item-1`, id: `new-item-1` },
+            ]
+          }
+          headers={headers}
+          isSortable={false}
+          useZebraStyles={true}
+          styles={{
+            width: "100%",
+          }}
+          render={({ headers, getHeaderProps, getTableProps }) => (
+            <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>
+                    ))}
+                    {canEdit && (
+                      <TableHeader
+                        style={{
+                          width: "3% !important",
+                        }}
+                      >
+                        <div
+                          style={{
+                            width: "3% !important",
+                            display: "flex",
+                            flexDirection: "row",
+                            gap: "8px",
+                          }}
+                        >
+                          <Button
+                            renderIcon={Add}
+                            onClick={addNewItem}
+                            hasIconOnly
+                          ></Button>
+                          <Button
+                            name="save"
+                            type="button"
+                            className="submitButton"
+                            onClick={() => handleSubmit(handleSave)()}
+                            kind="primary"
+                            renderIcon={ArrowRight}
+                          >
+                            {isSaving ? <InlineLoading /> : t("next", "Next")}
+                          </Button>
+                        </div>
+                      </TableHeader>
+                    )}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  <StockItemsAdditionRow
+                    rows={
+                      model?.stockOperationItems ?? [
+                        { uuid: `new-item-1`, id: `new-item-1` },
+                      ]
+                    }
+                    batchBalance={batchBalance}
+                    batchNos={batchNos}
+                    control={control}
+                    setValue={setValue}
+                    errors={errors}
+                    remove={remove}
+                    append={append}
+                    canEdit={canEdit}
+                    showQuantityRequested={showQuantityRequested}
+                    requiresActualBatchInformation={
+                      requiresActualBatchInformation
+                    }
+                    requiresBatchUuid={requiresBatchUuid}
+                    canUpdateBatchInformation={canUpdateBatchInformation}
+                    canCapturePurchasePrice={canCaptureQuantityPrice}
+                    itemUoM={itemUoM}
+                    fields={fields}
+                  />{" "}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        ></DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default StockItemsAddition;

package/src/stock-operations/add-stock-operation/stock-operation-context/useStockOperationContext.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useContext, useState } from "react";
+
+type StockOperationShape = {
+  formContext: Record<string, unknown>;
+  setFormContext: (formValue) => void;
+};
+
+const StockOperationContext = createContext<StockOperationShape>(null);
+
+export const useStockOperationContext = () => useContext(StockOperationContext);
+
+export const StockOperation: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [formContext, setFormContext] = useState<StockOperationShape>(null);
+  const value = { formContext, setFormContext };
+  return (
+    <StockOperationContext.Provider value={value}>
+      {children}
+    </StockOperationContext.Provider>
+  );
+};