Added query variables on Query Dialogue, added parameters on Run a Da…

…ta Query of Event Handlers.
lowcoder-org · FalkWolsky · Jan 29, 2025 · Jan 22, 2025 · Jan 24, 2025 · Jan 25, 2025
commit 338a8faf70f11d373787acb710588976e27ae262
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -7,10 +7,13 @@ import { BranchDiv, Dropdown } from "lowcoder-design";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { trans } from "i18n";
+import {keyValueListControl, keyValueListToSearchStr, withDefault} from "lowcoder-sdk";
+import {KeyValue} from "@lowcoder-ee/types/common";
 
 const ExecuteQueryTmpAction = (function () {
   const childrenMap = {
     queryName: SimpleNameComp,
+    query: withDefault(keyValueListControl(false, [], "string"), [{ key: "", value: "" }])
   };
   return new MultiCompBuilder(childrenMap, () => {
     return () => Promise.resolve(undefined as unknown);
@@ -22,6 +25,8 @@ const ExecuteQueryTmpAction = (function () {
 export class ExecuteQueryAction extends ExecuteQueryTmpAction {
   override getView() {
     const queryName = this.children.queryName.getView();
+    const queryParams = keyValueListToSearchStr(Array.isArray(this?.children?.query) ? (this.children.query as unknown as any[]).map((i: any) => i.getView() as KeyValue) : []);
+    console.log(queryParams, queryName);
     if (!queryName) {
       return () => Promise.resolve();
     }
@@ -80,21 +85,29 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
       return options;
     };
     return (
-      <BranchDiv $type={"inline"}>
-        <EditorContext.Consumer>
-          {(editorState) => (
-            <>
-              <Dropdown
-                showSearch={true}
-                value={this.children.queryName.getView()}
-                options={getQueryOptions(editorState)}
-                label={trans("eventHandler.selectQuery")}
-                onChange={(value) => this.dispatchChangeValueAction({ queryName: value })}
-              />
-            </>
-          )}
-        </EditorContext.Consumer>
-      </BranchDiv>
+      <>
+        <BranchDiv $type={"inline"}>
+          <EditorContext.Consumer>
+            {(editorState) => (
+              <>
+                <Dropdown
+                  showSearch={true}
+                  value={this.children.queryName.getView()}
+                  options={getQueryOptions(editorState)}
+                  label={trans("eventHandler.selectQuery")}
+                  onChange={(value) => this.dispatchChangeValueAction({ queryName: value })}
+                />
+              </>
+            )}
+          </EditorContext.Consumer>
+        </BranchDiv>
+        <BranchDiv>
+          {this.children.query.propertyView({
+            label: trans("eventHandler.queryParams"),
+            layout: "vertical",
+          })}
+        </BranchDiv>
+      </>
     );
   }
 }
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx
@@ -20,7 +20,7 @@ const childrenMap = {
 };
 
 export const GoToURLAction = new MultiCompBuilder(childrenMap, (props) => {
-  return () => {
+  return () => {  
     const queryParams = keyValueListToSearchStr(
       props.query.map((i) => i.getView() as KeyValue)
     );

diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -75,6 +75,7 @@ import { QueryNotificationControl } from "./queryComp/queryNotificationControl";
 import { QueryPropertyView } from "./queryComp/queryPropertyView";
 import { getTriggerType, onlyManualTrigger } from "./queryCompUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import {VariablesComp} from "@lowcoder-ee/comps/queries/queryComp/variablesCompl";
 
 const latestExecution: Record<string, string> = {};
 
@@ -153,6 +154,7 @@ const childrenMap = {
     defaultValue: 10 * 1000,
   }),
   confirmationModal: QueryConfirmationModal,
+  variables: VariablesComp,
   periodic: BoolPureControl,
   periodicTime: millisecondsControl({
     defaultValue: Number.NaN,

diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -171,6 +171,17 @@ export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp>
               </QueryPropertyViewWrapper>
             ),
           },
+          {
+            key: "variables",
+            title: trans("query.variablesTab"),
+            children: (
+              <QueryPropertyViewWrapper>
+                <QuerySectionWrapper>
+                  {children.variables.getPropertyView()}
+                </QuerySectionWrapper>
+              </QueryPropertyViewWrapper>
+            ),
+          },
         ] as const
       }
       tabTitle={children.name.getView()}
@@ -501,6 +512,29 @@ export const QueryGeneralPropertyView = (props: {
   );
 };
 
+export const QueryVariablesPropertyView = (props: {
+  comp: InstanceType<typeof QueryComp>;
+  placement?: PageType;
+}) => {
+  const { comp, placement = "editor" } = props;
+
+  const children = comp.children;
+  let datasourceId = children.datasourceId.getView();
+
+  console.log(children.datasourceId);
+  return (
+    <QueryPropertyViewWrapper>
+      <QuerySectionWrapper>
+        {isCompWithPropertyView(children.comp)
+          ? children.comp.propertyView({
+            datasourceId: datasourceId,
+          })
+          : children.comp.getPropertyView()}
+      </QuerySectionWrapper>
+    </QueryPropertyViewWrapper>
+  );
+};
+
 function findQueryInNestedStructure(
   structure: any,
   queryName: string,

diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx
@@ -0,0 +1,16 @@
+import {MultiCompBuilder, withDefault} from "../../generators";
+import {keyValueListControl} from "lowcoder-sdk";
+
+export const VariablesComp = new MultiCompBuilder(
+  {
+    variables: withDefault(keyValueListControl(), [{ key: "", value: "" }]),
+  },
+  (props) =>
+    props.variables
+  )
+  .setPropertyViewFn((children) => (
+    <>
+      {children.variables.propertyView({})}
+    </>
+  ))
+  .build();
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -705,6 +705,7 @@ export const en = {
     "newDatasource": "New Data Source",
     "generalTab": "General",
     "notificationTab": "Notification",
+    "variablesTab": "Variables",
     "advancedTab": "Advanced",
     "showFailNotification": "Show Notification on Failure",
     "failCondition": "Failure Conditions",

diff --git a/client/packages/lowcoder/src/util/appUtils.tsx b/client/packages/lowcoder/src/util/appUtils.tsx
@@ -32,6 +32,7 @@ export function openApp(props: {
   hashParams?: string;
   newTab?: boolean;
 }) {
+  console.log(props.queryParams)
   const m = matchPath<AppPathParams>(window.location.pathname, APP_EDITOR_URL);
   if (!m || !props.applicationId) {
     return;