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

package/src/stock-items/add-stock-item/stock-item-rules/stock-item-rules.component.tsx

@@ -0,0 +1,222 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { ResourceRepresentation } from "../../../core/api/api";
+import { useStockItemRules } from "./stock-item-rules.resource";
+import {
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  Tile,
+  TableToolbarAction,
+  TableToolbarMenu,
+  DataTableSkeleton,
+  TableToolbarSearch,
+} from "@carbon/react";
+import { formatDisplayDate } from "../../../core/utils/datetimeUtils";
+import styles from "../../stock-items-table.scss";
+import { StockRule } from "../../../core/api/types/stockItem/StockRule";
+import AddStockRuleActionButton from "./add-stock-rule-button.component";
+import { isDesktop } from "@openmrs/esm-framework";
+import StockRulesFilter from "./stock-rules-filter.component";
+import { useTranslation } from "react-i18next";
+import StockRulesDeleteActionMenu from "./stock-rules-delete.component";
+import EditStockRuleActionsMenu from "./edit-stock-rule.component";
+
+interface StockItemRulesProps {
+  onSubmit?: () => void;
+  stockItemUuid: string;
+  model?: StockRule;
+  canEdit?: boolean;
+}
+
+const StockItemRules: React.FC<StockItemRulesProps> = ({
+  stockItemUuid,
+  model,
+  canEdit = true,
+}) => {
+  const { t } = useTranslation();
+  console.warn("Found stock uuid: " + stockItemUuid);
+  const {
+    isLoading,
+    items,
+    tableHeaders,
+    currentPage,
+    currentPageSize,
+    pageSizes,
+    totalItems,
+    setPageSize,
+    goTo,
+  } = useStockItemRules({
+    v: ResourceRepresentation.Default,
+    totalCount: true,
+    stockItemUuid: stockItemUuid,
+  });
+
+  const tableRows = useMemo(() => {
+    return items?.map((stockRule, index) => ({
+      ...stockRule,
+      id: `${stockRule?.id}-${index}`,
+      key: `key-${stockRule?.uuid}`,
+      uuid: `${stockRule?.uuid}`,
+      dateCreated: formatDisplayDate(stockRule?.dateCreated),
+      location: stockRule?.locationName,
+      quantity: `${stockRule?.quantity?.toLocaleString()} ${
+        stockRule?.packagingUomName ?? ""
+      }`,
+      name: `${stockRule?.name}`,
+      description: `${stockRule?.description}`,
+      evaluationFrequency: `${stockRule?.evaluationFrequency}`,
+      actionFrequency: `${stockRule?.actionFrequency}`,
+      lastActionDate: formatDisplayDate(stockRule?.lastActionDate),
+      nextActionDate: formatDisplayDate(stockRule?.nextActionDate),
+      enabled: stockRule.enabled ? "Yes" : "No",
+      actions: (
+        <>
+          <EditStockRuleActionsMenu
+            data={items[index]}
+            stockItemUuid={items[index].stockItemUuid}
+          />
+          <StockRulesDeleteActionMenu uuid={items[index].uuid} />
+        </>
+      ),
+    }));
+  }, [items]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <div className={styles.tableOverride}>
+      <div id="table-tool-bar">
+        <div></div>
+        <div className="right-filters"></div>
+      </div>
+      <DataTable
+        rows={tableRows}
+        headers={tableHeaders}
+        isSortable={true}
+        useZebraStyles={true}
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getTableProps,
+          getRowProps,
+          onInputChange,
+        }) => (
+          <TableContainer>
+            <TableToolbar
+              style={{
+                position: "static",
+                overflow: "visible",
+                backgroundColor: "color",
+              }}
+            >
+              <TableToolbarContent className={styles.toolbarContent}>
+                <TableToolbarSearch persistent onChange={onInputChange} />
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  <StockRulesFilter stockItemUuid={stockItemUuid} />
+                </div>
+                <TableToolbarMenu>
+                  <TableToolbarAction onClick={""}>Refresh</TableToolbarAction>
+                </TableToolbarMenu>
+                <AddStockRuleActionButton stockItemUuid={stockItemUuid} />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map(
+                    (header: any) =>
+                      header.key !== "details" && (
+                        <TableHeader
+                          {...getHeaderProps({
+                            header,
+                            isSortable: header.isSortable,
+                          })}
+                          className={
+                            isDesktop
+                              ? styles.desktopHeader
+                              : styles.tabletHeader
+                          }
+                          key={`${header.key}`}
+                        >
+                          {header.header?.content ?? header.header}
+                        </TableHeader>
+                      )
+                  )}
+                  <TableHeader></TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row: any) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow
+                        className={
+                          isDesktop ? styles.desktopRow : styles.tabletRow
+                        }
+                        {...getRowProps({ row })}
+                      >
+                        {row.cells.map(
+                          (cell: any) =>
+                            cell?.info?.header !== "details" && (
+                              <TableCell key={cell.id}>{cell.value}</TableCell>
+                            )
+                        )}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>
+                      {t("noRulesToDisplay", "No Stock rules to display")}
+                    </p>
+                    <p className={styles.helper}>
+                      {t("checkFilters", "Check the filters above")}
+                    </p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+          </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}
+      />
+    </div>
+  );
+};
+
+export default StockItemRules;

