@asaleh37/ui-base 26.2.16 → 27.5.26

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

@@ -1,71 +1,71 @@
-import { useEffect, useState } from "react";
-import TemplateGrid from "../DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-import { FormElementProps } from "../DataEntryTemplates/DataEntryTypes";
-
-type ExcelReportViewerProps = {
-  reportData: Array<any>;
-  setReportData: (data) => void;
-  reloadReport: () => void;
-  gridLoadParameters?: Array<FormElementProps>;
-  gridLoadParametersValues?: { [key: string]: any };
-  setGridLoadParametersValues?: any;
-};
-
-const getGridColumnsFromRecord = (data: Array<any>) => {
-  if (data.length === 0) {
-    return [];
-  }
-  const formElements: Array<FormElementProps> = [];
-  for (const key of Object.keys(data[0])) {
-    const formElement: FormElementProps = {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: key,
-        fieldName: key,
-        fieldType: "text",
-      },
-    };
-    formElements.push(formElement);
-  }  
-  return formElements;
-};
-
-const ExcelReportViewer: React.FC<ExcelReportViewerProps> = (props) => {
-  const [data, setData] = useState([]);
-  useEffect(() => {
-    const newData = props.reportData.map((record, index) => {
-      return { ...record, report_record_data_key: index };
-    });
-    setData(newData);
-  }, [props.reportData]);
-  return (
-    <TemplateGrid
-      data={data}
-      disableDefaultAction={true}
-      setData={props.setReportData}
-      formElements={getGridColumnsFromRecord(props.reportData)}
-      gridLoadParameters={props.gridLoadParameters}
-      gridLoadParametersValues={props.gridLoadParametersValues}
-      setGridLoadParametersValues={props.setGridLoadParametersValues}
-      editMode={{ editMode: "none" }}
-      girdIcon={"file-excel"}
-      gridTitle="Report"
-      autoLoad={true}
-      keyColumnName={"report_record_data_key"}
-      hideInfoBar={true}
-      apiActions={{
-        deleteRecordById: async () => {
-          return true;
-        },
-        loadRecordById: async () => {},
-        reloadData: async () => {
-          props.reloadReport();
-        },
-        saveRecord: async () => {},
-      }}
-    />
-  );
-};
-
-export default ExcelReportViewer;
+import { useEffect, useState } from "react";
+import TemplateGrid from "../DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { FormElementProps } from "../DataEntryTemplates/DataEntryTypes";
+
+type ExcelReportViewerProps = {
+  reportData: Array<any>;
+  setReportData: (data) => void;
+  reloadReport: () => void;
+  gridLoadParameters?: Array<FormElementProps>;
+  gridLoadParametersValues?: { [key: string]: any };
+  setGridLoadParametersValues?: any;
+};
+
+const getGridColumnsFromRecord = (data: Array<any>) => {
+  if (data.length === 0) {
+    return [];
+  }
+  const formElements: Array<FormElementProps> = [];
+  for (const key of Object.keys(data[0])) {
+    const formElement: FormElementProps = {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: key,
+        fieldName: key,
+        fieldType: "text",
+      },
+    };
+    formElements.push(formElement);
+  }  
+  return formElements;
+};
+
+const ExcelReportViewer: React.FC<ExcelReportViewerProps> = (props) => {
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    const newData = props.reportData.map((record, index) => {
+      return { ...record, report_record_data_key: index };
+    });
+    setData(newData);
+  }, [props.reportData]);
+  return (
+    <TemplateGrid
+      data={data}
+      disableDefaultAction={true}
+      setData={props.setReportData}
+      formElements={getGridColumnsFromRecord(props.reportData)}
+      gridLoadParameters={props.gridLoadParameters}
+      gridLoadParametersValues={props.gridLoadParametersValues}
+      setGridLoadParametersValues={props.setGridLoadParametersValues}
+      editMode={{ editMode: "none" }}
+      girdIcon={"file-excel"}
+      gridTitle="Report"
+      autoLoad={true}
+      keyColumnName={"report_record_data_key"}
+      hideInfoBar={true}
+      apiActions={{
+        deleteRecordById: async () => {
+          return true;
+        },
+        loadRecordById: async () => {},
+        reloadData: async () => {
+          props.reloadReport();
+        },
+        saveRecord: async () => {},
+      }}
+    />
+  );
+};
+
+export default ExcelReportViewer;

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

@@ -1,261 +1,261 @@
-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>
-      {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>
-      ) : (
-        <></>
-      )}
-    </>
-  );
-};
-
-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>
+      {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>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default ReportViewer;