@openmrs/esm-stock-management-app 1.0.1-pre.438 → 1.0.1-pre.444

package/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { showSnackbar } from "@openmrs/esm-framework";
 import { useTranslation } from "react-i18next";
 import { useStockItemPackageUnitsHook } from "./packaging-units.resource";
@@ -21,7 +21,10 @@ import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PackageUnitFormData, packageUnitSchema } from "./validationSchema";
 import { StockItemPackagingUOMDTO } from "../../../core/api/types/stockItem/StockItemPackagingUOM";
-import { createStockItemPackagingUnit } from "../../stock-items.resource";
+import {
+  createStockItemPackagingUnit,
+  updateStockItemPackagingUnit,
+} from "../../stock-items.resource";
 import DeleteModalButton from "./packaging-units-delete-modal-button.component";
 
 import styles from "./packaging-units.scss";
@@ -39,10 +42,28 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({
 }) => {
   const { items, isLoading, setStockItemUuid, mutate } =
     useStockItemPackageUnitsHook();
+
+  const [packagingUnits, setPackagingUnits] =
+    useState<StockItemPackagingUOMDTO[]>(items);
+
+  const [newUnit, setNewUnit] = useState<{
+    factor: number;
+    packagingUomUuid: string;
+    packagingUomName: string;
+  }>({
+    packagingUomUuid: undefined,
+    factor: 0,
+    packagingUomName: "",
+  });
+
   useEffect(() => {
     setStockItemUuid(stockItemUuid);
   }, [stockItemUuid, setStockItemUuid]);
 
+  useEffect(() => {
+    setPackagingUnits(items);
+  }, [items]);
+
   const { t } = useTranslation();
   const tableHeaders = useMemo(
     () => [
@@ -72,40 +93,118 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({
   });
 
   const handleSavePackageUnits = () => {
-    const { getValues, setValue } = packageUnitForm;
-    const { factor, packagingUomUuid } = getValues();
-    const payload: StockItemPackagingUOMDTO = {
-      factor: factor,
-      packagingUomUuid,
-      stockItemUuid,
-    };
-
-    createStockItemPackagingUnit(payload).then(
-      () => {
-        mutate();
-
-        showSnackbar({
-          title: t("savePackingUnitTitle", "Package Unit"),
-          subtitle: t(
-            "savePackingUnitMessage",
-            "Package Unit saved successfully"
-          ),
-          kind: "success",
-        });
-        setValue("factor", 0);
-      },
-      () => {
-        showSnackbar({
-          title: t("savePackagingUnitErrorTitle", "Package Unit"),
-          subtitle: t(
-            "savePackagingUnitErrorMessage",
-            "Error saving package unit"
-          ),
-          kind: "error",
-        });
-      }
+    const { reset } = packageUnitForm;
+
+    const newPayload = newUnit
+      ? {
+          factor: newUnit.factor,
+          packagingUomUuid: newUnit.packagingUomUuid,
+          stockItemUuid,
+        }
+      : null;
+
+    // Filter changed units
+    const updatedUnits = packagingUnits.filter((unit) => {
+      const originalUnit = items.find((item) => item.uuid === unit.uuid);
+      return originalUnit && originalUnit.factor !== unit.factor;
+    });
+
+    // Create new unit
+    const createPromises = newPayload.packagingUomUuid
+      ? createStockItemPackagingUnit(newPayload).then(
+          () => {
+            showSnackbar({
+              title: t("savePackingUnitTitle", "Package Unit"),
+              subtitle: t(
+                "savePackingUnitMessage",
+                "Package Unit saved successfully"
+              ),
+              kind: "success",
+            });
+            setNewUnit({
+              factor: 0,
+              packagingUomUuid: undefined,
+              packagingUomName: "",
+            }); // Reset new unit
+          },
+          () => {
+            showSnackbar({
+              title: t("savePackagingUnitErrorTitle", "Package Unit"),
+              subtitle: t(
+                "savePackagingUnitErrorMessage",
+                "Error saving package unit"
+              ),
+              kind: "error",
+            });
+          }
+        )
+      : Promise.resolve({ status: "no-create" });
+
+    // Update existing units
+    const updatePromises = updatedUnits.map((unit) =>
+      updateStockItemPackagingUnit(unit, unit.uuid).then(
+        () => {
+          showSnackbar({
+            title: t("updatePackingUnitTitle", "Package Unit"),
+            subtitle: t(
+              "updatePackingUnitMessage",
+              "Package Unit {{ name }} updated successfully",
+              { name: unit.packagingUomName }
+            ),
+            kind: "success",
+          });
+        },
+        () => {
+          showSnackbar({
+            title: t("updatePackagingUnitErrorTitle", "Package Unit"),
+            subtitle: t(
+              "updatePackagingUnitErrorMessage",
+              "Error updating package unit {{name}}",
+              { name: unit.packagingUomName }
+            ),
+            kind: "error",
+          });
+        }
+      )
+    );
+
+    // Wait for all requests to complete
+    Promise.all([createPromises, ...updatePromises]).then(() => {
+      mutate();
+      reset();
+      handleTabChange(0);
+    });
+  };
+
+  const handleNewUnitFactorChange = (value: string | number) => {
+    setNewUnit({
+      ...newUnit,
+      factor: Number(value),
+    });
+  };
+
+  const handleNewUnitPackageUnitChange = (unit: {
+    uuid: string;
+    display: string;
+  }) => {
+    setNewUnit({
+      ...newUnit,
+      packagingUomUuid: unit.uuid,
+      packagingUomName: unit.display,
+    });
+  };
+
+  const onFactorFieldUpdate = (
+    row: StockItemPackagingUOMDTO,
+    value: string | number
+  ) => {
+    const qtyValue = typeof value === "number" ? value : parseFloat(value);
+
+    setPackagingUnits((prevState) =>
+      prevState.map((item) =>
+        item.uuid === row.uuid ? { ...item, factor: qtyValue } : item
+      )
     );
-    handleTabChange(0);
   };
 
   if (isLoading)
@@ -147,25 +246,38 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({
               </TableHead>
               <TableBody className={styles.packingTableBody}>
                 {items?.map((row: StockItemPackagingUOMDTO, index) => (
-                  <PackagingUnitRow row={row} key={`${index}-${row?.uuid}`} />
+                  <PackagingUnitRow
+                    row={row}
+                    id={`${index}-${row?.uuid}`}
+                    onChange={(value) => onFactorFieldUpdate(row, value)}
+                  />
                 ))}
-                <PackagingUnitRow row={{}} key="bottom-row" isEditing />
+                <PackagingUnitRow
+                  row={newUnit || {}}
+                  id="new-package-unit"
+                  isEditing
+                  onChangePackageUnit={(value) =>
+                    handleNewUnitPackageUnitChange(value)
+                  }
+                  onChange={(value) => handleNewUnitFactorChange(value)}
+                />
               </TableBody>
             </Table>
           </TableContainer>
         )}
       />
-
-      <Button
-        name="save"
-        type="submit"
-        className="submitButton"
-        onClick={handleSavePackageUnits}
-        kind="primary"
-        renderIcon={Save}
-      >
-        {t("save", "Save")}
-      </Button>
+      <div className={styles.packageUnitsBtn}>
+        <Button
+          name="save"
+          type="submit"
+          className="submitButton"
+          onClick={handleSavePackageUnits}
+          kind="primary"
+          renderIcon={Save}
+        >
+          {t("save", "Save")}
+        </Button>
+      </div>
     </FormProvider>
   );
 };
@@ -175,8 +287,10 @@ export default PackagingUnits;
 const PackagingUnitRow: React.FC<{
   isEditing?: boolean;
   row: StockItemPackagingUOMDTO;
-  key?: string;
-}> = ({ isEditing, row, key }) => {
+  id?: string;
+  onChange?: (value: string | number) => void;
+  onChangePackageUnit?: (value: { uuid: string; display: string }) => void;
+}> = ({ isEditing, row, id, onChange, onChangePackageUnit }) => {
   const {
     control,
     formState: { errors },
@@ -194,6 +308,7 @@ const PackagingUnitRow: React.FC<{
               name="packagingUomUuid"
               placeholder="Filter"
               control={control}
+              onPackageUnitChange={(concept) => onChangePackageUnit(concept)}
               invalid={!!errors.packagingUomUuid}
             />
           ) : (
@@ -202,20 +317,20 @@ const PackagingUnitRow: React.FC<{
           )}
         </TableCell>
         <TableCell>
-          <div className={styles.packingTableCell}>
-            <ControlledNumberInput
-              row={row}
-              controllerName="factor"
-              name="factor"
-              min={minPackagingQuantity}
-              control={control}
-              id={`${row.uuid}-${key}`}
-              invalid={!!errors.factor}
-              hideSteppers={true}
-            />
-
-            <DeleteModalButton closeModal={() => true} row={row} />
-          </div>
+          <ControlledNumberInput
+            row={row}
+            controllerName="factor"
+            name="factor"
+            min={minPackagingQuantity}
+            control={control}
+            id={id}
+            invalid={!!errors.factor}
+            hideSteppers={true}
+            onChange={(e, state) => onChange(state.value)}
+          />
+        </TableCell>
+        <TableCell>
+          <DeleteModalButton closeModal={() => true} row={row} />
         </TableCell>
       </TableRow>
     </>

package/src/stock-items/add-stock-item/packaging-units/packaging-units.scss

@@ -1,44 +1,56 @@
 @use '@carbon/styles/scss/colors';
 @use "@carbon/styles/scss/spacing";
 @use "@carbon/styles/scss/type";
+
 .packingTable {
-    min-height: 15rem;
-    display: block;
+  min-height: 15rem;
+  display: block;
 }
 
 .packingTableCell {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .packagingTableBody {
-    min-height: spacing.$spacing-13;
+  min-height: spacing.$spacing-13;
 }
 
 .packagingTableContainer {
-    min-height: 15rem;
-    display: block;
+  padding-bottom: 1rem;
+  min-height: 15rem;
+  display: block;
+
+  :global(.cds--data-table-content) {
+    overflow-x: visible;
+  }
 }
 
 .searchAndSave {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    .submitButton {
-        margin-top: 1rem;
-    }
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  .submitButton {
+    margin-top: 1rem;
+  }
 }
 
 .deleteModal {
-     :global(.cds--modal-container.cds--modal-container--sm) {
-         :global(.cds--modal-content) {
-             :global(.cds--form-item) {
-                margin-top: 1rem;
-            }
-        }
+  :global(.cds--modal-container.cds--modal-container--sm) {
+    :global(.cds--modal-content) {
+      :global(.cds--form-item) {
+        margin-top: 1rem;
+      }
     }
+  }
+}
+
+.packageUnitsBtn {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 2rem;
 }
 
 :global(cds--form-item) {
-    margin-top: 1rem;
-}
+  margin-top: 1rem;
+}

package/src/stock-items/add-stock-item/packaging-units-concept-selector/packaging-units-concept-selector.component.tsx

@@ -9,7 +9,7 @@ import { type ConfigObject } from "../../../config-schema";
 
 interface PackagingUnitsConceptSelectorProps<T> {
   row?: StockItemPackagingUOMDTO;
-  onPackageUnitChange?: (unit: Concept) => void;
+  onPackageUnitChange?: (unit: { uuid: string; display: string }) => void;
   title?: string;
   placeholder?: string;
   invalid?: boolean;
@@ -62,7 +62,9 @@ const PackagingUnitsConceptSelector = <T,>(
                 ]
               : dispensingUnits || []
           }
-          onChange={(data: { selectedItem: Concept }) => {
+          onChange={(data: {
+            selectedItem: { uuid: string; display: string };
+          }) => {
             props.onPackageUnitChange?.(data?.selectedItem);
             onChange(data?.selectedItem?.uuid || ""); // Provide a default value if needed
           }}

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx

@@ -96,6 +96,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
             controllerName="drugUuid"
             control={control}
             title={t("pleaseSpecify", "Please specify:")}
+            placeholder="Choose a drug"
             invalid={!!errors.drugUuid}
             invalidText={errors.drugUuid && errors?.drugUuid?.message}
           />
@@ -105,7 +106,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
             name="conceptUuid"
             controllerName="conceptUuid"
             control={control}
-            title={t("pleaseSpecify", "Please specify:")}
+            title={t("pleaseSpecify", "Please specify") + ":"}
             placeholder={t("chooseAnItem", "Choose an item")}
             invalid={!!errors.drugUuid}
             invalidText={errors.drugUuid && errors?.drugUuid?.message}
@@ -119,7 +120,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
           maxLength={255}
           size={"md"}
           value={`${model?.commonName ?? ""}`}
-          labelText={t("commonName", "Common name:")}
+          labelText={t("commonName", "Common name") + ":"}
           invalid={!!errors.commonName}
           invalidText={errors.commonName && errors?.commonName?.message}
         />
@@ -130,7 +131,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
           control={control}
           controllerName="acronym"
           size={"md"}
-          labelText={t("abbreviation", "Abbreviation:")}
+          labelText={t("abbreviation", "Abbreviation") + ":"}
           invalid={!!errors.acronym}
           invalidText={errors.acronym && errors?.acronym?.message}
         />
@@ -200,7 +201,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
           name="categoryUuid"
           controllerName="categoryUuid"
           control={control}
-          title={t("category:", "Category:")}
+          title={t("category:", "Category") + ":"}
           placeholder={t("chooseACategory", "Choose a category")}
           invalid={!!errors.categoryUuid}
           invalidText={errors.categoryUuid && errors?.categoryUuid?.message}
@@ -210,7 +211,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
             name="dispensingUnitUuid"
             controllerName="dispensingUnitUuid"
             control={control}
-            title={t("dispensingUnit", "Dispensing Unit:")}
+            title={t("dispensingUnit", "Dispensing Unit") + ":"}
             placeholder={t("dispensingUnitHolder", "Choose a dispensing unit")}
             invalid={!!errors.dispensingUnitUuid}
             invalidText={

package/src/stock-items/stock-items.resource.ts

@@ -90,6 +90,12 @@ export function useStockItems(filter: StockItemFilter) {
   };
 }
 
+// fetch filtered stock item
+export function fetchStockItem(drugUuid: string) {
+  const apiUrl = `${restBaseUrl}/stockmanagement/stockitem?drugUuid=${drugUuid}&limit=1`;
+  return openmrsFetch(apiUrl).then(({ data }) => data);
+}
+
 // getStockItemTransactions
 export function useStockItemTransactions(filter: StockItemTransactionFilter) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockitemtransaction${toQueryParams(
@@ -282,7 +288,10 @@ export function createStockItemPackagingUnit(item: StockItemPackagingUOMDTO) {
 }
 
 // updateStockItemPackagingUnit
-export function updateStockItemPackagingUnit(item: StockItemDTO, uuid: string) {
+export function updateStockItemPackagingUnit(
+  item: StockItemPackagingUOMDTO,
+  uuid: string
+) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockitempackaginguom/${uuid}`;
   const abortController = new AbortController();
   return openmrsFetch(apiUrl, {