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

package/src/stock-sources/add-stock-sources/add-stock-sources.component.tsx

@@ -0,0 +1,152 @@
+import {
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Form,
+  Select,
+  TextInput,
+  SelectItem,
+} from "@carbon/react";
+import React, { ChangeEvent, useCallback, useState } from "react";
+import { handleMutate } from "../swr-revalidation";
+import styles from "./add-stock-sources.scss";
+import { useConceptById } from "../../stock-lookups/stock-lookups.resource";
+import { STOCK_SOURCE_TYPE_CODED_CONCEPT_ID } from "../../constants";
+import { StockSource } from "../../core/api/types/stockOperation/StockSource";
+import { createOrUpdateStockSource } from "../stock-sources.resource";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { closeOverlay } from "../../core/components/overlay/hook";
+
+interface AddStockSourceProps {
+  model?: StockSource;
+}
+
+const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model }) => {
+  const { t } = useTranslation();
+
+  // get stock sources
+  const { items } = useConceptById(STOCK_SOURCE_TYPE_CODED_CONCEPT_ID);
+
+  const [formModel, setFormModel] = useState<StockSource>({ ...model });
+
+  const onNameChanged = (evt: React.ChangeEvent<HTMLInputElement>): void => {
+    model ? (model.name = evt.target.value) : "";
+    setFormModel({ ...formModel, name: evt.target.value });
+  };
+
+  const onAcronymChanged = (evt: React.ChangeEvent<HTMLInputElement>): void => {
+    model ? (model.acronym = evt.target.value) : "";
+    setFormModel({ ...formModel, acronym: evt.target.value });
+  };
+
+  const onSourceTypeChange = (evt: ChangeEvent<HTMLSelectElement>) => {
+    const selectedSourceType = items?.answers.find(
+      (x) => x.uuid === evt.target.value
+    );
+    setFormModel({ ...formModel, sourceType: selectedSourceType });
+  };
+
+  const onFormSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (model) {
+        formModel.uuid = model.uuid;
+      }
+      createOrUpdateStockSource(formModel)
+        .then(
+          () => {
+            showToast({
+              critical: true,
+              title: t("addedSource", "Add Source"),
+              kind: "success",
+              description: t(
+                "stocksourceaddedsuccessfully",
+                "Stock Source Added Successfully"
+              ),
+            });
+
+            handleMutate("ws/rest/v1/stockmanagement/stocksource");
+
+            closeOverlay();
+          },
+          (error) => {
+            showNotification({
+              title: t(`errorAddingSource', 'error adding a source`),
+              kind: "error",
+              critical: true,
+              description: error?.message,
+            });
+          }
+        )
+        .catch();
+    },
+    [formModel, model, t]
+  );
+  return (
+    <div>
+      <Form onSubmit={onFormSubmit}>
+        <ModalHeader />
+        <ModalBody>
+          <section className={styles.section}>
+            <TextInput
+              id="fullname"
+              type="text"
+              labelText={t("fullName", "Full Name")}
+              size="md"
+              onChange={onNameChanged}
+              value={model?.name}
+              placeholder="e.g National Medical Stores"
+            />
+          </section>
+          <section className={styles.section}>
+            <TextInput
+              id="acronym"
+              type="text"
+              size="md"
+              placeholder="e.g NMS"
+              onChange={onAcronymChanged}
+              value={model?.acronym}
+              labelText={t("acronym", "Acronym/Code")}
+            />
+          </section>
+          <section className={styles.section}>
+            <Select
+              name="sourceType"
+              className="select-field"
+              labelText={t("sourceType", "Source Type")}
+              id="sourceType"
+              value={formModel?.sourceType ? formModel.sourceType.uuid : ""}
+              onChange={onSourceTypeChange}
+            >
+              <SelectItem
+                disabled
+                hidden
+                value=""
+                text={t("chooseSourceType", "Choose a source type")}
+              />
+              {items?.answers?.map((sourceType) => {
+                return (
+                  <SelectItem
+                    key={sourceType.uuid}
+                    value={sourceType.uuid}
+                    text={sourceType.display}
+                  />
+                );
+              })}
+            </Select>
+          </section>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeOverlay}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit">{t("save", "Save")}</Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default StockSourcesAddOrUpdate;

package/src/stock-sources/add-stock-sources/add-stock-sources.scss

@@ -0,0 +1,18 @@
+@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;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+

