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

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/translations/am.json

@@ -23,6 +23,7 @@
   "alertRole": "እርምጃ ሚና",
   "all": "ሁሉም",
   "approve": "ተግባር",
+  "batch": "ባች ቁጥር",
   "batchInformation": "የአጠቃላይ መረጃ",
   "batchJob": "አጠቃላይ ስራ",
   "batchJobErrorMessage": "የአጠቃላይ ስራ መፍጠር ስህተት",
@@ -33,6 +34,7 @@
   "by": "በ",
   "cancel": "ሰርዝ",
   "cancelled": "ተሰርዝ",
+  "category": "ምድብ",
   "checkFilters": "ላይ ያሉትን ስንስና ይፈትሹ",
   "childLocations": "የሕፃናት ቦታዎች",
   "chooseACategory": "አንድ ክፍል ይምረጡ",
@@ -61,6 +63,7 @@
   "dateCompleted": "ቀን ተጠናቋል",
   "dateCreated": "ቀን ተፈጠረ",
   "dateRequested": "ቀን ተጠየቀ",
+  "defaultStockOperationsPackagingUnit": "ነባሪ የአክሲዮን ኦፕሬሽኖች ማሸጊያ ክፍል",
   "defaultStockOperationsUoMName": "በትር ማስገባት",
   "delete": "አጥፋ",
   "deleteConfirmationText": "እርስዎ ይህን የተጠቃሚ እንደምን ያጥፋሉ? ይህ እርምጃ አይመለስም።",
@@ -111,14 +114,12 @@
   "errorDeletingRule": "ህግ ማጥፋት ስህተት",
   "errorDeletingSource": "ምንጭ ማጥፋት ስህተት",
   "errorDeletingUserScope": "የተጠቃሚ ወሰን መሰረዝ ላይ ስህተት",
-  "errorDescription": "",
-  "errorDescriptionTitle": "በቅጽ መጠቀም ላይ ስህተት",
   "errorEditingStockItem": "የተመንዝር እቃ ማስተካከያ ስህተት",
   "errorLoadingStockOperation": "የተመንዝር እቃ ማስገባት ስህተት",
   "errorSavingBaseOperation": "በመሠረት እንዴት መቆርጣት ስህተት",
   "errorSavingForm": "ቅጽ መቆርጣት ስህተት",
   "errorSavingUserRoleScope": "የተጠቃሚ ሚና ድርጊት መቆርጣት ስህተት",
-  "errorStockMetric": "",
+  "errorStockMetric": "Error fetching stock metrics",
   "errorUploadingItems": "የአክሲዮን ንጥሎችን በመስቀል ላይ ስህተት ተፈጥሯል።",
   "evaluationFrequency": "የእንቅስቃሴ እንደምን ተግባር (ደቂቀ ደቂቀ)",
   "expirationNotice": "የመጨረሻ ማስታወቂያ (ቀን)",
@@ -142,11 +143,11 @@
   "importStockItems": "የተመንዝር እቃዎችን አስመጣ",
   "in6Months": "በ 6 ወራት ውስጥ",
   "includeChildLocations": "የልጆች አካባቢዎችን ያካትቱ",
-  "Inventory Alerts": "የእንቅስቃሴ ማስጠንቀቂያዎች",
+  "inventory Alerts": "የእቃ ዝርዝር ማንቂያዎች",
   "inventoryAlertNull": "የእንቅስቃሴ ማስጠንቀቂያ የለም",
   "inventoryBy": "እንቅስቃሴ እንደ",
   "issueStock": "የተመንዝር ማቅረብ",
-  "Issuing": "እንደምንዝር",
+  "issuing": "በማውጣት ላይ",
   "issuingNull": "የማቅረብ የለም",
   "item": "እቃ",
   "itemAlreadyExists": "እቃው ቀድሞ አለ",
@@ -185,6 +186,9 @@
   "noViewPrivilegesDescription": "ትርጉም አልተሰጠም",
   "number": "ቁጥር",
   "operationDate": "የእንቅስቃሴ ቀን",
+  "operationModalTitle": "{{title}} ኦፕሬሽን",
+  "operationSuccessful": "በተሳካ ሁኔታ አለህ {{title}} ኦፕሬሽን",
+  "operationSuccessTitle": "{{title}} ኦፕሬሽን",
   "orderLevel": "እንደ መዝገብ አስተካክል:",
   "other": "ሌላ",
   "outofstock": "የተጠናቀቀ",
