Add packaging units widget to enable someone to add packaging units f…

…or stock item (#49) * (feat) Add ability to save packaging unit * Implemented capacity to add packaging units for stock items * Restoring yanr.lock to main branch * Fix lint issues * Upgrade esm-framework version --------- Co-authored-by: Donald Kibet <[email protected]>
openmrs · Dec 15, 2023 · 357169d · 357169d
1 parent 0018e4f
commit 357169d
Show file tree

Hide file tree

Showing 5 changed files with 1,726 additions and 200 deletions.
diff --git a/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx b/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx
@@ -15,10 +15,12 @@ import {
 import PackagingUnitsConceptSelector from "../packaging-units-concept-selector/packaging-units-concept-selector.component";
 import ControlledNumberInput from "../../../core/components/carbon/controlled-number-input/controlled-number-input.component";
 import { Save, TrashCan } from "@carbon/react/icons";
-import { useForm } from "react-hook-form";
+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 { showSnackbar } from "@openmrs/esm-framework";
 
 interface PackagingUnitsProps {
   onSubmit?: () => void;
@@ -28,11 +30,41 @@ interface PackagingUnitsProps {
 const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid }) => {
   const { items, isLoading, tableHeaders, setStockItemUuid } =
     useStockItemPackageUnitsHook();
-
   useEffect(() => {
     setStockItemUuid(stockItemUuid);
   }, [stockItemUuid, setStockItemUuid]);
 
+  const packageUnitForm = useForm<PackageUnitFormData>({
+    defaultValues: {},
+    mode: "all",
+    resolver: zodResolver(packageUnitSchema),
+  });
+
+  const handleSavePackageUnits = () => {
+    const { getValues } = packageUnitForm;
+    const { factor, packagingUomName, packagingUomUuid } = getValues();
+    const payload: StockItemPackagingUOMDTO = {
+      factor: factor,
+      packagingUomUuid,
+      stockItemUuid,
+    };
+    createStockItemPackagingUnit(payload).then(
+      (resp) =>
+        showSnackbar({
+          title: "Package Unit",
+          subtitle: "Package Unit saved successfully",
+          kind: "success",
+        }),
+      (error) => {
+        showSnackbar({
+          title: "Package Unit",
+          subtitle: "Error saving package unit",
+          kind: "error",
+        });
+      }
+    );
+  };
+
   if (isLoading)
     return (
       <DataTableSkeleton
@@ -44,7 +76,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid }) => {
     );
 
   return (
-    <>
+    <FormProvider {...packageUnitForm}>
       <DataTable
         rows={items}
         headers={tableHeaders}
@@ -71,9 +103,17 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid }) => {
                 </TableRow>
               </TableHead>
               <TableBody>
-                {items.map((row: StockItemPackagingUOMDTO) => {
-                  return <PackagingUnitRow row={row} key={row.uuid} />;
-                })}
+                <div style={{ minHeight: "10rem" }}>
+                  {items.length > 0 ? (
+                    <>
+                      {items.map((row: StockItemPackagingUOMDTO) => {
+                        return <PackagingUnitRow row={row} key={row.uuid} />;
+                      })}
+                    </>
+                  ) : (
+                    <PackagingUnitRow row={{}} key={stockItemUuid} />
+                  )}
+                </div>
               </TableBody>
             </Table>
           </TableContainer>
@@ -83,15 +123,13 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid }) => {
         name="save"
         type="submit"
         className="submitButton"
-        onClick={() => {
-          // TODO: Implement Save
-        }}
+        onClick={handleSavePackageUnits}
         kind="primary"
         renderIcon={Save}
       >
         Save
       </Button>
-    </>
+    </FormProvider>
   );
 };
 
@@ -104,21 +142,17 @@ const PackagingUnitRow: React.FC<{
   const {
     control,
     formState: { errors },
-  } = useForm<PackageUnitFormData>({
-    defaultValues: row,
-    mode: "all",
-    resolver: zodResolver(packageUnitSchema),
-  });
-
+  } = useFormContext();
+  errors;
   return (
-    <TableRow key={key}>
+    <TableRow>
       <TableCell>
         <PackagingUnitsConceptSelector
           controllerName="packagingUomUuid"
           name="packagingUomUuid"
           control={control}
           invalid={!!errors.packagingUomUuid}
-          invalidText={errors?.packagingUomUuid?.message}
+          // invalidText={errors?.packagingUomUuid?.message}
         />
       </TableCell>
       <TableCell>
@@ -134,7 +168,7 @@ const PackagingUnitRow: React.FC<{
             control={control}
             id="factor"
             invalid={!!errors.factor}
-            invalidText={errors?.factor?.message}
+            // invalidText={errors?.factor?.message}
           />
           <Button
             type="button"

diff --git a/src/stock-items/add-stock-item/packaging-units/packaging-units.resource.tsx b/src/stock-items/add-stock-item/packaging-units/packaging-units.resource.tsx
@@ -31,13 +31,13 @@ export function useStockItemPackageUnitsHook(v?: ResourceRepresentation) {
   const tableHeaders = useMemo(
     () => [
       {
-        key: "quantity",
-        header: "Quantity",
+        key: "packaging",
+        header: "Packaging Unit",
         styles: { width: "50%" },
       },
       {
-        key: "packaging",
-        header: "Packaging Unit",
+        key: "quantity",
+        header: "Quantity",
         styles: { width: "50%" },
       },
     ],

diff --git a/src/stock-items/stock-items.resource.ts b/src/stock-items/stock-items.resource.ts
@@ -256,7 +256,7 @@ export function updateStockItem(item: StockItemDTO) {
 }
 
 // createStockItemPackagingUnit
-export function createStockItemPackagingUnit(item: StockItemDTO) {
+export function createStockItemPackagingUnit(item: StockItemPackagingUOMDTO) {
   const apiUrl = `ws/rest/v1/stockmanagement/stockitempackaginguom`;
   const abortController = new AbortController();
   return openmrsFetch(apiUrl, {

diff --git a/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx b/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx
@@ -100,7 +100,7 @@ function StockUserRoleScopesItems() {
     });
   }, [items, t]);
 
-  if (isLoading || items.length === 0) {
+  if (isLoading || items?.length === 0) {
     return <DataTableSkeleton role="progressbar" />;
   }
 
@@ -111,7 +111,7 @@ function StockUserRoleScopesItems() {
         <div className="right-filters"></div>
       </div>
       <DataTable
-        rows={tableRows}
+        rows={tableRows ?? []}
         headers={tableHeaders}
         isSortable={true}
         useZebraStyles={true}