Skip to content

Commit aa18638

Browse files
VladKrasnyVladKrasny
authored
Merge pull request #1054 from writer/AB-91
feat(ui) - define graphs IDs using variables in state - AB-91
2 parents 51bea5b + 1e90140 commit aa18638

File tree

6 files changed

+249
-101
lines changed

6 files changed

+249
-101
lines changed

‎src/ui/src/builder/settings/BuilderFieldsCheckbox.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template>
22
<WdsFieldWrapper
33
v-if="isBindingMode"
4-
is-unbind-button-shown
4+
is-binding-button-shown
5+
:is-binding-enabled="isBindingMode"
56
:label
67
:unit
78
:hint
89
:error
910
:data-automation-key="props.fieldKey"
10-
@unbind="toggleBindingMode"
11+
@update:is-binding-enabled="toggleBindingMode"
1112
>
1213
<BuilderFieldsText
1314
type="state-template"
@@ -98,11 +99,11 @@ const lastCheckboxValue = ref(model.value ? "yes" : "no");
9899
99100
function toggleBindingMode() {
100101
if (isBindingMode.value) {
101-
lastBindingValue.value = component.value.content[props.fieldKey];
102+
lastBindingValue.value = contentValue.value;
102103
setContentValue(lastCheckboxValue.value);
103104
isBindingMode.value = false;
104105
} else {
105-
lastCheckboxValue.value = component.value.content[props.fieldKey];
106+
lastCheckboxValue.value = contentValue.value;
106107
setContentValue(lastBindingValue.value);
107108
isBindingMode.value = true;
108109
}

‎src/ui/src/builder/settings/BuilderFieldsWriterResourceId.vue‎

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,61 @@
11
<template>
2-
<div
3-
class="BuilderFieldsWriterResourceId"
4-
:data-automation-key="props.fieldKey"
2+
<WdsFieldWrapper
3+
:is-binding-button-shown
4+
:is-binding-enabled="isBindingMode"
5+
:label
6+
:unit
7+
:hint
8+
:error
9+
:data-automation-key="fieldKey"
10+
@update:is-binding-enabled="toggleBindingMode"
511
>
6-
<component
7-
:is="selector"
8-
ref="selectorEl"
9-
v-model="selected"
10-
:enable-multi-selection="enableMultiSelection"
11-
@selected-data="onSelectedData"
12-
/>
13-
<a
14-
v-if="ressourceUrl"
15-
class="BuilderFieldsWriterResourceId__link"
16-
:href="ressourceUrl"
17-
target="_blank"
18-
:data-writer-tooltip="linkTooltip"
12+
<div
13+
class="BuilderFieldsWriterResourceId"
14+
:data-automation-key="fieldKey"
1915
>
20-
<WdsIcon name="external-link" />
21-
</a>
22-
</div>
16+
<BuilderFieldsText
17+
v-if="isBindingMode"
18+
type="state-template"
19+
:component-id
20+
:field-key
21+
:error
22+
/>
23+
<component
24+
:is="selector"
25+
v-else
26+
ref="selectorEl"
27+
v-model="selected"
28+
:enable-multi-selection="enableMultiSelection"
29+
@selected-data="onSelectedData"
30+
/>
31+
<a
32+
v-if="ressourceUrl"
33+
class="BuilderFieldsWriterResourceId__link"
34+
:href="ressourceUrl"
35+
target="_blank"
36+
:data-writer-tooltip="linkTooltip"
37+
>
38+
<WdsIcon name="external-link" />
39+
</a>
40+
</div>
41+
</WdsFieldWrapper>
2342
</template>
2443

2544
<script setup lang="ts">
2645
import {
27-
toRefs,
28-
inject,
2946
computed,
3047
PropType,
3148
defineAsyncComponent,
3249
useTemplateRef,
3350
ref,
51+
toRef,
3452
} from "vue";
35-
import { useComponentActions } from "../useComponentActions";
36-
import injectionKeys from "@/injectionKeys";
53+
import { useComponentFieldViewModel } from "../useComponentFieldViewModel";
54+
import { useBindingMode } from "./composables/useBindingMode";
3755
import WdsIcon from "@/wds/WdsIcon.vue";
56+
import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
3857
import { WriterApplication } from "@/writerTypes";
58+
import BuilderFieldsText from "./BuilderFieldsText.vue";
3959
4060
const BuilderApplicationSelect = defineAsyncComponent(
4161
() => import("../BuilderApplicationSelect.vue"),
@@ -47,22 +67,36 @@ const BuilderModelSelect = defineAsyncComponent(
4767
() => import("../BuilderModelSelect.vue"),
4868
);
4969
50-
const wf = inject(injectionKeys.core);
51-
const ssbm = inject(injectionKeys.builderManager);
52-
const { setContentValue } = useComponentActions(wf, ssbm);
53-
5470
const props = defineProps({
5571
componentId: { type: String, required: true },
5672
fieldKey: { type: String, required: true },
73+
defaultValue: { type: String, required: false, default: undefined },
74+
label: { type: String, required: false, default: undefined },
75+
unit: { type: String, required: false, default: undefined },
76+
hint: { type: String, required: false, default: undefined },
5777
error: { type: String, required: false, default: undefined },
5878
resourceType: {
5979
type: String as PropType<"graph" | "application" | "model">,
6080
required: true,
6181
},
6282
enableMultiSelection: { type: Boolean, required: false, default: false },
83+
isBindingButtonShown: { type: Boolean, required: false, default: false },
84+
});
85+
86+
const fieldViewModel = useComponentFieldViewModel({
87+
componentId: toRef(props, "componentId"),
88+
fieldKey: toRef(props, "fieldKey"),
89+
defaultValue: toRef(props, "defaultValue"),
90+
});
91+
92+
const { isBindingMode, toggleBindingMode } = useBindingMode({
93+
fieldViewModel,
94+
});
95+
96+
const appInputsViewModel = useComponentFieldViewModel({
97+
componentId: toRef(props, "componentId"),
98+
fieldKey: "appInputs",
6399
});
64-
const { componentId, fieldKey, enableMultiSelection } = toRefs(props);
65-
const component = computed(() => wf.getComponentById(componentId.value));
66100
67101
const selectorEl = useTemplateRef("selectorEl");
68102
@@ -114,40 +148,22 @@ const ressourceUrl = computed(() => {
114148
}
115149
});
116150
117-
const fieldDefinition = computed(() => {
118-
const def = wf.getComponentDefinition(component.value.type);
119-
return def?.fields?.[props.fieldKey];
120-
});
121-
122151
const selected = computed<string | string[]>({
123152
get() {
124-
if (enableMultiSelection.value) {
125-
const raw =
126-
component.value.content[props.fieldKey] ??
127-
fieldDefinition.value.default ??
128-
"[]";
153+
if (props.enableMultiSelection) {
154+
const raw = fieldViewModel.value || "[]";
129155
try {
130156
return JSON.parse(raw);
131157
} catch {
132158
return [];
133159
}
134160
}
135-
return (
136-
component.value.content[props.fieldKey] ||
137-
fieldDefinition.value.default ||
138-
""
139-
);
161+
return fieldViewModel.value;
140162
},
141163
set(value: string | string[]) {
142-
if (enableMultiSelection.value) {
143-
setContentValue(
144-
component.value.id,
145-
fieldKey.value,
146-
JSON.stringify(value),
147-
);
148-
} else {
149-
setContentValue(component.value.id, fieldKey.value, String(value));
150-
}
164+
fieldViewModel.value = props.enableMultiSelection
165+
? JSON.stringify(value)
166+
: String(value);
151167
},
152168
});
153169
@@ -164,11 +180,7 @@ function onSelectedData(appData: WriterApplication | undefined) {
164180
return;
165181
}
166182
167-
setContentValue(
168-
component.value.id,
169-
"appInputs",
170-
JSON.stringify(appData.inputs),
171-
);
183+
appInputsViewModel.value = JSON.stringify(appData.inputs);
172184
}
173185
</script>
174186

‎src/ui/src/builder/settings/BuilderSettingsProperties.vue‎

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,57 @@
3535
:error="errorsByFields[fieldKey]"
3636
/>
3737

38+
<BuilderFieldsWriterResourceId
39+
v-else-if="fieldValue.type === FieldType.WriterGraphId"
40+
is-binding-button-shown
41+
:field-key="fieldKey"
42+
:component-id="selectedComponent.id"
43+
:default-value="fieldValue.default"
44+
:label="fieldValue.name ?? fieldKey"
45+
:hint="fieldValue.desc"
46+
:unit="fieldValue.type"
47+
:error="errorsByFields[fieldKey]"
48+
resource-type="graph"
49+
/>
50+
51+
<BuilderFieldsWriterResourceId
52+
v-else-if="fieldValue.type === FieldType.WriterGraphIds"
53+
is-binding-button-shown
54+
:field-key="fieldKey"
55+
:component-id="selectedComponent.id"
56+
:default-value="fieldValue.default"
57+
:label="fieldValue.name ?? fieldKey"
58+
:hint="fieldValue.desc"
59+
:unit="fieldValue.type"
60+
:error="errorsByFields[fieldKey]"
61+
resource-type="graph"
62+
enable-multi-selection
63+
/>
64+
65+
<BuilderFieldsWriterResourceId
66+
v-else-if="fieldValue.type === FieldType.WriterAppId"
67+
:field-key="fieldKey"
68+
:component-id="selectedComponent.id"
69+
:default-value="fieldValue.default"
70+
:label="fieldValue.name ?? fieldKey"
71+
:hint="fieldValue.desc"
72+
:unit="fieldValue.type"
73+
:error="errorsByFields[fieldKey]"
74+
resource-type="application"
75+
/>
76+
77+
<BuilderFieldsWriterResourceId
78+
v-else-if="fieldValue.type === FieldType.WriterModelId"
79+
:field-key="fieldKey"
80+
:component-id="selectedComponent.id"
81+
:default-value="fieldValue.default"
82+
:label="fieldValue.name ?? fieldKey"
83+
:hint="fieldValue.desc"
84+
:unit="fieldValue.type"
85+
:error="errorsByFields[fieldKey]"
86+
resource-type="model"
87+
/>
88+
3889
<WdsFieldWrapper
3990
v-else
4091
:label="
@@ -165,39 +216,6 @@
165216
:input-language="'python'"
166217
/>
167218

168-
<BuilderFieldsWriterResourceId
169-
v-if="fieldValue.type == FieldType.WriterGraphId"
170-
:field-key="fieldKey"
171-
:component-id="selectedComponent.id"
172-
:error="errorsByFields[fieldKey]"
173-
resource-type="graph"
174-
/>
175-
176-
<BuilderFieldsWriterResourceId
177-
v-if="fieldValue.type == FieldType.WriterGraphIds"
178-
:field-key="fieldKey"
179-
:component-id="selectedComponent.id"
180-
:error="errorsByFields[fieldKey]"
181-
resource-type="graph"
182-
enable-multi-selection
183-
/>
184-
185-
<BuilderFieldsWriterResourceId
186-
v-if="fieldValue.type == FieldType.WriterAppId"
187-
:field-key="fieldKey"
188-
:component-id="selectedComponent.id"
189-
:error="errorsByFields[fieldKey]"
190-
resource-type="application"
191-
/>
192-
193-
<BuilderFieldsWriterResourceId
194-
v-if="fieldValue.type == FieldType.WriterModelId"
195-
:field-key="fieldKey"
196-
:component-id="selectedComponent.id"
197-
:error="errorsByFields[fieldKey]"
198-
resource-type="model"
199-
/>
200-
201219
<BuilderFieldsComponentId
202220
v-if="fieldValue.type == FieldType.ComponentId"
203221
:field-key="fieldKey"

‎src/ui/src/builder/settings/composables/useBindingMode.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { ref, Ref, readonly } from "vue";
2+
3+
function checkIsBindingFormat(val: unknown): boolean {
4+
return typeof val === "string" && val.startsWith("@{") && val.endsWith("}");
5+
}
6+
7+
type Params = {
8+
fieldViewModel: Ref<string>;
9+
};
10+
11+
export function useBindingMode({ fieldViewModel }: Params) {
12+
const isBindingMode = ref<boolean>(
13+
checkIsBindingFormat(fieldViewModel.value),
14+
);
15+
16+
const lastValues = ref<{
17+
binding: string;
18+
noneBinding: string;
19+
}>({
20+
binding: checkIsBindingFormat(fieldViewModel.value)
21+
? fieldViewModel.value
22+
: "",
23+
noneBinding: isBindingMode.value ? "" : fieldViewModel.value,
24+
});
25+
26+
function toggleBindingMode() {
27+
if (isBindingMode.value) {
28+
if (checkIsBindingFormat(fieldViewModel.value)) {
29+
lastValues.value.binding = fieldViewModel.value;
30+
}
31+
32+
fieldViewModel.value = lastValues.value.noneBinding;
33+
isBindingMode.value = false;
34+
} else {
35+
lastValues.value.noneBinding = fieldViewModel.value;
36+
37+
fieldViewModel.value = lastValues.value.binding;
38+
isBindingMode.value = true;
39+
}
40+
}
41+
42+
return {
43+
isBindingMode: readonly(isBindingMode),
44+
toggleBindingMode,
45+
};
46+
}

0 commit comments

Comments
 (0)