@asaleh37/ui-base 1.2.3 → 1.2.5

package/src/components/administration/dev/ReportGrid.tsx

@@ -0,0 +1,504 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { useApiActions, useWindow } from "../../../hooks";
+import {
+  FormActionProps,
+  FormElementProps,
+} from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { UseFormReturn } from "react-hook-form";
+import { useSelector } from "react-redux";
+import { toast } from "react-toastify";
+import ReportParametersForm from "./ReportParametersForm";
+import ReportParameterGrid from "./ReportParameterGrid";
+import ReportViewer from "../../templates/report/ReportViewer";
+
+type ValidationCritria = {
+  isVisible: boolean;
+  isMandatory: boolean;
+};
+
+export type ReportType = "Jasper" | "Excel" | "Blueprint";
+
+type ReportValidationOptions = {
+  useSysDatasource: ValidationCritria;
+  datasourceConId: ValidationCritria;
+  reportBluePrintId: ValidationCritria;
+  reportExcelDataQueryId: ValidationCritria;
+  reportJasperName: ValidationCritria;
+  reportJasperPath: ValidationCritria;
+};
+
+type validationObjectType = {
+  [key in ReportType]: ReportValidationOptions;
+};
+
+const validationObject: validationObjectType = {
+  Blueprint: {
+    useSysDatasource: { isMandatory: false, isVisible: false },
+    datasourceConId: { isMandatory: false, isVisible: false },
+    reportBluePrintId: { isMandatory: true, isVisible: true },
+    reportExcelDataQueryId: { isMandatory: false, isVisible: false },
+    reportJasperName: { isMandatory: false, isVisible: false },
+    reportJasperPath: { isMandatory: false, isVisible: false },
+  },
+  Jasper: {
+    useSysDatasource: { isMandatory: false, isVisible: true },
+    datasourceConId: { isMandatory: false, isVisible: true },
+    reportBluePrintId: { isMandatory: false, isVisible: false },
+    reportExcelDataQueryId: { isMandatory: false, isVisible: false },
+    reportJasperName: { isMandatory: true, isVisible: true },
+    reportJasperPath: { isMandatory: true, isVisible: true },
+  },
+  Excel: {
+    useSysDatasource: { isMandatory: false, isVisible: false },
+    datasourceConId: { isMandatory: false, isVisible: false },
+    reportBluePrintId: { isMandatory: false, isVisible: false },
+    reportExcelDataQueryId: { isMandatory: true, isVisible: true },
+    reportJasperName: { isMandatory: false, isVisible: false },
+    reportJasperPath: { isMandatory: false, isVisible: false },
+  },
+};
+
+const adjustFormAccordingToReportType = (
+  value: any,
+  formActions: FormActionProps,
+  formManager: UseFormReturn
+) => {
+  if (value && validationObject[value]) {
+    const validationObjects: ReportValidationOptions = validationObject[value];
+    const fields = Object.keys(validationObjects);
+    for (const field of fields) {
+      const validationCritria: ValidationCritria = validationObjects[field];
+      if (validationCritria.isVisible) {
+        formActions.showField(field);
+      } else {
+        formActions.hideField(field);
+        formManager.setValue(field, null);
+      }
+    }
+  } else {
+    formActions.hideField("useSysDatasource");
+    formActions.hideField("datasourceConId");
+    formActions.hideField("reportBluePrintId");
+    formActions.hideField("reportExcelDataQueryId");
+    formActions.hideField("reportJasperName");
+    formActions.hideField("reportJasperPath");
+    formManager.setValue("useSysDatasource", null);
+    formManager.setValue("datasourceConId", null);
+    formManager.setValue("reportBluePrintId", null);
+    formManager.setValue("reportExcelDataQueryId", null);
+    formManager.setValue("reportJasperName", null);
+    formManager.setValue("reportJasperPath", null);
+  }
+};
+
+const ReportGrid: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedRecord, setSelectedRecord] = useState(null);
+  const {
+    Window: ReporTrialWindow,
+    setWindowState: setReportTrialWindowState,
+  } = useWindow({
+    windowTitle: "Report View",
+    windowIcon: "eye",
+    width: "80%",
+  });
+  const {
+    Window: ReportParameterWindow,
+    setWindowState: setReportParameterWindowState,
+  } = useWindow({
+    windowTitle: "Report Parameters",
+    windowIcon: "p",
+    width: "80%",
+  });
+  const [data, setData] = useState([]);
+  const SystemDataSources = useSelector(
+    (state: any) => state.commonStores.stores.SystemDataSources.data
+  );
+  const SystemDataQueries = useSelector(
+    (state: any) => state.commonStores.stores.SystemDataQueries.data
+  );
+  const SystemBluePrints = useSelector(
+    (state: any) => state.commonStores.stores.SystemBluePrints.data
+  );
+  const apiActions = useApiActions({
+    findAll: "api/v1/dev/report/all",
+    deleteById: "api/v1/dev/report",
+    save: "api/v1/dev/report",
+    findById: "api/v1/dev/report",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "id",
+        fieldName: "id",
+        fieldType: "number",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createTime",
+        fieldName: "createTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createdBy",
+        fieldName: "createdBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateBy",
+        fieldName: "lastUpdateBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateTime",
+        fieldName: "lastUpdateTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_TYPE",
+        fieldName: "reportType",
+        options: [
+          { value: "Excel" },
+          { value: "Jasper" },
+          { value: "Blueprint" },
+        ],
+        optionDisplayField: "value",
+        optionValueField: "value",
+        required: true,
+        fieldType: "combobox",
+        formProps: {
+          onValueChangeCallBack(
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {
+            adjustFormAccordingToReportType(value, formActions, formManager);
+          },
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_CODE",
+        fieldName: "reportCode",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_NAME",
+        fieldName: "reportName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_CATEGORY",
+        fieldName: "reportCategory",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Authority Code",
+        fieldName: "reportAuthorityCode",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_EXPORT_NAME",
+        fieldName: "reportExportName",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_USE_SYS_DATASOURCE",
+        fieldName: "useSysDatasource",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        formProps: {
+          onValueChangeCallBack(
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {
+            if (value) {
+              formActions.hideField("datasourceConId");
+              formManager.setValue("datasourceConId", null);
+            } else {
+              formActions.showField("datasourceConId");
+            }
+          },
+        },
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_DATASOURCE_CON_ID",
+        fieldName: "datasourceConId",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "combobox",
+        options: SystemDataSources,
+        optionValueField: "id",
+        optionDisplayField: "connectionName",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_BLUE_PRINT_ID",
+        fieldName: "reportBluePrintId",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "combobox",
+        options: SystemBluePrints,
+        optionDisplayField: "bluePrintCode",
+        optionValueField: "id",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_EXCEL_DATA_QUERY_ID",
+        fieldName: "reportExcelDataQueryId",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "combobox",
+        options: SystemDataQueries,
+        optionValueField: "id",
+        optionDisplayField: "queryName",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_JASPER_NAME",
+        fieldName: "reportJasperName",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_REPORT_JASPER_PATH",
+        fieldName: "reportJasperPath",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Active",
+        fieldName: "isActive",
+        fieldType: "checkbox",
+      },
+    },
+  ];
+
+  return (
+    <>
+      <ReporTrialWindow>
+        <ReportViewer
+          reportCode={selectedRecord?.reportCode}
+          resultMode="App"
+        />
+      </ReporTrialWindow>
+      <ReportParameterWindow>
+        <ReportParameterGrid selectedRecord={selectedRecord} />
+      </ReportParameterWindow>
+      <TemplateGrid
+        apiActions={apiActions}
+        data={data}
+        setData={setData}
+        editMode={{
+          editMode: "modal",
+          specs: {
+            modalTitle: "Report",
+            modalIcon: "file",
+            modalWidth: 300,
+          },
+        }}
+        rowActions={[
+          {
+            icon: "p",
+            label: "Report Parameters",
+            isActionVisibleForRecord: (record) => {
+              return record.reportType === "Jasper";
+            },
+            actionFn: async (data, recordIdsToProcessActionOn) => {
+              setSelectedRecord(data);
+              setReportParameterWindowState(true);
+            },
+          },
+          {
+            icon: "eye",
+            label: "View Report",
+            actionFn: async (data, recordIdsToProcessActionOn) => {
+              setSelectedRecord(data);
+              setReportTrialWindowState(true);
+            },
+          },
+        ]}
+        formLoadCallBk={(
+          formActions: FormActionProps,
+          formManager: UseFormReturn,
+          record: any
+        ) => {
+          adjustFormAccordingToReportType(
+            record.reportType,
+            formActions,
+            formManager
+          );
+          if (record?.useSysDatasource === true) {
+            formActions.hideField("datasourceConId");
+          }
+        }}
+        formElements={formElements}
+        keyColumnName={"id"}
+        gridTitle={t("REPORT_PLURAL")}
+        girdIcon="table-cells"
+        editAction={{
+          isEnabled: true,
+          authority: "REPORT_EDIT",
+          preActionValidation: (record) => {
+            if (
+              record?.reportType === "Jasper" &&
+              record?.useSysDatasource === false &&
+              !record?.datasourceConId
+            ) {
+              toast.error("You must choose the datasource");
+              return false;
+            }
+            if (record?.reportType === "Jasper" && !record?.reportJasperName) {
+              toast.error("You must enter the jasper report name");
+              return false;
+            }
+            if (record?.reportType === "Jasper" && !record?.reportJasperPath) {
+              toast.error("You must enter the jasper report path");
+              return false;
+            }
+            if (
+              record?.reportType === "Blueprint" &&
+              !record?.reportBluePrintId
+            ) {
+              toast.error("You must choose the report blueprint");
+              return false;
+            }
+            if (
+              record?.reportType === "Excel" &&
+              !record?.reportExcelDataQueryId
+            ) {
+              toast.error("You must choose the report query");
+              return false;
+            }
+            return true;
+          },
+        }}
+        deleteAction={{ isEnabled: true, authority: "REPORT_DELETE" }}
+      />
+    </>
+  );
+};
+
+export default ReportGrid;

package/src/components/administration/dev/ReportParameterGrid.tsx

@@ -0,0 +1,186 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { useApiActions } from "../../../hooks";
+import { useSelector } from "react-redux";
+
+type ReportParameterGridProps = {
+  selectedRecord: any;
+};
+
+const ReportParameterGrid: React.FC<ReportParameterGridProps> = (props) => {
+  const { t } = useTranslation();
+  const SystemEntityParameters = useSelector(
+    (state: any) => state.commonStores.stores.SystemEntityParameters.data
+  );
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/dev/reportparameter/all",
+    deleteById: "api/v1/dev/reportparameter",
+    save: "api/v1/dev/reportparameter",
+    findById: "api/v1/dev/reportparameter",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "id",
+        fieldName: "id",
+        fieldType: "number",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createTime",
+        fieldName: "createTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createdBy",
+        fieldName: "createdBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateBy",
+        fieldName: "lastUpdateBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateTime",
+        fieldName: "lastUpdateTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_PARAMETER_ENTITY_PARAMETER_ID",
+        fieldName: "entityParameterId",
+        required: true,
+        fieldType: "combobox",
+        options: SystemEntityParameters,
+        optionValueField: "id",
+        optionDisplayField: "parameterCode",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_PARAMETER_DEFAULT_VALUE",
+        fieldName: "defaultValue",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_PARAMETER_ENABLED",
+        fieldName: "enabled",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_PARAMETER_HIDDEN",
+        fieldName: "hidden",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_PARAMETER_MANDATORY",
+        fieldName: "mandatory",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "REPORT_PARAMETER_REPORT_ID",
+        fieldName: "reportId",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "number",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      hideInfoBar={true}
+      setData={setData}
+      gridLoadParametersValues={{ reportId: props.selectedRecord.id }}
+      editMode={{ editMode: "row" }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle={t("REPORT_PARAMETER_PLURAL")}
+      girdIcon="p"
+      editAction={{
+        isEnabled: true,
+        authority: "REPORT_PARAMETER_EDIT",
+        preActionValidation: async (data) => {
+          data.reportId = props.selectedRecord.id;
+          return true;
+        },
+      }}
+      deleteAction={{ isEnabled: true, authority: "REPORT_PARAMETER_DELETE" }}
+    />
+  );
+};
+
+export default ReportParameterGrid;