package/src/stock-items/add-stock-item/stock-item-rules/stock-item-rules.resource.tsx

@@ -0,0 +1,72 @@
+import { useMemo, useState } from "react";
+import { StockRuleFilter, useStockRules } from "../../stock-items.resource";
+import { usePagination } from "@openmrs/esm-framework";
+
+export function useStockItemRules(filter: StockRuleFilter) {
+  const { items, isLoading, isError } = useStockRules(filter);
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const {
+    goTo,
+    results: paginatedItems,
+    currentPage,
+  } = usePagination(items.results, currentPageSize);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        key: "location",
+        header: "Location",
+      },
+      {
+        key: "name",
+        header: "Name",
+      },
+      {
+        key: "quantity",
+        header: "Quantity Threshold",
+      },
+      {
+        key: "evaluationFrequency",
+        header: "Frequency Check",
+      },
+      {
+        key: "actionFrequency",
+        header: "Notification Frequency",
+      },
+      {
+        key: "alertRole",
+        header: "Alert Role",
+      },
+      {
+        key: "mailRole",
+        header: "Mail Role",
+      },
+      {
+        key: "enabled",
+        header: "Enabled?",
+      },
+      {
+        // id: 4,
+        header: "actions",
+        key: "actions",
+      },
+    ],
+    []
+  );
+
+  return {
+    items: paginatedItems,
+    totalItems: items?.totalCount,
+    currentPage,
+    currentPageSize,
+    paginatedItems,
+    goTo,
+    pageSizes,
+    isLoading,
+    isError,
+    setPageSize,
+    tableHeaders,
+  };
+}

package/src/stock-items/add-stock-item/stock-item-rules/stock-item-rules.scss

@@ -0,0 +1,13 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+section {
+  margin: spacing.$spacing-03;
+}
+
+.form {
+  display: grid;
+  gap: 1.5rem;
+  padding-top: 1rem;
+}

package/src/stock-items/add-stock-item/stock-item-rules/stock-rules-delete.component.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Button, InlineLoading } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { TrashCan } from "@carbon/react/icons";
+import { deleteStockRule } from "../../stock-items.resource";
+import { showModal, showNotification, showToast } from "@openmrs/esm-framework";
+
+interface StockRulesDeleteActionMenuProps {
+  uuid: string;
+}
+
+const StockRulesDeleteActionMenu: React.FC<StockRulesDeleteActionMenuProps> = ({
+  uuid,
+}) => {
+  const { t } = useTranslation();
+
+  const [deletingRule, setDeletingRule] = useState(false);
+
+  const handleDeleteStockRule = React.useCallback(() => {
+    const close = showModal("delete-stock-rule-modal", {
+      close: () => close(),
+      uuid: uuid,
+      onConfirmation: () => {
+        deleteStockRule(uuid)
+          .then(
+            () => {
+              setDeletingRule(false);
+              showToast({
+                critical: true,
+                title: t("deletingRule", "Delete Rule"),
+                kind: "success",
+                description: t(
+                  "stockruledeletedsuccessfully",
+                  "Stock Rule Deleted Successfully"
+                ),
+              });
+            },
+            (error) => {
+              setDeletingRule(false);
+              showNotification({
+                title: t(`errorDeletingRule', 'error deleting a rule`),
+                kind: "error",
+                critical: true,
+                description: error?.message,
+              });
+            }
+          )
+          .catch();
+        close();
+      },
+    });
+  }, [t, uuid]);
+
+  const deleteButton = (
+    <Button
+      kind="ghost"
+      size="md"
+      onClick={handleDeleteStockRule}
+      iconDescription={t("deleteRule", "Delete Rule")}
+      renderIcon={(props) => <TrashCan size={16} {...props} />}
+    />
+  );
+
+  return deletingRule ? <InlineLoading /> : deleteButton;
+};
+
+export default StockRulesDeleteActionMenu;

