@asaleh37/ui-base 25.12.122 → 25.12.123

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

@@ -1,272 +1,272 @@
-import { useEffect, useState } from "react";
-import { useAxios } from "../../../hooks";
-
-import { Box, IconButton } from "@mui/material";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import ExcelReportViewer from "./ExcelReportViewer";
-import { useParameterPanel } from "../../../hooks/useParameterPanel";
-
-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";
-};
-
-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 {
-    ParameterPanel,
-    parametersValues,
-    panelElements,
-    setParametersValues,
-  } = useParameterPanel({
-    parameters: reportInfo?.reportParameters || [],
-    initialParameterValues: { ...props?.reportParametersValues },
-  });
-  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);
-      },
-      failureCallBkFn: (response) => {
-        setErrorMessage(
-          "Failed loading report metadata ... contact your administrator"
-        );
-        setReportViewerState("ERROR");
-      },
-    });
-  };
-
-  useEffect(() => {
-    if (reportInfo) {
-      if (
-        props?.byPassParameterEntry === true ||
-        reportInfo.reportParameters.length == 0
-      ) {
-        runReport(parametersValues);
-        setReportViewerState("WAITING_RESULT");
-      } else {
-        setReportViewerState("WAITING_PARAMETER_INPUT");
-      }
-    }
-  }, [reportInfo]);
-
-  const runReport = async (params) => {
-    setReportViewerState("WAITING_RESULT");
-    if (reportInfo?.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 (reportInfo?.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"];
-          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 ? (
-                <></>
-              ) : reportInfo?.reportParameters.length > 0 ? (
-                <IconButton
-                  onClick={() => {
-                    setReportViewerState("WAITING_PARAMETER_INPUT");
-                  }}
-                >
-                  <FontAwesomeIcon icon="filter" />
-                </IconButton>
-              ) : (
-                <></>
-              )}
-              <IconButton>
-                <FontAwesomeIcon
-                  icon="refresh"
-                  onClick={() => {
-                    runReport(parametersValues);
-                  }}
-                />
-              </IconButton>
-            </>
-          ) : (
-            <></>
-          )
-        ) : (
-          <></>
-        )}
-      </Box>
-      <Box
-        sx={{
-          flexGrow: 1,
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "flex-start",
-        }}
-      >
-        {reportViewerState === "WAITING_PARAMETER_INPUT" &&
-        reportInfo?.reportType != "Excel" ? (
-          <ParameterPanel searchBtnClickCallBk={runReport} />
-        ) : reportViewerState === "SHOWING_RESULT" ||
-          ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
-            reportViewerState === "WAITING_RESULT") &&
-            reportInfo?.reportType === "Excel") ? (
-          reportInfo?.reportType === "Excel" ? (
-            <ExcelReportViewer
-              reportData={excelReportData}
-              setReportData={setExcelReportData}
-              reloadReport={async () => {
-                runReport(parametersValues);
-              }}
-              gridLoadParameters={panelElements}
-              gridLoadParametersValues={parametersValues}
-              setGridLoadParametersValues={setParametersValues}
-            />
-          ) : (
-            <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 } from "../../../hooks";
+
+import { Box, IconButton } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ExcelReportViewer from "./ExcelReportViewer";
+import { useParameterPanel } from "../../../hooks/useParameterPanel";
+
+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";
+};
+
+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 {
+    ParameterPanel,
+    parametersValues,
+    panelElements,
+    setParametersValues,
+  } = useParameterPanel({
+    parameters: reportInfo?.reportParameters || [],
+    initialParameterValues: { ...props?.reportParametersValues },
+  });
+  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);
+      },
+      failureCallBkFn: (response) => {
+        setErrorMessage(
+          "Failed loading report metadata ... contact your administrator"
+        );
+        setReportViewerState("ERROR");
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (reportInfo) {
+      if (
+        props?.byPassParameterEntry === true ||
+        reportInfo.reportParameters.length == 0
+      ) {
+        runReport(parametersValues);
+        setReportViewerState("WAITING_RESULT");
+      } else {
+        setReportViewerState("WAITING_PARAMETER_INPUT");
+      }
+    }
+  }, [reportInfo]);
+
+  const runReport = async (params) => {
+    setReportViewerState("WAITING_RESULT");
+    if (reportInfo?.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 (reportInfo?.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"];
+          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 ? (
+                <></>
+              ) : reportInfo?.reportParameters.length > 0 ? (
+                <IconButton
+                  onClick={() => {
+                    setReportViewerState("WAITING_PARAMETER_INPUT");
+                  }}
+                >
+                  <FontAwesomeIcon icon="filter" />
+                </IconButton>
+              ) : (
+                <></>
+              )}
+              <IconButton>
+                <FontAwesomeIcon
+                  icon="refresh"
+                  onClick={() => {
+                    runReport(parametersValues);
+                  }}
+                />
+              </IconButton>
+            </>
+          ) : (
+            <></>
+          )
+        ) : (
+          <></>
+        )}
+      </Box>
+      <Box
+        sx={{
+          flexGrow: 1,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+      >
+        {reportViewerState === "WAITING_PARAMETER_INPUT" &&
+        reportInfo?.reportType != "Excel" ? (
+          <ParameterPanel searchBtnClickCallBk={runReport} />
+        ) : reportViewerState === "SHOWING_RESULT" ||
+          ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
+            reportViewerState === "WAITING_RESULT") &&
+            reportInfo?.reportType === "Excel") ? (
+          reportInfo?.reportType === "Excel" ? (
+            <ExcelReportViewer
+              reportData={excelReportData}
+              setReportData={setExcelReportData}
+              reloadReport={async () => {
+                runReport(parametersValues);
+              }}
+              gridLoadParameters={panelElements}
+              gridLoadParametersValues={parametersValues}
+              setGridLoadParametersValues={setParametersValues}
+            />
+          ) : (
+            <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;