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

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

@@ -0,0 +1,525 @@
+import {
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  InlineLoading,
+  Toggle,
+  DatePickerInput,
+  DatePicker,
+  ComboBox,
+  Select,
+  SelectItem,
+} from "@carbon/react";
+import React, { ChangeEvent, useMemo, useState } from "react";
+import styles from "./add-stock-user-role-scope.scss";
+import {
+  UserFilterCriteria,
+  useRoles,
+  useStockOperationTypes,
+  useStockTagLocations,
+  useUser,
+  useUsers,
+} from "../../stock-lookups/stock-lookups.resource";
+import { ResourceRepresentation } from "../../core/api/api";
+import { closeOverlay } from "../../core/components/overlay/hook";
+import { useTranslation } from "react-i18next";
+import { UserRoleScope } from "../../core/api/types/identity/UserRoleScope";
+import { createOrUpdateUserRoleScope } from "../stock-user-role-scopes.resource";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+import { UserRoleScopeOperationType } from "../../core/api/types/identity/UserRoleScopeOperationType";
+import { UserRoleScopeLocation } from "../../core/api/types/identity/UserRoleScopeLocation";
+import {
+  DATE_PICKER_CONTROL_FORMAT,
+  DATE_PICKER_FORMAT,
+  INVENTORY_ADMNISTRATOR_ROLE_UUID,
+  INVENTORY_CLERK_ROLE_UUID,
+  INVENTORY_DISPENSING_ROLE_UUID,
+  INVENTORY_MANAGER_ROLE_UUID,
+  INVENTORY_REPORTING_ROLE_UUID,
+  formatForDatePicker,
+  today,
+} from "../../constants";
+import { debounce } from "lodash-es";
+import { User } from "../../core/api/types/identity/User";
+import { Role } from "../../core/api/types/identity/Role";
+import { StockOperationType } from "../../core/api/types/stockOperation/StockOperationType";
+import { handleMutate } from "../swr-revalidation";
+
+const MinDate: Date = today();
+
+interface AddStockUserRoleScopeProps {
+  model?: UserRoleScope;
+}
+
+const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
+  model,
+}) => {
+  const { t } = useTranslation();
+
+  const [formModel, setFormModel] = useState<UserRoleScope>({ ...model });
+
+  const [roles, setRoles] = useState<Role[]>([]);
+
+  const { data: user } = useUser(model?.uuid);
+
+  // operation types
+  const {
+    types: { results: stockOperations },
+    isLoading,
+  } = useStockOperationTypes();
+
+  // get users
+  const {
+    items: users,
+
+    isLoading: loadingUsers,
+  } = useUsers({ v: ResourceRepresentation.Default });
+
+  // get roles
+  const { items: rolesData, isLoading: loadingRoles } = useRoles({
+    v: ResourceRepresentation.Default,
+  });
+
+  /* Only load locations tagged to perform stock related activities.
+     Unless a location is tag as main store, main pharmacy or dispensing, it will not be listed here.
+
+   */
+  const { stockLocations } = useStockTagLocations();
+  const onEnabledChanged = (
+    cvt: React.ChangeEvent<HTMLInputElement>,
+    data: { checked: boolean; id: string }
+  ): void => {
+    const isEnabled = !formModel?.enabled;
+    setFormModel({ ...formModel, enabled: isEnabled });
+  };
+
+  const onPermanentChanged = (
+    cvt: React.ChangeEvent<HTMLInputElement>,
+    data: { checked: boolean; id: string }
+  ): void => {
+    const isPermanent = !formModel?.permanent;
+    setFormModel({
+      ...formModel,
+      permanent: isPermanent,
+      activeFrom: undefined,
+      activeTo: undefined,
+    });
+  };
+
+  const onStockOperationTypeChanged = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    uuid: string,
+    isChecked: boolean
+  ): void => {
+    const operationType = formModel?.operationTypes?.find(
+      (x) => x.operationTypeUuid === event?.target?.value
+    );
+    if (operationType) {
+      const newOperationTypes = [
+        ...formModel.operationTypes.filter(
+          (x) => x.operationTypeUuid !== operationType?.operationTypeUuid
+        ),
+      ];
+      setFormModel({ ...formModel, operationTypes: newOperationTypes });
+    } else {
+      const stockOperationType = stockOperations?.find(
+        (x) => x.uuid === event?.target?.value
+      );
+      const operationType: UserRoleScopeOperationType = {
+        operationTypeName: stockOperationType?.name,
+        operationTypeUuid: stockOperationType?.uuid,
+      } as unknown as UserRoleScopeOperationType;
+      setFormModel({
+        ...formModel,
+        operationTypes: [...(formModel?.operationTypes ?? []), operationType],
+      });
+    }
+  };
+
+  const onLocationCheckBoxChanged = (
+    event: ChangeEvent<HTMLInputElement>,
+    id: string
+  ): void => {
+    const selectedLocation = formModel?.locations?.find(
+      (x) => x.locationUuid === event?.target?.value
+    );
+    if (selectedLocation) {
+      const newLocations = [
+        ...(formModel?.locations?.filter(
+          (x) => x.locationUuid !== selectedLocation?.locationUuid
+        ) ?? []),
+      ];
+      setFormModel({ ...formModel, locations: newLocations });
+    } else {
+      const loc = stockLocations?.find((x) => x.id === event?.target?.value);
+      const newLocation: UserRoleScopeLocation = {
+        locationName: loc?.name,
+        locationUuid: loc?.id,
+        enableDescendants: false,
+      } as unknown as UserRoleScopeLocation;
+      const newLocations = [...(formModel?.locations ?? []), newLocation];
+      setFormModel({ ...formModel, locations: newLocations });
+    }
+  };
+
+  const findCheckedLocation = (
+    location: fhir.Location
+  ): UserRoleScopeLocation | null => {
+    const result = formModel?.locations?.filter(
+      (x) => x.locationUuid === location.id
+    );
+    return result && result.length > 0 ? result[0] : null;
+  };
+
+  const onActiveDatesChange = (dates: Date[]): void => {
+    setFormModel({ ...formModel, activeFrom: dates[0], activeTo: dates[1] });
+  };
+  const handleUsersSearch = useMemo(
+    () =>
+      debounce((searchTerm) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useUsers({
+          v: ResourceRepresentation.Default,
+          q: searchTerm,
+        } as any as UserFilterCriteria);
+      }, 300),
+    []
+  );
+
+  const onUserChanged = (data: { selectedItem: User }) => {
+    const stockRolesUUIDs = [
+      INVENTORY_CLERK_ROLE_UUID,
+      INVENTORY_MANAGER_ROLE_UUID,
+      INVENTORY_DISPENSING_ROLE_UUID,
+      INVENTORY_REPORTING_ROLE_UUID,
+      INVENTORY_ADMNISTRATOR_ROLE_UUID,
+    ];
+
+    const filteredStockRoles = data.selectedItem?.roles.filter((role) =>
+      stockRolesUUIDs.includes(role.uuid)
+    );
+    setFormModel({ ...formModel, userUuid: data.selectedItem?.uuid });
+    setRoles(filteredStockRoles ?? []);
+
+    console.info(roles);
+  };
+
+  const onRoleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const rootLocations = stockLocations
+      ?.filter((x) => !x.id)
+      ?.map((x) => x.id);
+    const filteredLocations =
+      formModel?.locations?.filter(
+        (x) =>
+          !rootLocations ||
+          rootLocations.length === 0 ||
+          !rootLocations.some((p) => p === x.locationUuid)
+      ) ?? [];
+
+    setFormModel({
+      ...formModel,
+      role: e.target.value,
+      locations: filteredLocations,
+    });
+  };
+
+  const onEnableDescendantsChanged = (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedLocation = formModel?.locations?.find(
+      (x) => x.locationUuid === event?.target?.value
+    );
+    if (selectedLocation) {
+      const enableDescendants = !(selectedLocation.enableDescendants === true);
+      const newModifiedLocation = {
+        ...selectedLocation,
+        enableDescendants: enableDescendants,
+      };
+      setFormModel({
+        ...formModel,
+        locations: [
+          ...(formModel?.locations?.filter(
+            (x) => x.locationUuid !== selectedLocation?.locationUuid
+          ) ?? []),
+          newModifiedLocation,
+        ],
+      });
+    }
+  };
+
+  const isOperationChecked = (operationType: StockOperationType) => {
+    return (
+      formModel?.operationTypes?.filter(
+        (x) => x.operationTypeUuid === operationType.uuid
+      )?.length > 0
+    );
+  };
+
+  const addStockUserRole = async (e) => {
+    e.preventDefault();
+
+    createOrUpdateUserRoleScope(formModel).then(
+      (res) => {
+        handleMutate("ws/rest/v1/stockmanagement/userrolescope");
+        showToast({
+          critical: true,
+          title: t("addUserRole", "Add User role"),
+          kind: "success",
+          description: t(
+            "successfullysaved",
+            `You have successfully saved user role scope `
+          ),
+        });
+        closeOverlay();
+      },
+      (err) => {
+        showNotification({
+          title: t(
+            `errorSaving user role scope', 'Error Saving user role scope`
+          ),
+          kind: "error",
+          critical: true,
+          description: err?.message,
+        });
+
+        closeOverlay();
+      }
+    );
+  };
+
+  if (isLoading || loadingRoles || loadingUsers) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription="Loading"
+        description="Loading data..."
+      />
+    );
+  }
+
+  return (
+    <div>
+      <Form>
+        <ModalHeader />
+        <ModalBody>
+          <section className={styles.section}>
+            <div>
+              {users?.results?.length > 0 && (
+                <>
+                  <span className={styles.subTitle}>{t("user", "User")}</span>
+                  <ComboBox
+                    id="userName"
+                    size="md"
+                    labelText={t("user", "User")}
+                    items={users?.results}
+                    onChange={onUserChanged}
+                    shouldFilterItem={(data) => true}
+                    onFocus={() => users?.results || handleUsersSearch("")}
+                    onToggleClick={() =>
+                      users?.results || handleUsersSearch("")
+                    }
+                    itemToString={(item) =>
+                      `${item?.person?.display ?? item?.display ?? ""}`
+                    }
+                    placeholder="Filter..."
+                  />
+                </>
+              )}
+            </div>
+          </section>
+          <section className={styles.section}>
+            <div>
+              <Select
+                name="role"
+                className="select-field"
+                labelText={t("role", "Role")}
+                id="select-role"
+                value={formModel.role ?? "placeholder-item"}
+                onChange={onRoleChange}
+              >
+                <SelectItem
+                  disabled
+                  hidden
+                  value="placeholder-item"
+                  text={t("Choose a role")}
+                />
+                {(user?.roles ?? roles)?.map((role) => {
+                  return (
+                    <SelectItem
+                      key={role.display}
+                      value={role.display}
+                      text={role.display}
+                    />
+                  );
+                })}
+              </Select>
+            </div>
+          </section>
+          <section className={styles.section}>
+            <CheckboxGroup className={styles.checkboxGrid}>
+              <Checkbox
+                onChange={onEnabledChanged}
+                checked={formModel?.enabled}
+                labelText={t(`Enabled ?`)}
+                value={model?.enabled}
+                id="chk-userEnabled"
+              />
+              <Checkbox
+                onChange={onPermanentChanged}
+                name="isPermanent"
+                checked={formModel?.permanent}
+                value={model?.permanent}
+                labelText={t(`Permanent ?`)}
+                id="chk-userPermanent"
+              />
+
+              {!formModel?.permanent && (
+                <>
+                  <DatePicker
+                    datePickerType="range"
+                    light
+                    minDate={formatForDatePicker(MinDate)}
+                    locale="en"
+                    dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                    onChange={onActiveDatesChange}
+                  >
+                    <DatePickerInput
+                      id="date-picker-input-id-start"
+                      name="activeFrom"
+                      placeholder={DATE_PICKER_FORMAT}
+                      labelText={t("activeFrom", "Active From")}
+                      value={formatForDatePicker(formModel?.activeFrom)}
+                    />
+                    <DatePickerInput
+                      id="date-picker-input-id-finish"
+                      name="activeTo"
+                      placeholder={DATE_PICKER_FORMAT}
+                      labelText={t("activeTo", "Active To")}
+                      value={formatForDatePicker(formModel?.activeTo)}
+                    />
+                  </DatePicker>
+                </>
+              )}
+            </CheckboxGroup>
+          </section>
+          <br />
+          <section className={styles.section}>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <span className={styles.sectionTitle}>
+                {" "}
+                {t("stockOperation", "Stock Operations")}
+              </span>
+              <div className={styles.hr} />
+              <span className={styles.subTitle}>
+                {t(
+                  "roleDescription",
+                  "The role will be applicable to only selected stock operations."
+                )}
+              </span>
+            </div>
+          </section>
+          <section className={styles.section}>
+            <CheckboxGroup className={styles.checkboxGrid}>
+              {stockOperations.length > 0 &&
+                stockOperations.map((type) => {
+                  return (
+                    <div style={{ display: "flex", flexDirection: "row" }}>
+                      <Checkbox
+                        value={type.uuid}
+                        checked={isOperationChecked(type)}
+                        onChange={(event) =>
+                          onStockOperationTypeChanged(
+                            event,
+                            type.uuid,
+                            isOperationChecked(type)
+                          )
+                        }
+                        className={styles.checkbox}
+                        labelText={type.name}
+                        id={type.uuid}
+                      />
+                    </div>
+                  );
+                })}
+            </CheckboxGroup>
+          </section>
+          <br />
+          <section className={styles.section}>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <span className={styles.sectionTitle}> {t("Locations")}</span>
+              <div className={styles.hr} />
+              <span className={styles.subTitle}>
+                {t(
+                  "Use the toggle to apply this scope to the locations under the selected location."
+                )}
+              </span>
+            </div>
+          </section>
+          <section className={styles.section}>
+            <CheckboxGroup className={styles.checkboxGrid}>
+              {stockLocations?.length > 0 &&
+                stockLocations.map((type) => {
+                  const checkedLocation = findCheckedLocation(type);
+
+                  const getToggledValue = (locationUuid) => {
+                    const location =
+                      checkedLocation?.locationUuid === locationUuid
+                        ? checkedLocation
+                        : null;
+                    return location?.enableDescendants === true;
+                  };
+
+                  return (
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        margin: "4px",
+                        padding: "5px",
+                      }}
+                    >
+                      <Checkbox
+                        name="location"
+                        key={`chk-loc-child-key-${type.id}`}
+                        id={`chk-loc-child-${type.id}`}
+                        value={type.id}
+                        onChange={(event) =>
+                          onLocationCheckBoxChanged(event, type.id)
+                        }
+                        className={styles.checkbox}
+                        labelText={type.name}
+                        checked={checkedLocation != null}
+                      />
+                      {checkedLocation && (
+                        <Toggle
+                          value={type.id}
+                          hideLabel
+                          className={styles.toggle}
+                          size={"sm"}
+                          onToggleClick={getToggledValue(type.id)}
+                          key={`tg-loc-child-key-${type.id}`}
+                          id={`tg-loc-child-${type.id}`}
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+            </CheckboxGroup>
+          </section>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeOverlay}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit" onClick={addStockUserRole}>
+            {t("save", "Save")}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default AddStockUserRoleScope;

package/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.scss

@@ -0,0 +1,37 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-04;
+}
+
+.subTitle {
+  font-size: 14px;
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.checkboxGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust the values as needed */
+  gap: 16px; /* Adjust the gap between checkboxes */
+}
+.hr {
+  border: 1px solid #000;
+}
+.toggle {
+  margin: 5px;
+}
+.checkbox{
+  width: 100%;
+}

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

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { Button, InlineLoading } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { TrashCan } from "@carbon/react/icons";
+import { deleteUserRoleScopes } from "../stock-user-role-scopes.resource";
+import { showModal, showNotification, showToast } from "@openmrs/esm-framework";
+import { handleMutate } from "../swr-revalidation";
+
+interface StockUserScopDeleteActionMenuProps {
+  uuid: string;
+}
+
+const StockUserScopeDeleteActionMenu: React.FC<
+  StockUserScopDeleteActionMenuProps
+> = ({ uuid }) => {
+  const { t } = useTranslation();
+
+  const [deletingUserScope, setDeletingUserScope] = useState(false);
+
+  const handleDeleteStockUserScope = React.useCallback(() => {
+    const close = showModal("delete-stock-user-scope-modal", {
+      close: () => close(),
+      uuid: uuid,
+      onConfirmation: () => {
+        const ids = [];
+        ids.push(uuid);
+        deleteUserRoleScopes(ids)
+          .then(
+            () => {
+              handleMutate("ws/rest/v1/stockmanagement/userrolescope");
+              setDeletingUserScope(false);
+              showToast({
+                critical: true,
+                title: t("deletingstockUserScope", "Delete Stock User Scope"),
+                kind: "success",
+                description: t(
+                  "stockuserscopedeletedsuccessfully",
+                  "Stock User Scope Deleted Successfully"
+                ),
+              });
+            },
+            (error) => {
+              setDeletingUserScope(false);
+              showNotification({
+                title: t(
+                  `errorDeletingUserScope', 'error deleting a user scope`
+                ),
+                kind: "error",
+                critical: true,
+                description: error?.message,
+              });
+            }
+          )
+          .catch();
+        close();
+      },
+    });
+  }, [t, uuid]);
+
+  const deleteButton = (
+    <Button
+      kind="ghost"
+      size="md"
+      onClick={handleDeleteStockUserScope}
+      iconDescription={t("deleteUserScope", "Delete Stock User Scope")}
+      renderIcon={(props) => <TrashCan size={16} {...props} />}
+    />
+  );
+
+  return deletingUserScope ? <InlineLoading /> : deleteButton;
+};
+
+export default StockUserScopeDeleteActionMenu;

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Button, ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
+import styles from "../root.scss";
+
+interface DeleteConfirmationProps {
+  uuid?: string;
+  close: () => void;
+  onConfirmation: () => void;
+}
+
+const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
+  close,
+  onConfirmation,
+  uuid,
+}) => {
+  const { t } = useTranslation();
+  const handleCancel = () => close();
+  const handleDelete = () => onConfirmation?.();
+
+  return (
+    <>
+      <ModalHeader closeModal={close} className={styles.productiveHeading03}>
+        {t("deleteStockUserScope", "Delete Stock User Scope")}?
+      </ModalHeader>
+      <ModalBody>
+        <p className={styles.bodyLong01}>
+          {t(
+            "deleteConfirmationText",
+            `Are you sure you want to delete this User Scope? This action can't be undone.`,
+            { encounter: uuid }
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button size="lg" kind="secondary" onClick={handleCancel}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button autoFocus kind="danger" onClick={handleDelete} size="lg">
+          {t("delete", "Delete")}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteConfirmation;