WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 2f083ba

Browse files
ruchamahabalruchamahabal
committed
refactor: update imports & dependencies on code store
1 parent a3e5892 commit 2f083ba

14 files changed

+346
-325
lines changed

‎frontend/src/components/AppComponent.vue‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@
3737
import Block from "@/utils/block"
3838
import { computed, onMounted, ref, useAttrs, inject, type ComputedRef, toRefs } from "vue"
3939
import type { ComponentPublicInstance } from "vue"
40-
import { useRouter, useRoute } from "vue-router"
40+
import { useRouter } from "vue-router"
4141
import { createResource } from "frappe-ui"
42-
import { getComponentRoot, isHTML, getValueFromObject, setValueInObject } from "@/utils/helpers"
43-
import { isDynamicValue, getDynamicValue, executeUserScript, getAPIParams } from "@/utils/code"
42+
import { getComponentRoot, isHTML } from "@/utils/helpers"
4443
import { useScreenSize } from "@/utils/useScreenSize"
44+
import { isDynamicValue } from "@/utils/code"
4545
46-
import useAppStore from "@/stores/appStore"
46+
import useCodeStore from "@/stores/codeStore"
4747
import { toast } from "vue-sonner"
4848
import type { Field } from "@/types/ComponentEvent"
4949
import type { DataResult } from "@/types/Studio/StudioResource"
@@ -67,7 +67,7 @@ const styles = computed(() => {
6767
Object.entries(_styles).forEach(([key, value]) => {
6868
if (value) {
6969
if (isDynamicValue(value.toString())) {
70-
_styles[key] = getDynamicValue(value.toString(), evaluationContext.value)
70+
_styles[key] = codeStore.getDynamicValue(value.toString(), evaluationContext.value)
7171
}
7272
}
7373
})
@@ -77,17 +77,14 @@ const classes = computed(() => {
7777
return [attrs.class, ...props.block.getClasses()]
7878
})
7979
80-
const store = useAppStore()
80+
const codeStore = useCodeStore()
8181
const repeaterContext = inject("repeaterContext", {})
8282
const componentContext = inject<ComputedRef | null>("componentContext", null)
8383
8484
const evaluationContext = computed(() => {
8585
return {
86-
...store.variables,
87-
...store.resources,
8886
...repeaterContext,
8987
...componentContext?.value,
90-
route: store.routeObject,
9188
}
9289
})
9390
@@ -99,7 +96,7 @@ const getComponentProps = () => {
9996
10097
Object.entries(propValues).forEach(([propName, config]) => {
10198
if (isDynamicValue(config)) {
102-
propValues[propName] = getDynamicValue(config, evaluationContext.value)
99+
propValues[propName] = codeStore.getDynamicValue(config, evaluationContext.value)
103100
}
104101
})
105102
return propValues
@@ -116,7 +113,7 @@ const componentProps = computed(() => {
116113
// visibility
117114
const showComponent = computed(() => {
118115
if (props.block.visibilityCondition) {
119-
const value = getDynamicValue(props.block.visibilityCondition, evaluationContext.value)
116+
const value = codeStore.getDynamicValue(props.block.visibilityCondition, evaluationContext.value)
120117
// Handle different return types:
121118
// - Boolean: return as-is
122119
// - String "true"/"false": convert to boolean
@@ -137,16 +134,16 @@ const boundValue = computed({
137134
get() {
138135
const modelValue = props.block.componentProps.modelValue
139136
if (modelValue?.$type === "variable") {
140-
return getValueFromObject(store.variables, modelValue.name)
137+
return codeStore.getValueFromVariable(modelValue.name)
141138
} else if (isDynamicValue(modelValue)) {
142-
return getDynamicValue(modelValue, evaluationContext.value)
139+
return codeStore.getDynamicValue(modelValue, evaluationContext.value)
143140
}
144141
return modelValue
145142
},
146143
set(newValue) {
147144
const modelValue = props.block.componentProps.modelValue
148145
if (modelValue?.$type === "variable") {
149-
setValueInObject(store.variables, modelValue.name, newValue)
146+
codeStore.setValueInVariable(modelValue.name, newValue)
150147
} else {
151148
// update the prop directly if not bound to a variable
152149
props.block.setProp("modelValue", newValue)
@@ -169,7 +166,7 @@ const componentEvents = computed(() => {
169166
return () => {
170167
const path: string[] = event.api_endpoint.split(".")
171168
// get resource
172-
const resource = store.resources[path[0]]
169+
const resource = codeStore.resources[path[0]]
173170
174171
if (resource) {
175172
// access and call whitelisted method
@@ -178,7 +175,7 @@ const componentEvents = computed(() => {
178175
createResource({
179176
url: event.api_endpoint,
180177
auto: true,
181-
params: getAPIParams(event.params, evaluationContext.value),
178+
params: codeStore.getAPIParams(event.params, evaluationContext.value),
182179
onSuccess: handleSuccess(event),
183180
onError: handleError(event),
184181
})
@@ -188,7 +185,7 @@ const componentEvents = computed(() => {
188185
return () => {
189186
const fields: Record<string, any> = {}
190187
event.fields.forEach((field: Field) => {
191-
fields[field.field] = getValueFromObject(store.variables, field.value)
188+
fields[field.field] = codeStore.getValueFromVariable(field.value)
192189
})
193190
createResource({
194191
url: "frappe.client.insert",
@@ -205,13 +202,7 @@ const componentEvents = computed(() => {
205202
}
206203
} else if (event.action === "Run Script") {
207204
return () => {
208-
executeUserScript(
209-
event.script,
210-
store.variables,
211-
store.resources,
212-
repeaterContext,
213-
componentContext?.value,
214-
)
205+
codeStore.executeUserScript(event.script, repeaterContext, componentContext?.value)
215206
}
216207
}
217208
}
@@ -225,10 +216,10 @@ const componentEvents = computed(() => {
225216
const handleSuccess = (event: any) => (data: DataResult) => {
226217
if (event.on_success === "script") {
227218
if (event.on_success_script) {
228-
const variablesRefs = toRefs(store.variables)
219+
const variablesRefs = toRefs(codeStore.variables)
229220
const context = {
230221
...variablesRefs,
231-
...store.resources,
222+
...codeStore.resources,
232223
...repeaterContext,
233224
...componentContext?.value,
234225
data,
@@ -254,10 +245,10 @@ const handleSuccess = (event: any) => (data: DataResult) => {
254245
const handleError = (event: any) => (error: any) => {
255246
if (event.on_error === "script") {
256247
if (event.on_error_script) {
257-
const variablesRefs = toRefs(store.variables)
248+
const variablesRefs = toRefs(codeStore.variables)
258249
const context = {
259250
...variablesRefs,
260-
...store.resources,
251+
...codeStore.resources,
261252
...repeaterContext,
262253
...componentContext?.value,
263254
error,

‎frontend/src/components/ComponentEvents.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ import { useStudioCompletions } from "@/utils/useStudioCompletions"
183183
import type { DocTypeField } from "@/types"
184184
import { toast } from "vue-sonner"
185185
import type { CompletionContext } from "@codemirror/autocomplete"
186+
import useCodeStore from "@/stores/codeStore"
186187
187188
const props = defineProps<{
188189
block?: Block
@@ -260,10 +261,11 @@ watch(
260261
261262
if (!newEvent.value.isEditing) {
262263
newEvent.value.fields = []
264+
const codeStore = useCodeStore()
263265
doctypeFields.value.forEach((field) => {
264266
newEvent.value.fields?.push({
265267
field: field.value,
266-
value: Object.keys(store.variables).includes(field.value) ? field.value : "",
268+
value: Object.keys(codeStore.variables).includes(field.value) ? field.value : "",
267269
name: field.value,
268270
})
269271
})

‎frontend/src/components/DataPanel.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="flex flex-col gap-3 p-4">
33
<CollapsibleSection sectionName="Data Sources">
4-
<div class="ml-3 flex flex-col gap-2" v-if="!isObjectEmpty(store.resources)">
4+
<div class="ml-3 flex flex-col gap-2" v-if="!isObjectEmpty(codeStore.resources)">
55
<div
6-
v-for="(resource, resource_name) in store.resources"
6+
v-for="(resource, resource_name) in codeStore.resources"
77
:key="resource_name"
88
class="group/resource flex flex-row justify-between"
99
>
@@ -40,9 +40,9 @@
4040

4141
<!-- Variables -->
4242
<CollapsibleSection sectionName="Variables">
43-
<div class="ml-3 flex flex-col gap-1" v-if="!isObjectEmpty(store.variables)">
43+
<div class="ml-3 flex flex-col gap-1" v-if="!isObjectEmpty(codeStore.variables)">
4444
<div
45-
v-for="(value, variable_name) in store.variables"
45+
v-for="(value, variable_name) in codeStore.variables"
4646
:key="variable_name"
4747
class="group/variable flex flex-row justify-between"
4848
>
@@ -164,6 +164,7 @@
164164
import { ref, watch } from "vue"
165165
import { Dialog } from "frappe-ui"
166166
import useStudioStore from "@/stores/studioStore"
167+
import useCodeStore from "@/stores/codeStore"
167168
import CollapsibleSection from "@/components/CollapsibleSection.vue"
168169
import ObjectBrowser from "@/components/ObjectBrowser.vue"
169170
import EmptyState from "@/components/EmptyState.vue"
@@ -184,6 +185,7 @@ import { toast } from "vue-sonner"
184185
*/
185186
186187
const store = useStudioStore()
188+
const codeStore = useCodeStore()
187189
const showResourceDialog = ref(false)
188190
const existingResource = ref<Resource | null>()
189191
@@ -208,7 +210,7 @@ const addResource = (resource: Resource) => {
208210
})
209211
.then(async () => {
210212
if (store.activePage) {
211-
await store.setPageResources(store.activePage)
213+
await codeStore.setPageResources(store.activePage)
212214
}
213215
showResourceDialog.value = false
214216
})
@@ -221,7 +223,7 @@ const deleteResource = async (resource: Resource, resource_name: string) => {
221223
.submit(resource.resource_id)
222224
.then(async () => {
223225
if (store.activePage) {
224-
await store.setPageResources(store.activePage)
226+
await codeStore.setPageResources(store.activePage, true)
225227
}
226228
toast.success(`Data Source ${resource_name} deleted successfully`)
227229
})
@@ -236,7 +238,7 @@ const editResource = async (resource: Resource) => {
236238
.submit(getResourceValues(resource))
237239
.then(async () => {
238240
if (store.activePage) {
239-
await store.setPageResources(store.activePage)
241+
await codeStore.setPageResources(store.activePage, true)
240242
}
241243
toast.success(`Data Source ${resource.resource_name} updated successfully`)
242244
showResourceDialog.value = false
@@ -340,7 +342,7 @@ const addVariable = (variable: Variable) => {
340342
{
341343
async onSuccess() {
342344
if (store.activePage) {
343-
await store.setPageVariables(store.activePage)
345+
await codeStore.setPageVariables(store.activePage)
344346
}
345347
showVariableDialog.value = false
346348
},
@@ -364,7 +366,7 @@ const editVariable = (variable: Variable) => {
364366
})
365367
.then(async () => {
366368
if (store.activePage) {
367-
await store.setPageVariables(store.activePage)
369+
await codeStore.setPageVariables(store.activePage)
368370
}
369371
showVariableDialog.value = false
370372
})
@@ -377,7 +379,7 @@ const deleteVariable = async (variable: Variable) => {
377379
.submit(variable.name)
378380
.then(async () => {
379381
if (store.activePage) {
380-
await store.setPageVariables(store.activePage)
382+
await codeStore.setPageVariables(store.activePage)
381383
}
382384
toast.success(`Variable ${variable.variable_name} deleted successfully`)
383385
})

‎frontend/src/components/DynamicValueSelector.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import Block from "@/utils/block"
3434
import type { VariableOption } from "@/types/Studio/StudioPageVariable"
3535
import type { ComponentInput } from "@/types/Studio/StudioComponent"
3636
import { isObjectEmpty } from "@/utils/helpers"
37+
import useCodeStore from "@/stores/codeStore"
3738
3839
const props = withDefaults(defineProps<{ block?: Block; formatValuesAsTemplate?: boolean }>(), {
3940
formatValuesAsTemplate: true,
@@ -43,6 +44,7 @@ const emit = defineEmits<{
4344
}>()
4445
const store = useStudioStore()
4546
const canvasStore = useCanvasStore()
47+
const codeStore = useCodeStore()
4648
4749
const formatValue = (value: string) => {
4850
if (props.formatValuesAsTemplate) {
@@ -83,9 +85,9 @@ const dynamicValueOptions = computed(() => {
8385
})
8486
}
8587
// Data Sources group
86-
const dataSourceOptions = Object.keys(store.resources).map((resourceName) => {
88+
const dataSourceOptions = Object.keys(codeStore.resources).map((resourceName) => {
8789
const completion =
88-
store.resources[resourceName]?.resource_type === "Document"
90+
codeStore.resources[resourceName]?.resource_type === "Document"
8991
? `${resourceName}.doc`
9092
: `${resourceName}.data`
9193
return {

‎frontend/src/components/PropsEditor.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ import Block from "@/utils/block"
7979
8080
import InlineInput from "@/components/InlineInput.vue"
8181
import { isObjectEmpty } from "@/utils/helpers"
82-
import { isDynamicValue } from "@/utils/code"
8382
import IconButton from "@/components/IconButton.vue"
8483
import Link2 from "~icons/lucide/link-2"
8584
import Link2Off from "~icons/lucide/link-2-off"
@@ -88,6 +87,7 @@ import { useStudioCompletions } from "@/utils/useStudioCompletions"
8887
import type { CompletionContext } from "@codemirror/autocomplete"
8988
import useComponentStore from "@/stores/componentStore"
9089
import { getComponentProps } from "@/utils/components"
90+
import { isDynamicValue } from "@/utils/code"
9191
import useComponentEditorStore from "@/stores/componentEditorStore"
9292
import type { ComponentProps } from "@/types"
9393
import { ComponentInput } from "@/types/Studio/StudioComponent"

‎frontend/src/components/StudioComponent.vue‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,12 @@ import ComponentEditor from "@/components/ComponentEditor.vue"
109109
import Block from "@/utils/block"
110110
import useStudioStore from "@/stores/studioStore"
111111
import useCanvasStore from "@/stores/canvasStore"
112-
import { getComponentRoot, isHTML, getValueFromObject, setValueInObject } from "@/utils/helpers"
113-
import { isDynamicValue, getDynamicValue } from "@/utils/code"
112+
import { getComponentRoot, isHTML } from "@/utils/helpers"
113+
import { isDynamicValue } from "@/utils/code"
114114
115115
import type { CanvasProps } from "@/types/StudioCanvas"
116116
import type { RepeaterContext } from "@/types"
117+
import useCodeStore from "@/stores/codeStore"
117118
118119
const props = withDefaults(
119120
defineProps<{
@@ -132,6 +133,7 @@ defineOptions({
132133
133134
const store = useStudioStore()
134135
const canvasStore = useCanvasStore()
136+
const codeStore = useCodeStore()
135137
136138
const isComponentReady = ref(false)
137139
const editor = ref<InstanceType<typeof ComponentEditor> | null>(null)
@@ -148,7 +150,7 @@ const styles = computed(() => {
148150
Object.entries(_styles).forEach(([key, value]) => {
149151
if (value) {
150152
if (isDynamicValue(value.toString())) {
151-
_styles[key] = getDynamicValue(value.toString(), evaluationContext.value)
153+
_styles[key] = codeStore.getDynamicValue(value.toString(), evaluationContext.value)
152154
}
153155
}
154156
})
@@ -166,11 +168,8 @@ const repeaterContext = inject<RepeaterContext | object>("repeaterContext", {})
166168
const componentContext = inject<ComputedRef | null>("componentContext", null)
167169
const evaluationContext = computed(() => {
168170
return {
169-
...store.variables,
170-
...store.resources,
171171
...repeaterContext,
172172
...componentContext?.value,
173-
route: store.routeObject,
174173
}
175174
})
176175
@@ -182,7 +181,7 @@ const getComponentProps = () => {
182181
183182
Object.entries(propValues).forEach(([propName, config]) => {
184183
if (isDynamicValue(config)) {
185-
propValues[propName] = getDynamicValue(config, evaluationContext.value)
184+
propValues[propName] = codeStore.getDynamicValue(config, evaluationContext.value)
186185
}
187186
})
188187
return propValues
@@ -201,7 +200,7 @@ const componentRef = ref<ComponentPublicInstance | null>(null)
201200
// visibility
202201
const showComponent = computed(() => {
203202
if (props.block.visibilityCondition) {
204-
const value = getDynamicValue(props.block.visibilityCondition, evaluationContext.value)
203+
const value = codeStore.getDynamicValue(props.block.visibilityCondition, evaluationContext.value)
205204
// Handle different return types:
206205
// - Boolean: return as-is
207206
// - String "true"/"false": convert to boolean
@@ -222,17 +221,17 @@ const boundValue = computed({
222221
get() {
223222
const modelValue = props.block.componentProps.modelValue
224223
if (modelValue?.$type === "variable") {
225-
return getValueFromObject(store.variables, modelValue.name)
224+
return codeStore.getValueFromVariable(modelValue.name)
226225
} else if (isDynamicValue(modelValue)) {
227-
return getDynamicValue(modelValue, evaluationContext.value)
226+
return codeStore.getDynamicValue(modelValue, evaluationContext.value)
228227
}
229228
return modelValue
230229
},
231230
set(newValue) {
232231
const modelValue = props.block.componentProps.modelValue
233232
if (modelValue?.$type === "variable") {
234233
// update the variable in the store
235-
setValueInObject(store.variables, modelValue.name, newValue)
234+
codeStore.setValueInVariable(modelValue.name, newValue)
236235
} else {
237236
// update the prop directly if not bound to a variable
238237
props.block.setProp("modelValue", newValue)

0 commit comments

Comments
 (0)