package/src/stock-items/add-stock-item/stock-item-rules/stock-rules-filter.component.tsx

@@ -0,0 +1,38 @@
+import styles from "./stock-rules-filter.scss";
+import { Dropdown, DropdownSkeleton } from "@carbon/react";
+import React from "react";
+import { useStockRules } from "./stock-rules.resource";
+import { ResourceRepresentation } from "../../../core/api/api";
+
+interface StockRulesFilterProps {
+  stockItemUuid: string;
+}
+
+const StockRulesFilter: React.FC<StockRulesFilterProps> = ({
+  stockItemUuid,
+}) => {
+  const { items, isLoading, isError } = useStockRules({
+    v: ResourceRepresentation.Default,
+    totalCount: true,
+    stockItemUuid: stockItemUuid,
+  });
+
+  if (isLoading || isError) {
+    return <DropdownSkeleton />;
+  }
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          id="stockRulesFiter"
+          items={[...items.results]}
+          itemToString={(item) => (item ? item.display : "Not Set")}
+          type="inline"
+          size="sm"
+        />
+      </div>
+    </>
+  );
+};
+
+export default StockRulesFilter;

package/src/stock-items/add-stock-item/stock-item-rules/stock-rules-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-items/add-stock-item/stock-item-rules/stock-rules.resource.ts

@@ -0,0 +1,79 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { ResourceFilterCriteria, toQueryParams } from "../../../core/api/api";
+import useSWR from "swr";
+import { PageableResult } from "../../../core/api/types/PageableResult";
+import { StockRule } from "../../../core/api/types/stockItem/StockRule";
+
+export interface StockSourceFilter extends ResourceFilterCriteria {
+  stockItemUuid?: string | null;
+}
+
+// Get Stock Rules
+export function useStockRules(filter: StockSourceFilter) {
+  const apiUrl = `ws/rest/v1/stockmanagement/stockrule${toQueryParams(filter)}`;
+
+  const { data, error, isLoading } = useSWR<
+    { data: PageableResult<StockRule> },
+    Error
+  >(apiUrl, openmrsFetch);
+
+  return {
+    items: data?.data || <PageableResult<StockRule>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// Get Stock Rule
+export function useStockRule(id: string) {
+  const apiUrl = `ws/rest/v1/stockmanagement/stockrule/${id}`;
+  const { data, error, isLoading } = useSWR<{ data: StockRule }, Error>(
+    apiUrl,
+    openmrsFetch
+  );
+  return {
+    items: data.data ? data.data : [],
+    isLoading,
+    isError: error,
+  };
+}
+
+// Delete Stock Rule
+export function deleteStockRule(ids: string[]) {
+  let otherIds = ids.reduce((p, c, i) => {
+    if (i === 0) return p;
+    p += (p.length > 0 ? "," : "") + encodeURIComponent(c);
+    return p;
+  }, "");
+  if (otherIds.length > 0) {
+    otherIds = "?ids=" + otherIds;
+  }
+  const apiUrl = `ws/rest/v1/stockmanagement/stockrule/${ids[0]}${otherIds}`;
+  const abortController = new AbortController();
+  return openmrsFetch(apiUrl, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+  });
+}
+
+// Create Or Update Stock Rule
+export function createOrUpdateStockRule(item: StockRule) {
+  const isNew = item.uuid != null;
+
+  const apiUrl = `ws/rest/v1/stockmanagement/stockrule${
+    isNew ? "/" + item.uuid : ""
+  }`;
+  const abortController = new AbortController();
+  return openmrsFetch(apiUrl, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+    // body: { ...item, sourceType: item?.sourceType?.uuid },
+    body: { ...item },
+  });
+}

