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

package/src/stock-items/add-stock-item/stock-item-category-selector/stock-item-category-selector.component.tsx

@@ -0,0 +1,67 @@
+import React, { ReactNode } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { Concept } from "../../../core/api/types/concept/Concept";
+import { ComboBox, TextInputSkeleton } from "@carbon/react";
+import { useConceptById } from "../../../stock-lookups/stock-lookups.resource";
+import { STOCK_ITEM_CATEGORY_CONCEPT_ID } from "../../../constants";
+
+interface StockItemCategorySelectorProps<T> {
+  categoryUuid?: string;
+  onCategoryUuidChange?: (unit: Concept) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const StockItemCategorySelector = <T,>(
+  props: StockItemCategorySelectorProps<T>
+) => {
+  const {
+    items: { answers: categories },
+    isLoading,
+  } = useConceptById(STOCK_ITEM_CATEGORY_CONCEPT_ID);
+
+  if (isLoading) return <TextInputSkeleton />;
+
+  return (
+    <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={"md"}
+          items={categories || []}
+          onChange={(data: { selectedItem: Concept }) => {
+            props.onCategoryUuidChange?.(data.selectedItem);
+            onChange(data.selectedItem?.uuid);
+          }}
+          initialSelectedItem={
+            categories?.find((p) => p.uuid === props.categoryUuid) || {}
+          }
+          itemToString={(item?: Concept) =>
+            item && item?.display ? `${item?.display}` : ""
+          }
+          shouldFilterItem={() => true}
+          value={categories?.find((p) => p.uuid === value)?.display ?? ""}
+          placeholder={props.placeholder}
+          ref={ref}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        />
+      )}
+    />
+  );
+};
+
+export default StockItemCategorySelector;

package/src/stock-items/add-stock-item/stock-item-category-selector/stock-item-category-selector.test.tsx

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

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

