Feature/oh2 286 filters to tables (#604)

* feat(oh2-286): add filters to exams & users

* chore: reorder components

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

@@ -1,12 +1,15 @@
 import React, { useEffect } from "react";
-import Table from "../../../table/Table";
+import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
-import InfoBox from "../../../infoBox/InfoBox";
 import { CircularProgress } from "@material-ui/core";
-import { useDispatch, useSelector } from "react-redux";
+
+import Table from "../../../table/Table";
+import { TFilterField } from "../../../table/filter/types";
+import InfoBox from "../../../infoBox/InfoBox";
 import { getExams } from "../../../../../state/exams/actions";
+import { getExamTypes } from "../../../../../state/examTypes/actions";
 import { IState } from "../../../../../types";
-import { ExamDTO } from "../../../../../generated";
+import { ExamDTO, ExamTypeDTO } from "../../../../../generated";
 import { ApiResponse } from "../../../../../state/types";
 import classes from "./ExamsTable.module.scss";
 
@@ -16,10 +19,33 @@ export const ExamsTable = () => {
 
   useEffect(() => {
     dispatch(getExams());
+    dispatch(getExamTypes());
   }, [dispatch]);
 
+  const examTypesOptions = useSelector<
+    IState,
+    { label: string; value: string }[]
+  >(
+    (state) =>
+      state.examTypes.getExamTypes.data?.map((item: ExamTypeDTO) => ({
+        value: item.code ?? "",
+        label: item.description ?? item.code ?? "",
+      })) ?? []
+  );
+
   const header = ["code", "type", "description", "procedure", "defaultResult"];
 
+  const filters: TFilterField[] = [
+    {
+      key: "type",
+      label: t("exam.examtype"),
+      type: "select",
+      options: examTypesOptions,
+    },
+    { key: "description", label: t("exam.description"), type: "text" },
+    { key: "defaultResult", label: t("exam.defaultResult"), type: "text" },
+  ];
+
   const label = {
     code: t("exam.code"),
     type: t("exam.examtype"),
@@ -67,6 +93,13 @@ export const ExamsTable = () => {
                 columnsOrder={order}
                 rowsPerPage={10}
                 isCollapsabile={false}
+                filterColumns={filters}
+                rawData={(data ?? []).map((exam) => ({
+                  ...exam,
+                  type: exam.examtype?.code,
+                }))}
+                manualFilter={false}
+                rowKey="code"
               />
             );
           case "SUCCESS_EMPTY":

src/components/accessories/admin/users/Users.tsx

@@ -1,7 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
+import { Tabs, Tab } from "@material-ui/core";
 
 import UsersTable from "./usersTable";
+import UserGroupsTable from "./userGroupsTable";
 
 export const Users = () => {
-  return <UsersTable />;
+  const [tab, setTab] = useState<"users" | "groups">("users");
+  return (
+    <>
+      <Tabs
+        value={tab}
+        onChange={(_, value) => setTab(value)}
+        aria-label="switch between users and groups"
+      >
+        <Tab label="Users" value="users" />
+        <Tab label="Groups" value="groups" />
+      </Tabs>
+      {tab === "users" ? <UsersTable /> : <UserGroupsTable />}
+    </>
+  );
 };

src/components/accessories/admin/users/userGroupsTable/UserGroupsTable.tsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const UserGroupsTable = () => <>UserGroupsTable, coming soon</>;

src/components/accessories/admin/users/userGroupsTable/index.ts

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

src/components/accessories/admin/users/usersTable/UsersTable.tsx

@@ -1,13 +1,16 @@
 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 Table from "../../../table/Table";
+import { TFilterField } from "../../../table/filter/types";
+import InfoBox from "../../../infoBox/InfoBox";
 import { useDispatch, useSelector } from "react-redux";
 import { getUsers } from "../../../../../state/users/actions";
 import { IState } from "../../../../../types";
 import { UserDTO } from "../../../../../generated";
 import { ApiResponse } from "../../../../../state/types";
+
 import classes from "./UsersTable.module.scss";
 
 export const UsersTable = () => {
@@ -27,6 +30,10 @@ export const UsersTable = () => {
   };
   const order = ["userName", "userGroupName", "desc"];
 
+  const filters: TFilterField[] = [
+    { key: "userName", label: t("user.username"), type: "text" },
+  ];
+
   const { data, status, error } = useSelector<IState, ApiResponse<UserDTO[]>>(
     (state) => state.users.userList
   );
@@ -63,7 +70,11 @@ export const UsersTable = () => {
                 labelData={label}
                 columnsOrder={order}
                 rowsPerPage={10}
+                filterColumns={filters}
+                manualFilter={false}
                 isCollapsabile={false}
+                rawData={data}
+                rowKey="userName"
               />
             );
           case "SUCCESS_EMPTY":

src/mockServer/fixtures/diseasesDTO.js

@@ -12,7 +12,7 @@ export const diseasesDTO = [
   },
   {
     code: 22,
-    description: "Fake diseases",
+    description: "Fake disease",
     diseaseType: {
       code: "FK",
       description: "4.FAKE DISEASES",

src/mockServer/fixtures/examTypesDTO.ts

@@ -0,0 +1,12 @@
+import { ExamTypeDTO } from "../../generated";
+
+export const examTypesDTO: ExamTypeDTO[] = [
+  {
+    code: "HB",
+    description: "1.Haematology",
+  },
+  {
+    code: "OT",
+    description: "2.Some other exam type",
+  },
+];

src/mockServer/fixtures/examsDTO.ts

@@ -0,0 +1,59 @@
+import { ExamDTO } from "../../generated";
+
+export const examsDTO: ExamDTO[] = [
+  {
+    code: "01.01",
+    description: "1.1 HB",
+    procedure: 2,
+    defaultResult: "POSTIVE",
+    examtype: {
+      code: "HB",
+      description: "1.Haematology",
+    },
+    lock: 1,
+  },
+  {
+    code: "01.02",
+    description: "1.2 WBC Count",
+    procedure: 1,
+    defaultResult: "POSTIVE",
+    examtype: {
+      code: "HB",
+      description: "1.Haematology",
+    },
+    lock: 1,
+  },
+  {
+    code: "01.03",
+    description: "1.3 Differential",
+    procedure: 1,
+    defaultResult: "",
+    examtype: {
+      code: "HB",
+      description: "1.Haematology",
+    },
+    lock: 0,
+  },
+  {
+    code: "01.04",
+    description: "1.4 Film Comment",
+    procedure: 1,
+    defaultResult: "",
+    examtype: {
+      code: "HB",
+      description: "1.Haematology",
+    },
+    lock: 0,
+  },
+  {
+    code: "02.01",
+    description: "2.1 Some other Exam",
+    procedure: 1,
+    defaultResult: "",
+    examtype: {
+      code: "OT",
+      description: "2.Some other exam type",
+    },
+    lock: 0,
+  },
+];

src/mockServer/routes/examTypes.js

@@ -0,0 +1,9 @@
+import { examTypesDTO } from "../fixtures/examTypesDTO";
+
+export const examTypesRoutes = (server) => {
+  server.namespace("/examtypes", () => {
+    server.get("/").intercept((_req, res) => {
+      res.status(200).json(examTypesDTO);
+    });
+  });
+};

src/mockServer/server.js

@@ -19,14 +19,15 @@ import { wardsRoutes } from "./routes/wards";
 import { labRoutes } from "./routes/lab";
 import { examRoutes } from "./routes/exam";
 import { examRowRoutes } from "./routes/examRow";
+import { examTypesRoutes } from "./routes/examTypes";
 import { billRoutes } from "./routes/bill";
 import { pricesRoutes } from "./routes/prices";
 import { operationRoutes } from "./routes/operations";
 import { hospitalRoutes } from "./routes/hospital";
 import { operationTypeRoutes } from "./routes/operationTypes";
-import { vaccineRoutes } from './routes/vaccine'
-import { vaccineTypesRoutes } from './routes/vaccineTypes'
-import { suppliersRoutes } from './routes/suppliers';
+import { vaccineRoutes } from "./routes/vaccine";
+import { vaccineTypesRoutes } from "./routes/vaccineTypes";
+import { suppliersRoutes } from "./routes/suppliers";
 
 export function makeServer() {
   Polly.register(XHRAdapter);
@@ -51,6 +52,7 @@ export function makeServer() {
     dischargeTypesRoutes(server);
     wardsRoutes(server);
     examRoutes(server);
+    examTypesRoutes(server);
     labRoutes(server);
     examRowRoutes(server);
     pricesRoutes(server);