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

package/src/core/components/side-nav/side-nav.component.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { SideNavItem } from "./types";
+import { SideNav, SideNavItems, SideNavLink } from "@carbon/react";
+import styles from "./side-nav.scss";
+import { navigate } from "@openmrs/esm-framework";
+
+interface SideNavProps {
+  tabs: SideNavItem[];
+  selectedIndex?: number;
+  onSelectTab: (index: number) => void;
+}
+
+const SideNavItemsList: React.FC<SideNavProps> = ({
+  tabs,
+  selectedIndex,
+  onSelectTab,
+}) => {
+  return (
+    <div
+      className={`
+        ${styles.cohortBuilder}
+      `}
+    >
+      <div className={styles.tab}>
+        <SideNav
+          isFixedNav
+          expanded={true}
+          isChildOfHeader={true}
+          aria-label="Side navigation"
+        >
+          <SideNavItems>
+            {tabs.map((tab: SideNavItem, index: number) => (
+              <SideNavLink
+                key={index}
+                isActive={index === selectedIndex}
+                onClick={() => {
+                  if (index === tabs.length - 1) {
+                    // Check if it's the last item in the list
+                    navigate({
+                      to: "/openmrs/admin/maintenance/settings.list?show=Stockmanagement",
+                    });
+                  } else {
+                    onSelectTab(index); // Call onSelectTab to update selectedTab in the parent
+                    navigate({
+                      to: `${window.getOpenmrsSpaBase()}stock-management/${
+                        tab.link
+                      }`,
+                    });
+                  }
+                }}
+              >
+                {tab.name}
+              </SideNavLink>
+            ))}
+          </SideNavItems>
+        </SideNav>
+      </div>
+    </div>
+  );
+};
+
+export default SideNavItemsList;

package/src/core/components/side-nav/side-nav.scss