@@ -0,0 +1,239 @@
+import React, { forwardRef, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Save } from "@carbon/react/icons";
+
+import { Button, FormGroup, InlineLoading } from "@carbon/react";
+import { StockItemDTO } from "../../../core/api/types/stockItem/StockItem";
+import DrugSelector from "../drug-selector/drug-selector.component";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  stockItemDetailsSchema,
+  StockItemFormData,
+} from "../../validationSchema";
+import ControlledRadioButtonGroup from "../../../core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.component";
+import ControlledNumberInput from "../../../core/components/carbon/controlled-number-input/controlled-number-input.component";
+import ControlledTextInput from "../../../core/components/carbon/controlled-text-input/controlled-text-input.component";
+import DispensingUnitSelector from "../dispensing-unit-selector/dispensing-unit-selector.component";
+import PreferredVendorSelector from "../preferred-vendor-selector/preferred-vendor-selector.component";
+import StockItemCategorySelector from "../stock-item-category-selector/stock-item-category-selector.component";
+import StockItemUnitsEdit from "../stock-item-units-edit/stock-item-units-edit.component";
+import { SaveStockItem } from "../../types";
+import ConceptsSelector from "../concepts-selector/concepts-selector.component";
+import rootStyles from "../../../root.scss";
+import { closeOverlay } from "../../../core/components/overlay/hook";
+import { expirationOptions, radioOptions } from "./stock-item-details.resource";
+import { handleMutate } from "../../../stock-operations/swr-revalidation";
+
+interface StockItemDetailsProps {
+  model: StockItemDTO;
+  onSave: SaveStockItem;
+  isEditing?: boolean;
+  handleTabChange: (index) => void;
+}
+
+const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
+  ({ model, onSave, isEditing, handleTabChange }) => {
+    const { t } = useTranslation();
+    const { handleSubmit, control, formState } = useForm<StockItemFormData>({
+      defaultValues: model,
+      mode: "all",
+      resolver: zodResolver(stockItemDetailsSchema),
+    });
+
+    const { errors } = formState;
+    const handleSave = async (item: StockItemDTO) => {
+      try {
+        setIsSaving(true);
+
+        // Restore uuid
+        item.uuid = model.uuid;
+        await onSave(item);
+        handleTabChange(1);
+        handleMutate("ws/rest/v1/stockmanagement/stockitem");
+      } catch (e) {
+        // Show notification
+      } finally {
+        setIsSaving(false);
+      }
+    };
+
+    const [isSaving, setIsSaving] = useState(false);
+    const [isDrug, setIsDrug] = useState(false);
+    const [hasExpiration, setHasExpiration] = useState(false);
+
+    useEffect(() => {
+      setIsDrug(model.isDrug ?? false);
+      setHasExpiration(model.hasExpiration ?? false);
+    }, [model.hasExpiration, model.isDrug]);
+
+    return (
+      <form
+        className={`${rootStyles.formContainer} ${rootStyles.verticalForm}`}
+      >
+        <FormGroup
+          className="clear-margin-bottom"
+          legendText={t("itemType", "Item Type")}
+          title={t("itemType", "Item Type")}
+        >
+          <ControlledRadioButtonGroup
+            control={control}
+            name="isDrug"
+            controllerName="isDrug"
+            legendText=""
+            invalid={!!errors.isDrug}
+            invalidText={errors.isDrug && errors?.isDrug?.message}
+            onChange={(selection: boolean) => {
+              setIsDrug(selection);
+            }}
+            options={radioOptions} // Pass radioOptions directly
+          />
+        </FormGroup>
+        {isDrug && (
+          <DrugSelector
+            name="drugUuid"
+            controllerName="drugUuid"
+            control={control}
+            title={t("pleaseSpecify", "Please specify:")}
+            invalid={!!errors.drugUuid}
+            invalidText={errors.drugUuid && errors?.drugUuid?.message}
+          />
+        )}
+        {isDrug != undefined && !isDrug && (
+          <ConceptsSelector
+            name="conceptUuid"
+            controllerName="conceptUuid"
+            control={control}
+            title={t("pleaseSpecify", "Please specify:")}
+            placeholder={t("chooseAnItem", "Choose an item")}
+            invalid={!!errors.drugUuid}
+            invalidText={errors.drugUuid && errors?.drugUuid?.message}
+          />
+        )}
+        <ControlledTextInput
+          id="commonName"
+          name="commonName"
+          control={control}
+          controllerName="commonName"
+          maxLength={255}
+          size={"md"}
+          value={`${model?.commonName ?? ""}`}
+          labelText={t("commonName", "Common name:")}
+          invalid={!!errors.commonName}
+          invalidText={errors.commonName && errors?.commonName?.message}
+        />
+        <ControlledTextInput
+          id="acronym"
+          maxLength={255}
+          name="acronym"
+          control={control}
+          controllerName="acronym"
+          size={"md"}
+          labelText={t("abbreviation", "Abbreviation:")}
+          invalid={!!errors.acronym}
+          invalidText={errors.acronym && errors?.acronym?.message}
+        />
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            justifyContent: "center",
+          }}
+        >
+          <FormGroup
+            className="clear-margin-bottom"
+            legendText={t("hasExpiration", "Does the item expire?")}
+            title={t("hasExpiration", "Does the item expire?")}
+          >
+            <ControlledRadioButtonGroup
+              name="hasExpiration"
+              controllerName="hasExpiration"
+              control={control}
+              legendText=""
+              invalid={!!errors.hasExpiration}
+              invalidText={
+                errors.hasExpiration && errors?.hasExpiration?.message
+              }
+              onChange={(selection: boolean) => {
+                setHasExpiration(selection);
+              }}
+              options={expirationOptions} // Pass expirationOptions directly
+            />
+          </FormGroup>
+
+          {hasExpiration && (
+            <ControlledNumberInput
+              id="expiryNotice"
+              name="expiryNotice"
+              control={control}
+              controllerName="expiryNotice"
+              size={"md"}
+              allowEmpty={true}
+              label={t("expiryNoticeDays", "Expiration Notice (days)")}
+              invalid={!!errors.expiryNotice}
+              invalidText={errors.expiryNotice && errors?.expiryNotice?.message}
+            />
+          )}
+        </div>
+        <PreferredVendorSelector
+          name="preferredVendorUuid"
+          controllerName="preferredVendorUuid"
+          control={control}
+          title={t("whoIsThePreferredVendor", "Who is the preferred vendor?")}
+          placeholder={t("chooseVendor", "Choose vendor")}
+          invalid={!!errors.preferredVendorUuid}
+          invalidText={
+            errors.preferredVendorUuid && errors?.preferredVendorUuid?.message
+          }
+        />
+        <StockItemCategorySelector
+          name="categoryUuid"
+          controllerName="categoryUuid"
+          control={control}
+          title={t("category:", "Category:")}
+          placeholder={t("chooseACategory", "Choose a category")}
+          invalid={!!errors.categoryUuid}
+          invalidText={errors.categoryUuid && errors?.categoryUuid?.message}
+        />
+        {isDrug && (
+          <DispensingUnitSelector
+            name="dispensingUnitUuid"
+            controllerName="dispensingUnitUuid"
+            control={control}
+            title={t("dispensingUnit", "Dispensing Unit:")}
+            placeholder={t("dispensingUnitHolder", "Choose a dispensing unit")}
+            invalid={!!errors.dispensingUnitUuid}
+            invalidText={
+              errors.dispensingUnitUuid && errors?.dispensingUnitUuid?.message
+            }
+          />
+        )}
+        {isDrug && isEditing && (
+          <StockItemUnitsEdit
+            control={control}
+            formState={formState}
+            stockItemUuid={model.uuid}
+          />
+        )}
+
+        <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+          <Button
+            name="save"
+            type="button"
+            className="submitButton"
+            onClick={handleSubmit(handleSave)}
+            kind="primary"
+            renderIcon={Save}
+          >
+            {isSaving ? <InlineLoading /> : t("save", "Save")}
+          </Button>
+          <Button kind="secondary" onClick={closeOverlay}>
+            {t("cancel", "Cancel")}
+          </Button>
+        </div>
+      </form>
+    );
+  }
+);
+
+export default StockItemDetails;

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

@@ -0,0 +1,14 @@
+export interface RadioOption {
+  label: string;
+  value: boolean;
+}
+
+export const radioOptions: RadioOption[] = [
+  { label: "Drug", value: true },
+  { label: "Other", value: false },
+];
+
+export const expirationOptions: RadioOption[] = [
+  { label: "Yes", value: true },
+  { label: "No", value: false },
+];

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.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/add-stock-rule-button.component.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@carbon/react";
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { launchOverlay } from "../../../core/components/overlay/hook";
+import StockRulesAddOrUpdate from "./add-stock-rules.component";
+
+interface AddStockRuleActionButtonProps {
+  stockItemUuid: string;
+}
+
+const AddStockRuleActionButton: React.FC<AddStockRuleActionButtonProps> = ({
+  stockItemUuid,
+}) => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    launchOverlay(
+      "Add Stock Rule",
+      <StockRulesAddOrUpdate stockItemUuid={stockItemUuid} />
+    );
+  }, []);
+
+  return (
+    <Button onClick={handleClick} size="md" kind="primary">
+      {t("stockmanagement.addnewrule", "Add New Rule")}
+    </Button>
+  );
+};
+
+export default AddStockRuleActionButton;