@openmrs/esm-laboratory-app 1.0.1-pre.106

package/i18next-parser.config.js

@@ -0,0 +1,89 @@
+module.exports = {
+  contextSeparator: "_",
+  // Key separator used in your translation keys
+
+  createOldCatalogs: false,
+  // Save the \_old files
+
+  defaultNamespace: "translations",
+  // Default namespace used in your i18next config
+
+  defaultValue: "",
+  // Default value to give to empty keys
+  // You may also specify a function accepting the locale, namespace, and key as arguments
+
+  indentation: 2,
+  // Indentation of the catalog files
+
+  keepRemoved: false,
+  // Keep keys from the catalog that are no longer in code
+
+  keySeparator: ".",
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  // see below for more details
+  lexers: {
+    hbs: ["HandlebarsLexer"],
+    handlebars: ["HandlebarsLexer"],
+
+    htm: ["HTMLLexer"],
+    html: ["HTMLLexer"],
+
+    mjs: ["JavascriptLexer"],
+    js: ["JavascriptLexer"], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+
+    default: ["JavascriptLexer"],
+  },
+
+  lineEnding: "auto",
+  // Control the line ending. See options at https://github.com/ryanve/eol
+
+  locales: ["en", "am", "es", "fr", "km", "he"],
+  // An array of the locales in your applications
+
+  namespaceSeparator: ":",
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  output: "$NAMESPACE/$LOCALE.json",
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+
+  pluralSeparator: "_",
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+
+  input: undefined,
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+
+  sort: true,
+  // Whether or not to sort the catalog
+
+  useKeysAsDefaultValue: false,
+  // Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
+  // This option takes precedence over the `defaultValue` and `skipDefaultValues` options
+  // You may also specify a function accepting the locale and namespace as arguments
+
+  verbose: false,
+  // Display info about the parsing including some stats
+
+  failOnWarnings: false,
+  // Exit with an exit code of 1 on warnings
+
+  customValueTemplate: null,
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+  // }
+};

package/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  transform: {
+    "^.+\\.tsx?$": ["@swc/jest"],
+  },
+  transformIgnorePatterns: ["/node_modules/(?!@openmrs)"],
+  moduleNameMapper: {
+    "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
+    "\\.(s?css)$": "identity-obj-proxy",
+    "^lodash-es/(.*)$": "lodash/$1",
+  },
+  setupFilesAfterEnv: ["<rootDir>/src/setup-tests.ts"],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "http://localhost/",
+  },
+};

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@openmrs/esm-laboratory-app",
+  "version": "1.0.1-pre.106",
+  "license": "MPL-2.0",
+  "description": "Laboratory microfrontend for OpenMRS 3.x",
+  "browser": "dist/openmrs-esm-laboratory-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "typescript": "tsc",
+    "test": "jest --config jest.config.js --passWithNoTests",
+    "verify": "turbo lint typescript test",
+    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./i18next-parser.config.js",
+    "coverage": "yarn test -- --coverage",
+    "prepare": "husky install"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged && yarn verify"
+    }
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends",
+    "laboratory"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-laboratory.git"
+  },
+  "homepage": "https://github.com/openmrs/openmrs-esm-laboratory#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-laboratory/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.14.0",
+    "lodash-es": "^4.17.21",
+    "react-to-print": "^2.14.15"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "*",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x"
+  },
+  "devDependencies": {
+    "@ohri/openmrs-esm-ohri-commons-lib": "next",
+    "@openmrs/esm-extensions": "next",
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-patient-common-lib": "next",
+    "@openmrs/esm-react-utils": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.62",
+    "@swc/jest": "^0.2.26",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.8",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/parser": "^5.59.9",
+    "carbon-components-react": "^8.34.0",
+    "concurrently": "^7.6.0",
+    "css-loader": "^6.8.1",
+    "dayjs": "^1.11.9",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-ts-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "file-saver": "^2.0.5",
+    "husky": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.3",
+    "jest-cli": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "lerna": "^5.6.1",
+    "openmrs": "next",
+    "plotly.js": "^2.24.3",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "raw-loader": "^4.0.2",
+    "react": "^18.2.0",
+    "react-csv": "^2.2.2",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^11.18.6",
+    "react-pivottable": "^0.11.0",
+    "react-plotly.js": "^2.0.0",
+    "react-router-dom": "^6.11.2",
+    "react-table": "^7.8.0",
+    "rxjs": "^6.6.7",
+    "swc-loader": "^0.2.3",
+    "turbo": "^1.10.12",
+    "typescript": "^4.9.5",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.3"
+  },
+  "resolutions": {
+    "@carbon/react": "1.14.0"
+  },
+  "packageManager": "yarn@3.6.3",
+  "stableVersion": "1.0.0"
+}

