Skip to content

Commit 67df145

Browse files
raheeliftikhar5raheeliftikhar5
committed
refactoring query variables to sync variable names where it's used
1 parent 5e1f1d7 commit 67df145

File tree

8 files changed

+139
-23
lines changed

8 files changed

+139
-23
lines changed

‎client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
121121
if (!queryName) {
122122
return () => Promise.resolve();
123123
}
124+
124125
return () =>
125126
getPromiseAfterDispatch(
126127
this.dispatch,

‎client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ const EventHandlerControlPropertyView = (props: {
170170

171171
const queryVariables = editorState
172172
?.selectedOrFirstQueryComp()
173-
?.children.variables.children.variables.toJsonValue();
173+
?.children.variables.toJsonValue();
174174

175175
const queryExecHandler = {
176176
compType: "executeQuery",

‎client/packages/lowcoder/src/comps/controls/keyValueControl.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { StringControl } from "./codeControl";
66
import { ControlParams } from "./controlParams";
77
import { dropdownControl } from "./dropdownControl";
88
import { ParamsStringControl } from "./paramsControl";
9-
import { SimpleVariableHeaderComp } from "../comps/simpleVariableHeaderComp";
9+
import { SimpleNameComp } from "../comps/simpleNameComp";
1010

1111
const KeyValueWrapper = styled.div`
1212
display: flex;
@@ -68,7 +68,7 @@ export function keyValueControl<T extends OptionsType>(
6868
};
6969
if(controlType === "variable") {
7070
childrenMap = {
71-
key: SimpleVariableHeaderComp(true) as any,
71+
key: SimpleNameComp as any,
7272
value: StringControl,
7373
type: dropdownControl(types, types[0]?.value),
7474
};

‎client/packages/lowcoder/src/comps/editorState.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,7 @@ export class EditorState {
509509

510510
//Check query variable name duplication
511511
const queryComInfoList:string[] = [].concat(...(this.getQueriesComp()
512-
.toJsonValue().map((item: any) => item.variables.variables.map((v: any) => v.key))));
512+
.toJsonValue().map((item: any) => item.variables.map((v: any) => v.key))));
513513

514514
if (name !== oldName && queryComInfoList.includes(name)) {
515515
return trans("comp.nameExists", { name: name });

‎client/packages/lowcoder/src/comps/queries/queryComp.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import { JSONObject, JSONValue } from "../../util/jsonTypes";
6868
import { BoolPureControl } from "../controls/boolControl";
6969
import { millisecondsControl } from "../controls/millisecondControl";
7070
import { paramsMillisecondsControl } from "../controls/paramsControl";
71-
import { DepsConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
71+
import { NameConfig, withExposingConfigs } from "../generators/withExposing";
7272
import { HttpQuery } from "./httpQuery/httpQuery";
7373
import { StreamQuery } from "./httpQuery/streamQuery";
7474
import { QueryConfirmationModal } from "./queryComp/queryConfirmationModal";
@@ -77,6 +77,7 @@ import { QueryPropertyView } from "./queryComp/queryPropertyView";
7777
import { getTriggerType, onlyManualTrigger } from "./queryCompUtils";
7878
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
7979
import {VariablesComp} from "@lowcoder-ee/comps/queries/queryComp/variablesComp";
80+
import { migrateOldData } from "../generators/simpleGenerators";
8081

8182
const latestExecution: Record<string, string> = {};
8283

@@ -364,7 +365,7 @@ QueryCompTmp = class extends QueryCompTmp {
364365
}
365366
if (action.type === CompActionTypes.EXECUTE_QUERY) {
366367
if (getReduceContext().disableUpdateState) return this;
367-
if(!action.args) action.args = this.children.variables.children.variables.toJsonValue().filter(kv => kv.key).reduce((acc, curr) => Object.assign(acc, {[curr.key as string]:curr.value}), {});
368+
if(!action.args) action.args = this.children.variables.toJsonValue().filter(kv => kv.key).reduce((acc, curr) => Object.assign(acc, {[curr.key as string]:curr.value}), {});
368369
action.args.$queryName = this.children.name.getView();
369370

370371
return this.executeQuery(action);
@@ -656,6 +657,12 @@ QueryCompTmp = withMethodExposing(QueryCompTmp, [
656657
},
657658
]);
658659

660+
QueryCompTmp = migrateOldData(QueryCompTmp, (oldData: any) => {
661+
if (oldData?.variables?.variables) {
662+
oldData.variables = oldData.variables.variables;
663+
}
664+
return oldData;
665+
});
659666

660667
export const QueryComp = withExposingConfigs(QueryCompTmp, [
661668
new NameConfig("data", trans("query.dataExportDesc")),
@@ -704,7 +711,7 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
704711
Object.values(this.children).forEach((comp) => {
705712
result[comp.children.name.getView()] = comp.exposingInfo();
706713

707-
const variables = comp.children.variables.children.variables.toJsonValue();
714+
const variables = comp.children.variables.toJsonValue();
708715
variables.forEach((variable: Record<string, any>) => {
709716
result[variable.key] = {
710717
property: fromRecord({
@@ -778,7 +785,7 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
778785
const jsonData = originQuery.toJsonValue();
779786
//Regenerate variable header
780787
const newKeys:string[] = [];
781-
jsonData.variables?.variables?.forEach(kv => {
788+
jsonData.variables?.forEach(kv => {
782789
const [prefix, _] = (kv.key as string).split(/(?=\d+$)/);
783790
let i=1, newName = "";
784791
do {

‎client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp>
177177
children: (
178178
<QueryPropertyViewWrapper>
179179
<QuerySectionWrapper>
180-
{children.variables.getPropertyView()}
180+
{children.variables.propertyView({})}
181181
</QuerySectionWrapper>
182182
</QueryPropertyViewWrapper>
183183
),

‎client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx‎

Lines changed: 108 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,110 @@
1-
import {MultiCompBuilder, withDefault} from "../../generators";
2-
import { keyValueListControl } from "../../controls/keyValueListControl";
3-
4-
export const VariablesComp = new MultiCompBuilder(
5-
{
6-
variables: withDefault(keyValueListControl(false, [], "variable"), [{ key: "", value: "" }]),
7-
},
8-
(props) => props //props.variables
9-
)
10-
.setPropertyViewFn((children) => (
1+
import { simpleMultiComp } from "../../generators";
2+
import { SimpleNameComp } from "@lowcoder-ee/comps/comps/simpleNameComp";
3+
import { StringControl } from "@lowcoder-ee/comps/controls/codeControl";
4+
import { list } from "@lowcoder-ee/comps/generators/list";
5+
import { Input } from "components/Input";
6+
import { ControlPropertyViewWrapper } from "components/control";
7+
import { ReactNode, useContext, useState } from "react";
8+
import { KeyValueList } from "components/keyValueList";
9+
import { trans } from "i18n";
10+
import { PopupCard } from "components/popupCard";
11+
import { EditorContext, EditorState } from "@lowcoder-ee/comps/editorState";
12+
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
13+
14+
interface VariablesParams {
15+
// variables: string[]; todo support parse variables
16+
}
17+
18+
const VariableKey = ({children, dispatch}: any) => {
19+
const [editing, setEditing] = useState(false);
20+
const [error, setError] = useState<string | undefined>(undefined);
21+
const editorState = useContext(EditorContext);
22+
23+
return (
1124
<>
12-
{children.variables.propertyView({})}
25+
<div style={{ flexGrow: 1, marginRight: "8px" }}>
26+
<Input
27+
value={children.key.getView()}
28+
onBlur={(e) => {
29+
const { value } = e.target;
30+
value !== children.key.getView() &&
31+
editorState.rename(children.key.getView(), value)
32+
}}
33+
onPressEnter={(e) => {
34+
const { value } = e.target as HTMLInputElement;
35+
value !== children.key.getView() &&
36+
editorState.rename(children.key.getView(), value)
37+
}}
38+
onChange={(e) => {
39+
const nextName = e.target.value;
40+
setError(editorState.checkRename(children.key.getView(), nextName));
41+
}}
42+
/>
43+
<PopupCard
44+
editorFocus={!!error}
45+
title={error ? trans("error") : ""}
46+
content={error}
47+
hasError={!!error}
48+
/>
49+
</div>
1350
</>
14-
))
15-
.build();
51+
)
52+
}
53+
const VariableItem = class extends simpleMultiComp({
54+
key: SimpleNameComp,
55+
value: StringControl,
56+
}) {
57+
propertyView(params: VariablesParams): ReactNode {
58+
return (
59+
<>
60+
<div style={{ display: "flex", gap: "8px", flexGrow: 1 }}>
61+
<VariableKey
62+
children={this.children}
63+
dispatch={this.dispatch}
64+
/>
65+
<div style={{ width: "232px", flexGrow: 1 }}>
66+
{this.children.value.propertyView({ placeholder: "value" })}
67+
</div>
68+
</div>
69+
</>
70+
)
71+
}
72+
}
73+
74+
const VariableListPropertyViewWrapper = ({children}: any) => {
75+
const editorState = useContext(EditorContext);
76+
return children(editorState);
77+
}
78+
79+
export const VariablesComp = class extends list(VariableItem) {
80+
genNewName(editorState: EditorState) {
81+
const name = editorState.getNameGenerator().genItemName("variable");
82+
return name;
83+
}
84+
85+
add(editorState: EditorState, extraInfo?: any) {
86+
const name = this.genNewName(editorState);
87+
88+
this.dispatch(
89+
this.pushAction({
90+
key: name,
91+
value: '',
92+
})
93+
);
94+
}
95+
propertyView(params: VariablesParams): ReactNode {
96+
return (
97+
<VariableListPropertyViewWrapper>
98+
{(editorState: EditorState) => (
99+
<ControlPropertyViewWrapper {...params}>
100+
<KeyValueList
101+
list={this.getView().map((child) => child.propertyView(params))}
102+
onAdd={() => this.add(editorState)}
103+
onDelete={(item, index) => this.dispatch(this.deleteAction(index))}
104+
/>
105+
</ControlPropertyViewWrapper>
106+
)}
107+
</VariableListPropertyViewWrapper>
108+
);
109+
}
110+
};

‎client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,20 @@ export function toQueryView(params: FunctionProperty[]) {
3030
}): Promise<QueryResult> => {
3131
const { applicationId, isViewMode } = getGlobalSettings();
3232

33-
const mappedVariables = Object.keys(props.variables).filter(k => k !== "$queryName").map(key => ({key: `${props.args?.$queryName}.variables.${key}`, value: props.variables[key] || ""}));
33+
let mappedVariables: Array<{key: string, value: string}> = [];
34+
Object.keys(props.variables)
35+
.filter(k => k !== "$queryName")
36+
.forEach(key => {
37+
mappedVariables.push({
38+
key: `${key}.value`,
39+
value: props.variables[key] || ""
40+
})
41+
mappedVariables.push({
42+
key: `${props.args?.$queryName}.variables.${key}`,
43+
value: props.variables[key] || ""
44+
})
45+
})
46+
3447
let request: QueryExecuteRequest = {
3548
path: props.applicationPath,
3649
params: [

0 commit comments

Comments
 (0)