@openmrs/esm-stock-management-app 1.0.1-pre.38 → 1.0.1-pre.383

package/src/stock-locations/location-admin-form.component.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { z } from "zod";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Button,
+  ComposedModal,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  TextInput,
+  InlineNotification,
+  FilterableMultiSelect,
+  InlineLoading,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { locationData } from "../stock-items/types";
+import styles from "./stock-locations-table.scss";
+import { useLocationTags } from "./stock-locations-table.resource";
+
+const LocationAdministrationSchema = z.object({
+  name: z.string().max(255),
+});
+
+interface LocationAdministrationFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  handleCreateQuestion?: (formData: locationData) => void;
+  handleDeleteBedTag?: () => void;
+  headerTitle: string;
+  initialData: locationData;
+}
+
+interface ErrorType {
+  message: string;
+}
+
+const LocationAdministrationForm: React.FC<LocationAdministrationFormProps> = ({
+  showModal,
+  onModalChange,
+  handleCreateQuestion,
+  headerTitle,
+  initialData,
+}) => {
+  const { t } = useTranslation();
+
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [formStateError, setFormStateError] = useState("");
+
+  // Location tag types
+  const { locationTagList: Tags, loading: loadingRoles } = useLocationTags();
+
+  const {
+    handleSubmit,
+    control,
+    getValues,
+    formState: { isDirty },
+  } = useForm<locationData>({
+    mode: "all",
+    resolver: zodResolver(LocationAdministrationSchema),
+    defaultValues: {
+      name: initialData.name || "",
+      tags: initialData.tags || [],
+    },
+  });
+
+  const onSubmit = (formData: locationData) => {
+    const formDataFormSubmission = getValues();
+    const locationTagsUuid =
+      formDataFormSubmission?.tags?.["selectedItems"]?.map((tag) => tag.uuid) ??
+      [];
+
+    const payload = {
+      name: formDataFormSubmission.name,
+      tags: locationTagsUuid,
+    };
+    const result = LocationAdministrationSchema.safeParse(formData);
+    if (result.success) {
+      setShowErrorNotification(false);
+      handleCreateQuestion(payload);
+    }
+  };
+
+  const onError = (error: { [key: string]: ErrorType }) => {
+    setFormStateError(Object.entries(error)[0][1].message);
+    setShowErrorNotification(true);
+  };
+
+  return (
+    <ComposedModal
+      open={showModal}
+      onClose={() => onModalChange(false)}
+      preventCloseOnClickOutside
+      size={"md"}
+    >
+      <ModalHeader title={headerTitle} />
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <ModalBody hasScrollingContent>
+          <Stack gap={3}>
+            <FormGroup legendText={""}>
+              <Controller
+                name="name"
+                control={control}
+                rules={{ required: true }}
+                render={({ field, fieldState }) => (
+                  <>
+                    <TextInput
+                      id="location"
+                      labelText={t("location", "Location Name")}
+                      placeholder={t("locationPlaceholder", "Add a location")}
+                      invalidText={fieldState.error?.message}
+                      {...field}
+                    />
+                  </>
+                )}
+              />
+              <div className={styles.loaderContainer}>
+                <Controller
+                  name="tags"
+                  control={control}
+                  render={({ field, fieldState }) => (
+                    <FilterableMultiSelect
+                      id="tag"
+                      titleText="Select tag(s)"
+                      helperText="This is helper text"
+                      items={Tags ?? []}
+                      {...field}
+                      itemToString={(item) => (item ? item.display : "")}
+                      selectionFeedback="top-after-reopen"
+                    />
+                  )}
+                />
+              </div>
+            </FormGroup>
+
+            {showErrorNotification && (
+              <InlineNotification
+                lowContrast
+                title={t("error", "Error")}
+                style={{ minWidth: "100%", margin: "0rem", padding: "0rem" }}
+                role="alert"
+                kind="error"
+                subtitle={t("pleaseFillField", formStateError) + "."}
+                onClose={() => setShowErrorNotification(false)}
+              />
+            )}
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={() => onModalChange(false)} kind="secondary">
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button disabled={!isDirty} type="submit">
+            <span>{t("save", "Save")}</span>
+          </Button>
+        </ModalFooter>
+      </form>
+    </ComposedModal>
+  );
+};
+
+export default LocationAdministrationForm;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { useStockLocationPages } from "./stock-locations-table.resource";
 import {
   Button,
@@ -12,6 +12,9 @@ import styles from "../stock-items/stock-items-table.scss";
 import { ResourceRepresentation } from "../core/api/api";
 import DataList from "../core/components/table/table.component";
 import { useTranslation } from "react-i18next";
+import { mutate } from "swr";
+import NewLocationForm from "./add-locations-form.component";
+import { Add } from "@carbon/react/icons";
 
 interface StockLocationsTableProps {
   status?: string;
@@ -20,20 +23,29 @@ interface StockLocationsTableProps {
 const StockLocationsItems: React.FC<StockLocationsTableProps> = () => {
   const { t } = useTranslation();
 
-  const { tableHeaders, tableRows, items, isLoadingLocations } =
-    useStockLocationPages({
-      v: ResourceRepresentation.Full,
-    });
+  const [showLocationModal, setAddLocationModal] = useState(false);
+
+  const { tableHeaders, tableRows, items, isLoading } = useStockLocationPages({
+    v: ResourceRepresentation.Full,
+  });
 
   const handleRefresh = () => {
     // search.refetch()
   };
 
-  const createStockItem = () => {
-    // search.refetch()
+  const createStockLocation = () => {
+    {
+      showLocationModal ? (
+        <NewLocationForm
+          onModalChange={setAddLocationModal}
+          showModal={showLocationModal}
+          mutate={mutate}
+        />
+      ) : null;
+    }
   };
 
-  if (isLoadingLocations) {
+  if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
   }
 
@@ -48,8 +60,19 @@ const StockLocationsItems: React.FC<StockLocationsTableProps> = () => {
                 Refresh
               </TableToolbarAction>
             </TableToolbarMenu>
-            <Button onClick={createStockItem} size="md" kind="primary">
-              {t("stockmanagement.addnewlocation", "Add Location")}
+            {showLocationModal ? (
+              <NewLocationForm
+                onModalChange={setAddLocationModal}
+                showModal={showLocationModal}
+                mutate={mutate}
+              />
+            ) : null}
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setAddLocationModal(true)}
+            >
+              {t("createLocation", "Create Location")}
             </Button>
           </>
         )}

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-lookups/stock-lookups.resource.ts

@@ -178,7 +178,7 @@ export function useUsers(filter: UserFilterCriteria) {
 
 // getUser
 export function useUser(id: string) {
-  const apiUrl = `${restBaseUrl}/user${id}`;
+  const apiUrl = `${restBaseUrl}/user/${id}`;
   const { data, error, isLoading } = useSWR<
     {
       data: User;

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,18 +48,17 @@ 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;
   }
 
   let operations: StockOperationType[] | null | undefined;
-
   const tabs: TabItem[] = [
     {
       name: isEditing
@@ -81,7 +85,7 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
             setManageStockItems(true);
             setSelectedIndex(1);
           }}
-          operation={props.operation}
+          operation={props?.operation}
         />
       ),
     },
@@ -119,7 +123,13 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
           setup={result}
           canEdit={canEdit}
           locked={false}
-          model={isEditing ? props?.model : result?.dto}
+          model={
+            isEditing
+              ? props?.model
+              : props?.operation?.name === "Stock Issue"
+              ? props?.model
+              : result?.dto
+          }
           requiresDispatchAcknowledgement={
             isEditing
               ? props?.model?.operationType === "return" ||

package/src/stock-operations/add-stock-operation/add-stock-utils.ts

@@ -58,7 +58,6 @@ function shouldDeleteDestinationUuid(operationType) {
 
 export function createBaseOperationPayload(model, item, operationType) {
   const req = Object.assign(model, item);
-
   const propertiesToDelete = [
     "submitted",
     "cancelledByFamilyName",
@@ -105,6 +104,5 @@ export function createBaseOperationPayload(model, item, operationType) {
   if (shouldDeleteDestinationUuid(operationType)) {
     delete req.destinationUuid;
   }
-
   return req;
 }

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

@@ -36,10 +36,7 @@ import rootStyles from "../../root.scss";
 import { ResourceRepresentation } from "../../core/api/api";
 import { useStockOperationPages } from "../stock-operations-table.resource";
 import { useStockOperationContext } from "./stock-operation-context/useStockOperationContext";
-import {
-  createBaseOperationPayload,
-  getRequisitionStockOperations,
-} from "./add-stock-utils";
+import { createBaseOperationPayload } from "./add-stock-utils";
 
 interface BaseOperationDetailsProps {
   isEditing?: boolean;
@@ -70,8 +67,8 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
     v: ResourceRepresentation.Full,
     totalCount: true,
   });
-  const requisitionStockOperations = getRequisitionStockOperations(items);
-  const operationType = operationFromString(operation.operationType);
+  const operationType = operationFromString(operation?.operationType);
+  const issueStockOperation = mapIssueStockLocations(model);
 
   const {
     handleSubmit,
@@ -79,7 +76,7 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
     formState: { errors },
     setValue,
   } = useForm<StockOperationFormData>({
-    defaultValues: model,
+    defaultValues: operationType === "stockissue" ? issueStockOperation : model,
     mode: "all",
     resolver: zodResolver(operationSchema(operationType)),
   });
@@ -112,34 +109,6 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
       <form
         className={`${rootStyles.formContainer} ${rootStyles.verticalForm}`}
       >
-        {operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE && (
-          <Controller
-            control={control}
-            name="requisitionStockOperationUuid"
-            render={({ field }) => (
-              <ComboBox
-                id="requisitionStockOperationUuid"
-                items={requisitionStockOperations}
-                onChange={(data: { selectedItem: StockOperationDTO }) => {
-                  field.onChange(data.selectedItem.uuid);
-                  Object.assign(
-                    model.stockOperationItems,
-                    data.selectedItem.stockOperationItems
-                  );
-                  setFormContext({
-                    stockItems: data.selectedItem.stockOperationItems,
-                  });
-                }}
-                itemToString={(item) => `${item?.operationNumber}` ?? ""}
-                titleText={t("requisitionStockOperation", "Requisition")}
-                invalid={!!errors.requisitionStockOperationUuid}
-                invalidText={errors.requisitionStockOperationUuid?.message}
-                placeholder={t("chooseARequisition", "Choose a requisition")}
-              />
-            )}
-          />
-        )}
-
         {canEdit && (
           <Controller
             control={control}
@@ -210,7 +179,11 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
         {(!canEdit || isEditing || lockSource) && (
           <TextInput
             id="sourceUuidLbl"
-            value={model?.sourceName ?? ""}
+            value={
+              operationType === "stockissue"
+                ? issueStockOperation.sourceName
+                : model?.sourceName ?? ""
+            }
             readOnly={true}
             labelText={operation?.hasDestination ? "From" : "From"}
           />
@@ -237,7 +210,11 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
         {(!canEdit || isEditing || lockDestination) && (
           <TextInput
             id="destinationUuidLbl"
-            value={model?.destinationName ?? ""}
+            value={
+              operationType === "stockissue"
+                ? issueStockOperation.destinationName
+                : model?.destinationName ?? ""
+            }
             readOnly={true}
             labelText={operation?.hasSource ? "To" : "To"}
           />
@@ -348,5 +325,19 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
     </div>
   );
 };
+function mapIssueStockLocations(stockOperation) {
+  /** Since we are using requisition information to issue stock,
+      please note that the locations will be inverted: the destination listed on the requisition will become the issuing location.
+  */
+  const { sourceUuid, sourceName, destinationUuid, destinationName } =
+    stockOperation;
+  return {
+    ...stockOperation,
+    sourceUuid: destinationUuid,
+    sourceName: destinationName,
+    destinationUuid: sourceUuid,
+    destinationName: sourceName,
+  };
+}
 
 export default BaseOperationDetails;

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

@@ -2,6 +2,7 @@ import { closeOverlay, launchOverlay } from "../core/components/overlay/hook";
 import React from "react";
 import {
   FetchResponse,
+  restBaseUrl,
   showModal,
   showNotification,
   showToast,
@@ -12,7 +13,10 @@ import {
   updateStockOperation,
 } from "./stock-operations.resource";
 import AddStockOperation from "./add-stock-operation/add-stock-operation.component";
-import { StockOperationType } from "../core/api/types/stockOperation/StockOperationType";
+import {
+  OperationType,
+  StockOperationType,
+} from "../core/api/types/stockOperation/StockOperationType";
 import { useLocation } from "react-router-dom";
 import { extractErrorMessagesFromResponse } from "../constants";
 import { handleMutate } from "./swr-revalidation";
@@ -28,12 +32,23 @@ export const addOrEditStockOperation = async (
     if (operation.operationType === "requisition") {
       delete payload.destinationName;
     }
+    if (operation.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE) {
+      const stockIssueOpsTypeUuid = "66666666-6666-6666-6666-666666666666";
+      delete payload.completedDate;
+      delete payload.completedBy;
+      delete payload.completedByFamilyName;
+      delete payload.completedByGivenName;
+      delete payload.operationTypeUuid;
+      delete payload.permission;
+      delete payload.locked;
+      payload["operationTypeUuid"] = stockIssueOpsTypeUuid;
+    }
     const response: FetchResponse<StockOperationDTO> = await (isEditing
       ? updateStockOperation
       : createStockOperation)(payload);
 
     if (response?.data) {
-      handleMutate("ws/rest/v1/stockmanagement/stockoperation");
+      handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
       showToast({
         critical: true,
         title: `${isEditing ? "Edit" : "Add"} Stock Operation`,

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

@@ -16,9 +16,10 @@ import {
   StopOperationActionType,
 } from "../../core/api/types/stockOperation/StockOperationAction";
 import { executeStockOperationAction } from "../stock-operations.resource";
-import { showNotification, showToast } from "@openmrs/esm-framework";
+import { restBaseUrl, showSnackbar } from "@openmrs/esm-framework";
 import { closeOverlay } from "../../core/components/overlay/hook";
 import { extractErrorMessagesFromResponse } from "../../constants";
+import { handleMutate } from "../swr-revalidation";
 
 interface StockOperationDialogProps {
   title: string;
@@ -92,28 +93,27 @@ const StockOperationDialog: React.FC<StockOperationDialogProps> = ({
     executeStockOperationAction(payload).then(
       () => {
         setIsApproving(false);
-        showToast({
-          critical: true,
+        showSnackbar({
           title: t("title", `${title} Operation`),
-          kind: "success",
-          description: t(
+          subtitle: t(
             "successMessage",
             `You have successfully ${title} operation `
           ),
-        });
-        closeModal();
+          kind: "success",
+        }),
+          closeModal();
         closeOverlay();
+        handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
       },
       (err) => {
         setIsApproving(false);
         const errorMessages = extractErrorMessagesFromResponse(err);
-        showNotification({
-          description: t("errorDescription", errorMessages.join(", ")),
+        showSnackbar({
           title: t("errorDescriptionTitle", "Error on saving form"),
+          subtitle: t("errorDescription", errorMessages.join(", ")),
           kind: "error",
-          critical: true,
-        });
-        closeModal();
+        }),
+          closeModal();
         closeOverlay();
       }
     );

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

@@ -20,7 +20,7 @@ const StockOperationIssueStockButton: React.FC<
     uuid: "",
     name: "Stock Issue",
     description: "",
-    operationType: "",
+    operationType: "stockissue",
     hasSource: false,
     sourceType: "Location",
     hasDestination: false,
@@ -40,8 +40,9 @@ const StockOperationIssueStockButton: React.FC<
     voided: false,
   };
 
+  const modifiedOperation = addRequisitionStockOperation(operation);
   const handleButtonClick = () => {
-    launchAddOrEditDialog(operation, false, type, operations, false);
+    launchAddOrEditDialog(modifiedOperation, false, type, operations, false);
   };
 
   return (
@@ -54,5 +55,12 @@ const StockOperationIssueStockButton: React.FC<
     </Button>
   );
 };
+function addRequisitionStockOperation(stockOperation) {
+  const { uuid } = stockOperation;
+  return {
+    ...stockOperation,
+    requisitionStockOperationUuid: uuid,
+  };
+}
 
 export default StockOperationIssueStockButton;