@openmrs/esm-stock-management-app 1.0.1-pre.327

package/src/stock-operations/stock-item-selector/stock-item-selector.component.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { ComboBox, InlineLoading } from "@carbon/react";
+import { StockItemDTO } from "../../core/api/types/stockItem/StockItem";
+import { useStockItems } from "./stock-item-selector.resource";
+import { useDebounce } from "../../core/hooks/debounce-hook";
+
+interface StockItemSelectorProps<T> {
+  placeholder?: string;
+  stockItemUuid?: string;
+  onStockItemChanged?: (item: StockItemDTO) => void;
+  title?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const StockItemSelector = <T,>(props: StockItemSelectorProps<T>) => {
+  const { isLoading, stockItemsList, setSearchString } = useStockItems({});
+
+  const debouncedSearch = useDebounce((query: string) => {
+    setSearchString(query);
+  }, 500);
+
+  return (
+    <div>
+      <Controller
+        name={props.controllerName}
+        control={props.control}
+        render={({ field: { onChange, value, ref } }) => (
+          <ComboBox
+            titleText={props.title}
+            name={props.name}
+            control={props.control}
+            controllerName={props.controllerName}
+            id={props.name}
+            size={"sm"}
+            items={stockItemsList || []}
+            onChange={(data: { selectedItem: StockItemDTO }) => {
+              props.onStockItemChanged?.(data.selectedItem);
+              onChange(data.selectedItem?.uuid);
+            }}
+            initialSelectedItem={
+              stockItemsList?.find((p) => p.uuid === props.stockItemUuid) ?? ""
+            }
+            itemToString={stockItemName}
+            onInputChange={debouncedSearch}
+            placeholder={props.placeholder}
+            invalid={props.invalid}
+            invalidText={props.invalidText}
+            ref={ref}
+          />
+        )}
+      />
+      {isLoading && (
+        <InlineLoading
+          status="active"
+          iconDescription="Searching"
+          description="Searching..."
+        />
+      )}
+    </div>
+  );
+};
+
+function stockItemName(item: StockItemDTO): string {
+  return item.drugName || item.conceptName;
+}
+
+export default StockItemSelector;

package/src/stock-operations/stock-item-selector/stock-item-selector.resource.tsx

@@ -0,0 +1,47 @@
+import { UserFilterCriteria } from "../../stock-lookups/stock-lookups.resource";
+import { useEffect, useState } from "react";
+import { ResourceRepresentation } from "../../core/api/api";
+import {
+  StockItemFilter,
+  useStockItems as useStockItemsData,
+} from "../../stock-items/stock-items.resource";
+
+export function useStockItems(filter?: StockItemFilter) {
+  const [conceptFilter, setConceptFilter] = useState<UserFilterCriteria>(
+    filter || {
+      v: ResourceRepresentation.Default,
+      limit: 10,
+      startIndex: 0,
+    }
+  );
+
+  const {
+    items: { results: stockItemsList },
+    isLoading,
+  } = useStockItemsData(conceptFilter);
+
+  const [searchString, setSearchString] = useState(null);
+
+  // Drug filter type
+  const [limit, setLimit] = useState(filter?.limit || 10);
+  const [representation, setRepresentation] = useState(
+    filter?.v || ResourceRepresentation.Default
+  );
+
+  useEffect(() => {
+    setConceptFilter({
+      startIndex: 0,
+      v: representation,
+      limit: limit,
+      q: searchString,
+    });
+  }, [searchString, limit, representation]);
+
+  return {
+    stockItemsList,
+    setLimit,
+    setRepresentation,
+    setSearchString,
+    isLoading,
+  };
+}

package/src/stock-operations/stock-item-selector/stock-item-selector.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { render, cleanup } from "@testing-library/react";
+import StockItemSelector from "./stock-item-selector.component";
+
+describe("Test the stock item selector", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<StockItemSelector />);
+  });
+});

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

