IO-1228 IO-1282 RC Categories & Searching

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -1,5 +1,16 @@
 import { useLazyQuery } from "@apollo/client";
-import { Button, DatePicker, Form, Radio, Space } from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Form,
+  Input,
+  Radio,
+  Row,
+  Typography,
+} from "antd";
+import _ from "lodash";
 import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,7 +25,6 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import "./report-center-modal.styles.scss";
-
 const mapStateToProps = createStructuredSelector({
   reportCenterModal: selectReportCenter,
 });
@@ -28,9 +38,14 @@ export default connect(
 
 export function ReportCenterModalComponent({ reportCenterModal }) {
   const [form] = Form.useForm();
+  const [search, setSearch] = useState("");
+
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const Templates = TemplateList("report_center");
+  const ReportsList = Object.keys(Templates).map((key) => {
+    return Templates[key];
+  });
   const { visible } = reportCenterModal;
 
   const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
@@ -80,6 +95,17 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
     setLoading(false);
   };
 
+  const FilteredReportsList =
+    search !== ""
+      ? ReportsList.filter((r) =>
+          r.title.toLowerCase().includes(search.toLowerCase())
+        )
+      : ReportsList;
+
+  //Group it, create cards, and then filter out.
+
+  const grouped = _.groupBy(FilteredReportsList, "group");
+
   return (
     <div>
       <Form
@@ -88,6 +114,10 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
         layout="vertical"
         form={form}
       >
+        <Input.Search
+          onChange={(e) => setSearch(e.target.value)}
+          value={search}
+        />
         <Form.Item
           name="key"
           label={t("reportcenter.labels.key")}
@@ -100,23 +130,42 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
           ]}
         >
           <Radio.Group>
-            <Space
-              direction="vertical"
-              wrap
-              size="small"
-              style={{
-                maxHeight: "50vh",
-              }}
-            >
-              {Object.keys(Templates).map((key) => (
+            {/* {Object.keys(Templates).map((key) => (
                 <Radio key={key} value={key}>
                   {Templates[key].title}
                 </Radio>
+              ))} */}
+
+            <Row gutter={[16, 16]}>
+              {Object.keys(grouped).map((key) => (
+                <Col md={8} sm={12} key={key}>
+                  <Card.Grid
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      maxHeight: "33vh",
+                      overflowY: "scroll",
+                    }}
+                  >
+                    <Typography.Title level={4}>
+                      {t(`reportcenter.labels.groups.${key}`)}
+                    </Typography.Title>
+                    <ul style={{ columns: "3 auto" }}>
+                      {grouped[key].map((item) => (
+                        <li key={item.key}>
+                          <Radio key={item.key} value={item.key}>
+                            {item.title}
+                          </Radio>
+                        </li>
+                      ))}
+                    </ul>
+                  </Card.Grid>
+                </Col>
               ))}
-            </Space>
+            </Row>
           </Radio.Group>
         </Form.Item>
-        <Form.Item dependencies={["key"]}>
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
           {() => {
             const key = form.getFieldValue("key");
             if (!key) return null;
@@ -137,14 +186,14 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
           shouldUpdate={(prev, cur) =>
             Templates[prev.key]?.idtype !== Templates[cur.key]?.idtype
           }
-          style={{ display: "none" }}
+          style={{ display: "none", margin: 0, padding: 0 }}
         >
           {() => {
             form.setFieldsValue({ id: null });
             return null;
           }}
         </Form.Item>
-        <Form.Item dependencies={["key"]}>
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
           {() => {
             const key = form.getFieldValue("key");
             if (!key) return null;