@@ -0,0 +1,126 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('productive-heading-02');
+  color: colors.$gray-70;
+  margin-bottom: spacing.$spacing-05;;
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.mainContainer {
+  padding-bottom: 1.5rem;
+  background: $ui-01;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  padding: 1rem;
+  font-size: 1.2rem;
+}
+
+.desktopContainer {
+  width: 50%;
+}
+
+.tabletContainer {
+  width: 90%;
+}
+
+.cohortBuilder {
+  :global(.cds--date-picker.cds--date-picker--single .cds--date-picker__input) {
+    width: auto;
+  }
+
+  :global(.cds--tab-content) {
+    width: 100% !important;
+    overflow-x: hidden;
+    padding: 0;
+  }
+
+  :global(.cds--tab--list) {
+    flex-direction: column;
+  }
+
+  :global(.cds--tabs) {
+    width: auto;
+    max-height: 20rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  :global(.cds--tabs__panel) {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  :global(.cds--tabs .cds--tabs__nav-link) {
+    border-bottom: 0;
+    border-left: 3px solid $ui-03;
+    line-height: 3.5;
+  }
+
+  :global(.cds--tabs .cds--tabs__nav-item--selected) {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: 0;
+    font-weight: 600;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    &:active, &:focus {
+      outline: 0 !important;
+      outline-offset: 0 !important;
+    }
+
+    max-height: 4rem;
+  }
+
+  :global(.cds--col) {
+    padding-left: 0;
+    width: 100%;
+  }
+}
+
+.tabletTab {
+  width: 25%;
+}
+
+.desktopTab {
+  width: 20%;
+}
+
+.tab {
+  display: flex;
+}
+
+.tabContainer {
+  background: white;
+  padding-left: 1.5rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.optionCell {
+  padding: 0 !important;
+}
+
+.optionHeader {
+  width: 1.5rem !important;
+}
+
+.text {
+  font-size: 0.9rem;
+  padding: 0.5rem;
+}

package/src/core/components/side-nav/types.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+export interface SideNavItem {
+  name: string;
+  link: string;
+}

package/src/core/components/table/table.component.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { saveAs } from "file-saver";
+import {
+  DataTable,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tile,
+} from "@carbon/react";
+import { DocumentDownload } from "@carbon/react/icons";
+import {
+  isDesktop,
+  useLayoutType,
+  usePagination,
+} from "@openmrs/esm-framework";
+import { DataTableRenderProps } from "./types";
+import styles from "./table.scss";
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: any;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+};
+
+interface ListProps {
+  columns: any;
+  data: any;
+  children?: (renderProps: DataTableRenderProps) => React.ReactElement;
+  totalItems?: number;
+  goToPage?: (page: number) => void;
+  hasToolbar?: boolean;
+}
+
+const DataList: React.FC<ListProps> = ({
+  columns,
+  data,
+  children,
+  totalItems,
+  goToPage,
+  hasToolbar = true,
+}) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const [allRows, setAllRows] = useState([]);
+  const isTablet = useLayoutType() === "tablet";
+  const [list] = useState(data);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const {
+    goTo,
+    results: paginatedList,
+    currentPage,
+  } = usePagination(list, currentPageSize);
+
+  useEffect(() => {
+    const rows: Array<Record<string, string>> = [];
+
+    paginatedList.map((item: any, index) => {
+      return rows.push({ ...item, id: index++ });
+    });
+    setAllRows(rows);
+  }, [paginatedList, allRows]);
+
+  const handleFilter = ({
+    rowIds,
+    headers,
+    cellsById,
+    inputValue,
+    getCellId,
+  }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId].value;
+        const filterTerm = inputValue.toLowerCase();
+
+        if (typeof filterableValue === "boolean") {
+          return false;
+        }
+
+        return ("" + filterableValue).toLowerCase().includes(filterTerm);
+      })
+    );
+  };
+  const handleExport = (object) => {
+    const csvString = convertToCSV(list, columns);
+    if (object.currentTarget.innerText == "Download As CSV") {
+      const blob = new Blob([csvString], { type: "text/csv;charset=utf-8" });
+      saveAs(blob, "data.csv");
+    } else if (object.currentTarget.innerText == "Download As Json") {
+      const jsonBlob = new Blob([csvString], { type: "application/json" });
+      saveAs(jsonBlob, "data.json");
+    }
+  };
+  const convertToCSV = (data, columns) => {
+    const header = columns.map((col) => col.header).join(",");
+    const rows = data.map((row) =>
+      columns.map((col) => JSON.stringify(row[col.key])).join(",")
+    );
+    return [header, ...rows].join("\n");
+  };
+  return (
+    <>
+      <DataTable
+        data-floating-menu-container
+        rows={allRows}
+        headers={columns}
+        filterRows={handleFilter}
+        overflowMenuOnHover={isDesktop(layout)}
+        size={isTablet ? "lg" : "md"}
+        useZebraStyles
+      >
+        {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
+          <div>
+            <TableContainer className={styles.tableContainer}>
+              {hasToolbar && (
+                <TableToolbar
+                  style={{
+                    position: "static",
+                    overflow: "visible",
+                    backgroundColor: "color",
+                  }}
+                >
+                  <TableToolbarContent className={styles.toolbarContent}>
+                    {children ? (
+                      children({
+                        onInputChange,
+                      })
+                    ) : (
+                      <>
+                        <OverflowMenu
+                          size="sm"
+                          kind="tertiary"
+                          renderIcon={DocumentDownload}
+                          iconDescription="Download As"
+                          focusTrap={false}
+                        >
+                          <OverflowMenuItem
+                            itemText="Download As CSV"
+                            onClick={handleExport}
+                          />
+                          <OverflowMenuItem
+                            itemText="Download As PDF"
+                            onClick={handleExport}
+                          />
+                          <OverflowMenuItem
+                            itemText="Download As Json"
+                            onClick={handleExport}
+                          />
+                        </OverflowMenu>
+                        <TableToolbarSearch
+                          className={styles.patientListSearch}
+                          expanded
+                          onChange={onInputChange}
+                          placeholder={t("searchThisList", "Search this list")}
+                          size="sm"
+                        />
+                      </>
+                    )}
+                  </TableToolbarContent>
+                </TableToolbar>
+              )}
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {t("No data", "No data to display")}
+                      </p>
+                      <p className={styles.helper}>
+                        {t("checkFilters", "Check the filters above")}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={totalItems || list?.length}
+                className={styles.pagination}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    if (goToPage) {
+                      goToPage(page);
+                      return;
+                    }
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          </div>
+        )}
+      </DataTable>
+    </>
+  );
+};
+
+export default DataList;

