feature(OH2-283): admin exams list (#581)

* feature(OH2-276): Implement main menu + sidemenu navigation

* update: Update routes paths

* update: Apply requested/suggested changes

* update: Add hospital infos

* update: Update admin sidemenu responsiveness

* styles: Update admin sidebar styles

* styles: Update MenuItem styles

* feature: Add ward list

* styles: Update component styles

* feature: Add ward edit/new form

* feature: Implement  ward crud operations

* update: Update form field values formatting

* feat(admin): exams list

* fix: always display table header even if empty (review: @SteveGT96)

Co-authored-by: Steve Tsala <[email protected]>

---------

Co-authored-by: SteveGT96 <[email protected]>
Co-authored-by: Steve Tsala <[email protected]>

src/components/accessories/admin/exams/Exams.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import ExamsTable from "./examsTable";
+
+export const Exams = () => {
+  return <ExamsTable />;
+};

src/components/accessories/admin/exams/examsTable/ExamsTable.module.scss

@@ -0,0 +1,4 @@
+.table {
+  display: grid;
+  margin-top: 50px;
+}

src/components/accessories/admin/exams/examsTable/ExamsTable.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import Table from "../../../table/Table";
+import { useTranslation } from "react-i18next";
+import InfoBox from "../../../infoBox/InfoBox";
+import { CircularProgress } from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+import { getExams } from "../../../../../state/exams/actions";
+import { IState } from "../../../../../types";
+import { ExamDTO } from "../../../../../generated";
+import { IApiResponse } from "../../../../../state/types";
+import classes from "./ExamsTable.module.scss";
+
+export const ExamsTable = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    dispatch(getExams());
+  }, [dispatch]);
+
+  const header = ["code", "type", "description", "procedure", "defaultResult"];
+
+  const label = {
+    code: t("exam.code"),
+    type: t("exam.examtype"),
+    description: t("exam.description"),
+    procedure: t("exam.procedure"),
+    defaultResult: t("exam.defaultResult"),
+  };
+  const order = ["code", "type", "description", "procedure", "defaultResult"];
+
+  const { data, status, error } = useSelector<IState, IApiResponse<ExamDTO[]>>(
+    (state) => state.exams.examList
+  );
+
+  const formatDataToDisplay = (data: ExamDTO[]) => {
+    return data.map((item) => {
+      return {
+        code: item.code ?? "",
+        type: item.examtype?.description ?? "",
+        description: item.description ?? "",
+        procedure: item.procedure ?? "",
+        defaultResult: item.defaultResult ?? "",
+      };
+    });
+  };
+
+  return (
+    <div className={classes.table}>
+      {(() => {
+        switch (status) {
+          case "FAIL":
+            return <InfoBox type="error" message={error?.message} />;
+          case "LOADING":
+            return (
+              <CircularProgress
+                style={{ marginLeft: "50%", position: "relative" }}
+              />
+            );
+
+          case "SUCCESS":
+            return (
+              <Table
+                rowData={formatDataToDisplay(data ?? [])}
+                tableHeader={header}
+                labelData={label}
+                columnsOrder={order}
+                rowsPerPage={10}
+                isCollapsabile={false}
+              />
+            );
+          case "SUCCESS_EMPTY":
+            return <InfoBox type="info" message={t("common.emptydata")} />;
+          default:
+            return;
+        }
+      })()}
+    </div>
+  );
+};

src/components/accessories/admin/exams/examsTable/index.ts

@@ -0,0 +1,3 @@
+import { ExamsTable } from "./ExamsTable";
+
+export default ExamsTable;

src/components/accessories/admin/exams/index.ts

@@ -0,0 +1 @@
+export * from "./Exams";

src/components/accessories/table/Table.tsx

@@ -233,11 +233,13 @@ const Table: FunctionComponent<IProps> = ({
 
   return (
     <>
-      <div className="header">
-        <Button type="button" onClick={handleExpand}>
-          {expanded ? t("common.collapse_all") : t("common.expand_all")}
-        </Button>
-      </div>
+        <div className="header">
+        {!!isCollapsabile && (
+          <Button type="button" onClick={handleExpand}>
+            {expanded ? t("common.collapse_all") : t("common.expand_all")}
+          </Button>
+          )}
+        </div>
       <TableContainer component={Paper}>
         <MaterialComponent className="table" aria-label="simple table">
           <TableHead className="table_header">

src/components/accessories/table/types.ts

@@ -3,6 +3,7 @@ export interface IProps {
   labelData: Record<string, any>;
   tableHeader: Array<string>;
   dateFields?: string[];
+  /** allow the table to expand & collapse */
   isCollapsabile?: boolean;
   rowsPerPage: number;
   initialOrderBy?: string;

src/components/activities/adminActivity/AdminActivity.module.scss

@@ -13,8 +13,8 @@
   box-shadow: 0 4px 8px 0 rgba(48, 49, 51, 0.1);
   border-radius: 8px;
   flex-grow: 1;
-  align-self: center;
   margin: 30px 160px;
+  align-self: center;
   @include susy-media($medium-down) {
     flex-direction: column;
     margin: 20px 20px;

src/resources/i18n/en.json

@@ -791,6 +791,13 @@
       "urine": { "txt": "Urine" }
     }
   },
+  "exam": {
+    "code": "Code",
+    "examtype": "Exam Type",
+    "description": "Name",
+    "procedure": "Procedure",
+    "defaultResult": "Default value"
+  },
   "ward": {
     "code": "Code",
     "description": "Description",

src/routes/Admin/AdminRoutes.tsx

@@ -6,6 +6,7 @@ import AdminActivity, {
   AdminActivityContent,
 } from "../../components/activities/adminActivity";
 import { Wards, NewWard, EditWard } from "../../components/accessories/admin";
+import { Exams } from "../../components/accessories/admin/exams";
 
 export const AdminRoutes = () => {
   const { t } = useTranslation();
@@ -47,7 +48,7 @@ export const AdminRoutes = () => {
       {
         path: "exams",
         element: (
-          <AdminActivityContent title={t("nav.exams")} children={<Wards />} />
+          <AdminActivityContent title={t("nav.exams")} children={<Exams />} />
         ),
       },
       {