@@ -0,0 +1,27 @@
+import styles from "./stock-operation-operations-filter.scss";
+import { Dropdown, DropdownSkeleton } from "@carbon/react";
+import React from "react";
+import { useStockOperationTypes } from "../../stock-lookups/stock-lookups.resource";
+
+const StockOperationOperationsFilter: React.FC = () => {
+  // get stock sources
+  const { types, isLoading, isError } = useStockOperationTypes();
+  if (isLoading || isError) {
+    return <DropdownSkeleton />;
+  }
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          id="stockOperationOperationsFiter"
+          items={types.results}
+          itemToString={(item) => (item ? item.name : "Not Set")}
+          type="inline"
+          size="sm"
+        />
+      </div>
+    </>
+  );
+};
+
+export default StockOperationOperationsFilter;

package/src/stock-operations/stock-operation-operations-filter/stock-operation-operations-filter.scss

@@ -0,0 +1,13 @@
+.filterContainer {
+    :global(.cds--dropdown__wrapper--inline) {
+      gap: 0;
+    }
+  
+    :global(.cds--list-box__menu-icon) {
+      height: 1rem;
+    }
+  
+    :global(.cds--dropdown--inline) :global(.cds--list-box__field) {
+      min-width: 12rem;
+    }
+  }

package/src/stock-operations/stock-operation-reason-selector/stock-operation-reason-selector.component.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { Concept } from "../../core/api/types/concept/Concept";
+import { ComboBox, SelectSkeleton } from "@carbon/react";
+import { useConceptById } from "../../stock-lookups/stock-lookups.resource";
+import { STOCK_ADJUSTMENT_REASON_CODED_CONCEPT_ID } from "../../constants";
+
+interface StockOperationReasonSelectorProps<T> {
+  reasonUuid?: string;
+  onReasonChange?: (reason: Concept) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const StockOperationReasonSelector = <T,>(
+  props: StockOperationReasonSelectorProps<T>
+) => {
+  const {
+    isLoading,
+    isError,
+    items: { answers: reasons },
+  } = useConceptById(STOCK_ADJUSTMENT_REASON_CODED_CONCEPT_ID);
+
+  if (isLoading || isError) return <SelectSkeleton />;
+
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, ref } }) => (
+        <ComboBox
+          labelText={props.title}
+          placeholder={props.placeholder}
+          name={props.name}
+          controllerName={props.controllerName}
+          id={props.name}
+          size={"md"}
+          items={reasons}
+          initialSelectedItem={
+            reasons?.find((p) => p.uuid === props.reasonUuid) || {}
+          }
+          itemToString={(item?: Concept) =>
+            item && item?.display ? `${item?.display}` : ""
+          }
+          onChange={(data: { selectedItem?: Concept }) => {
+            props.onReasonChange?.(data?.selectedItem);
+            onChange(data?.selectedItem?.uuid);
+          }}
+          ref={ref}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        />
+      )}
+    />
+  );
+};
+
+export default StockOperationReasonSelector;

package/src/stock-operations/stock-operation-sources-filter/stock-operation-sources-filter.component.tsx

@@ -0,0 +1,30 @@
+import styles from "./stock-operation-sources-filter.scss";
+import { Dropdown, DropdownSkeleton } from "@carbon/react";
+import React from "react";
+import { STOCK_SOURCE_TYPE_CODED_CONCEPT_ID } from "../../constants";
+import { useConceptById } from "../../stock-lookups/stock-lookups.resource";
+
+const StockOperationSourcesFilter: React.FC = () => {
+  // get stock sources
+  const { items, isLoading, isError } = useConceptById(
+    STOCK_SOURCE_TYPE_CODED_CONCEPT_ID
+  );
+  if (isLoading || isError) {
+    return <DropdownSkeleton />;
+  }
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          id="stockOperationSourcesFiter"
+          items={[...items.answers]}
+          itemToString={(item) => (item ? item.display : "Not Set")}
+          type="inline"
+          size="sm"
+        />
+      </div>
+    </>
+  );
+};
+
+export default StockOperationSourcesFilter;

