@openmrs/esm-stock-management-app 1.0.1-pre.543 → 1.0.1-pre.554

package/src/stock-operations/stock-operations-table.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { useStockOperationPages } from "./stock-operations-table.resource";
 import { ResourceRepresentation } from "../core/api/api";
 import {
@@ -30,10 +30,10 @@ import {
   DatePicker,
   TableToolbarMenu,
   TableToolbarAction,
+  InlineLoading,
 } from "@carbon/react";
 import { ArrowRight } from "@carbon/react/icons";
 import { formatDisplayDate } from "../core/utils/datetimeUtils";
-import styles from "../stock-items/stock-items-table.scss";
 import {
   StockOperationStatusCancelled,
   StockOperationStatusNew,
@@ -43,8 +43,8 @@ import {
 import {
   isDesktop,
   restBaseUrl,
-  showModal,
   useConfig,
+  showModal,
 } from "@openmrs/esm-framework";
 import StockOperationTypesSelector from "./stock-operation-types-selector/stock-operation-types-selector.component";
 import { launchAddOrEditDialog } from "./stock-operation.utils";
@@ -59,6 +59,9 @@ import {
   StockFilters,
 } from "../constants";
 import { handleMutate } from "../utils";
+
+import styles from "./stock-operations-table.scss";
+
 interface StockOperationsTableProps {
   status?: string;
 }
@@ -95,6 +98,12 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     []
   );
 
+  const [selectedFromDate, setSelectedFromDate] = useState(null);
+  const [selectedToDate, setSelectedToDate] = useState(null);
+  const [selectedSources, setSelectedSources] = useState<string[]>([]);
+  const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
+  const [selectedOperations, setSelectedOperations] = useState<string[]>([]);
+
   const {
     items,
     tableHeaders,
@@ -108,17 +117,24 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   } = useStockOperationPages({
     v: ResourceRepresentation.Full,
     totalCount: true,
+    operationDateMin: selectedFromDate?.toISOString(),
+    operationDateMax: selectedToDate?.toISOString(),
+    status: selectedStatus.join(","),
+    sourceTypeUuid: selectedSources.join(","),
+    operationTypeUuid: selectedOperations.join(","),
   });
 
-  const [filteredItems, setFilteredItems] = useState(items);
-  const [selectedFromDate, setSelectedFromDate] = useState(null);
-  const [selectedToDate, setSelectedToDate] = useState(null);
-  const [selectedSources, setSelectedSources] = useState<string[]>([]);
-  const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
-  const [selectedOperations, setSelectedOperations] = useState<string[]>([]);
+  const filterApplied =
+    selectedFromDate ||
+    selectedToDate ||
+    selectedSources.length ||
+    selectedStatus.length ||
+    selectedOperations.length;
+
   const config = useConfig();
 
   let operations: StockOperationType[] | null | undefined;
+
   const handleOnComplete = () => {
     const dispose = showModal("stock-operation-dialog", {
       title: "complete",
@@ -127,19 +143,6 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
   };
 
-  useEffect(() => {
-    filterItems();
-  }, [
-    selectedFromDate,
-    selectedToDate,
-    selectedSources,
-    selectedStatus,
-    selectedOperations,
-    currentPage,
-    currentPageSize,
-    items,
-  ]);
-
   const handleOnFilterChange = useCallback((selectedItems, filterType) => {
     if (filterType === StockFilters.SOURCES) {
       setSelectedSources(selectedItems);
@@ -165,51 +168,15 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     }
   };
 
-  const filterItems = () => {
-    let filtered = items;
-
-    if (selectedSources.length > 0) {
-      filtered = filtered.filter((row) =>
-        selectedSources.includes(row.sourceName)
-      );
-    }
-    if (selectedOperations.length > 0) {
-      filtered = filtered.filter((row) =>
-        selectedOperations.includes(row.operationTypeName)
-      );
-    }
-    if (selectedStatus.length > 0) {
-      filtered = filtered.filter((row) => selectedStatus.includes(row.status));
-    }
-    if (selectedFromDate && selectedToDate) {
-      filtered = filtered.filter((row) => {
-        const itemDate = new Date(row.operationDate);
-        return itemDate >= selectedFromDate && itemDate <= selectedToDate;
-      });
-    } else if (selectedFromDate) {
-      filtered = filtered.filter((row) => {
-        const itemDate = new Date(row.operationDate);
-        return itemDate >= selectedFromDate;
-      });
-    } else if (selectedToDate) {
-      filtered = filtered.filter((row) => {
-        const itemDate = new Date(row.operationDate);
-        return itemDate <= selectedToDate;
-      });
-    }
-
-    setFilteredItems(filtered);
-  };
-
   const tableRows = useMemo(() => {
-    return filteredItems?.map((stockOperation, index) => ({
+    return items?.map((stockOperation, index) => ({
       ...stockOperation,
       id: stockOperation?.uuid,
       key: `key-${stockOperation?.uuid}`,
       operationTypeName: `${stockOperation?.operationTypeName}`,
       operationNumber: (
         <EditStockOperationActionMenu
-          model={filteredItems[index]}
+          model={items[index]}
           operations={operations}
         />
       ),
@@ -348,7 +315,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
             onClick={() => {
               launchAddOrEditDialog(
                 t,
-                filteredItems[index],
+                items[index],
                 true,
                 operation,
                 operations,
@@ -359,9 +326,9 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         </OverflowMenu>
       ),
     }));
-  }, [handleOnComplete, filteredItems, operation, operations, t]);
+  }, [items, operation, operations, t]);
 
-  if (isLoading) {
+  if (isLoading && !filterApplied) {
     return (
       <DataTableSkeleton
         className={styles.dataTableSkeleton}
@@ -531,47 +498,39 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                           <StructuredListBody>
                             <StructuredListRow>
                               <StructuredListCell noWrap>
-                                {filteredItems[index]?.dateCreated
-                                  ? formatDisplayDate(
-                                      filteredItems[index]?.dateCreated
-                                    )
+                                {items[index]?.dateCreated
+                                  ? formatDisplayDate(items[index]?.dateCreated)
                                   : ""}
                                 &nbsp;
-                                {filteredItems[index]?.dateCreated ? "By" : ""}
+                                {items[index]?.dateCreated ? "By" : ""}
                                 &nbsp;
-                                {filteredItems[index]?.dateCreated
-                                  ? filteredItems[index]?.creatorFamilyName
+                                {items[index]?.dateCreated
+                                  ? items[index]?.creatorFamilyName
                                   : ""}
                               </StructuredListCell>
                               <StructuredListCell>
-                                {filteredItems[index]?.completedDate
+                                {items[index]?.completedDate
                                   ? formatDisplayDate(
-                                      filteredItems[index]?.completedDate
+                                      items[index]?.completedDate
                                     )
                                   : ""}
                                 &nbsp;
-                                {filteredItems[index]?.completedDate
-                                  ? "By"
-                                  : ""}
+                                {items[index]?.completedDate ? "By" : ""}
                                 &nbsp;
-                                {filteredItems[index]?.completedDate
-                                  ? filteredItems[index]?.creatorFamilyName
+                                {items[index]?.completedDate
+                                  ? items[index]?.creatorFamilyName
                                   : ""}
                               </StructuredListCell>
                               <StructuredListCell>
-                                {filteredItems[index]?.stockOperationItems
-                                  ? filteredItems[
-                                      index
-                                    ].stockOperationItems?.map(
+                                {items[index]?.stockOperationItems
+                                  ? items[index].stockOperationItems?.map(
                                       (item) => item.batchNo
                                     )[0]
                                   : ""}
                               </StructuredListCell>
                               <StructuredListCell>
-                                {filteredItems[index]?.stockOperationItems
-                                  ? filteredItems[
-                                      index
-                                    ].stockOperationItems?.map(
+                                {items[index]?.stockOperationItems
+                                  ? items[index].stockOperationItems?.map(
                                       (item) => item.quantity
                                     )[0]
                                   : ""}
@@ -579,61 +538,55 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                             </StructuredListRow>
                             <StructuredListRow>
                               <StructuredListCell noWrap>
-                                {filteredItems[index]?.stockOperationItems.map(
+                                {items[index]?.stockOperationItems.map(
                                   (item) => item.quantity
                                 )[1]
-                                  ? formatDisplayDate(
-                                      filteredItems[index]?.dateCreated
-                                    )
+                                  ? formatDisplayDate(items[index]?.dateCreated)
                                   : ""}
                                 &nbsp;
-                                {filteredItems[index]?.stockOperationItems.map(
+                                {items[index]?.stockOperationItems.map(
                                   (item) => item.quantity
                                 )[1]
                                   ? "By"
                                   : ""}
                                 &nbsp;
-                                {filteredItems[index]?.stockOperationItems.map(
+                                {items[index]?.stockOperationItems.map(
                                   (item) => item.quantity
                                 )[1]
-                                  ? filteredItems[index]?.creatorFamilyName
+                                  ? items[index]?.creatorFamilyName
                                   : ""}
                               </StructuredListCell>
                               <StructuredListCell>
-                                {filteredItems[index]?.stockOperationItems.map(
+                                {items[index]?.stockOperationItems.map(
                                   (item) => item.quantity
                                 )[1]
                                   ? formatDisplayDate(
-                                      filteredItems[index]?.completedDate
+                                      items[index]?.completedDate
                                     )
                                   : ""}
                                 &nbsp;
-                                {filteredItems[index]?.stockOperationItems.map(
+                                {items[index]?.stockOperationItems.map(
                                   (item) => item.quantity
-                                )[1] && filteredItems[index]?.completedDate
+                                )[1] && items[index]?.completedDate
                                   ? "By"
                                   : ""}
                                 &nbsp;
-                                {filteredItems[index]?.stockOperationItems.map(
+                                {items[index]?.stockOperationItems.map(
                                   (item) => item.quantity
-                                )[1] && filteredItems[index]?.completedDate
+                                )[1] && items[index]?.completedDate
                                   ? items[index]?.creatorFamilyName
                                   : ""}
                               </StructuredListCell>
                               <StructuredListCell>
-                                {filteredItems[index]?.stockOperationItems
-                                  ? filteredItems[
-                                      index
-                                    ].stockOperationItems?.map(
+                                {items[index]?.stockOperationItems
+                                  ? items[index].stockOperationItems?.map(
                                       (item) => item.batchNo
                                     )[1]
                                   : ""}
                               </StructuredListCell>
                               <StructuredListCell>
-                                {filteredItems[index]?.stockOperationItems
-                                  ? filteredItems[
-                                      index
-                                    ].stockOperationItems?.map(
+                                {items[index]?.stockOperationItems
+                                  ? items[index].stockOperationItems?.map(
                                       (item) => item.quantity
                                     )[1]
                                   : ""}
@@ -647,7 +600,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                 })}
               </TableBody>
             </Table>
-            {rows.length === 0 ? (
+            {rows.length === 0 && !isLoading ? (
               <div className={styles.tileContainer}>
                 <Tile className={styles.tile}>
                   <div className={styles.tileContent}>
@@ -661,24 +614,31 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                 </Tile>
               </div>
             ) : null}
+            {filterApplied && isLoading && (
+              <div className={styles.rowLoadingContainer}>
+                <InlineLoading description={t("loading", "Loading...")} />
+              </div>
+            )}
           </TableContainer>
         )}
       ></DataTable>
-      <Pagination
-        page={currentPage}
-        pageSize={currentPageSize}
-        pageSizes={pageSizes}
-        totalItems={totalItems}
-        onChange={({ pageSize, page }) => {
-          if (pageSize !== currentPageSize) {
-            setPageSize(pageSize);
-          }
-          if (page !== currentPage) {
-            goTo(page);
-          }
-        }}
-        className={styles.paginationOverride}
-      />
+      {items.length > 0 && (
+        <Pagination
+          page={currentPage}
+          pageSize={currentPageSize}
+          pageSizes={pageSizes}
+          totalItems={totalItems}
+          onChange={({ pageSize, page }) => {
+            if (pageSize !== currentPageSize) {
+              setPageSize(pageSize);
+            }
+            if (page !== currentPage) {
+              goTo(page);
+            }
+          }}
+          className={styles.paginationOverride}
+        />
+      )}
     </div>
   );
 };

package/src/stock-operations/stock-operations-table.scss

@@ -0,0 +1,61 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../root.scss';
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.toolbarContent {
+  display: flex;
+  align-items: center;
+}
+
+.filterContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dateAlign {
+  padding-top: spacing.$spacing-03;
+  height: 100%;
+}
+
+.filterContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: spacing.$spacing-05;
+}
+
+.rowLoadingContainer {
+  text-align: center;
+  padding: 5rem 2rem;
+  margin: auto;
+  width: 20%;
+}

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

@@ -7,7 +7,6 @@ import useSWR from "swr";
 import { ResourceFilterCriteria, toQueryParams } from "../core/api/api";
 import { PageableResult } from "../core/api/types/PageableResult";
 import { StockOperationDTO } from "../core/api/types/stockOperation/StockOperationDTO";
-import { StockOperationLinkDTO } from "../core/api/types/stockOperation/StockOperationLinkDTO";
 import { StopOperationAction } from "../core/api/types/stockOperation/StockOperationAction";
 import { InventoryGroupBy } from "../core/api/types/stockItem/StockItem";
 

package/src/stock-sources/stock-sources-delete/stock-sources-delete.component.tsx

@@ -61,9 +61,10 @@ const StockSourcesDeleteActionMenu: React.FC<
       kind="ghost"
       size="md"
       onClick={handleDeleteStockSource}
-      iconDescription={t("deleteSource", "Delete Source")}
-      renderIcon={(props) => <TrashCan size={16} {...props} />}
-    />
+      aria-label={t("deleteSource", "Delete Source")}
+    >
+      <TrashCan size={16} />
+    </Button>
   );
 
   return deletingSource ? <InlineLoading /> : deleteButton;

package/src/stock-sources/stock-sources-delete/stock-sources-delete.test.tsx

@@ -0,0 +1,190 @@
+import React from "react";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { showModal, showSnackbar } from "@openmrs/esm-framework";
+import { deleteStockSource } from "../stock-sources.resource";
+import StockSourcesDeleteActionMenu from "./stock-sources-delete.component";
+import DeleteConfirmation from "../../stock-user-role-scopes/delete-stock-user-scope-modal.component";
+import { handleMutate } from "../../utils";
+
+jest.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key) => key,
+  }),
+}));
+
+jest.mock("@openmrs/esm-framework", () => ({
+  showModal: jest.fn(),
+  showSnackbar: jest.fn(),
+  restBaseUrl: "http://localhost:8080",
+}));
+
+jest.mock("../stock-sources.resource", () => ({
+  deleteStockSource: jest.fn(),
+}));
+
+jest.mock("../../utils", () => ({
+  handleMutate: jest.fn(),
+}));
+
+describe("StockSourcesDeleteActionMenu", () => {
+  const uuid = "1234-5678";
+  const uuids: string[] = ["1234-5678"];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the delete button correctly", () => {
+    const { getByRole } = render(<StockSourcesDeleteActionMenu uuid={uuid} />);
+    const button = getByRole("button", { name: "deleteSource" });
+    expect(button).toBeInTheDocument();
+  });
+
+  it("opens the delete modal when the delete button is clicked", () => {
+    const { getByRole } = render(<StockSourcesDeleteActionMenu uuid={uuid} />);
+    const button = getByRole("button", { name: "deleteSource" });
+    fireEvent.click(button);
+    expect(showModal).toHaveBeenCalledWith("delete-stock-modal", expect.objectContaining({
+      close: expect.any(Function),
+      uuid: uuid,
+      onConfirmation: expect.any(Function),
+    }));
+  });
+
+  it('calls onConfirmation when delete is clicked', () => {
+    const mockOnConfirmation = jest.fn();
+    const mockClose = jest.fn();
+
+    render(
+      <DeleteConfirmation
+        close={mockClose}
+        onConfirmation={mockOnConfirmation}
+      />
+    );
+
+    expect(screen.getByText(/deleteStockUserScope/i)).toBeInTheDocument();
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    expect(mockOnConfirmation).toHaveBeenCalledTimes(1);
+    expect(mockClose).not.toHaveBeenCalled();
+  });
+
+  it("calls deleteStockSource with the correct UUID on confirmation", async () => {
+    const mockOnConfirmation = jest.fn();
+    const mockClose = jest.fn();
+  
+    render(
+      <DeleteConfirmation
+        close={mockClose}
+        onConfirmation={() => {
+          mockOnConfirmation();
+          deleteStockSource([uuid]);
+        }}
+      />
+    );
+  
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+  
+    expect(mockOnConfirmation).toHaveBeenCalledTimes(1);
+    expect(deleteStockSource).toHaveBeenCalledWith([uuid]);
+  });
+
+  it("calls handleMutate with the correct URL on successful deletion", async () => {
+    (deleteStockSource as jest.Mock).mockResolvedValueOnce({});
+
+    const mockOnConfirmation = jest.fn();
+    const mockClose = jest.fn();
+
+    render(
+      <DeleteConfirmation
+        close={mockClose}
+        onConfirmation={async () => {
+          await deleteStockSource([uuid]);
+          handleMutate("/openmrs/ws/rest/v1/stocksource");
+        }}
+      />
+    );
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(deleteStockSource).toHaveBeenCalledWith([uuid]);
+      expect(handleMutate).toHaveBeenCalledWith("/openmrs/ws/rest/v1/stocksource");
+    });
+  });
+
+  it("calls showSnackbar with the correct parameters on deletion error", async () => {
+    (deleteStockSource as jest.Mock).mockRejectedValueOnce(new Error("Deletion failed"));
+
+    const mockOnConfirmation = jest.fn();
+    const mockClose = jest.fn();
+
+    render(
+      <DeleteConfirmation
+        close={mockClose}
+        onConfirmation={async () => {
+          try {
+            await deleteStockSource([uuid]);
+          } catch (error) {
+            showSnackbar({
+              title: "stockSourceDeleteError",
+              kind: "error",
+            });
+          }
+        }}
+      />
+    );
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(deleteStockSource).toHaveBeenCalledWith([uuid]);
+      expect(showSnackbar).toHaveBeenCalledWith({
+        title: "stockSourceDeleteError",
+        kind: "error",
+      });
+    });
+  });
+
+  it("handles the error state correctly when the delete action fails", async () => {
+    (deleteStockSource as jest.Mock).mockRejectedValueOnce(new Error("Deletion failed"));
+
+    const mockOnConfirmation = jest.fn();
+    const mockClose = jest.fn();
+
+    render(
+      <DeleteConfirmation
+        close={mockClose}
+        onConfirmation={async () => {
+          try {
+            await deleteStockSource([uuid]);
+          } catch (error) {
+            showSnackbar({
+              title: "stockSourceDeleteError",
+              kind: "error",
+            });
+          }
+        }}
+      />
+    );
+
+    const deleteButton = screen.getByRole("button", { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(deleteStockSource).toHaveBeenCalledWith([uuid]);
+
+      expect(showSnackbar).toHaveBeenCalledWith({
+        title: "stockSourceDeleteError",
+        kind: "error",
+      });
+      expect(deleteButton).toBeInTheDocument();
+    });
+  });
+});