@openmrs/esm-stock-management-app 1.0.1-pre.352 → 1.0.1-pre.359

package/src/stock-locations/stock-locations-table.resource.tsx

@@ -1,12 +1,22 @@
 import { StockOperationFilter } from "../stock-operations/stock-operations.resource";
 import { useMemo, useState } from "react";
-import { usePagination } from "@openmrs/esm-framework";
+import {
+  FetchResponse,
+  openmrsFetch,
+  restBaseUrl,
+  showToast,
+  usePagination,
+} from "@openmrs/esm-framework";
 import { useTranslation } from "react-i18next";
-import { useStockLocations } from "../stock-lookups/stock-lookups.resource";
+import {
+  useStockLocations,
+  useStockTagLocations,
+} from "../stock-lookups/stock-lookups.resource";
+import useSWR from "swr";
+import { extractErrorMessagesFromResponse } from "../constants";
 
 export function useStockLocationPages(filter: StockOperationFilter) {
-  const { locations, isErrorLocation, isLoadingLocations } =
-    useStockLocations(filter);
+  const { stockLocations, error, isLoading } = useStockTagLocations();
 
   const pageSizes = [10, 20, 30, 40, 50];
   const [currentPageSize, setPageSize] = useState(10);
@@ -15,7 +25,7 @@ export function useStockLocationPages(filter: StockOperationFilter) {
     goTo,
     results: paginatedQueueEntries,
     currentPage,
-  } = usePagination(locations.results, currentPageSize);
+  } = usePagination(stockLocations, currentPageSize);
 
   const { t } = useTranslation();
 
@@ -46,28 +56,73 @@ export function useStockLocationPages(filter: StockOperationFilter) {
   );
 
   const tableRows = useMemo(() => {
-    return locations?.results?.map((location) => ({
+    return stockLocations.map((location) => ({
       id: location?.uuid,
       key: `key-${location?.uuid}`,
       uuid: `${location?.uuid}`,
       name: `${location?.name}`,
-      tags: location?.tags?.map((p) => p.display)?.join(", ") ?? "",
+      tags:
+        location?.meta.tag
+          ?.filter((tag) => tag.code !== "SUBSETTED")
+          .map((p) => p.code)
+          ?.join(", ") ?? "",
       childLocations:
         location?.childLocations?.map((p) => p.display)?.join(", ") ?? "",
     }));
-  }, [locations?.results]);
-
+  }, [stockLocations]);
   return {
-    items: locations.results,
+    items: stockLocations,
     currentPage,
     currentPageSize,
     paginatedQueueEntries,
     goTo,
     pageSizes,
-    isLoadingLocations,
-    isErrorLocation,
+    isLoading,
+    error,
     setPageSize,
     tableHeaders,
     tableRows,
   };
 }
+
+export const useLocationTags = () => {
+  const url = `${restBaseUrl}/locationtag/`;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data },
+    Error
+  >(url, openmrsFetch);
+  const results = data?.data?.results ? data?.data?.results : [];
+  return {
+    locationTagList: results,
+    loading: isLoading,
+    mutate,
+  };
+};
+interface LocationName {
+  name: string;
+}
+export async function saveLocation({
+  locationPayload,
+}): Promise<FetchResponse<LocationName>> {
+  try {
+    const response: FetchResponse = await openmrsFetch(
+      `${restBaseUrl}/location/`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: locationPayload,
+      }
+    );
+    return response;
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showToast({
+      description: errorMessages.join(", "),
+      title: "Error on saving form",
+      kind: "error",
+      critical: true,
+    });
+  }
+}

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

@@ -0,0 +1,3 @@
+.loaderContainer {
+  margin-bottom: 150px;
+}

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

@@ -22,7 +22,12 @@ import StockOperationApproveDispatchButton from "../stock-operations-dialog/stoc
 import StockOperationCompleteDispatchButton from "../stock-operations-dialog/stock-operations-completed-dispatch-button.component";
 import StockOperationIssueStockButton from "../stock-operations-dialog/stock-operations-issue-stock-button.component";
 import { StockOperation } from "./stock-operation-context/useStockOperationContext";
-import { formatDate, parseDate, showToast } from "@openmrs/esm-framework";
+import {
+  formatDate,
+  parseDate,
+  showSnackbar,
+  showToast,
+} from "@openmrs/esm-framework";
 import {
   OperationType,
   StockOperationType,
@@ -43,12 +48,12 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
   if (isLoading) return <AccordionSkeleton />;
   if (isError) {
     closeOverlay();
-    showToast({
+    showSnackbar({
       kind: "error",
       title: t("error", "Error"),
-      description: t("errorLoadingStockOperation", "Error loading stock item"),
-      millis: 5000,
-      critical: true,
+      subtitle: t("errorLoadingStockOperation", "Error loading stock item"),
+      timeoutInMs: 5000,
+      isLowContrast: true,
     });
     return;
   }

package/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.component.tsx

@@ -65,6 +65,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
   const [roles, setRoles] = useState<Role[]>([]);
 
   const { data: user } = useUser(model?.uuid);
+  const [showItems, setShowItems] = useState(false);
 
   // operation types
   const {
@@ -110,6 +111,28 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
     });
   };
 
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [filteredItems, setFilteredItems] = useState<any[]>([]);
+
+  const usersResults = users?.results ?? [];
+
+  const filterItems = (query: string) => {
+    if (query.trim() === "") {
+      setShowItems(false);
+    } else {
+      setShowItems(true);
+      const filtered = usersResults.filter((item: any) => {
+        const displayName = item?.person?.display ?? item?.display ?? "";
+        return displayName.toLowerCase().includes(query.toLowerCase());
+      });
+      setFilteredItems(filtered);
+    }
+  };
+
+  const handleSearchQueryChange = (query: string) => {
+    setSearchQuery(query);
+    filterItems(query);
+  };
   const onStockOperationTypeChanged = (
     event: React.ChangeEvent<HTMLInputElement>,
     uuid: string,
@@ -186,7 +209,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
           v: ResourceRepresentation.Default,
           q: searchTerm,
         } as any as UserFilterCriteria);
-      }, 300),
+      }, 3),
     []
   );
 
@@ -288,7 +311,6 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
       }
     );
   };
-
   if (isLoading || loadingRoles || loadingUsers) {
     return (
       <InlineLoading
@@ -298,7 +320,6 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
       />
     );
   }
-
   return (
     <div>
       <Form>
@@ -313,16 +334,13 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
                     id="userName"
                     size="md"
                     labelText={t("user", "User")}
-                    items={users?.results}
+                    items={filteredItems}
                     onChange={onUserChanged}
-                    shouldFilterItem={(data) => true}
-                    onFocus={() => users?.results || handleUsersSearch("")}
-                    onToggleClick={() =>
-                      users?.results || handleUsersSearch("")
-                    }
+                    shouldFilterItem={() => true}
                     itemToString={(item) =>
                       `${item?.person?.display ?? item?.display ?? ""}`
                     }
+                    onInputChange={handleSearchQueryChange}
                     placeholder="Filter..."
                   />
                 </>
@@ -429,6 +447,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
                       <Checkbox
                         value={type.uuid}
                         checked={isOperationChecked(type)}
+                        className={styles.checkbox}
                         onChange={(event) =>
                           onStockOperationTypeChanged(
                             event,
@@ -436,7 +455,6 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
                             isOperationChecked(type)
                           )
                         }
-                        className={styles.checkbox}
                         labelText={type.name}
                         id={type.uuid}
                       />