Feat/tests

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@ugandaemr/esm-template-app",
+  "name": "@ugandaemr/esm-alis-app",
   "version": "1.0.0",
   "license": "MPL-2.0",
-  "description": "A template for creating frontend modules for UgandaEMR",
-  "browser": "dist/esm-ugandaemr-template-app.js",
+  "description": "An app for handling all ALIS related functionalities",
+  "browser": "dist/esm-alis-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {
-    "start": "openmrs develop",
+    "start": "openmrs develop --backend http://194.163.171.253:8282",
     "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env analyze=true",
@@ -34,14 +34,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mets-programme/esm-ugandaemr-template-app.git"
+    "url": "git+https://github.com/mets-programme/esm-alis-app.git"
   },
-  "homepage": "https://github.com/mets-programme/esm-ugandaemr-template-app#readme",
+  "homepage": "https://github.com/mets-programme/esm-alis-app#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/mets-programme/esm-ugandaemr-template-app/issues"
+    "url": "https://github.com/mets-programme/esm-alis-app/issues"
   },
   "dependencies": {
     "@carbon/react": "^1.33.1",
@@ -79,6 +79,7 @@
     "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",
     "i18next": "^23.2.8",
     "i18next-parser": "^8.0.0",

src/alis-component/alis-header-illustration.component.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Illustration: React.FC = () => {
+  return (
+    <svg width="80" height="70" viewBox="0 0 32 32">
+      <path
+        fill="#7BBCB9"
+        d="M25.3943,24a7.8772,7.8772,0,0,0-1.6707-8.5684,3.918,3.918,0,0,0-1.0844-4.414l2.7759-2.7759a2.0025,2.0025,0,0,0,0-2.8286L22.5869,2.5849a2.0021,2.0021,0,0,0-2.8286,0L6.5859,15.7573a2.0027,2.0027,0,0,0,0,2.8286l2.8282,2.8282a2.0024,2.0024,0,0,0,2.8286,0l4.7749-4.7754a3.9329,3.9329,0,0,0,5.5139.4326A5.9442,5.9442,0,0,1,23.1775,24H16v4H4v2H28V24ZM10.8281,20,8,17.1714,9.8787,15.293l2.8283,2.8281ZM16,14a3.9811,3.9811,0,0,0,.0762.7524L14.1211,16.707l-2.8284-2.8281,9.88-9.88L24.001,6.8271l-3.2488,3.2491A3.9771,3.9771,0,0,0,16,14Zm4,2a2,2,0,1,1,2-2A2.0023,2.0023,0,0,1,20,16Zm6,12H18V26h8Z"
+      />
+    </svg>
+  );
+};
+
+export default Illustration;

src/alis-component/alis-tests-ordered.component.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Header from "../components/header/header.component";
+import Illustration from "./alis-header-illustration.component";
+import styles from "./alis.scss";
+import DataList from "../components/data-table/data-table.component";
+import { ALISData } from "../sample-data";
+import { ALISHeaders } from "../constants";
+const AlisTestsOrderedComponent: React.FC = () => {
+  return (
+    <>
+      <Header illustrationComponent={<Illustration />} />
+
+      <div className={styles.container}>
+        <h3 className={styles.listHeading}> Test Requests</h3>
+        <DataList columns={ALISHeaders} data={ALISData} />
+      </div>
+    </>
+  );
+};
+
+export default AlisTestsOrderedComponent;

src/alis-component/alis.scss

@@ -0,0 +1,12 @@
+@use 'node_modules/@carbon/styles/scss/colors';
+@use 'node_modules/@carbon/styles/scss/spacing';
+@use 'node_modules/@carbon/styles/scss/type/index';
+@use '@carbon/styles/scss/type';
+
+.container {
+  padding: 1.5rem 1.5rem 0;
+}
+
+.listHeading {
+  @include type.type-style('heading-04');
+}

src/components/data-table/data-table.component.tsx

@@ -0,0 +1,212 @@
+import {
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarAction,
+  TableToolbarContent,
+  TableToolbarMenu,
+  TableToolbarSearch,
+  Tile,
+} from "@carbon/react";
+import {
+  isDesktop,
+  useLayoutType,
+  usePagination,
+} from "@openmrs/esm-framework";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./data-tables.scss";
+import { saveAs } from "file-saver";
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: any;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+};
+
+interface ListProps {
+  columns: any;
+  data: any;
+}
+
+type DocumentType = "csv" | "pdf" | "json";
+
+const DataList: React.FC<ListProps> = ({ columns, data }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = useLayoutType() === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
+  const [allRows, setAllRows] = useState([]);
+  const [list] = useState(data);
+  const [documentType, setDocumentType] = useState<DocumentType>(null);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const {
+    goTo,
+    results: paginatedList,
+    currentPage,
+  } = usePagination(data, currentPageSize);
+
+  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);
+      })
+    );
+  };
+
+  useEffect(() => {
+    const rows: Array<Record<string, string>> = [];
+
+    paginatedList.map((item: any, index) => {
+      return rows.push({ ...item, id: index++ });
+    });
+    setAllRows(rows);
+  }, [paginatedList, allRows]);
+
+  useEffect(() => {
+    const csvString = convertToCSV(list, columns);
+    if (documentType === "csv") {
+      const blob = new Blob([csvString], { type: "text/csv;charset=utf-8" });
+      saveAs(blob, "data.csv");
+    } else if (documentType === "json") {
+      const jsonBlob = new Blob([csvString], { type: "application/json" });
+      saveAs(jsonBlob, "data.json");
+    }
+  }, [list, columns, documentType]);
+
+  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" : "sm"}
+      useZebraStyles
+    >
+      {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
+        <div>
+          <TableContainer className={styles.tableContainer}>
+            <div className={styles.toolbarWrapper}>
+              <TableToolbar size={responsiveSize}>
+                <TableToolbarContent className={styles.toolbarContent}>
+                  <TableToolbarSearch
+                    className={styles.searchbox}
+                    expanded
+                    onChange={onInputChange}
+                    placeholder={t("searchThisList", "Search this list")}
+                    size={responsiveSize}
+                  />
+
+                  <TableToolbarMenu>
+                    <TableToolbarAction
+                      className={styles.toolbarAction}
+                      onClick={() => setDocumentType("csv")}
+                    >
+                      Download as CSV
+                    </TableToolbarAction>
+                    <TableToolbarAction
+                      className={styles.toolbarAction}
+                      disabled
+                      onClick={() => setDocumentType("pdf")}
+                    >
+                      Download as PDF
+                    </TableToolbarAction>
+                    <TableToolbarAction
+                      className={styles.toolbarAction}
+                      onClick={() => setDocumentType("json")}
+                    >
+                      Download as JSON
+                    </TableToolbarAction>
+                  </TableToolbarMenu>
+                </TableToolbarContent>
+              </TableToolbar>
+            </div>
+            <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>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+            <Pagination
+              forwardText="Next page"
+              backwardText="Previous page"
+              page={currentPage}
+              pageSize={currentPageSize}
+              pageSizes={pageSizes}
+              totalItems={data?.length}
+              className={styles.pagination}
+              onChange={({ pageSize, page }) => {
+                if (pageSize !== currentPageSize) {
+                  setPageSize(pageSize);
+                }
+                if (page !== currentPage) {
+                  goTo(page);
+                }
+              }}
+            />
+          </TableContainer>
+        </div>
+      )}
+    </DataTable>
+  );
+};
+
+export default DataList;