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

package/src/stock-user-role-scopes/edit-stock-user-scope/edit-stock-user-scope-action-menu.component.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@carbon/react";
+import { Edit } from "@carbon/react/icons";
+
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { launchOverlay } from "../../core/components/overlay/hook";
+import AddStockUserRoleScope from "../add-stock-user-scope/add-stock-user-role-scope.component";
+import { UserRoleScope } from "../../core/api/types/identity/UserRoleScope";
+
+interface EditStockUserRoleActionsMenuProps {
+  data: UserRoleScope;
+}
+
+const EditStockUserRoleActionsMenu: React.FC<
+  EditStockUserRoleActionsMenuProps
+> = ({ data }) => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    launchOverlay(
+      "Edit Stock User Role",
+      <AddStockUserRoleScope model={data} />
+    );
+  }, [data]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={handleClick}
+      iconDescription={t("editUserScope", "Edit UserScope")}
+      renderIcon={(props) => <Edit size={16} {...props} />}
+    />
+  );
+};
+export default EditStockUserRoleActionsMenu;

package/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx

@@ -0,0 +1,284 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Link,
+  TabPanel,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tile,
+} from "@carbon/react";
+import styles from "./stock-user-role-scopes.scss";
+import { ArrowDownLeft, ArrowLeft } from "@carbon/react/icons";
+import { isDesktop, useSession } from "@openmrs/esm-framework";
+import { ResourceRepresentation } from "../core/api/api";
+import useStockUserRoleScopesPage from "./stock-user-role-scopes-items-table.resource";
+import AddStockUserRoleScopeActionButton from "./add-stock-user-role-scope-button.component";
+import { formatDisplayDate } from "../core/utils/datetimeUtils";
+import EditStockUserRoleActionsMenu from "./edit-stock-user-scope/edit-stock-user-scope-action-menu.component";
+import StockUserScopeDeleteActionMenu from "./delete-stock-user-scope/delete-stock-user-scope.component";
+import { URL_USER_ROLE_SCOPE } from "../constants";
+
+function StockUserRoleScopesItems() {
+  const { t } = useTranslation();
+
+  const currentUser = useSession();
+
+  // get user scopes
+  const {
+    items,
+    totalItems,
+    currentPage,
+    pageSizes,
+    goTo,
+    currentPageSize,
+    setPageSize,
+    isLoading,
+  } = useStockUserRoleScopesPage({
+    v: ResourceRepresentation.Default,
+    totalCount: true,
+  });
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t("user", "User"),
+        key: "user",
+      },
+
+      {
+        id: 1,
+        header: t("role", "Role"),
+        key: "role",
+      },
+      {
+        id: 2,
+        header: t("location", "Location(s)"),
+        key: "locations",
+      },
+      {
+        id: 3,
+        header: t("stockOperations", "Stock Operations"),
+        key: "stockOperations",
+      },
+      {
+        id: 4,
+        header: t("permanent", "Permanent ?"),
+        key: "permanent",
+      },
+      {
+        id: 5,
+        header: t("ActiveFrom", "Active From "),
+        key: "activeFrom",
+      },
+      {
+        id: 6,
+        header: t("activeTo", "Active To"),
+        key: "activeTo",
+      },
+      {
+        id: 7,
+        header: t("enabled", "Enabled ?"),
+        key: "enabled",
+      },
+      {
+        id: 8,
+        header: t("actions", "Actions"),
+        key: "actions",
+      },
+    ],
+    []
+  );
+
+  const tableRows = useMemo(() => {
+    return items?.map((userRoleScope, index) => {
+      return {
+        ...userRoleScope,
+        id: userRoleScope?.uuid,
+        key: `key-${userRoleScope?.uuid}`,
+        uuid: `${userRoleScope?.uuid}`,
+        user:
+          currentUser.user.uuid === userRoleScope.userUuid ? (
+            `${userRoleScope?.userFamilyName} ${userRoleScope.userGivenName}`
+          ) : (
+            <Link
+              to={URL_USER_ROLE_SCOPE(userRoleScope?.uuid)}
+            >{`${userRoleScope?.userFamilyName} ${userRoleScope.userGivenName}`}</Link>
+          ),
+
+        roleName: userRoleScope?.role,
+        locations: userRoleScope?.locations?.map((location) => {
+          const key = `loc-${userRoleScope?.uuid}-${location.locationUuid}`;
+          return (
+            <span key={key}>
+              {location?.locationName}
+              {location?.enableDescendants ? (
+                <ArrowDownLeft key={`${key}-${index}-0`} />
+              ) : (
+                <ArrowLeft key={`${key}-${index}-1`} />
+              )}{" "}
+            </span>
+          ); //return
+        }),
+        stockOperations: userRoleScope?.operationTypes
+          ?.map((operation) => {
+            return operation?.operationTypeName;
+          })
+          ?.join(", "),
+        permanent: userRoleScope?.permanent
+          ? t("stockmanagement.yes", "Yes")
+          : t("stockmanagement.no", "No"),
+        activeFrom: formatDisplayDate(userRoleScope?.activeFrom) ?? "Not Set",
+        activeTo: formatDisplayDate(userRoleScope?.activeTo) ?? "Not Set",
+        enabled: userRoleScope?.enabled
+          ? t("stockmanagement.yes", "Yes")
+          : t("stockmanagement.no", "No"),
+        actions: (
+          <div style={{ display: "flex" }}>
+            <EditStockUserRoleActionsMenu data={items[index]} />
+            <StockUserScopeDeleteActionMenu uuid={items[index].uuid} />
+          </div>
+        ),
+      };
+    });
+  }, [currentUser.user.uuid, items, t]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <div className={styles.tableOverride}>
+      <TabPanel>
+        {t(
+          "panelDescription",
+          "To access stock management features, users must have assigned roles specifying location and stock operation type scopes."
+        )}
+      </TabPanel>
+      <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} />
+                <AddStockUserRoleScopeActionButton />
+              </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(
+                        "noOperationsToDisplay",
+                        "No Stock User scopes 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 StockUserRoleScopesItems;

package/src/stock-user-role-scopes/stock-user-role-scopes-items-table.resource.ts

@@ -0,0 +1,31 @@
+import { StockOperationFilter } from "../stock-operations/stock-operations.resource";
+import { useUserRoleScopes } from "./stock-user-role-scopes.resource";
+import { useState } from "react";
+import { usePagination } from "@openmrs/esm-framework";
+
+export default function useStockUserRoleScopesPage(
+  filter: StockOperationFilter
+) {
+  const { items, isLoading, isError } = useUserRoleScopes(filter);
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const {
+    goTo,
+    results: paginatedItems,
+    currentPage,
+  } = usePagination(items.results, currentPageSize);
+
+  return {
+    items: paginatedItems,
+    totalItems: items?.totalCount,
+    currentPage,
+    currentPageSize,
+    paginatedItems,
+    goTo,
+    pageSizes,
+    isLoading,
+    isError,
+    setPageSize,
+  };
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import StockUserRoleScopesItems from "./stock-user-role-scopes-items-table.component";
+
+function StockUserScopes() {
+  return (
+    <div style={{ margin: "5px" }}>
+      <StockUserRoleScopesItems />
+    </div>
+  );
+}
+
+export default StockUserScopes;

package/src/stock-user-role-scopes/stock-user-role-scopes.resource.ts

@@ -0,0 +1,76 @@
+import useSWR from "swr";
+import { ResourceFilterCriteria, toQueryParams } from "../core/api/api";
+import { PageableResult } from "../core/api/types/PageableResult";
+import { UserRoleScope } from "../core/api/types/identity/UserRoleScope";
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+export type UserRoleScopeFilter = ResourceFilterCriteria;
+
+// getUserRoleScopes
+export function useUserRoleScopes(filter: UserRoleScopeFilter) {
+  const apiUrl = `ws/rest/v1/stockmanagement/userrolescope${toQueryParams(
+    filter
+  )}`;
+  const { data, error, isLoading } = useSWR<
+    { data: PageableResult<UserRoleScope> },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <PageableResult<UserRoleScope>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// getUserRoleScope
+export function useUserRoleScope(id: string) {
+  const apiUrl = `ws/rest/v1/stockmanagement/userrolescope/${id}`;
+  const { data, error, isLoading } = useSWR<{ data: UserRoleScope }, Error>(
+    apiUrl,
+    openmrsFetch
+  );
+  return {
+    items: data.data ? data.data : {},
+    isLoading,
+    isError: error,
+  };
+}
+
+// deleteUserRoleScopes
+export function deleteUserRoleScopes(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/userrolescope/${ids[0]}${otherIds}`;
+  const abortController = new AbortController();
+
+  return openmrsFetch(apiUrl, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+  });
+}
+
+// createOrUpdateUserRoleScope
+export function createOrUpdateUserRoleScope(item: UserRoleScope) {
+  const abortController = new AbortController();
+  const isNew = item.uuid != null;
+  const apiUrl = `ws/rest/v1/stockmanagement/userrolescope${
+    isNew ? "/" + item.uuid : ""
+  }`;
+  return openmrsFetch(apiUrl, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+    body: item,
+  });
+}

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

@@ -0,0 +1,61 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  width: 80%;
+  margin: 1.5rem auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: $text-03;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+
+  &::before {
+    right: 0.5rem;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: 0.5rem;
+    margin-right: -50%;
+  }
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

package/src/stock-user-role-scopes/swr-revalidation.ts

@@ -0,0 +1,7 @@
+import { mutate } from "swr";
+
+export const handleMutate = (url: string) => {
+  mutate((key) => typeof key === "string" && key.startsWith(url), undefined, {
+    revalidate: true,
+  });
+};

package/src/utils.ts

@@ -0,0 +1,10 @@
+import { showNotification } from "@openmrs/esm-framework";
+
+export function errorAlert(msg: string, error?: Error) {
+  showNotification({
+    title: msg,
+    kind: "error",
+    critical: true,
+    description: error?.message,
+  });
+}

package/translations/en.json

@@ -0,0 +1,24 @@
+{
+  "casualGreeting": "hey",
+  "configSystem": "Configuration system",
+  "configSystemExplainer": "The greeting shown below is driven by the configuration system. To change the configuration properties, click the spanner icon in the navbar to pull up the Implementer Tools panel. Then, type <2>template</2> into the <4>Search configuration</4> input. This should filter the configuration properties to show only those that are relevant to this module. You can change the values of these properties and click <6>Save</6> to see the changes reflected in the UI",
+  "connect": "Connect",
+  "connectExplainer": "Get in touch with the community",
+  "dataFetching": "Data fetching",
+  "designDocs": "Design docs",
+  "designDocsExplainer": "Read the O3 design documentation",
+  "explainer": "The following examples demonstrate some key features of the O3 framework",
+  "extensionExplainer": "Here are some colored boxes. Because they are attached as extensions within a slot, an admin can change what boxes are shown using configuration. These boxes happen to be defined in this module, but they could attach to this slot even if they were in a different module",
+  "extensionSystem": "Extension system",
+  "formalGreeting": "hello",
+  "frontendDocs": "Frontend docs",
+  "getPatient": "Get a patient named",
+  "getStarted": "Get started",
+  "getStartedExplainer": "Create a frontend module from this template",
+  "learnExplainer": "Learn how to use the O3 framework",
+  "loading": "Loading",
+  "patientGetterExplainer": "Try clicking the button below to fetch a patient from the backend",
+  "resources": "Resources",
+  "usefulLinks": "Below are some links to useful resources",
+  "welcomeText": "Welcome to the O3 Template app"
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018",
+      "es2020"
+    ],
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "target": "esnext"
+  }
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("openmrs/default-webpack-config");