package/src/completed-list/completed-list.component.tsx

@@ -0,0 +1,242 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useGetOrdersWorklist } from "../work-list/work-list.resource";
+import {
+  ErrorState,
+  formatDate,
+  parseDate,
+  usePagination,
+  isDesktop,
+} from "@openmrs/esm-framework";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Layer,
+  Tile,
+  DatePicker,
+  DatePickerInput,
+  Select,
+  SelectItem,
+  Tag,
+  Dropdown,
+} from "@carbon/react";
+import styles from "./completed-list.scss";
+import { getStatusColor } from "../utils/functions";
+
+interface CompletedlistProps {
+  fulfillerStatus: string;
+}
+
+const CompletedList: React.FC<CompletedlistProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+
+  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState("");
+
+  const { workListEntries, isLoading } = useGetOrdersWorklist(
+    activatedOnOrAfterDate,
+    fulfillerStatus
+  );
+
+  const pageSizes = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50];
+  const [page, setPage] = useState(1);
+  const [currentPageSize, setPageSize] = useState(5);
+  const [nextOffSet, setNextOffSet] = useState(0);
+
+  const {
+    goTo,
+    results: paginatedWorkListEntries,
+    currentPage,
+  } = usePagination(workListEntries, currentPageSize);
+
+  // get picked orders
+  let columns = [
+    { id: 0, header: t("date", "Date"), key: "date" },
+
+    { id: 1, header: t("orderNumber", "Order Number"), key: "orderNumber" },
+    { id: 2, header: t("patient", "Patient"), key: "patient" },
+
+    {
+      id: 3,
+      header: t("accessionNumber", "Accession Number"),
+      key: "accessionNumber",
+    },
+    { id: 4, header: t("test", "Test"), key: "test" },
+    { id: 5, header: t("action", "Action"), key: "action" },
+    { id: 6, header: t("status", "Status"), key: "status" },
+    { id: 8, header: t("orderer", "Orderer"), key: "orderer" },
+    { id: 9, header: t("urgency", "Urgency"), key: "urgency" },
+  ];
+
+  const tableRows = useMemo(() => {
+    return paginatedWorkListEntries?.map((entry, index) => ({
+      ...entry,
+      id: entry.uuid,
+      date: {
+        content: (
+          <>
+            <span>{formatDate(parseDate(entry.dateActivated))}</span>
+          </>
+        ),
+      },
+      patient: {
+        content: (
+          <>
+            <span>{entry.patient.display.split("-")[1]}</span>
+          </>
+        ),
+      },
+      orderNumber: { content: <span>{entry.orderNumber}</span> },
+      accessionNumber: { content: <span>{entry.accessionNumber}</span> },
+      test: { content: <span>{entry.concept.display}</span> },
+      action: { content: <span>{entry.action}</span> },
+      status: {
+        content: (
+          <>
+            <Tag>
+              <span
+                className={styles.statusContainer}
+                style={{ color: `${getStatusColor(entry.fulfillerStatus)}` }}
+              >
+                <span>{entry.fulfillerStatus}</span>
+              </span>
+            </Tag>
+          </>
+        ),
+      },
+      orderer: { content: <span>{entry.orderer.display}</span> },
+      orderType: { content: <span>{entry.orderType.display}</span> },
+      urgency: { content: <span>{entry.urgency}</span> },
+    }));
+  }, [paginatedWorkListEntries]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (paginatedWorkListEntries?.length >= 0) {
+    return (
+      <div>
+        <div className={styles.headerBtnContainer}></div>
+        <DataTable rows={tableRows} headers={columns} useZebraStyles>
+          {({
+            rows,
+            headers,
+            getHeaderProps,
+            getTableProps,
+            getRowProps,
+            onInputChange,
+          }) => (
+            <TableContainer className={styles.tableContainer}>
+              <TableToolbar
+                style={{
+                  position: "static",
+                  height: "3rem",
+                  overflow: "visible",
+                  backgroundColor: "color",
+                }}
+              >
+                <TableToolbarContent className={styles.toolbar}>
+                  <Layer style={{ margin: "5px" }}>
+                    <DatePicker dateFormat="Y-m-d" datePickerType="single">
+                      <DatePickerInput
+                        labelText={""}
+                        id="activatedOnOrAfterDate"
+                        placeholder="YYYY-MM-DD"
+                        onChange={(event) => {
+                          setActivatedOnOrAfterDate(event.target.value);
+                        }}
+                        type="date"
+                        value={activatedOnOrAfterDate}
+                      />
+                    </DatePicker>
+                  </Layer>
+                  <Layer style={{ margin: "5px" }}>
+                    <TableToolbarSearch
+                      onChange={onInputChange}
+                      placeholder={t("searchThisList", "Search this list")}
+                      size="sm"
+                    />
+                  </Layer>
+                </TableToolbarContent>
+              </TableToolbar>
+              <br />
+              <Table
+                {...getTableProps()}
+                className={styles.activePatientsTable}
+              >
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header?.content ?? header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableRow {...getRowProps({ row })} key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.value?.content ?? 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(
+                          "noCompletedListToDisplay",
+                          "No Completed List to display"
+                        )}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={workListEntries?.length}
+                className={styles.pagination}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+};
+
+export default CompletedList;

package/src/completed-list/completed-list.scss

@@ -0,0 +1,232 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../root.scss';
+
+title {
+  width: 6.938rem;
+  height: 1.75rem;
+  margin: 0.438rem 22.875rem 0.813rem 0;
+  font-family: IBMPlexSans;
+  font-size: 1.25rem;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.orderTabsContainer {
+  height: 100%;
+  width: 100%;
+
+  :global(.cds--tab-content) {
+    padding: 0 !important;
+  }
+}
+
+.orderTabs {
+  grid-column: 'span 2';
+  padding: 0 spacing.$spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabsContainer {
+  background-color: $ui-02;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0.5rem spacing.$spacing-05;
+  background-color: $ui-01;
+  border: 0.5px solid #e0e0e0;
+
+  :global(.cds--data-table-container) {
+    padding-top: 0 !important;
+  }
+
+  tbody>tr>:nth-child(2) {
+    white-space: nowrap;
+  }
+
+  :global(.cds--data-table td) {
+    height: unset !important;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 1) td {
+    background-color: $ui-02;
+    border-bottom: 1px solid $ui-03;
+    border-top: 1px solid $ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: $ui-01;
+    border-bottom: 1px solid $ui-03;
+  }
+}
+
+.tableContainer {
+  background-color: $ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: $text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: $ui-03;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.activePatientsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.headerBtnContainer {
+  background-color: $ui-background;
+  padding: spacing.$spacing-05;
+  text-align: right;
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding-top: 0.5rem;
+
+  :global(.cds--search-magnifier-icon) {
+    z-index: 0 !important;
+  }
+
+  input {
+    background-color: #fff;
+  }
+}
+
+.addOrderBtn {
+  width: 10rem !important;
+  padding: 0.5rem !important;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.patientSearch {
+  width: 25rem;
+  border-bottom-color: $ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}
+
+.container {
+  background-color: $ui-01;
+}
+
+.expandedLabQueueVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    >div {
+      max-height: max-content !important;
+      background-color: $ui-02;
+    }
+  }
+
+  th[colspan] td[colspan]>div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+.tableLayerSearch {
+  margin: 5px;
+  padding: 10px;
+
+}
+
+.dropDownContainer {
+  padding: 10px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  margin: 10px;
+}
+
+
+.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;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}