@asaleh37/ui-base 25.6.19-6 → 25.6.21

package/src/components/templates/report/ReportViewer.tsx

@@ -1,382 +1,382 @@
-import { useEffect, useState } from "react";
-import { useAxios, useWindow } from "../../../hooks";
-import TemplateForm from "../DataEntryTemplates/TemplateDataForm/TemplateForm";
-import { useTranslation } from "react-i18next";
-import { FormElementProps } from "../DataEntryTemplates/DataEntryTypes";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Icon,
-  IconButton,
-  Typography,
-} from "@mui/material";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import ExcelReportViewer from "./ExcelReportViewer";
-import { GridExpandMoreIcon } from "@mui/x-data-grid-premium";
-
-type ReportViewerState =
-  | "ERROR"
-  | "WAITING_REPORT_CODE"
-  | "LOADING_METADATA"
-  | "WAITING_PARAMETER_INPUT"
-  | "WAITING_RESULT"
-  | "SHOWING_RESULT";
-
-type ReportViewerProps = {
-  reportCode: string;
-  resultMode: "Request" | "App";
-  reportParametersValues?: { [key: string]: any };
-  byPassParameterEntry?: boolean;
-  jasperOutPutFileType?: "pdf" | "word" | "excel";
-};
-
-type ReportParameter = {
-  parameterCode: string;
-  parameterLabel: string;
-  parameterValueFormat?: string;
-  parameterValueField?: string;
-  parameterDisplayField?: string;
-  parameterDataset?: Array<any>;
-  parameterDataQueryId?: number;
-  hidden?: boolean;
-  mandatory?: boolean;
-  defaultValue?: any;
-  parameterType:
-    | "text"
-    | "number"
-    | "date"
-    | "datetime"
-    | "combobox"
-    | "checkbox"
-    | "html"
-    | "lookup";
-};
-
-const ReportViewer: React.FC<ReportViewerProps> = (props) => {
-  const [blobUrl, setBlobUrl] = useState(null);
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [excelReportData, setExcelReportData] = useState<Array<any>>([]);
-  const [reportViewerState, setReportViewerState] = useState<ReportViewerState>(
-    "WAITING_REPORT_CODE"
-  );
-  const { handleGetRequest, handlePostRequest, HandleDownloadHTTPPostPDF } =
-    useAxios();
-  const [reportInfo, setReportInfo] = useState<any>(null);
-  const [reportParametersValues, setReportParametersValues] = useState<any>({
-    ...props?.reportParametersValues,
-  });
-  const [reportParametersElements, setReportParametersElements] = useState<
-    Array<FormElementProps>
-  >([]);
-  const { t } = useTranslation();
-
-  const getFormElementsFromReportParameters = (
-    reportParameters: Array<ReportParameter>
-  ) => {
-    const formElements: Array<FormElementProps> = [];
-    for (const reportParameter of reportParameters) {
-      const formElement: FormElementProps = {
-        type: "field",
-        mode: "props",
-        props: {
-          fieldLabel: reportParameter?.parameterLabel,
-          fieldName: reportParameter?.parameterCode,
-          fieldType: reportParameter?.parameterType,
-          hidden: reportParameter?.hidden,
-          formProps: { fieldSize: { lg: 4, md: 6, sm: 12 } },
-          required: reportParameter?.mandatory,
-          defaultValue:
-            reportParametersValues[reportParameter?.parameterCode] ||
-            reportParameter?.defaultValue,
-        },
-      };
-      formElements.push(formElement);
-    }
-    return formElements;
-  };
-  const loadReportData = async () => {
-    setReportViewerState("LOADING_METADATA");
-    await handleGetRequest({
-      endPointURI: "api/v1/public/report/metadata",
-      showMask: true,
-      parameters: { reportCode: props.reportCode },
-      successCallBkFn: (response: any) => {
-        setReportInfo(response.data);
-        setReportParametersElements(
-          getFormElementsFromReportParameters(response.data.reportParameters)
-        );
-        if (
-          props?.byPassParameterEntry === true ||
-          response.data.reportParameters.length == 0
-        ) {
-          runReport(response.data, reportParametersValues);
-          setReportViewerState("WAITING_RESULT");
-        } else {
-          setReportViewerState("WAITING_PARAMETER_INPUT");
-        }
-      },
-      failureCallBkFn: (response) => {
-        setErrorMessage(
-          "Failed loading report metadata ... contact your administrator"
-        );
-        setReportViewerState("ERROR");
-      },
-    });
-  };
-
-  const runReport = async (reportInfoProp, params) => {
-    setReportViewerState("WAITING_RESULT");
-    if (reportInfoProp?.reportType === "Excel") {
-      await handlePostRequest({
-        endPointURI: "api/v1/public/report/run",
-        showMask: true,
-        data: {
-          reportCode: props.reportCode,
-          parameters: params,
-          resultMode: props.resultMode,
-          jasperOutPutFileType: props.jasperOutPutFileType,
-        },
-        successCallBkFn: (response: any) => {
-          setReportViewerState("SHOWING_RESULT");
-          setExcelReportData(response.data);
-        },
-      });
-    } else if (reportInfoProp?.reportType) {
-      await HandleDownloadHTTPPostPDF({
-        endPointURI: "api/v1/public/report/run",
-        showMask: true,
-        data: {
-          reportCode: props.reportCode,
-          parameters: params,
-          resultMode: props.resultMode,
-          jasperOutPutFileType: props.jasperOutPutFileType,
-        },
-        successCallBkFn: (response: any) => {
-          setReportViewerState("SHOWING_RESULT");
-          const contentDisposition = response.headers["content-disposition"];
-          debugger;
-          let filename = "downloaded_file";
-          if (
-            contentDisposition &&
-            contentDisposition.indexOf("filename=") !== -1
-          ) {
-            const match = contentDisposition.match(/filename="?([^"]+)"?/);
-            if (match && match[1]) filename = match[1];
-          }
-          if (filename.includes("pdf")) {
-            const file = new Blob([response.data], { type: "application/pdf" });
-            const url = URL.createObjectURL(file);
-            setBlobUrl(url);
-          } else {
-            const blob = new Blob([response.data], {
-              type: response.headers["content-type"],
-            });
-            // Create a temporary anchor element
-            const url = window.URL.createObjectURL(blob);
-            const link = document.createElement("a");
-            link.href = url;
-            // Optional: Try to get filename from response headers
-
-            link.download = filename;
-            document.body.appendChild(link);
-            link.click();
-
-            // Clean up
-            document.body.removeChild(link);
-            window.URL.revokeObjectURL(url);
-          }          
-        },
-        failureCallBkFn: (response) => {
-          setErrorMessage(
-            "Failed To run report ... contact your administrator"
-          );
-          setReportViewerState("ERROR");
-        },
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (props?.reportCode) {
-      loadReportData();
-    }
-  }, [
-    props.reportCode,
-    props.byPassParameterEntry,
-    props.reportParametersValues,
-    props.jasperOutPutFileType,
-    props.resultMode,
-  ]);
-
-  return (
-    <>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "100%",
-        }}
-      >
-        <Box sx={{ flex: 1, textAlign: "center", marginBottom: 1 }}>
-          <FontAwesomeIcon
-            icon={
-              reportInfo?.reportType === "Excel" ? "file-excel" : "file-pdf"
-            }
-            color={reportInfo?.reportType === "Excel" ? "darkgreen" : "darkred"}
-            style={{ marginRight: 10, marginLeft: 10 }}
-          />
-          {reportInfo?.reportName}
-        </Box>
-        {reportInfo?.reportType != "Excel" ? (
-          reportViewerState === "SHOWING_RESULT" ? (
-            <>
-              {props?.byPassParameterEntry === true ? (
-                <></>
-              ) : reportParametersElements.length > 0 ? (
-                <IconButton
-                  onClick={() => {
-                    setReportParametersElements(
-                      getFormElementsFromReportParameters(
-                        reportInfo.reportParameters
-                      )
-                    );
-                    setReportViewerState("WAITING_PARAMETER_INPUT");
-                  }}
-                >
-                  <FontAwesomeIcon icon="filter" />
-                </IconButton>
-              ) : (
-                <></>
-              )}
-              <IconButton>
-                <FontAwesomeIcon
-                  icon="refresh"
-                  onClick={() => {
-                    runReport(reportInfo, reportParametersValues);
-                  }}
-                />
-              </IconButton>
-            </>
-          ) : (
-            <></>
-          )
-        ) : (
-          <></>
-        )}
-      </Box>
-      <Box
-        sx={{
-          flexGrow: 1,
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "flex-start",
-        }}
-      >
-        {reportViewerState === "WAITING_PARAMETER_INPUT" &&
-        reportInfo?.reportType != "Excel" ? (
-          <Accordion defaultExpanded sx={{ width: "100%" }} expanded={true}>
-            <AccordionSummary>
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <FontAwesomeIcon
-                  style={{ marginLeft: 5, marginRight: 5 }}
-                  icon="search"
-                />
-                <Typography component="span">Filters</Typography>
-              </Box>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Box>
-                <TemplateForm
-                  saveButtonSpecs={{
-                    label: t("SHOW_REPORT_BTN_LABEL"),
-                    icon: "search",
-                    actionButtonVariant: "outlined",
-                    actionButtonColor: "success",
-                    hidden: true,
-                  }}
-                  cancelButtonSpecs={{
-                    label: t("RESET_BTN_LABEL"),
-                    icon: "eraser",
-                    actionButtonVariant: "outlined",
-                    actionButtonColor: "error",
-                  }}
-                  apiActions={{
-                    deleteRecordById: async () => {
-                      return true;
-                    },
-                    saveRecord: async (params) => {
-                      if (params != undefined) {
-                        setReportParametersValues(params);
-                      } else {
-                        setReportParametersValues({});
-                      }
-                      runReport(reportInfo, params);
-                    },
-                    reloadData: async () => {},
-                    loadRecordById: async () => {},
-                  }}
-                  elements={reportParametersElements}
-                />
-              </Box>
-            </AccordionDetails>
-          </Accordion>
-        ) : reportViewerState === "SHOWING_RESULT" ||
-          ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
-            reportViewerState === "WAITING_RESULT") &&
-            reportInfo?.reportType === "Excel") ? (
-          reportInfo?.reportType === "Excel" ? (
-            <ExcelReportViewer
-              reportData={excelReportData}
-              setReportData={setExcelReportData}
-              reloadReport={async () => {
-                runReport(reportInfo, reportParametersValues);
-              }}
-              gridLoadParameters={reportParametersElements}
-              gridLoadParametersValues={reportParametersValues}
-              setGridLoadParametersValues={setReportParametersValues}
-            />
-          ) : (
-            <iframe
-              src={blobUrl}
-              width="100%"
-              height="100%"
-              title="PDF Preview"
-              style={{ border: "1px solid #ccc", marginTop: "20px" }}
-            ></iframe>
-          )
-        ) : reportViewerState === "ERROR" ? (
-          <Box
-            sx={{
-              display: "flex",
-              flex: 1,
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <FontAwesomeIcon
-              icon="circle-exclamation"
-              color="darkred"
-              style={{ marginRight: 10, marginLeft: 10 }}
-            />
-            {errorMessage}
-          </Box>
-        ) : (
-          <></>
-        )}
-      </Box>
-    </>
-  );
-};
-
-export default ReportViewer;
+import { useEffect, useState } from "react";
+import { useAxios, useWindow } from "../../../hooks";
+import TemplateForm from "../DataEntryTemplates/TemplateDataForm/TemplateForm";
+import { useTranslation } from "react-i18next";
+import { FormElementProps } from "../DataEntryTemplates/DataEntryTypes";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Icon,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ExcelReportViewer from "./ExcelReportViewer";
+import { GridExpandMoreIcon } from "@mui/x-data-grid-premium";
+
+type ReportViewerState =
+  | "ERROR"
+  | "WAITING_REPORT_CODE"
+  | "LOADING_METADATA"
+  | "WAITING_PARAMETER_INPUT"
+  | "WAITING_RESULT"
+  | "SHOWING_RESULT";
+
+type ReportViewerProps = {
+  reportCode: string;
+  resultMode: "Request" | "App";
+  reportParametersValues?: { [key: string]: any };
+  byPassParameterEntry?: boolean;
+  jasperOutPutFileType?: "pdf" | "word" | "excel";
+};
+
+type ReportParameter = {
+  parameterCode: string;
+  parameterLabel: string;
+  parameterValueFormat?: string;
+  parameterValueField?: string;
+  parameterDisplayField?: string;
+  parameterDataset?: Array<any>;
+  parameterDataQueryId?: number;
+  hidden?: boolean;
+  mandatory?: boolean;
+  defaultValue?: any;
+  parameterType:
+    | "text"
+    | "number"
+    | "date"
+    | "datetime"
+    | "combobox"
+    | "checkbox"
+    | "html"
+    | "lookup";
+};
+
+const ReportViewer: React.FC<ReportViewerProps> = (props) => {
+  const [blobUrl, setBlobUrl] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [excelReportData, setExcelReportData] = useState<Array<any>>([]);
+  const [reportViewerState, setReportViewerState] = useState<ReportViewerState>(
+    "WAITING_REPORT_CODE"
+  );
+  const { handleGetRequest, handlePostRequest, HandleDownloadHTTPPostPDF } =
+    useAxios();
+  const [reportInfo, setReportInfo] = useState<any>(null);
+  const [reportParametersValues, setReportParametersValues] = useState<any>({
+    ...props?.reportParametersValues,
+  });
+  const [reportParametersElements, setReportParametersElements] = useState<
+    Array<FormElementProps>
+  >([]);
+  const { t } = useTranslation();
+
+  const getFormElementsFromReportParameters = (
+    reportParameters: Array<ReportParameter>
+  ) => {
+    const formElements: Array<FormElementProps> = [];
+    for (const reportParameter of reportParameters) {
+      const formElement: FormElementProps = {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: reportParameter?.parameterLabel,
+          fieldName: reportParameter?.parameterCode,
+          fieldType: reportParameter?.parameterType,
+          hidden: reportParameter?.hidden,
+          formProps: { fieldSize: { lg: 4, md: 6, sm: 12 } },
+          required: reportParameter?.mandatory,
+          defaultValue:
+            reportParametersValues[reportParameter?.parameterCode] ||
+            reportParameter?.defaultValue,
+        },
+      };
+      formElements.push(formElement);
+    }
+    return formElements;
+  };
+  const loadReportData = async () => {
+    setReportViewerState("LOADING_METADATA");
+    await handleGetRequest({
+      endPointURI: "api/v1/public/report/metadata",
+      showMask: true,
+      parameters: { reportCode: props.reportCode },
+      successCallBkFn: (response: any) => {
+        setReportInfo(response.data);
+        setReportParametersElements(
+          getFormElementsFromReportParameters(response.data.reportParameters)
+        );
+        if (
+          props?.byPassParameterEntry === true ||
+          response.data.reportParameters.length == 0
+        ) {
+          runReport(response.data, reportParametersValues);
+          setReportViewerState("WAITING_RESULT");
+        } else {
+          setReportViewerState("WAITING_PARAMETER_INPUT");
+        }
+      },
+      failureCallBkFn: (response) => {
+        setErrorMessage(
+          "Failed loading report metadata ... contact your administrator"
+        );
+        setReportViewerState("ERROR");
+      },
+    });
+  };
+
+  const runReport = async (reportInfoProp, params) => {
+    setReportViewerState("WAITING_RESULT");
+    if (reportInfoProp?.reportType === "Excel") {
+      await handlePostRequest({
+        endPointURI: "api/v1/public/report/run",
+        showMask: true,
+        data: {
+          reportCode: props.reportCode,
+          parameters: params,
+          resultMode: props.resultMode,
+          jasperOutPutFileType: props.jasperOutPutFileType,
+        },
+        successCallBkFn: (response: any) => {
+          setReportViewerState("SHOWING_RESULT");
+          setExcelReportData(response.data);
+        },
+      });
+    } else if (reportInfoProp?.reportType) {
+      await HandleDownloadHTTPPostPDF({
+        endPointURI: "api/v1/public/report/run",
+        showMask: true,
+        data: {
+          reportCode: props.reportCode,
+          parameters: params,
+          resultMode: props.resultMode,
+          jasperOutPutFileType: props.jasperOutPutFileType,
+        },
+        successCallBkFn: (response: any) => {
+          setReportViewerState("SHOWING_RESULT");
+          const contentDisposition = response.headers["content-disposition"];
+          debugger;
+          let filename = "downloaded_file";
+          if (
+            contentDisposition &&
+            contentDisposition.indexOf("filename=") !== -1
+          ) {
+            const match = contentDisposition.match(/filename="?([^"]+)"?/);
+            if (match && match[1]) filename = match[1];
+          }
+          if (filename.includes("pdf")) {
+            const file = new Blob([response.data], { type: "application/pdf" });
+            const url = URL.createObjectURL(file);
+            setBlobUrl(url);
+          } else {
+            const blob = new Blob([response.data], {
+              type: response.headers["content-type"],
+            });
+            // Create a temporary anchor element
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            // Optional: Try to get filename from response headers
+
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+
+            // Clean up
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+          }          
+        },
+        failureCallBkFn: (response) => {
+          setErrorMessage(
+            "Failed To run report ... contact your administrator"
+          );
+          setReportViewerState("ERROR");
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (props?.reportCode) {
+      loadReportData();
+    }
+  }, [
+    props.reportCode,
+    props.byPassParameterEntry,
+    props.reportParametersValues,
+    props.jasperOutPutFileType,
+    props.resultMode,
+  ]);
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+        }}
+      >
+        <Box sx={{ flex: 1, textAlign: "center", marginBottom: 1 }}>
+          <FontAwesomeIcon
+            icon={
+              reportInfo?.reportType === "Excel" ? "file-excel" : "file-pdf"
+            }
+            color={reportInfo?.reportType === "Excel" ? "darkgreen" : "darkred"}
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {reportInfo?.reportName}
+        </Box>
+        {reportInfo?.reportType != "Excel" ? (
+          reportViewerState === "SHOWING_RESULT" ? (
+            <>
+              {props?.byPassParameterEntry === true ? (
+                <></>
+              ) : reportParametersElements.length > 0 ? (
+                <IconButton
+                  onClick={() => {
+                    setReportParametersElements(
+                      getFormElementsFromReportParameters(
+                        reportInfo.reportParameters
+                      )
+                    );
+                    setReportViewerState("WAITING_PARAMETER_INPUT");
+                  }}
+                >
+                  <FontAwesomeIcon icon="filter" />
+                </IconButton>
+              ) : (
+                <></>
+              )}
+              <IconButton>
+                <FontAwesomeIcon
+                  icon="refresh"
+                  onClick={() => {
+                    runReport(reportInfo, reportParametersValues);
+                  }}
+                />
+              </IconButton>
+            </>
+          ) : (
+            <></>
+          )
+        ) : (
+          <></>
+        )}
+      </Box>
+      <Box
+        sx={{
+          flexGrow: 1,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+      >
+        {reportViewerState === "WAITING_PARAMETER_INPUT" &&
+        reportInfo?.reportType != "Excel" ? (
+          <Accordion defaultExpanded sx={{ width: "100%" }} expanded={true}>
+            <AccordionSummary>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <FontAwesomeIcon
+                  style={{ marginLeft: 5, marginRight: 5 }}
+                  icon="search"
+                />
+                <Typography component="span">Filters</Typography>
+              </Box>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box>
+                <TemplateForm
+                  saveButtonSpecs={{
+                    label: t("SHOW_REPORT_BTN_LABEL"),
+                    icon: "search",
+                    actionButtonVariant: "outlined",
+                    actionButtonColor: "success",
+                    hidden: true,
+                  }}
+                  cancelButtonSpecs={{
+                    label: t("RESET_BTN_LABEL"),
+                    icon: "eraser",
+                    actionButtonVariant: "outlined",
+                    actionButtonColor: "error",
+                  }}
+                  apiActions={{
+                    deleteRecordById: async () => {
+                      return true;
+                    },
+                    saveRecord: async (params) => {
+                      if (params != undefined) {
+                        setReportParametersValues(params);
+                      } else {
+                        setReportParametersValues({});
+                      }
+                      runReport(reportInfo, params);
+                    },
+                    reloadData: async () => {},
+                    loadRecordById: async () => {},
+                  }}
+                  elements={reportParametersElements}
+                />
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+        ) : reportViewerState === "SHOWING_RESULT" ||
+          ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
+            reportViewerState === "WAITING_RESULT") &&
+            reportInfo?.reportType === "Excel") ? (
+          reportInfo?.reportType === "Excel" ? (
+            <ExcelReportViewer
+              reportData={excelReportData}
+              setReportData={setExcelReportData}
+              reloadReport={async () => {
+                runReport(reportInfo, reportParametersValues);
+              }}
+              gridLoadParameters={reportParametersElements}
+              gridLoadParametersValues={reportParametersValues}
+              setGridLoadParametersValues={setReportParametersValues}
+            />
+          ) : (
+            <iframe
+              src={blobUrl}
+              width="100%"
+              height="100%"
+              title="PDF Preview"
+              style={{ border: "1px solid #ccc", marginTop: "20px" }}
+            ></iframe>
+          )
+        ) : reportViewerState === "ERROR" ? (
+          <Box
+            sx={{
+              display: "flex",
+              flex: 1,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <FontAwesomeIcon
+              icon="circle-exclamation"
+              color="darkred"
+              style={{ marginRight: 10, marginLeft: 10 }}
+            />
+            {errorMessage}
+          </Box>
+        ) : (
+          <></>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default ReportViewer;