package/src/core/components/table/table.scss

@@ -0,0 +1,173 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.widgetContainer {
+  background-color: $ui-background;
+}
+
+.widgetHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+}
+
+.widgetHeaderContainer > h4:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-01);
+}
+
+.toggleButtons {
+  width: fit-content;
+  margin: 0 spacing.$spacing-03;
+}
+
+.searchField {
+  width: 100%;
+  max-width: 250px;
+  border: 0px !important;
+}
+
+.searchBox {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+}
+
+.container {
+  margin-top: 16px;
+  margin-left: inherit;
+  width: 100%;
+  overflow-y: hidden;
+}
+
+.tabContainer {
+  margin-top: 16px;
+  padding-left: 1rem;
+  background-color: #ffffff;
+}
+
+.patientListSearch {
+  margin-right: 10px;
+  padding-left: 20px;
+  max-width: 16rem;
+
+  input {
+    background-color: $ui-02 !important;
+  }
+}
+
+.tabContainer li button {
+  width: 100% !important;
+}
+
+.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;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: spacing.$spacing-03;
+  min-height: spacing.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: spacing.$spacing-02 spacing.$spacing-02;
+  margin: spacing.$spacing-03 0;
+}
+
+section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.tabContainer div[role='tabpanel'] {
+  padding: 0 !important;
+}
+
+.tabContainer li button {
+  width: 100% !important;
+}
+
+.tableContainer {
+  margin: 0;
+  padding: 0;
+}
+
+.search {
+  max-width: 16rem;
+
+  input {
+    background-color: $ui-02 !important;
+  }
+}
+
+.tableContainer {
+  background-color: $ui-01;
+
+  a {
+    text-decoration: none;
+  }
+
+  tr {
+    width: spacing.$spacing-01;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-09;
+  }
+}
+
+.cds--table-sort__description {
+  display: none;
+}
+
+.patientListDownload {
+  margin-top: 10px;
+}
+
+.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;
+}

package/src/core/components/table/types.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface DataTableRenderProps {
+  onInputChange: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    defaultValue?: string
+  ) => void;
+}

package/src/core/components/tabs/types.ts

@@ -0,0 +1,7 @@
+import React from "react";
+
+export interface TabItem {
+  name: string;
+  component: React.ReactElement;
+  disabled?: boolean;
+}

package/src/core/components/tabs/vertical-tabs.component.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { TabItem } from "./types";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@carbon/react";
+import styles from "./vertical-tabs.scss";
+
+interface VerticalTabsProps {
+  tabs: TabItem[];
+  title?: string;
+  hasContainer?: boolean;
+  selectedIndex?: number;
+  onChange?: (index: number) => void;
+}
+
+const VerticalTabs: React.FC<VerticalTabsProps> = ({
+  tabs,
+  title,
+  hasContainer,
+  selectedIndex,
+  onChange,
+}) => {
+  return (
+    <div
+      className={`
+        ${hasContainer ? styles.tabContainer : ""}
+        ${styles.cohortBuilder}
+      `}
+    >
+      {title && <p className={styles.heading}>{title}</p>}
+      <div className={styles.tab}>
+        <Tabs
+          className={`${styles.verticalTabs}`}
+          selectedIndex={selectedIndex}
+          onChange={({ selectedIndex }) => onChange?.(selectedIndex)}
+        >
+          <TabList aria-label="navigation">
+            {tabs.map((tab: TabItem, index: number) => (
+              <Tab key={index} disabled={tab.disabled}>
+                {tab.name}
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {tabs.map((tab: TabItem, index: number) => (
+              <TabPanel key={index}>{tab.component}</TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default VerticalTabs;