package/src/stock-operations/stock-operation-sources-filter/stock-operation-sources-filter.scss

@@ -0,0 +1,13 @@
+.filterContainer {
+    :global(.cds--dropdown__wrapper--inline) {
+      gap: 0;
+    }
+  
+    :global(.cds--list-box__menu-icon) {
+      height: 1rem;
+    }
+  
+    :global(.cds--dropdown--inline) :global(.cds--list-box__field) {
+      min-width: 12rem;
+    }
+  }

package/src/stock-operations/stock-operation-statuses-filter/stock-operation-statuses-filter.component.tsx

@@ -0,0 +1,32 @@
+import styles from "./stock-operation-statuses-filter.scss";
+import { Dropdown } from "@carbon/react";
+import React from "react";
+const StockOperationStatusesFilter: React.FC = () => {
+  // get stock sources
+
+  const items = [
+    "SUBMITTED",
+    "NEW",
+    "RETURNED",
+    "CANCELLED",
+    "DISPATCHED",
+    "COMPLETED",
+    "REJECTED",
+  ];
+
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          id="stockOperationStatusesFiter"
+          items={items}
+          itemToString={(item) => (item ? item : "Not Set")}
+          type="inline"
+          size="sm"
+        />
+      </div>
+    </>
+  );
+};
+
+export default StockOperationStatusesFilter;

package/src/stock-operations/stock-operation-statuses-filter/stock-operation-statuses-filter.scss

@@ -0,0 +1,13 @@
+.filterContainer {
+    :global(.cds--dropdown__wrapper--inline) {
+      gap: 0;
+    }
+  
+    :global(.cds--list-box__menu-icon) {
+      height: 1rem;
+    }
+  
+    :global(.cds--dropdown--inline) :global(.cds--list-box__field) {
+      min-width: 12rem;
+    }
+  }

