Merge pull request #41 from openimis/feature/OP-1800

OP-1800: remove redundant columns
openimis · Feb 16, 2024 · 267f7bf · 267f7bf
2 parents 0387ebc + 7f3c52d
commit 267f7bf
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 29 deletions.
diff --git a/src/components/GenerateReportPicker.js b/src/components/GenerateReportPicker.js
@@ -34,7 +34,7 @@ const GenerateReportPicker = (props) => {
       {children ? (
         children({ toggle })
       ) : (
-        <Button onClick={toggle} variant="contained" size="small">
+        <Button onClick={toggle} size="small" variant="contained" color="primary">
           {formatMessage("triggerBtn")}
         </Button>
       )}

diff --git a/src/components/ReportSearcher.js b/src/components/ReportSearcher.js
@@ -1,37 +1,97 @@
 import React, { useCallback, useState } from "react";
 import { useSelector } from "react-redux";
+
+import { Box, Button, Tooltip } from "@material-ui/core";
+import HelpOutlineIcon from "@material-ui/icons/HelpOutline";
+
+import {
+  Searcher,
+  useTranslations,
+  useModulesManager,
+} from "@openimis/fe-core";
+import { RIGHT_REPORT_EDIT, RIGHT_REPORT_ADD } from "../constants";
 import { useReportsQuery } from "../hooks";
-import { Searcher, useTranslations, useModulesManager } from "@openimis/fe-core";
 import GenerateReportPicker from "./GenerateReportPicker";
-import { Box, Button } from "@material-ui/core";
 import ReportDefinitionEditorDialog from "./ReportDefinitionEditorDialog";
-import { RIGHT_REPORT_EDIT, RIGHT_REPORT_ADD } from "../constants"
-
-const HEADERS = ["tools.report.description", "tools.report.module", "tools.report.name", ""];
 
 const ReportSearcher = () => {
   const modulesManager = useModulesManager();
-  const { formatMessageWithValues, formatMessage } = useTranslations("tools", modulesManager);
+  const { formatMessageWithValues, formatMessage } = useTranslations(
+    "tools",
+    modulesManager
+  );
   const { data, isLoading, error, refetch } = useReportsQuery();
   const [editedReport, setEditedReport] = useState();
   const rights = useSelector((state) => state.core?.user?.i_user?.rights ?? []);
-  const itemFormatters = useCallback(
-    () => [
-      (r) => r.description,
-      (r) => r.module,
-      (r) => r.name,
-      (r) => (
-        <Box display="flex" justifyContent={"flex-end"} gridGap={12}>
-          {
-            rights.includes(RIGHT_REPORT_ADD) &&
-            rights.includes(RIGHT_REPORT_EDIT) &&
-            <Button onClick={() => setEditedReport(r)} size="small">
+
+  const reportsByModule = data?.reports?.reduce((acc, report) => {
+    const { module } = report;
+    if (!acc[module]) {
+      acc[module] = [];
+    }
+    acc[module].push(report);
+    return acc;
+  }, {});
+
+  const formattedReports =
+    reportsByModule &&
+    Object.keys(reportsByModule).reduce((acc, moduleName) => {
+      acc.push({ isCategory: true, category: moduleName });
+      reportsByModule[moduleName].forEach((report) => acc.push(report));
+      return acc;
+    }, []);
+
+  const formatCategory = (report) => {
+    const capitalizedCategory =
+      report.category.charAt(0).toUpperCase() + report.category.slice(1);
+    return (
+      <Box display="flex" justifyContent="flex-start">
+        <strong>
+          <i>
+            {formatMessageWithValues("ReportSearcher.moduleName", {
+              module: capitalizedCategory,
+            })}
+          </i>
+        </strong>
+      </Box>
+    );
+  };
+
+  const formatReport = (report) => (
+    <Box display="flex" justifyContent="flex-start" marginLeft="18px">
+      {report.description}
+    </Box>
+  );
+
+  const formatActions = (report) =>
+    !report.category && (
+      <Box display="flex" justifyContent={"flex-end"} gridGap={12}>
+        {rights.includes(RIGHT_REPORT_ADD) &&
+          rights.includes(RIGHT_REPORT_EDIT) && (
+            <Button onClick={() => setEditedReport(report)} size="small">
               {formatMessage("ReportSearcher.editBtn")}
             </Button>
-          }
-          <GenerateReportPicker name={r.name} />
-        </Box>
-      ),
+          )}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Tooltip title={report.name}>
+            <HelpOutlineIcon fontSize="small" />
+          </Tooltip>
+        </div>
+        <GenerateReportPicker name={report.name} />
+      </Box>
+    );
+
+  const itemFormatters = useCallback(
+    () => [
+      (report) =>
+        report.isCategory ? formatCategory(report) : formatReport(report),
+      formatActions,
     ],
     []
   );
@@ -40,17 +100,24 @@ const ReportSearcher = () => {
     <>
       <Searcher
         module="report"
-        tableTitle={formatMessageWithValues("ReportSearcher.tableTitle", { count: data?.reports?.length })}
-        items={data?.reports ?? []}
+        tableTitle={formatMessageWithValues("ReportSearcher.tableTitle", {
+          count: data?.reports?.length,
+        })}
+        items={formattedReports ?? []}
         fetchingItems={isLoading}
         errorItems={error}
         fetch={() => refetch()}
         itemsPageInfo={{ totalCount: data?.reports?.length ?? 0 }}
-        headers={() => HEADERS}
+        headers={() => []}
         itemFormatters={itemFormatters}
         withPagination={false}
       />
-      {editedReport && <ReportDefinitionEditorDialog name={editedReport.name} onClose={() => setEditedReport(null)} />}
+      {editedReport && (
+        <ReportDefinitionEditorDialog
+          name={editedReport.name}
+          onClose={() => setEditedReport(null)}
+        />
+      )}
     </>
   );
 };

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -90,8 +90,6 @@
   "tools.ReportForm.title": "Editing report {name}",
   "tools.ReportForm.unknownReport": "Unknown report",
   "tools.ReportSearcher.tableTitle": "Reports",
-  "tools.report.name": "Report Name",
-  "tools.report.module": "Module",
   "tools.report.validityFrom": "Valid From",
   "tools.report.description": "Description",
   "tools.report.definition": "Definition",
@@ -109,5 +107,6 @@
   "tools.RegistersPage.servicesBlockTitle": "Medical Services",
   "tools.RegistersPage.insureesBlockTitle": "Insurees",
   "tools.RegistersPage.insurees.uploadLabel": "Upload Insurees",
-  "tools.RegistersPage.insurees.downloadLabel": "Download Insurees"
+  "tools.RegistersPage.insurees.downloadLabel": "Download Insurees",
+  "tools.ReportSearcher.moduleName": "{module} Module"
 }