@@ -203,30 +207,35 @@
   "providersAvailableToday": "የተዘገበ እንደምንዝር",
   "purchasePrice": "የግዢ ዋጋ",
   "purchasePricePackagingUnit": "የግዢ ዋጋ የጥቅም እቃ:",
-  "qty": "ብዛት",
-  "qtyIssued": "ብዛት እንደምንዝር",
   "quantities": "ብዛቶች",
   "quantity": "ብዛት ድንጋይ",
+  "quantityIssued": "የተሰጠው ብዛት",
+  "quantityReceived": "የተቀበለው መጠን",
   "quantityRequested": "የተጠየቀ ብዛት",
+  "quantitySent": "ብዛት ተልኳል።",
   "quantityUnit": "የብዛት እቃ",
-  "quantityUom": "ብዛት የእንቅስቃሴ",
+  "quantityUoM": "የመለኪያ ብዛት (UoM)",
   "rank": "እኩል",
   "reason": "ምክንያት",
   "reasonLabel": "እቅድ ያስረዱኝ:",
   "reasonPlaceholder": "ምክንያት እዚህ ግብዣ",
+  "receivedItems": "የተቀበሉት እቃዎች",
   "receivedNull": "የተቀበለ የለም",
   "receivedView": "ሁሉንም ይያዙ",
-  "Receiving": "እንደምንዝር",
+  "receiving": "መቀበል",
   "references": "እቅድ",
   "reject": "ድርስ",
   "rejected": "ተከስቷል",
   "rejectOrder": "የማድረግ ትእዛዝ",
+  "remarks": "አስተያየቶች",
   "removePackagingUnit": "የጥቅም እቃን አስወግድ",
   "removePackagingUnitConfirmation": "እቅድ አስወግድ",
   "reorderLevel": "እንደ ተደርጓል",
+  "reorderLevelPackagingUnit": "የማሸጊያ ክፍልን እንደገና ይዘዙ",
   "report": "ሪፖርት",
   "ReportDescription": "ተጠየቁት ሪፖርቶች ዝርዝር",
   "reportName": "ሪፖርት",
+  "requested": "ተጠይቋል",
   "requestedBy": "በሚጠየቁት",
   "responsiblePerson": "የተጠቃሚ ሰው",
   "return": "እንደምንዝር",
@@ -259,6 +268,8 @@
   "stockOperation": "የተመንዝር እንቅስቃሴ",
   "stockOperationAdded": "የተመንዝር እንቅስቃሴ በተሳካ ሁኔታ ተጨምሯል",
   "stockOperationEdited": "የተመንዝር እንቅስቃሴ በተሳካ ሁኔታ ተለዋዋጭነት ሰጠ",
+  "stockOperationErrorDescription": "ዝርዝሮች፡ {{message}}",
+  "stockOperationErrorTitle": "ቅጽ በማስቀመጥ ላይ ስህተት",
   "stockOperations": "የተመንዝር እንቅስቃሴዎች",
   "stockOperationTrackMovement": "የአክሲዮን እንቅስቃሴን ለመከታተል የአክሲዮን ክንዋኔዎች።",
   "stockRuleAddedSuccessfully": "የአክሲዮን ደንብ በተሳካ ሁኔታ ታክሏል።",
@@ -272,10 +283,8 @@
   "submitted": "ተጠይቷል",
   "successfullysaved": "የተጠቃሚ ሚና አካባቢ በተሳካ ሁኔታ ተስተካክሏል",
   "SuccessfullyUploadedStockItem": "የአክሲዮን ንጥሎችን በተሳካ ሁኔታ ሰቅለዋል።",
-  "successMessage": "ተጠቃሚ ሚና እንደምንዝር",
   "tabletOverlay": "ታብሌት አውርስ",
   "tags": "ታጣቂዎች",
-  "title": "ርዕስ",
   "toggleMessage": "ይህንን አስተዋውቅ በተመረጡት ቦታ ላይ ይጠቀሙ።",
   "tradeName": "የንግድ ስም",
   "transactions": "ግብይቶች",