package/src/stock-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useMemo } from "react";
+import { ButtonSkeleton, OverflowMenu, OverflowMenuItem } from "@carbon/react";
+import { OverflowMenuVertical } from "@carbon/react/icons";
+import {
+  useStockOperationTypes,
+  useUserRoles,
+} from "../../stock-lookups/stock-lookups.resource";
+import { StockOperationType } from "../../core/api/types/stockOperation/StockOperationType";
+
+interface StockOperationTypesSelectorProps {
+  onOperationTypeSelected?: (operation: StockOperationType) => void;
+  onOperationLoaded?: (operation: StockOperationType[]) => void;
+}
+
+const StockOperationTypesSelector: React.FC<
+  StockOperationTypesSelectorProps
+> = ({ onOperationTypeSelected, onOperationLoaded }) => {
+  const {
+    types: { results: createOperationTypes },
+    isLoading,
+    isError,
+  } = useStockOperationTypes();
+  const { userRoles } = useUserRoles();
+
+  const filterOperationTypes = useMemo(() => {
+    const applicablePrivilegeScopes =
+      userRoles?.operationTypes?.map((p) => p.operationTypeUuid) || [];
+    const uniqueApplicablePrivilegeScopes = [
+      ...new Set(applicablePrivilegeScopes),
+    ];
+
+    return (
+      createOperationTypes?.filter((p) =>
+        uniqueApplicablePrivilegeScopes.includes(p.uuid)
+      ) || []
+    );
+  }, [createOperationTypes, userRoles]);
+
+  useEffect(() => {
+    onOperationLoaded?.(filterOperationTypes);
+  }, [filterOperationTypes, onOperationLoaded]);
+
+  if (isLoading || isError) return <ButtonSkeleton />;
+
+  return (
+    <OverflowMenu
+      renderIcon={() => (
+        <>
+          Start New&nbsp;&nbsp;
+          <OverflowMenuVertical size={16} />
+        </>
+      )}
+      menuOffset={{ right: "-100px" }}
+      style={{
+        backgroundColor: "#007d79",
+        backgroundImage: "none",
+        color: "#fff",
+        minHeight: "1rem",
+        padding: ".95rem !important",
+        width: "8rem",
+        marginRight: "0.5rem",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {filterOperationTypes
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map((operation) => (
+          <OverflowMenuItem
+            key={operation.uuid}
+            itemText={operation.name}
+            onClick={() => {
+              onOperationTypeSelected?.(operation);
+            }}
+          />
+        ))}
+    </OverflowMenu>
+  );
+};
+
+export default StockOperationTypesSelector;

package/src/stock-operations/stock-operation.utils.tsx

@@ -0,0 +1,106 @@
+import { closeOverlay, launchOverlay } from "../core/components/overlay/hook";
+import React from "react";
+import {
+  FetchResponse,
+  showModal,
+  showNotification,
+  showToast,
+} from "@openmrs/esm-framework";
+import { StockOperationDTO } from "../core/api/types/stockOperation/StockOperationDTO";
+import {
+  createStockOperation,
+  updateStockOperation,
+} from "./stock-operations.resource";
+import AddStockOperation from "./add-stock-operation/add-stock-operation.component";
+import { StockOperationType } from "../core/api/types/stockOperation/StockOperationType";
+import { useLocation } from "react-router-dom";
+import { extractErrorMessagesFromResponse } from "../constants";
+import { handleMutate } from "./swr-revalidation";
+export const addOrEditStockOperation = async (
+  stockOperation: StockOperationDTO,
+  isEditing: boolean,
+  operation?: StockOperationType,
+  operations?: StockOperationType[],
+  canPrint?: boolean
+) => {
+  const payload = stockOperation;
+  try {
+    if (operation.operationType === "requisition") {
+      delete payload.destinationName;
+    }
+    const response: FetchResponse<StockOperationDTO> = await (isEditing
+      ? updateStockOperation
+      : createStockOperation)(payload);
+
+    if (response?.data) {
+      handleMutate("ws/rest/v1/stockmanagement/stockoperation");
+      showToast({
+        critical: true,
+        title: `${isEditing ? "Edit" : "Add"} Stock Operation`,
+        kind: "success",
+        description: `Stock Operation ${
+          isEditing ? "Edited" : "Added"
+        } Successfully`,
+      });
+
+      // Close overlay and open edit overlay
+      closeOverlay();
+    }
+  } catch (error) {
+    const errorMessages = extractErrorMessagesFromResponse(error);
+    showNotification({
+      description: errorMessages.join(", "),
+      title: "Error on saving form",
+      kind: "error",
+      critical: true,
+    });
+  }
+};
+
+export const launchAddOrEditDialog = (
+  stockOperation: StockOperationDTO,
+  isEditing: boolean,
+  operation?: StockOperationType,
+  operations?: StockOperationType[],
+  canPrint?: boolean
+) => {
+  launchOverlay(
+    `${isEditing ? "Edit" : "New: "} ${
+      isEditing ? stockOperation?.operationTypeName : operation?.name
+    }`,
+    <AddStockOperation
+      model={stockOperation}
+      onSave={(so) =>
+        addOrEditStockOperation(so, isEditing, operation, operations, canPrint)
+      }
+      isEditing={isEditing}
+      operation={operation}
+      canEdit={
+        isEditing ? (stockOperation?.status === "NEW" ? true : false) : true
+      }
+    />
+  );
+};
+
+export const useUrlQueryParams = () => {
+  return new URLSearchParams(useLocation().search);
+};
+
+export function getStockOperationUniqueId() {
+  return `${new Date().getTime()}-${Math.random()
+    .toString(36)
+    .substring(2, 16)}`;
+}
+
+export const showActionDialogButton = async (
+  title: string,
+  requireReason: boolean,
+  operation: StockOperationDTO
+) => {
+  const dispose = showModal("stock-operation-dialog", {
+    title: title,
+    operation: operation,
+    requireReason: requireReason,
+    closeModal: () => dispose(),
+  });
+};

package/src/stock-operations/stock-operations-dialog/stock-operations-approve-button.component.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from "react";
+
+import { Button } from "@carbon/react";
+import { showModal } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { CheckmarkOutline } from "@carbon/react/icons";
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+
+interface StockOperationApprovalButtonProps {
+  operation: StockOperationDTO;
+}
+
+const StockOperationApprovalButton: React.FC<
+  StockOperationApprovalButtonProps
+> = ({ operation }) => {
+  const { t } = useTranslation();
+  const launchApprovalModal = useCallback(() => {
+    const dispose = showModal("stock-operation-dialog", {
+      title: "Approve",
+      operation: operation,
+      requireReason: false,
+      closeModal: () => dispose(),
+    });
+  }, [operation]);
+
+  return (
+    <Button
+      onClick={launchApprovalModal}
+      renderIcon={(props) => <CheckmarkOutline size={16} {...props} />}
+    >
+      {t("approve", "Approve ")}
+    </Button>
+  );
+};
+
+export default StockOperationApprovalButton;

package/src/stock-operations/stock-operations-dialog/stock-operations-approve-dispatch-button.component.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from "react";
+
+import { Button } from "@carbon/react";
+import { showModal } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { Departure } from "@carbon/react/icons";
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+
+interface StockOperationApproveDispatchButtonProps {
+  operation: StockOperationDTO;
+}
+
+const StockOperationApproveDispatchButton: React.FC<
+  StockOperationApproveDispatchButtonProps
+> = ({ operation }) => {
+  const { t } = useTranslation();
+  const launchApproveDispatchModal = useCallback(() => {
+    const dispose = showModal("stock-operation-dialog", {
+      title: "Dispatch",
+      operation: operation,
+      requireReason: true,
+      closeModal: () => dispose(),
+    });
+  }, [operation]);
+
+  return (
+    <Button
+      onClick={launchApproveDispatchModal}
+      renderIcon={(props) => <Departure size={16} {...props} />}
+    >
+      {t("approve", "Dispatch")}
+    </Button>
+  );
+};
+
+export default StockOperationApproveDispatchButton;

package/src/stock-operations/stock-operations-dialog/stock-operations-cancel-button.component.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from "react";
+
+import { Button } from "@carbon/react";
+import { showModal } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { Error } from "@carbon/react/icons";
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+
+interface StockOperationCancelButtonProps {
+  operation: StockOperationDTO;
+}
+
+const StockOperationCancelButton: React.FC<StockOperationCancelButtonProps> = ({
+  operation,
+}) => {
+  const { t } = useTranslation();
+  const launchCancelModal = useCallback(() => {
+    const dispose = showModal("stock-operation-dialog", {
+      title: "Cancel",
+      operation: operation,
+      requireReason: true,
+      closeModal: () => dispose(),
+    });
+  }, [operation]);
+
+  return (
+    <Button
+      onClick={launchCancelModal}
+      kind="danger--ghost"
+      renderIcon={(props) => <Error size={16} {...props} />}
+    >
+      {t("cancel", "Cancel ")}
+    </Button>
+  );
+};
+
+export default StockOperationCancelButton;

package/src/stock-operations/stock-operations-dialog/stock-operations-complete-button.component.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from "react";
+
+import { Button } from "@carbon/react";
+import { showModal } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { CheckmarkOutline } from "@carbon/react/icons";
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+
+interface StockOperationCompleteButtonProps {
+  operation: StockOperationDTO;
+}
+
+const StockOperationCompleteButton: React.FC<
+  StockOperationCompleteButtonProps
+> = ({ operation }) => {
+  const { t } = useTranslation();
+  const launchCompleteModal = useCallback(() => {
+    const dispose = showModal("stock-operation-dialog", {
+      title: "Complete",
+      operation: operation,
+      requireReason: true,
+      closeModal: () => dispose(),
+    });
+  }, [operation]);
+
+  return (
+    <Button
+      onClick={launchCompleteModal}
+      renderIcon={(props) => <CheckmarkOutline size={16} {...props} />}
+    >
+      {t("complete", "Complete")}
+    </Button>
+  );
+};
+
+export default StockOperationCompleteButton;