package/src/stock-sources/delete-stock-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("deleteStock", "Delete Stock source")}?
+      </ModalHeader>
+      <ModalBody>
+        <p className={styles.bodyLong01}>
+          {t(
+            "deleteConfirmationText",
+            `Are you sure you want to delete this source? 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;

package/src/stock-sources/edit-stock-source/edit-stock-source.component.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback } from "react";
+import { Button } from "@carbon/react";
+import { Edit } from "@carbon/react/icons";
+
+import { useTranslation } from "react-i18next";
+import { launchOverlay } from "../../core/components/overlay/hook";
+import StockSourcesAddOrUpdate from "../add-stock-sources/add-stock-sources.component";
+import { StockSource } from "../../core/api/types/stockOperation/StockSource";
+
+interface EditStockSourcesActionMenuProps {
+  data?: StockSource;
+}
+
+const EditStockSourceActionsMenu: React.FC<EditStockSourcesActionMenuProps> = ({
+  data,
+}) => {
+  const { t } = useTranslation();
+  const handleClick = useCallback(() => {
+    launchOverlay(
+      "Edit Stock Source",
+      <StockSourcesAddOrUpdate model={data} />
+    );
+  }, [data]);
+
+  return (
+    <Button
+      kind="ghost"
+      size="md"
+      onClick={() => handleClick()}
+      iconDescription={t("editStockItem", "Edit Stock Item")}
+      renderIcon={(props) => <Edit size={16} {...props} />}
+    />
+  );
+};
+export default EditStockSourceActionsMenu;

package/src/stock-sources/stock-sources-delete/stock-sources-delete.component.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { handleMutate } from "../swr-revalidation";
+import { Button, InlineLoading } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { TrashCan } from "@carbon/react/icons";
+import { deleteStockSource } from "../stock-sources.resource";
+import { showModal, showNotification, showToast } from "@openmrs/esm-framework";
+
+interface StockSourcesDeleteActionMenuProps {
+  uuid: string;
+}
+
+const StockSourcesDeleteActionMenu: React.FC<
+  StockSourcesDeleteActionMenuProps
+> = ({ uuid }) => {
+  const { t } = useTranslation();
+
+  const [deletingSource, setDeletingSource] = useState(false);
+
+  const handleDeleteStockSource = React.useCallback(() => {
+    const close = showModal("delete-stock-modal", {
+      close: () => close(),
+      uuid: uuid,
+      onConfirmation: () => {
+        const ids = [];
+        ids.push(uuid);
+        deleteStockSource(ids)
+          .then(
+            () => {
+              setDeletingSource(false);
+
+              handleMutate("ws/rest/v1/stockmanagement/stocksource");
+              showToast({
+                critical: true,
+                title: t("deletingSource", "Delete Source"),
+                kind: "success",
+                description: t(
+                  "stocksourcedeletedsuccessfully",
+                  "Stock Source Deleted Successfully"
+                ),
+              });
+            },
+            (error) => {
+              setDeletingSource(false);
+              showNotification({
+                title: t(`errorDeletingSource', 'error deleting a source`),
+                kind: "error",
+                critical: true,
+                description: error?.message,
+              });
+            }
+          )
+          .catch();
+        close();
+      },
+    });
+  }, [t, uuid]);
+
+  const deleteButton = (
+    <Button
+      kind="ghost"
+      size="md"
+      onClick={handleDeleteStockSource}
+      iconDescription={t("deleteSource", "Delete Source")}
+      renderIcon={(props) => <TrashCan size={16} {...props} />}
+    />
+  );
+
+  return deletingSource ? <InlineLoading /> : deleteButton;
+};
+
+export default StockSourcesDeleteActionMenu;

package/src/stock-sources/stock-sources-filter/stock-sources-filter.component.tsx

@@ -0,0 +1,35 @@
+import styles from "./stock-sources-filter.scss";
+import { Dropdown, DropdownSkeleton } from "@carbon/react";
+import React from "react";
+import { STOCK_SOURCE_TYPE_CODED_CONCEPT_ID } from "../../constants";
+import { useConceptById } from "../../stock-lookups/stock-lookups.resource";
+
+const StockSourcesFilter: React.FC<{
+  onFilterChange: (selectedSourceType: string) => void;
+}> = ({ onFilterChange }) => {
+  // get stock sources
+  const { items, isLoading, isError } = useConceptById(
+    STOCK_SOURCE_TYPE_CODED_CONCEPT_ID
+  );
+  if (isLoading || isError) {
+    return <DropdownSkeleton />;
+  }
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          id="stockSourcesFiter"
+          items={[...items.answers]}
+          initialSelectedItem={items.answers[0]}
+          itemToString={(item) => (item ? item.display : "Not Set")}
+          titleText="Filter: "
+          type="inline"
+          size="sm"
+          onChange={({ selectedItem }) => onFilterChange(selectedItem?.display)}
+        />
+      </div>
+    </>
+  );
+};
+
+export default StockSourcesFilter;

package/src/stock-sources/stock-sources-filter/stock-sources-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-sources/stock-sources-items-table.component.tsx

@@ -0,0 +1,213 @@
+import React, { useMemo } from "react";
+import {
+  TabPanel,
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  Tile,
+  DataTableSkeleton,
+  TableToolbarSearch,
+} from "@carbon/react";
+import { isDesktop } from "@openmrs/esm-framework";
+import useStockSourcesPage from "./stock-sources-items-table.resource";
+import { ResourceRepresentation } from "../core/api/api";
+import AddStockSourceActionButton from "./add-stock-source-button.component";
+import StockSourcesFilter from "./stock-sources-filter/stock-sources-filter.component";
+import styles from "./stock-sources.scss";
+import { useTranslation } from "react-i18next";
+import StockSourcesDeleteActionMenu from "./stock-sources-delete/stock-sources-delete.component";
+import EditStockSourceActionsMenu from "./edit-stock-source/edit-stock-source.component";
+
+const StockSourcesItems: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedSourceType, setSelectedSourceType] = React.useState("");
+
+  // get sourcess
+  const {
+    items,
+    totalItems,
+    tableHeaders,
+    currentPage,
+    pageSizes,
+    goTo,
+    currentPageSize,
+    setPageSize,
+    isLoading,
+  } = useStockSourcesPage({
+    v: ResourceRepresentation.Default,
+    totalCount: true,
+  });
+
+  const tableRows = useMemo(() => {
+    return items?.map((entry, index) => {
+      return {
+        ...entry,
+        id: entry?.uuid,
+        key: `key-${entry?.uuid}`,
+        uuid: entry?.uuid,
+        name: entry?.name,
+        acronym: entry?.acronym,
+        sourceType: entry?.sourceType?.display,
+        actions: (
+          <>
+            <EditStockSourceActionsMenu data={items[index]} />
+            <StockSourcesDeleteActionMenu uuid={items[index].uuid} />
+          </>
+        ),
+      };
+    });
+  }, [items]);
+  const handleFilterChange = (selectedSourceType: string) => {
+    setSelectedSourceType(selectedSourceType);
+  };
+
+  const filteredTableRows = useMemo(() => {
+    if (!selectedSourceType) {
+      return tableRows;
+    }
+    return tableRows.filter((row) => row.sourceType === selectedSourceType);
+  }, [tableRows, selectedSourceType]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <div className={styles.tableOverride}>
+      <TabPanel>
+        {t(
+          "panelDescription",
+          "List of partners who provide stock to the facility."
+        )}
+      </TabPanel>
+      <div id="table-tool-bar">
+        <div></div>
+        <div className="right-filters"></div>
+      </div>
+      <DataTable
+        rows={filteredTableRows}
+        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",
+                  }}
+                >
+                  <StockSourcesFilter onFilterChange={handleFilterChange} />
+                </div>
+
+                <AddStockSourceActionButton />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map(
+                    (header) =>
+                      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) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow
+                        className={
+                          isDesktop ? styles.desktopRow : styles.tabletRow
+                        }
+                        {...getRowProps({ row })}
+                      >
+                        {row.cells.map(
+                          (cell) =>
+                            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("noSourcesToDisplay", "No Stock sources 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 StockSourcesItems;

package/src/stock-sources/stock-sources-items-table.resource.ts

@@ -0,0 +1,56 @@
+import { useStockSources } from "./stock-sources.resource";
+import { useMemo, useState } from "react";
+import { usePagination } from "@openmrs/esm-framework";
+import { StockOperationFilter } from "../stock-operations/stock-operations.resource";
+
+export default function useStockSourcesPage(filter: StockOperationFilter) {
+  const { items, isLoading, isError } = useStockSources(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(
+    () => [
+      {
+        id: 1,
+        header: "Name",
+        key: "name",
+      },
+      {
+        id: 2,
+        header: "Acronym",
+        key: "acronym",
+      },
+      {
+        id: 3,
+        header: "Source Type",
+        key: "sourceType",
+      },
+      {
+        id: 4,
+        header: "actions",
+        key: "actions",
+      },
+    ],
+    []
+  );
+
+  return {
+    items: paginatedItems,
+    totalItems: items?.totalCount,
+    currentPage,
+    currentPageSize,
+    paginatedItems,
+    goTo,
+    pageSizes,
+    isLoading,
+    isError,
+    setPageSize,
+    tableHeaders,
+  };
+}

package/src/stock-sources/stock-sources.component.tsx

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