package/src/stock-items/add-stock-item/stock-item-units-edit/stock-item-units-edit.component.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useStockItem } from "../../stock-items.resource";
+import DispensingPackageMeasurement from "../dispensing-package-measurement/dispensing-package-measurement.component";
+import { Control, FormState } from "react-hook-form";
+import { StockItemFormData } from "../../validationSchema";
+import ControlledNumberInput from "../../../core/components/carbon/controlled-number-input/controlled-number-input.component";
+import { NumberInputSkeleton } from "@carbon/react";
+
+interface StockItemUnitsEditProps {
+  stockItemUuid: string;
+  control: Control<StockItemFormData>;
+  formState: FormState<StockItemFormData>;
+}
+
+const StockItemUnitsEdit: React.FC<StockItemUnitsEditProps> = ({
+  stockItemUuid,
+  control,
+  formState: { errors },
+}) => {
+  const { t } = useTranslation();
+
+  const { item: stockItem, isLoading } = useStockItem(stockItemUuid);
+
+  if (
+    !(
+      stockItem &&
+      stockItem.packagingUnits &&
+      stockItem.packagingUnits.length > 0
+    )
+  )
+    return <></>;
+
+  return (
+    <>
+      <DispensingPackageMeasurement
+        name="dispensingUnitPackagingUoMUuid"
+        controllerName="dispensingUnitPackagingUoMUuid"
+        control={control}
+        title={t(
+          "dispensingUnitOfMeasurement",
+          "Dispensing packaging unit of measurement:"
+        )}
+        placeholder={t("chooseAPackagingUoM", "Choose a packaging UoM")}
+        isLoading={isLoading}
+        packagingUnits={stockItem.packagingUnits}
+        invalid={!!errors.dispensingUnitPackagingUoMUuid}
+        invalidText={
+          errors.dispensingUnitPackagingUoMUuid &&
+          errors?.dispensingUnitPackagingUoMUuid?.message
+        }
+      />
+      <DispensingPackageMeasurement
+        name="defaultStockOperationsUoMUuid"
+        controllerName="defaultStockOperationsUoMUuid"
+        control={control}
+        title={t(
+          "defaultStockOperationsPackagingUnit:",
+          "Default stock operations packaging unit:"
+        )}
+        placeholder={t("chooseAPackagingUoM", "Choose a packaging UoM")}
+        isLoading={isLoading}
+        packagingUnits={stockItem.packagingUnits}
+        invalid={!!errors.defaultStockOperationsUoMUuid}
+        invalidText={
+          errors.defaultStockOperationsUoMUuid &&
+          errors?.defaultStockOperationsUoMUuid?.message
+        }
+      />
+      {isLoading ? (
+        <NumberInputSkeleton />
+      ) : (
+        <ControlledNumberInput
+          id="reorderLevel"
+          name="reorderLevel"
+          control={control}
+          controllerName="reorderLevel"
+          size={"md"}
+          allowEmpty={true}
+          label={t("orderLevel", "Reorder level:")}
+          invalid={!!errors.reorderLevel}
+          value={stockItem.reorderLevel ?? ""}
+          invalidText={errors.reorderLevel && errors?.reorderLevel?.message}
+        />
+      )}
+      <DispensingPackageMeasurement
+        name="reorderLevelUoMUuid"
+        controllerName="reorderLevelUoMUuid"
+        control={control}
+        title={t("reorderLevelPackagingUnit:", "Reorder level packaging unit:")}
+        placeholder={t("notSet", "Not Set")}
+        isLoading={isLoading}
+        packagingUnits={stockItem.packagingUnits}
+        invalid={!!errors.reorderLevelUoMUuid}
+        invalidText={
+          errors.reorderLevelUoMUuid && errors?.reorderLevelUoMUuid?.message
+        }
+      />
+      {isLoading ? (
+        <NumberInputSkeleton />
+      ) : (
+        <ControlledNumberInput
+          id="purchasePrice"
+          name="purchasePrice"
+          control={control}
+          controllerName="purchasePrice"
+          size={"md"}
+          allowEmpty={true}
+          label={t("purchasePrice", "Purchase Price")}
+          value={stockItem.purchasePrice ?? ""}
+          invalid={!!errors.purchasePrice}
+          invalidText={errors.purchasePrice && errors?.purchasePrice?.message}
+        />
+      )}
+      <DispensingPackageMeasurement
+        name="purchasePriceUoMUuid"
+        controllerName="purchasePriceUoMUuid"
+        control={control}
+        title={t("purchasePricePackagingUnit", "Purchase price packaging unit")}
+        placeholder={t("notSet", "Not Set")}
+        isLoading={isLoading}
+        packagingUnits={stockItem.packagingUnits}
+        invalid={!!errors.purchasePriceUoMUuid}
+        invalidText={
+          errors.purchasePriceUoMUuid && errors?.purchasePriceUoMUuid?.message
+        }
+      />
+    </>
+  );
+};
+
+export default StockItemUnitsEdit;

package/src/stock-items/add-stock-item/stock-rules/stock-rules.component.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import addStockStyles from "../add-stock-item.scss";
+
+interface StockRulesProps {
+  onSubmit?: () => void;
+}
+
+const StockRules: React.FC<StockRulesProps> = () => {
+  return (
+    <div className={addStockStyles.formContainer}>
+      Stock rules Coming soon ...
+    </div>
+  );
+};
+
+export default StockRules;