feature(jv-input-controls): Cascading Input Controls

packages/demo-input-controls/src/App.tsx

@@ -5,7 +5,10 @@
  */
 
 import "./App.css";
-import { renderInputControls } from "@jaspersoft/jv-input-controls";
+import {
+  InputControlsConfig,
+  renderInputControls,
+} from "@jaspersoft/jv-input-controls";
 import {
   Authentication,
   InputControlProperties,
@@ -22,18 +25,60 @@ const myAuth: Authentication = {
   locale: "en_US",
 };
 
-const reportUri = "/public/Samples/Reports/07g.RevenueDetailReport";
+const reportUri = "/public/Samples/Reports/16g.InteractiveSalesReport";
+// const reportUri = "/public/Samples/Reports/07g.RevenueDetailReport";
 const singleSelectReportUri = "/public/Samples/Reports/9g.CustomerDetailReport";
-
-const visualizeUrl =
-  "https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js";
+const globalConfigForIcs: InputControlsConfig = {
+  success: () => {
+    console.log("Input controls rendered successfully");
+  },
+  error: (error) => {
+    console.log("Error rendering input controls: ", error);
+  },
+  typeConfig: {
+    singleValueDatetime: {
+      type: "default", // even if it isn't provided, this will be the default component
+    },
+    singleValueTime: {
+      type: "default", // even if it isn't provided, this will be the default component
+    },
+    singleValueDate: {
+      type: "default", // even if it isn't provided, this will be the default component
+    },
+  },
+  params: {
+    column_boolean_1: ["false"],
+    column_string_1: [
+      "This is a predefined text different than the stored in the server",
+    ],
+    id_1: ["99"],
+    column_date_1: ["2009-03-02"],
+    column_timestamp_1: ["2014-03-02T10:00:00"],
+    column_time_1: ["14:00:00"],
+    ProductFamily: ["Drink", "Food"],
+  },
+  events: {
+    change: (ics, validationResult) => {
+      console.log("validationResult => ", validationResult);
+      console.log("ics => ", ics);
+    },
+  },
+};
 
 const errorCallback = (errorCaught: Error | VisualizeGenericError | string) => {
   console.log("check the error! ", errorCaught);
 };
 
 function App() {
-  const vContainer = useVisualize(visualizeUrl, myAuth, { errorCallback });
+  const vContainer = useVisualize(
+    {
+      server: "https://mobiledemo.jaspersoft.com/jasperserver-pro",
+      visualizePath:
+        "https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js",
+      auth: myAuth,
+    },
+    { errorCallback },
+  );
   const [controlBuffer, setControlBuffer] =
     useState<InputControlProperties[]>();
   const [vReport, setVReport] = useState<any>();
@@ -46,42 +91,7 @@ function App() {
       vContainer.v,
       reportUri,
       document.getElementById("input-controls-container") as HTMLElement,
-      {
-        success: () => {
-          console.log("Input controls rendered successfully");
-        },
-        error: (error) => {
-          console.log("Error rendering input controls: ", error);
-        },
-        typeConfig: {
-          singleValueDatetime: {
-            type: "default", // even if it isn't provided, this will be the default component
-          },
-          singleValueTime: {
-            type: "default", // even if it isn't provided, this will be the default component
-          },
-          singleValueDate: {
-            type: "default", // even if it isn't provided, this will be the default component
-          },
-        },
-        params: {
-          column_boolean_1: ["false"],
-          column_string_1: [
-            "This is a predefined text different than the stored in the server",
-          ],
-          id_1: ["99"],
-          column_date_1: ["2009-03-02"],
-          column_timestamp_1: ["2014-03-02T10:00:00"],
-          column_time_1: ["14:00:00"],
-          ProductFamily: ["Drink", "Food"],
-        },
-        events: {
-          change: (ics, validationResult) => {
-            console.log("validationResult => ", validationResult);
-            console.log("ics => ", ics);
-          },
-        },
-      },
+      globalConfigForIcs,
     );
 
     renderInputControls(

packages/demo-scheduler/src/App.tsx

@@ -22,7 +22,8 @@ import ReportPanel from "./report/ReportPanel";
 import "./App.css";
 import { Scheduler } from "./Scheduler";
 
-const visualizeUrl = `${schedulerUIConfig.server}${schedulerUIConfig.contextPath}/client/visualize.js`;
+const serverUrl = `${schedulerUIConfig.server}${schedulerUIConfig.contextPath}`;
+const visualizeUrl = `${serverUrl}/client/visualize.js`;
 
 const credentials: Authentication = {
   name: "joeuser",
@@ -44,6 +45,7 @@ function SchedulerApp() {
     loadVisualize().then((visualizeFactory: VisualizeFactory) => {
       visualizeFactory(
         {
+          server: serverUrl,
           auth: { ...credentials },
         },
         (v: VisualizeClient) => {

packages/jv-input-controls/src/InputControls.tsx

@@ -24,6 +24,7 @@ import BasePanel from "./panels/BasePanel";
 import { fillControlStructure } from "./methods";
 import { MultiSelectICType } from "./controls/MultiSelectInputControl";
 import { SingleSelectICType } from "./controls/SingleSelectInputControl";
+import { InputControlsProvider } from "./reducer/InputControlsReducer";
 
 export interface InputControlsTypeConfig {
   bool?: {
@@ -108,12 +109,17 @@ export function InputControls(props: InputControlsProps) {
     <JVStylesProvider>
       {(props.v === undefined || !embedControls) && showLoadingSpinner()}
       {props.v !== undefined && embedControls && (
-        <BasePanel
-          controls={embedControls}
-          config={props.config?.typeConfig}
+        <InputControlsProvider
+          initialState={embedControls.data}
+          overwriteParams={props.config?.params}
           events={props.config?.events}
-          params={props.config?.params}
-        ></BasePanel>
+        >
+          <BasePanel
+            server={props.v.server || ""}
+            uri={props.uri}
+            config={props.config?.typeConfig}
+          />
+        </InputControlsProvider>
       )}
     </JVStylesProvider>
   );

packages/jv-input-controls/src/controls/BaseInputControl.tsx

@@ -4,12 +4,15 @@
  * in the license file that is distributed with this file.
  */
 
-import { InputControlProperties } from "@jaspersoft/jv-tools";
+import {
+  CommonInputControlProperties,
+  InputControlProperties,
+} from "@jaspersoft/jv-tools";
 
 export const getInputControlProperties = (
   ic: InputControlProperties,
   updatedStateValue: any,
-) => {
+): CommonInputControlProperties => {
   return {
     id: ic.id,
     type: ic.type,

packages/jv-input-controls/src/controls/DatePickerInputControl.tsx

@@ -14,9 +14,11 @@ import {
   InputControlValidationRule,
 } from "@jaspersoft/jv-tools";
 import { useControlClasses } from "./hooks/useControlClasses";
-import { useErrorMsg } from "./hooks/useErrorMsg";
 import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState";
 import { getTheInitialValue } from "../utils/DefaultValueUtils";
+import { validateValueAgainstICValidationRules } from "../utils/ErrorMessageUtils";
+import { useState } from "react";
+import { getInputControlProperties } from "./BaseInputControl";
 
 export type DatePickerICType = "material";
 
@@ -32,24 +34,36 @@ export const DatePickerInputControl = (props: DateICProps) => {
     "YYYY-MM-DD",
   ).toUpperCase();
 
-  const liveState = useLiveDateFormattedState({
-    initialValue: getTheInitialValue(props.state?.value) || "",
-    format: dateFormat,
-  });
-  const controlClasses = useControlClasses([], props);
+  const [errorText, setErrorText] = useState<string>("");
   const minAndMaxSettings = getMinAndMaxSettings(props.dataType, {
     minKey: "minDate",
     maxKey: "maxDate",
   });
-  const errorText = useErrorMsg({
-    textValue: liveState.value,
-    props,
-    minAndMaxDate: minAndMaxSettings,
+  const liveState = useLiveDateFormattedState({
+    initialValue: getTheInitialValue(props.state?.value) || "",
+    format: dateFormat,
+    callback: (newValue) => {
+      const { errorMsg } = validateValueAgainstICValidationRules(
+        newValue,
+        liveState.value,
+        props,
+        "",
+        minAndMaxSettings,
+      );
+      setErrorText(errorMsg);
+      props.handleIcChange!(getInputControlProperties(props, newValue), {
+        [props.id]: errorMsg,
+      });
+    },
   });
-  const { events, ...remainingProps } = props;
+  const controlClasses = useControlClasses([], props);
   return (
     <JVDatePicker
-      {...{ ...remainingProps, ...minAndMaxSettings }}
+      id={props.id}
+      label={props.label}
+      readOnly={props.readOnly}
+      disabled={!!props.disabled}
+      {...{ ...minAndMaxSettings }}
       onChange={liveState.onChange}
       value={liveState.value}
       className={`${controlClasses.join(" ")} ${props.className || ""}`}

packages/jv-input-controls/src/controls/DatePickerTextFieldInputControl.tsx

@@ -8,9 +8,11 @@ import { JVDateTimeTextField } from "@jaspersoft/jv-ui-components";
 import { getMinAndMaxSettings } from "../utils/DateInputControlUtils";
 import { InputControlProperties } from "@jaspersoft/jv-tools";
 import { useControlClasses } from "./hooks/useControlClasses";
-import { useErrorMsg } from "./hooks/useErrorMsg";
 import { useLiveState } from "./hooks/useLiveState";
 import { getTheInitialValue } from "../utils/DefaultValueUtils";
+import { validateValueAgainstICValidationRules } from "../utils/ErrorMessageUtils";
+import { getInputControlProperties } from "./BaseInputControl";
+import { useState } from "react";
 
 export type DateICType = "default";
 
@@ -23,37 +25,47 @@ export interface DateTextFieldICProps extends InputControlProperties {
 export const DatePickerTextFieldInputControl = (
   props: DateTextFieldICProps,
 ) => {
-  const {
-    readOnly,
-    mandatory,
-    visible,
-    dataType,
-    validationRules,
-    events,
-    ...remainingProps
-  } = props;
-  const liveState = useLiveState(getTheInitialValue(props.state?.value) || "");
-  const controlClasses = useControlClasses([], props);
-  const inputProps: any = {};
-  if (readOnly) {
-    inputProps.readOnly = true;
-  }
+  const { readOnly, dataType } = props;
   const minAndMaxSettings: { min: string; max: string } = getMinAndMaxSettings(
     dataType,
     {
       minKey: "min",
       maxKey: "max",
     },
   );
-  const errorText = useErrorMsg({
-    textValue: liveState.value,
-    props,
-    minAndMaxDate: minAndMaxSettings,
-  });
-  const theInputProps = { ...inputProps, ...liveState };
+  const [errorText, setErrorText] = useState<string>("");
+  const liveState = useLiveState(
+    getTheInitialValue(props.state?.value) || "",
+    (newValue: string) => {
+      const { errorMsg } = validateValueAgainstICValidationRules(
+        newValue,
+        liveState.value,
+        props,
+        "",
+        minAndMaxSettings,
+      );
+      setErrorText(errorMsg);
+      props.handleIcChange!(getInputControlProperties(props, newValue), {
+        [props.id]: errorMsg,
+      });
+    },
+  );
+  const controlClasses = useControlClasses([], props);
+  const inputProps: any = {};
+  if (readOnly) {
+    inputProps.readOnly = true;
+  }
+  const theInputProps = {
+    ...inputProps,
+    value: liveState.value,
+    onChange: liveState.onChange,
+  };
+
   return (
     <JVDateTimeTextField
-      {...remainingProps}
+      id={props.id}
+      label={props.label}
+      disabled={!!props.disabled}
       type="date"
       variant={props.variant || "outlined"}
       className={`${props.className || ""}`}