@asaleh37/ui-base 25.8.26 → 25.8.31-1

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

@@ -1,20 +1,10 @@
 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 { useAxios } from "../../../hooks";
+
+import { Box, IconButton } from "@mui/material";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ExcelReportViewer from "./ExcelReportViewer";
-import { GridExpandMoreIcon } from "@mui/x-data-grid-premium";
+import { useParameterPanel } from "../../../hooks/useParameterPanel";
 
 type ReportViewerState =
   | "ERROR"
@@ -32,28 +22,6 @@ type ReportViewerProps = {
   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);
@@ -64,38 +32,15 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
   const { handleGetRequest, handlePostRequest, HandleDownloadHTTPPostPDF } =
     useAxios();
   const [reportInfo, setReportInfo] = useState<any>(null);
-  const [reportParametersValues, setReportParametersValues] = useState<any>({
-    ...props?.reportParametersValues,
+  const {
+    ParameterPanel,
+    parametersValues,
+    panelElements,
+    setParametersValues,
+  } = useParameterPanel({
+    parameters: reportInfo?.reportParameters || [],
+    initialParameterValues: { ...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({
@@ -104,14 +49,11 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
       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);
+          runReport(parametersValues);
           setReportViewerState("WAITING_RESULT");
         } else {
           setReportViewerState("WAITING_PARAMETER_INPUT");
@@ -126,9 +68,9 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
     });
   };
 
-  const runReport = async (reportInfoProp, params) => {
+  const runReport = async (params) => {
     setReportViewerState("WAITING_RESULT");
-    if (reportInfoProp?.reportType === "Excel") {
+    if (reportInfo?.reportType === "Excel") {
       await handlePostRequest({
         endPointURI: "api/v1/public/report/run",
         showMask: true,
@@ -143,7 +85,7 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
           setExcelReportData(response.data);
         },
       });
-    } else if (reportInfoProp?.reportType) {
+    } else if (reportInfo?.reportType) {
       await HandleDownloadHTTPPostPDF({
         endPointURI: "api/v1/public/report/run",
         showMask: true,
@@ -186,7 +128,7 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
             // Clean up
             document.body.removeChild(link);
             window.URL.revokeObjectURL(url);
-          }          
+          }
         },
         failureCallBkFn: (response) => {
           setErrorMessage(
@@ -235,14 +177,9 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
             <>
               {props?.byPassParameterEntry === true ? (
                 <></>
-              ) : reportParametersElements.length > 0 ? (
+              ) : reportInfo?.reportParameters.length > 0 ? (
                 <IconButton
                   onClick={() => {
-                    setReportParametersElements(
-                      getFormElementsFromReportParameters(
-                        reportInfo.reportParameters
-                      )
-                    );
                     setReportViewerState("WAITING_PARAMETER_INPUT");
                   }}
                 >
@@ -255,7 +192,7 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
                 <FontAwesomeIcon
                   icon="refresh"
                   onClick={() => {
-                    runReport(reportInfo, reportParametersValues);
+                    runReport(parametersValues);
                   }}
                 />
               </IconButton>
@@ -279,58 +216,7 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
       >
         {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>
+          <ParameterPanel searchBtnClickCallBk={runReport} />
         ) : reportViewerState === "SHOWING_RESULT" ||
           ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
             reportViewerState === "WAITING_RESULT") &&
@@ -340,11 +226,11 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
               reportData={excelReportData}
               setReportData={setExcelReportData}
               reloadReport={async () => {
-                runReport(reportInfo, reportParametersValues);
+                runReport(parametersValues);
               }}
-              gridLoadParameters={reportParametersElements}
-              gridLoadParametersValues={reportParametersValues}
-              setGridLoadParametersValues={setReportParametersValues}
+              gridLoadParameters={panelElements}
+              gridLoadParametersValues={parametersValues}
+              setGridLoadParametersValues={setParametersValues}
             />
           ) : (
             <iframe

package/src/components/templates/visuals/DashboardViewer.tsx

@@ -4,6 +4,7 @@ import { useAxios } from "../../../hooks";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import WidgetViewer, { Widget } from "./WidgetViewer";
 import { useNavigate } from "react-router-dom";
+import { useParameterPanel } from "../../../hooks/useParameterPanel";
 
 type DashboardViewerProps = {
   dashboardCode: string;
@@ -43,9 +44,40 @@ const DashboardViewer: React.FC<DashboardViewerProps> = (props) => {
     dashboardParameters: [],
     widgets: [],
   });
-  const [dashboardParameterValues, setDashboardParameterValues] = useState<{
-    [key: string]: any;
-  }>(props?.parameters || {});
+  const { ParameterPanel, parametersValues } = useParameterPanel({
+    parameters: dashboardInfo?.dashboardParameters || [],
+    initialParameterValues: {},
+  });
+  const [loadCounter, setLoadCounter] = useState(0);
+  const [loadDashboard, setLoadDashboard] = useState<boolean>(false);
+  useEffect(() => {
+    if (
+      dashboardInfo.dashboardCode != undefined &&
+      dashboardInfo.dashboardCode != null &&
+      dashboardInfo.dashboardCode != ""
+    ) {
+      setLoadDashboard(false);
+      let shouldLoadWidgets = true;
+      if (dashboardInfo?.dashboardParameters.length > 0) {
+        for (const parameter of dashboardInfo?.dashboardParameters) {
+          if (parameter?.mandatory === true) {
+            if (
+              parametersValues[parameter.parameterCode] === undefined ||
+              parametersValues[parameter.parameterCode] === null ||
+              parametersValues[parameter.parameterCode] === ""
+            ) {
+              shouldLoadWidgets = false;
+              break;
+            }
+          }
+        }
+      }
+      if (shouldLoadWidgets) {
+        setLoadDashboard(shouldLoadWidgets);
+      }
+      setLoadCounter(loadCounter + 1);
+    }
+  }, [dashboardInfo?.dashboardParameters, parametersValues]);
   const navigate = useNavigate();
   const { handleGetRequest, handlePostRequest } = useAxios();
   const loadDashboardInfo = async () => {
@@ -96,11 +128,19 @@ const DashboardViewer: React.FC<DashboardViewerProps> = (props) => {
             <Box>{dashboardInfo?.dashboardTitle}</Box>
             <Box sx={{ flex: 1 }}></Box>
           </Box>
+          {dashboardInfo?.dashboardParameters.length > 0 ? (
+            <ParameterPanel searchBtnClickCallBk={async (params) => {
+              setLoadCounter(loadCounter + 1);
+            }} />
+          ) : (
+            <></>
+          )}
           <Grid2
             container
             spacing={1}
             sx={{
-              flexGrow: 1,
+              // flexGrow: 1,
+              height: "fit-content",
               overflowY: "auto",
               padding: 1,
             }}
@@ -121,7 +161,11 @@ const DashboardViewer: React.FC<DashboardViewerProps> = (props) => {
                   }}
                   size={{ md: widget?.width, sm: 12 }}
                 >
-                  <WidgetViewer {...widget} />
+                  <WidgetViewer
+                    {...widget}
+                    parameterValues={parametersValues}
+                    loadWidget={loadDashboard}
+                  />
                 </Grid2>
               );
             })}

package/src/components/templates/visuals/WidgetViewer.tsx

@@ -14,6 +14,8 @@ import TemplateGauge from "./charts/TemplateGauge";
 import TemplateLineProgress from "./charts/TemplateLineProgress";
 
 export type Widget = {
+  loadWidget: boolean;
+  loadCounter: number;
   widgetName: string;
   widgetDescription: string;
   title: string;
@@ -51,26 +53,32 @@ const WidgetViewer: React.FC<Widget> = (props) => {
       },
       failureCallBkFn: () => {
         setWidgetLoading(false);
-        setData(null);
+        setData([]);
       },
     });
   };
   useEffect(() => {
-    getWidgetData();
-  }, [props.parameterValues]);
+    if (props.loadWidget) {
+      getWidgetData();
+    } else {
+      setWidgetLoading(false);
+    }
+  }, [props.loadWidget, props.loadCounter]);
 
   let total = 0;
   if (data.length == 1) {
     total = 100;
-  }
-  if (
-    props.widgetType === "CircularProgress" ||
-    props.widgetType === "LinearProgress"
-  ) {
-    for (const record of data) {
-      total += record[props.verticalAxisField];
+  } else {
+    if (
+      props.widgetType === "CircularProgress" ||
+      props.widgetType === "LinearProgress"
+    ) {
+      for (const record of data) {
+        total += record[props.verticalAxisField];
+      }
     }
   }
+
   return (
     <>
       {props.widgetType === "LineChart" ||
@@ -90,10 +98,12 @@ const WidgetViewer: React.FC<Widget> = (props) => {
       <Box
         sx={{
           flex: 1,
+          padding: 1,
+          height: "90%",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          width: "100%",
+          width: "90%",
         }}
       >
         {isWidgetLoading ? (
@@ -130,7 +140,7 @@ const WidgetViewer: React.FC<Widget> = (props) => {
             widgetTitle={props.title}
             labelField={props.horizontalAxisField}
             valueField={props.verticalAxisField}
-            widgetType="Line"
+            widgetType="Pie"
           />
         ) : (
           <Grid2
@@ -155,8 +165,8 @@ const WidgetViewer: React.FC<Widget> = (props) => {
                       key={index}
                       widgetTitle={""}
                       record={record}
-                      labelField={props.verticalAxisField}
-                      valueField={props.horizontalAxisField}
+                      labelField={props.horizontalAxisField}
+                      valueField={props.verticalAxisField}
                     />
                   </Grid2>
                 );

package/src/examples/ExampleGrid.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { FormElementProps, TemplateGrid } from "../components";
+import { useApiActions } from "../hooks";
+
+const ExampleGrid: React.FC = () => {
+  const [data, setData] = useState([]);
+  const options = [
+    { value: 1, display: "Male" },
+    { value: 2, display: "Female" },
+  ];
+  const apiActions = useApiActions({
+    findAll: undefined,
+    commonStoreKey: undefined,
+    deleteById: undefined,
+    deleteByIdParamName: undefined,
+    findById: undefined,
+    findByIdParamName: undefined,
+    save: undefined,
+    setData: setData,
+  });
+  const elements: FormElementProps[] = [
+    {
+      mode: "props",
+      props: { fieldLabel: "ID", fieldName: "id", fieldType: "number" },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Gender",
+        fieldName: "gender",
+        fieldType: "combobox",
+        options,
+        optionValueField: "value",
+        optionDisplayField: "display",
+        formProps: {
+          onValueChangeCallBack(
+            formValues,
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {
+            if (value == 1) {
+              formActions.disableField("bithdate");
+              formManager.setValue("bithdate", new Date());
+              formManager.setValue("active", true);
+              formManager.setValue("type", value);
+            } else {
+              formActions.enableField("bithdate");
+              formManager.setValue("bithdate", null);
+              formManager.setValue("active", false);
+            }
+            formManager.setValue("type", value);
+          },
+        },
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Gender",
+        fieldName: "type",
+        fieldType: "combobox",
+        options,
+        optionValueField: "value",
+        optionDisplayField: "display",
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Name",
+        fieldName: "name",
+        required: true,
+        fieldType: "text",
+        gridProps: { hidden: false },
+        formProps: {
+          onValueChangeCallBack(
+            formValues,
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {},
+        },
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Birthdate",
+        fieldName: "bithdate",
+        required: true,
+        fieldType: "date",
+        gridProps: { hidden: false },
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Active",
+        fieldName: "active",
+        required: true,
+        fieldType: "checkbox",
+        gridProps: { hidden: false },
+      },
+      type: "field",
+    },
+  ];
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{
+        editMode: "modal",
+        specs: {
+          modalTitle: "Example Modal Form",
+          modalIcon: "user",
+        },
+      }}
+      formElements={elements}
+      girdIcon={"user"}
+      gridTitle="Example Grid "
+    />
+  );
+};
+
+export default ExampleGrid;