Compare commits
No commits in common. "03000b710b0c29974edc107b7058ced6eb1d102a" and "ab5a257283a4cec169e57142defdcf5720a93dc9" have entirely different histories.
03000b710b
...
ab5a257283
@ -24,8 +24,6 @@
|
|||||||
<option value="PUT">PUT</option>
|
<option value="PUT">PUT</option>
|
||||||
<option value="PATCH">PATCH</option>
|
<option value="PATCH">PATCH</option>
|
||||||
<option value="DELETE">DELETE</option>
|
<option value="DELETE">DELETE</option>
|
||||||
<option value="HEAD">HEAD</option>
|
|
||||||
<option value="OPTIONS">OPTIONS</option>
|
|
||||||
</select>
|
</select>
|
||||||
<p class="mt-1 text-xs text-gray-500">
|
<p class="mt-1 text-xs text-gray-500">
|
||||||
The HTTP method determines how the API call interacts with the endpoint.
|
The HTTP method determines how the API call interacts with the endpoint.
|
||||||
@ -50,116 +48,112 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step 2: Authorization -->
|
<!-- Step 2: Headers and Body -->
|
||||||
<div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
<div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
||||||
<div class="flex items-center mb-3">
|
<div class="flex items-center mb-3">
|
||||||
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
||||||
<span class="text-xs font-semibold text-indigo-600">2</span>
|
<span class="text-xs font-semibold text-indigo-600">2</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-medium">Authorization</h4>
|
<h4 class="font-medium">Request Configuration</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-2">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
|
<!-- Headers -->
|
||||||
<select v-if="localNodeData.authorization" v-model="localNodeData.authorization.type" class="w-48 p-2 border rounded text-sm" @change="saveChanges">
|
<div class="mb-4">
|
||||||
<option v-for="type in AUTH_TYPES" :key="type.value" :value="type.value">{{ type.label }}</option>
|
<label class="block text-sm font-medium text-gray-700 mb-1">Headers</label>
|
||||||
</select>
|
<div class="bg-white p-3 border rounded-md shadow-sm">
|
||||||
|
<div class="flex gap-2 mb-2">
|
||||||
|
<VariableBrowser
|
||||||
|
:availableVariables="availableVariables"
|
||||||
|
placeholder="Insert Variable into Headers..."
|
||||||
|
:allowCreate="false"
|
||||||
|
@update:modelValue="insertVariable($event, 'headers')"
|
||||||
|
class="flex-grow"
|
||||||
|
/>
|
||||||
|
<RsButton
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
@click="formatJson('headers')"
|
||||||
|
title="Format JSON"
|
||||||
|
class="flex-shrink-0"
|
||||||
|
>
|
||||||
|
<Icon name="material-symbols:format-align-left" />
|
||||||
|
Format
|
||||||
|
</RsButton>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="headers"
|
||||||
|
v-model="localNodeData.headers"
|
||||||
|
class="w-full p-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 text-sm font-mono"
|
||||||
|
placeholder='{ "Authorization": "Bearer {accessToken}" }'
|
||||||
|
rows="4"
|
||||||
|
@blur="saveChanges"
|
||||||
|
></textarea>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">
|
||||||
|
Set HTTP headers as a JSON object. Use variables with <code class="bg-gray-100 px-1">{variableName}</code> syntax.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Headers Preview -->
|
||||||
|
<div v-if="localNodeData.headers" class="mt-3 pt-3 border-t border-gray-200">
|
||||||
|
<div class="text-xs font-medium text-gray-700 mb-1">Preview with Current Values:</div>
|
||||||
|
<div class="bg-gray-50 border rounded p-2">
|
||||||
|
<pre class="text-xs font-mono whitespace-pre-wrap">{{ getPreviewWithValues('headers') }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="localNodeData.authorization && localNodeData.authorization.type" v-for="field in getAuthFields()" :key="field.key" class="mb-2">
|
|
||||||
<label class="block text-xs font-medium text-gray-600 mb-1">{{ field.label }}</label>
|
<!-- Request Body - show only for POST, PUT, PATCH -->
|
||||||
<input v-if="field.type !== 'select'" :type="field.type" v-model="localNodeData.authorization[field.key]" :placeholder="field.placeholder" class="w-full px-2 py-1 border rounded text-sm" @input="saveChanges" />
|
<div v-if="showRequestBody" class="mt-4">
|
||||||
<select v-else v-model="localNodeData.authorization[field.key]" class="w-full px-2 py-1 border rounded text-sm" @change="saveChanges">
|
<label class="block text-sm font-medium text-gray-700 mb-1">Request Body</label>
|
||||||
<option v-for="opt in field.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
<div class="bg-white p-3 border rounded-md shadow-sm">
|
||||||
</select>
|
<div class="flex gap-2 mb-2">
|
||||||
|
<VariableBrowser
|
||||||
|
:availableVariables="availableVariables"
|
||||||
|
placeholder="Insert Variable into Request Body..."
|
||||||
|
:allowCreate="false"
|
||||||
|
@update:modelValue="insertVariable($event, 'requestBody')"
|
||||||
|
class="flex-grow"
|
||||||
|
/>
|
||||||
|
<RsButton
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
@click="formatJson('requestBody')"
|
||||||
|
title="Format JSON"
|
||||||
|
class="flex-shrink-0"
|
||||||
|
>
|
||||||
|
<Icon name="material-symbols:format-align-left" />
|
||||||
|
Format
|
||||||
|
</RsButton>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="requestBody"
|
||||||
|
v-model="localNodeData.requestBody"
|
||||||
|
class="w-full p-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 text-sm font-mono"
|
||||||
|
placeholder='{ "key": "value", "userId": "{userId}" }'
|
||||||
|
rows="6"
|
||||||
|
@blur="saveChanges"
|
||||||
|
></textarea>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">
|
||||||
|
Request body to send with the API call. Use variables with <code class="bg-gray-100 px-1">{variableName}</code> syntax.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Request Body Preview -->
|
||||||
|
<div v-if="localNodeData.requestBody" class="mt-3 pt-3 border-t border-gray-200">
|
||||||
|
<div class="text-xs font-medium text-gray-700 mb-1">Preview with Current Values:</div>
|
||||||
|
<div class="bg-gray-50 border rounded p-2">
|
||||||
|
<pre class="text-xs font-mono whitespace-pre-wrap">{{ getPreviewWithValues('requestBody') }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step 3: Params (GET, DELETE, etc.) -->
|
<!-- Step 3: Response Handling -->
|
||||||
<div v-if="showParams" class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
<div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
||||||
<div class="flex items-center mb-3">
|
<div class="flex items-center mb-3">
|
||||||
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
||||||
<span class="text-xs font-semibold text-indigo-600">3</span>
|
<span class="text-xs font-semibold text-indigo-600">3</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-medium">Query Parameters</h4>
|
|
||||||
</div>
|
|
||||||
<KeyValueTable
|
|
||||||
v-model="localNodeData.params"
|
|
||||||
:variables="processVariables"
|
|
||||||
:allow-variable-insert="true"
|
|
||||||
placeholder-key="Param Key"
|
|
||||||
placeholder-value="Param Value"
|
|
||||||
@update:modelValue="saveChanges"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 4: Headers -->
|
|
||||||
<div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
|
||||||
<div class="flex items-center mb-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
|
||||||
<span class="text-xs font-semibold text-indigo-600">4</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-medium">Headers</h4>
|
|
||||||
</div>
|
|
||||||
<KeyValueTable
|
|
||||||
v-model="localNodeData.headers"
|
|
||||||
:variables="processVariables"
|
|
||||||
:allow-variable-insert="true"
|
|
||||||
placeholder-key="Header Name"
|
|
||||||
placeholder-value="Header Value"
|
|
||||||
@update:modelValue="saveChanges"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 5: Body (POST/PUT/PATCH) -->
|
|
||||||
<div v-if="showRequestBody && localNodeData.body && bodyType" class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
|
||||||
<div class="flex items-center mb-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
|
||||||
<span class="text-xs font-semibold text-indigo-600">5</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-medium">Request Body</h4>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-1">Body Type</label>
|
|
||||||
<select v-model="localNodeData.body.type" class="w-64 p-2 border rounded text-sm" @change="saveChanges">
|
|
||||||
<option v-for="type in BODY_TYPES" :key="type.value" :value="type.value">{{ type.label }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div v-if="['form-data', 'x-www-form-urlencoded'].includes(bodyType)">
|
|
||||||
<KeyValueTable
|
|
||||||
:model-value="getBodyData()"
|
|
||||||
:variables="processVariables"
|
|
||||||
:allow-variable-insert="true"
|
|
||||||
placeholder-key="Field Name"
|
|
||||||
placeholder-value="Field Value"
|
|
||||||
@update:modelValue="setBodyData"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="bodyType === 'raw'">
|
|
||||||
<textarea v-model="localNodeData.body.data" rows="6" class="w-full p-2 border rounded font-mono text-sm" placeholder="Raw body (JSON, XML, etc.)" @input="saveChanges"></textarea>
|
|
||||||
<VariableBrowser
|
|
||||||
:available-variables="processVariables"
|
|
||||||
:allow-create="false"
|
|
||||||
:placeholder="'Insert variable...'"
|
|
||||||
@update:modelValue="insertVariableToRaw"
|
|
||||||
class="w-48 mt-2"
|
|
||||||
/>
|
|
||||||
<div v-if="rawBodyJsonWarning && rawBodyHasVariable" class="mt-2 text-xs text-red-600 flex items-center gap-1">
|
|
||||||
<Icon name="material-symbols:warning" class="w-4 h-4" />
|
|
||||||
{{ rawBodyJsonWarning }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="bodyType === 'binary'">
|
|
||||||
<input type="file" @change="handleFileUpload" />
|
|
||||||
<div v-if="localNodeData.body.data" class="mt-2 text-xs text-gray-600">Selected: {{ localNodeData.body.data }}</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-xs text-gray-500">No body will be sent.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 6: Response Handling -->
|
|
||||||
<div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
|
||||||
<div class="flex items-center mb-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
|
||||||
<span class="text-xs font-semibold text-indigo-600">6</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-medium">Response Handling</h4>
|
<h4 class="font-medium">Response Handling</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -214,11 +208,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step 7: Test API Call -->
|
<!-- Step 4: Test API Call -->
|
||||||
<div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
<div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
|
||||||
<div class="flex items-center mb-3">
|
<div class="flex items-center mb-3">
|
||||||
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
<div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
|
||||||
<span class="text-xs font-semibold text-indigo-600">7</span>
|
<span class="text-xs font-semibold text-indigo-600">4</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-medium">Test API Call</h4>
|
<h4 class="font-medium">Test API Call</h4>
|
||||||
</div>
|
</div>
|
||||||
@ -282,22 +276,6 @@
|
|||||||
import { ref, computed, watch, nextTick } from 'vue';
|
import { ref, computed, watch, nextTick } from 'vue';
|
||||||
import { useProcessBuilderStore } from '@/stores/processBuilder';
|
import { useProcessBuilderStore } from '@/stores/processBuilder';
|
||||||
import VariableBrowser from './VariableBrowser.vue';
|
import VariableBrowser from './VariableBrowser.vue';
|
||||||
import KeyValueTable from './KeyValueTable.vue';
|
|
||||||
|
|
||||||
const AUTH_TYPES = [
|
|
||||||
{ value: 'none', label: 'None' },
|
|
||||||
{ value: 'bearer', label: 'Bearer Token' },
|
|
||||||
{ value: 'basic', label: 'Basic Auth' },
|
|
||||||
{ value: 'apiKey', label: 'API Key' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const BODY_TYPES = [
|
|
||||||
{ value: 'none', label: 'None' },
|
|
||||||
{ value: 'form-data', label: 'form-data' },
|
|
||||||
{ value: 'x-www-form-urlencoded', label: 'x-www-form-urlencoded' },
|
|
||||||
{ value: 'raw', label: 'raw' },
|
|
||||||
{ value: 'binary', label: 'binary' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
nodeData: {
|
nodeData: {
|
||||||
@ -316,7 +294,17 @@ const emit = defineEmits(['update']);
|
|||||||
const processStore = useProcessBuilderStore();
|
const processStore = useProcessBuilderStore();
|
||||||
|
|
||||||
// Local state for node data - create a deep copy to avoid mutation issues
|
// Local state for node data - create a deep copy to avoid mutation issues
|
||||||
const localNodeData = ref(migrateNodeData(props.nodeData));
|
const localNodeData = ref({
|
||||||
|
label: 'API Call',
|
||||||
|
description: '',
|
||||||
|
apiMethod: 'GET',
|
||||||
|
apiUrl: '',
|
||||||
|
requestBody: '',
|
||||||
|
headers: '{ "Content-Type": "application/json" }',
|
||||||
|
outputVariable: 'apiResponse',
|
||||||
|
continueOnError: false,
|
||||||
|
errorVariable: 'apiError'
|
||||||
|
});
|
||||||
|
|
||||||
// Computed for showing request body based on method
|
// Computed for showing request body based on method
|
||||||
const showRequestBody = computed(() => {
|
const showRequestBody = computed(() => {
|
||||||
@ -336,16 +324,22 @@ const availableVariables = computed(() => {
|
|||||||
return globalVars;
|
return globalVars;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get process variables for substitution
|
|
||||||
const processVariables = computed(() => {
|
|
||||||
// Use processStore.currentProcess.variables (object) and convert to array
|
|
||||||
const varsObj = processStore.currentProcess?.variables || {};
|
|
||||||
return Object.values(varsObj);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Watch for changes from parent props
|
// Watch for changes from parent props
|
||||||
watch(() => props.nodeData, (newNodeData) => {
|
watch(() => props.nodeData, (newNodeData) => {
|
||||||
if (newNodeData) localNodeData.value = migrateNodeData(newNodeData);
|
if (newNodeData) {
|
||||||
|
// Create a deep copy to break reactivity chains with parent
|
||||||
|
localNodeData.value = {
|
||||||
|
label: newNodeData.label || 'API Call',
|
||||||
|
description: newNodeData.description || '',
|
||||||
|
apiMethod: newNodeData.apiMethod || 'GET',
|
||||||
|
apiUrl: newNodeData.apiUrl || '',
|
||||||
|
requestBody: newNodeData.requestBody || '',
|
||||||
|
headers: newNodeData.headers || '{ "Content-Type": "application/json" }',
|
||||||
|
outputVariable: newNodeData.outputVariable || 'apiResponse',
|
||||||
|
continueOnError: newNodeData.continueOnError || false,
|
||||||
|
errorVariable: newNodeData.errorVariable || 'apiError'
|
||||||
|
};
|
||||||
|
}
|
||||||
}, { immediate: true, deep: true });
|
}, { immediate: true, deep: true });
|
||||||
|
|
||||||
// Function to create a new global variable
|
// Function to create a new global variable
|
||||||
@ -565,178 +559,6 @@ function getPreviewWithValues(field) {
|
|||||||
return localNodeData.value[field] || '';
|
return localNodeData.value[field] || '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Authorization Fields ---
|
|
||||||
function getAuthFields() {
|
|
||||||
switch (localNodeData.value.authorization.type) {
|
|
||||||
case 'bearer':
|
|
||||||
return [
|
|
||||||
{ key: 'token', label: 'Token', type: 'text', placeholder: 'Bearer token', value: localNodeData.value.authorization.token || '' }
|
|
||||||
];
|
|
||||||
case 'basic':
|
|
||||||
return [
|
|
||||||
{ key: 'username', label: 'Username', type: 'text', placeholder: 'Username', value: localNodeData.value.authorization.username || '' },
|
|
||||||
{ key: 'password', label: 'Password', type: 'password', placeholder: 'Password', value: localNodeData.value.authorization.password || '' }
|
|
||||||
];
|
|
||||||
case 'apiKey':
|
|
||||||
return [
|
|
||||||
{ key: 'key', label: 'Key Name', type: 'text', placeholder: 'e.g. X-API-Key', value: localNodeData.value.authorization.key || '' },
|
|
||||||
{ key: 'value', label: 'Key Value', type: 'text', placeholder: 'API Key Value', value: localNodeData.value.authorization.value || '' },
|
|
||||||
{ key: 'in', label: 'Add To', type: 'select', options: [
|
|
||||||
{ value: 'header', label: 'Header' },
|
|
||||||
{ value: 'query', label: 'Query Param' }
|
|
||||||
], value: localNodeData.value.authorization.in || 'header' }
|
|
||||||
];
|
|
||||||
default:
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function updateAuthField(field, value) {
|
|
||||||
localNodeData.value.authorization[field] = value;
|
|
||||||
saveChanges();
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Body Data Handling ---
|
|
||||||
function getBodyData() {
|
|
||||||
if (['form-data', 'x-www-form-urlencoded'].includes(localNodeData.value.body.type)) {
|
|
||||||
return Array.isArray(localNodeData.value.body.data) ? localNodeData.value.body.data : [];
|
|
||||||
}
|
|
||||||
if (localNodeData.value.body.type === 'raw') {
|
|
||||||
return typeof localNodeData.value.body.data === 'string' ? localNodeData.value.body.data : '';
|
|
||||||
}
|
|
||||||
if (localNodeData.value.body.type === 'binary') {
|
|
||||||
return localNodeData.value.body.data || null;
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
function setBodyData(val) {
|
|
||||||
if (['form-data', 'x-www-form-urlencoded'].includes(localNodeData.value.body.type)) {
|
|
||||||
localNodeData.value.body.data = val;
|
|
||||||
} else if (localNodeData.value.body.type === 'raw') {
|
|
||||||
localNodeData.value.body.data = val;
|
|
||||||
} else if (localNodeData.value.body.type === 'binary') {
|
|
||||||
localNodeData.value.body.data = val;
|
|
||||||
}
|
|
||||||
saveChanges();
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- File Upload for Binary ---
|
|
||||||
function handleFileUpload(e) {
|
|
||||||
const file = e.target.files[0];
|
|
||||||
if (file) {
|
|
||||||
localNodeData.value.body.data = file.name;
|
|
||||||
saveChanges();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- JSON Validation for Raw Body ---
|
|
||||||
const rawBodyIsJson = computed(() => {
|
|
||||||
if (bodyType.value !== 'raw') return false;
|
|
||||||
const val = localNodeData.value.body?.data || '';
|
|
||||||
// Only check if it looks like JSON
|
|
||||||
if (!val.trim().startsWith('{') && !val.trim().startsWith('[')) return false;
|
|
||||||
try {
|
|
||||||
// Replace {variable} with a string to allow parsing
|
|
||||||
const replaced = val.replace(/\{[a-zA-Z0-9_]+\}/g, '"VAR"');
|
|
||||||
JSON.parse(replaced);
|
|
||||||
return true;
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const rawBodyHasVariable = computed(() => {
|
|
||||||
if (bodyType.value !== 'raw') return false;
|
|
||||||
const val = localNodeData.value.body?.data || '';
|
|
||||||
return /\{[a-zA-Z0-9_]+\}/.test(val);
|
|
||||||
});
|
|
||||||
const rawBodyJsonWarning = computed(() => {
|
|
||||||
if (bodyType.value !== 'raw') return '';
|
|
||||||
const val = localNodeData.value.body?.data || '';
|
|
||||||
if (!val.trim().startsWith('{') && !val.trim().startsWith('[')) return '';
|
|
||||||
try {
|
|
||||||
// Replace both quoted and unquoted {variable} with "VAR"
|
|
||||||
let replaced = val
|
|
||||||
.replace(/"\{[a-zA-Z0-9_]+\}"/g, '"VAR"') // quoted
|
|
||||||
.replace(/\{[a-zA-Z0-9_]+\}/g, '"VAR"'); // unquoted
|
|
||||||
JSON.parse(replaced);
|
|
||||||
return '';
|
|
||||||
} catch {
|
|
||||||
return 'Warning: Your request body is not valid JSON. Make sure variables are inside quotes.';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- Variable Insertion Helper ---
|
|
||||||
function insertVariableToRaw(varName) {
|
|
||||||
if (!varName) return;
|
|
||||||
const textarea = document.querySelector('textarea[placeholder="Raw body (JSON, XML, etc.)"]');
|
|
||||||
let val = localNodeData.value.body.data || '';
|
|
||||||
let insertText = `{${varName}}`;
|
|
||||||
// Detect if inside quotes
|
|
||||||
let cursor = textarea ? textarea.selectionStart : val.length;
|
|
||||||
let before = val.substring(0, cursor);
|
|
||||||
let after = val.substring(cursor);
|
|
||||||
// Check if body looks like JSON
|
|
||||||
const isJson = val.trim().startsWith('{') || val.trim().startsWith('[');
|
|
||||||
// Check if cursor is inside quotes
|
|
||||||
let insideQuotes = false;
|
|
||||||
if (isJson && textarea) {
|
|
||||||
// Count quotes before cursor
|
|
||||||
const quotesBefore = before.split('"').length - 1;
|
|
||||||
insideQuotes = quotesBefore % 2 === 1;
|
|
||||||
}
|
|
||||||
if (isJson && !insideQuotes) {
|
|
||||||
insertText = `"{${varName}}"`;
|
|
||||||
}
|
|
||||||
// Insert at cursor
|
|
||||||
localNodeData.value.body.data = before + insertText + after;
|
|
||||||
saveChanges();
|
|
||||||
// Move cursor after inserted variable
|
|
||||||
nextTick(() => {
|
|
||||||
if (textarea) {
|
|
||||||
const newPos = before.length + insertText.length;
|
|
||||||
textarea.focus();
|
|
||||||
textarea.selectionStart = textarea.selectionEnd = newPos;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- UI State ---
|
|
||||||
const showParams = computed(() => ['GET', 'DELETE', 'HEAD', 'OPTIONS'].includes(localNodeData.value.apiMethod));
|
|
||||||
|
|
||||||
// Defensive computed for bodyType and authType
|
|
||||||
const bodyType = computed(() => localNodeData.value.body && localNodeData.value.body.type ? localNodeData.value.body.type : 'none');
|
|
||||||
const authType = computed(() => localNodeData.value.authorization && localNodeData.value.authorization.type ? localNodeData.value.authorization.type : 'none');
|
|
||||||
|
|
||||||
function migrateNodeData(data) {
|
|
||||||
const migrated = { ...data };
|
|
||||||
// Headers
|
|
||||||
if (typeof migrated.headers === 'string') {
|
|
||||||
try {
|
|
||||||
const obj = JSON.parse(migrated.headers);
|
|
||||||
migrated.headers = Object.entries(obj).map(([key, value]) => ({ key, value }));
|
|
||||||
} catch {
|
|
||||||
migrated.headers = [];
|
|
||||||
}
|
|
||||||
} else if (!Array.isArray(migrated.headers)) {
|
|
||||||
migrated.headers = [];
|
|
||||||
}
|
|
||||||
// Params
|
|
||||||
if (!Array.isArray(migrated.params)) migrated.params = [];
|
|
||||||
// Body
|
|
||||||
if (!migrated.body || typeof migrated.body !== 'object') {
|
|
||||||
migrated.body = { type: 'none', data: [] };
|
|
||||||
} else {
|
|
||||||
if (!migrated.body.type) migrated.body.type = 'none';
|
|
||||||
if (migrated.body.data === undefined) migrated.body.data = migrated.body.type === 'raw' ? '' : [];
|
|
||||||
}
|
|
||||||
if (typeof data.requestBody === 'string' && (!migrated.body || migrated.body.type === 'none')) {
|
|
||||||
migrated.body = { type: 'raw', data: data.requestBody };
|
|
||||||
}
|
|
||||||
// Auth
|
|
||||||
if (!migrated.authorization || typeof migrated.authorization !== 'object') migrated.authorization = { type: 'none' };
|
|
||||||
if (!migrated.authorization.type) migrated.authorization.type = 'none';
|
|
||||||
return migrated;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -1,68 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div v-for="(row, idx) in rows" :key="idx" class="flex items-center gap-2 mb-2">
|
|
||||||
<input
|
|
||||||
v-model="row.key"
|
|
||||||
:placeholder="placeholderKey"
|
|
||||||
class="w-32 px-2 py-1 border rounded text-sm"
|
|
||||||
@input="emitChange"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
v-model="row.value"
|
|
||||||
:placeholder="placeholderValue"
|
|
||||||
class="flex-1 px-2 py-1 border rounded text-sm"
|
|
||||||
@input="emitChange"
|
|
||||||
:ref="el => valueInputs[idx] = el"
|
|
||||||
/>
|
|
||||||
<VariableBrowser
|
|
||||||
v-if="allowVariableInsert && variables && variables.length"
|
|
||||||
:available-variables="variables"
|
|
||||||
:placeholder="'Insert variable...'"
|
|
||||||
:allow-create="false"
|
|
||||||
@update:modelValue="varName => insertVariable(idx, varName)"
|
|
||||||
class="w-32"
|
|
||||||
/>
|
|
||||||
<button @click="removeRow(idx)" class="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200">✕</button>
|
|
||||||
</div>
|
|
||||||
<button @click="addRow" class="mt-1 px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200">+ Add</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch, nextTick } from 'vue';
|
|
||||||
import VariableBrowser from './VariableBrowser.vue';
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: Array, default: () => [] },
|
|
||||||
placeholderKey: { type: String, default: 'Key' },
|
|
||||||
placeholderValue: { type: String, default: 'Value' },
|
|
||||||
allowVariableInsert: { type: Boolean, default: false },
|
|
||||||
variables: { type: Array, default: () => [] }
|
|
||||||
});
|
|
||||||
const emit = defineEmits(['update:modelValue']);
|
|
||||||
const rows = ref(props.modelValue.map(r => ({ ...r })));
|
|
||||||
const valueInputs = ref([]);
|
|
||||||
watch(() => props.modelValue, v => { rows.value = v.map(r => ({ ...r })); });
|
|
||||||
function emitChange() { emit('update:modelValue', rows.value.map(r => ({ ...r }))); }
|
|
||||||
function addRow() { rows.value.push({ key: '', value: '' }); emitChange(); }
|
|
||||||
function removeRow(idx) { rows.value.splice(idx, 1); emitChange(); }
|
|
||||||
function insertVariable(idx, varName) {
|
|
||||||
if (!varName) return;
|
|
||||||
const input = valueInputs.value[idx];
|
|
||||||
if (input && input.selectionStart !== undefined) {
|
|
||||||
const start = input.selectionStart;
|
|
||||||
const end = input.selectionEnd;
|
|
||||||
const before = rows.value[idx].value.substring(0, start);
|
|
||||||
const after = rows.value[idx].value.substring(end);
|
|
||||||
rows.value[idx].value = before + `{${varName}}` + after;
|
|
||||||
emitChange();
|
|
||||||
// Move cursor after inserted variable
|
|
||||||
nextTick(() => {
|
|
||||||
input.focus();
|
|
||||||
input.selectionStart = input.selectionEnd = start + varName.length + 2;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
rows.value[idx].value += `{${varName}}`;
|
|
||||||
emitChange();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -54,28 +54,6 @@
|
|||||||
"animated": true,
|
"animated": true,
|
||||||
"sourceHandle": "html-1752550500000-right",
|
"sourceHandle": "html-1752550500000-right",
|
||||||
"targetHandle": "end-1752546716111-left"
|
"targetHandle": "end-1752546716111-left"
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "html-1752550500000-notification-1752621850786-1752621852927",
|
|
||||||
"data": {},
|
|
||||||
"type": "custom",
|
|
||||||
"label": "",
|
|
||||||
"source": "html-1752550500000",
|
|
||||||
"target": "notification-1752621850786",
|
|
||||||
"animated": true,
|
|
||||||
"sourceHandle": "html-1752550500000-bottom",
|
|
||||||
"targetHandle": "notification-1752621850786-left"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "notification-1752621850786-end-1752546716111-1752621856004",
|
|
||||||
"data": {},
|
|
||||||
"type": "custom",
|
|
||||||
"label": "",
|
|
||||||
"source": "notification-1752621850786",
|
|
||||||
"target": "end-1752546716111",
|
|
||||||
"animated": true,
|
|
||||||
"sourceHandle": "notification-1752621850786-right",
|
|
||||||
"targetHandle": "end-1752546716111-left"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"nodes": [
|
"nodes": [
|
||||||
@ -121,21 +99,14 @@
|
|||||||
{
|
{
|
||||||
"id": "api-1752550319410",
|
"id": "api-1752550319410",
|
||||||
"data": {
|
"data": {
|
||||||
"body": { "data": "{ \"title\" : \"{todoTitle}\"}", "type": "raw" },
|
|
||||||
"label": "API Call",
|
"label": "API Call",
|
||||||
"shape": "rectangle",
|
"apiUrl": "https://jsonplaceholder.typicode.com/todos/1",
|
||||||
"apiUrl": "https://jsonplaceholder.typicode.com/posts",
|
"headers": "{ \"Content-Type\": \"application/json\" }",
|
||||||
"params": [],
|
"apiMethod": "GET",
|
||||||
"headers": [{ "key": "Content-Type", "value": "application/json" }],
|
|
||||||
"apiMethod": "POST",
|
|
||||||
"textColor": "#1e40af",
|
|
||||||
"borderColor": "#3b82f6",
|
|
||||||
"description": "External API call",
|
"description": "External API call",
|
||||||
"requestBody": "",
|
"requestBody": "",
|
||||||
"authorization": { "type": "none" },
|
|
||||||
"errorVariable": "apiError",
|
"errorVariable": "apiError",
|
||||||
"outputVariable": "apiResponse",
|
"outputVariable": "apiResponse",
|
||||||
"backgroundColor": "#eff6ff",
|
|
||||||
"continueOnError": false
|
"continueOnError": false
|
||||||
},
|
},
|
||||||
"type": "api",
|
"type": "api",
|
||||||
@ -160,7 +131,7 @@
|
|||||||
},
|
},
|
||||||
"type": "script",
|
"type": "script",
|
||||||
"label": "Script Task",
|
"label": "Script Task",
|
||||||
"position": { "x": 1185, "y": 330 }
|
"position": { "x": 1200, "y": 330 }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "html-1752550500000",
|
"id": "html-1752550500000",
|
||||||
@ -177,37 +148,12 @@
|
|||||||
},
|
},
|
||||||
"type": "html",
|
"type": "html",
|
||||||
"label": "Show Result",
|
"label": "Show Result",
|
||||||
"position": { "x": 1425, "y": 75 }
|
"position": { "x": 1560, "y": 105 }
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "notification-1752621850786",
|
|
||||||
"data": {
|
|
||||||
"label": "Notification",
|
|
||||||
"message": "This is the notification",
|
|
||||||
"subject": "This is the notification",
|
|
||||||
"priority": "medium",
|
|
||||||
"expiration": { "unit": "hours", "value": 24, "enabled": false },
|
|
||||||
"description": "Send notification to users",
|
|
||||||
"htmlMessage": "",
|
|
||||||
"messageFormat": "text",
|
|
||||||
"recipientRole": "",
|
|
||||||
"recipientType": "email",
|
|
||||||
"recipientUser": "",
|
|
||||||
"recipientEmail": "mdafiqiskandar@gmail.com",
|
|
||||||
"recipientGroup": "",
|
|
||||||
"deliveryOptions": { "sms": false, "email": false, "inApp": true },
|
|
||||||
"richTextMessage": "",
|
|
||||||
"notificationType": "info",
|
|
||||||
"recipientVariable": ""
|
|
||||||
},
|
|
||||||
"type": "notification",
|
|
||||||
"label": "Notification",
|
|
||||||
"position": { "x": 1590, "y": 360 }
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"viewport": {
|
"viewport": {
|
||||||
"x": -118.4524312896406,
|
"x": -660.4278622401489,
|
||||||
"y": 314.4180761099366,
|
"y": 202.3364877443377,
|
||||||
"zoom": 0.6437632135306554
|
"zoom": 0.8153893887682282
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,288 +0,0 @@
|
|||||||
# Process Variables System Documentation
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Process variables serve as the **central nervous system** for data flow and state management in the BPM system. They enable dynamic behavior, external system integration, and stateful execution across multiple user interactions and system boundaries.
|
|
||||||
|
|
||||||
## Architecture Components
|
|
||||||
|
|
||||||
### 1. VariableManager.vue - Central Variable Management
|
|
||||||
|
|
||||||
**Location**: `components/process-flow/VariableManager.vue`
|
|
||||||
|
|
||||||
**Primary Functions:**
|
|
||||||
- **Variable Creation & Management**: Add, edit, delete process variables with comprehensive type support
|
|
||||||
- **Usage Tracking**: Analyzes where variables are used across all node types (form, API, script, gateway, etc.)
|
|
||||||
- **Variable Navigation**: Click-to-navigate from variable usage to specific nodes in the process
|
|
||||||
- **Type Organization**: Groups variables by data type (string, int, decimal, boolean, date, object, etc.)
|
|
||||||
|
|
||||||
**Key Features:**
|
|
||||||
- **14+ Variable Types**: string, int, decimal, boolean, date, datetime, object, array, currency, email, UUID, etc.
|
|
||||||
- **Deep Usage Analysis**: Scans all node data for variable references in multiple formats:
|
|
||||||
- Template placeholders: `{variableName}`, `{{variableName}}`
|
|
||||||
- JavaScript references: `${variableName}`, `processVariables.variableName`
|
|
||||||
- Direct value assignments and API outputs
|
|
||||||
- **Cross-Node Detection**: Finds variables in API URLs, form mappings, script code, business rules, notifications
|
|
||||||
|
|
||||||
### 2. VariableBrowser.vue - Variable Selection Component
|
|
||||||
|
|
||||||
**Location**: `components/process-flow/VariableBrowser.vue`
|
|
||||||
|
|
||||||
**Purpose**: Used throughout the process builder for variable selection in node configurations
|
|
||||||
|
|
||||||
**Key Features:**
|
|
||||||
- **Grouped Selection**: Variables organized by type with optgroups
|
|
||||||
- **Live Preview**: Shows current variable values in selection dropdown
|
|
||||||
- **Inline Creation**: "+" button to create new variables on-the-fly
|
|
||||||
- **Type Filtering**: Can restrict to specific variable types
|
|
||||||
- **Validation**: Checks for variable existence and naming conflicts
|
|
||||||
- **Rich Type Support**: 20+ variable types including special types (currency, email, UUID, etc.)
|
|
||||||
|
|
||||||
**Integration Points:**
|
|
||||||
- Form node configuration (input/output mappings)
|
|
||||||
- API node configuration (URL parameters, request body)
|
|
||||||
- Script node configuration (input/output variables)
|
|
||||||
- Business rule conditions and actions
|
|
||||||
- Gateway decision logic
|
|
||||||
- Notification recipient and content variables
|
|
||||||
|
|
||||||
### 3. variableStore.js - Legacy Store
|
|
||||||
|
|
||||||
**Location**: `stores/variableStore.js`
|
|
||||||
|
|
||||||
**Note**: This appears to be a legacy store with basic functionality. The actual variable management is handled primarily by the `processBuilder` store.
|
|
||||||
|
|
||||||
**Features:**
|
|
||||||
- **Scope Management**: Global vs process-level variables
|
|
||||||
- **Basic CRUD**: Add, update, delete variables
|
|
||||||
- **Simple Structure**: Arrays for global and process variables
|
|
||||||
- **Node Variables**: Input/output tracking for individual nodes
|
|
||||||
|
|
||||||
## Variable Lifecycle & Data Flow
|
|
||||||
|
|
||||||
### 1. Variable Creation
|
|
||||||
|
|
||||||
- **Primary Source**: VariableManager component for explicit creation
|
|
||||||
- **Secondary Source**: VariableBrowser inline creation during node configuration
|
|
||||||
- **Auto-Creation**: Form nodes can auto-create variables from mappings (`createVariableFromMapping`)
|
|
||||||
|
|
||||||
### 2. Variable Usage Across Node Types
|
|
||||||
|
|
||||||
#### Form Nodes (`FormNodeConfiguration.vue`)
|
|
||||||
- **Input Mappings**: Process variables → Form field pre-filling
|
|
||||||
- **Output Mappings**: Form submission data → Process variables
|
|
||||||
- **Field Conditions**: Process variables control field visibility/behavior
|
|
||||||
- **Assignment Variables**: Dynamic task assignment based on variable values
|
|
||||||
|
|
||||||
**Example Configuration:**
|
|
||||||
```javascript
|
|
||||||
{
|
|
||||||
inputMappings: [
|
|
||||||
{
|
|
||||||
processVariable: "customerName",
|
|
||||||
formField: "name"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
outputMappings: [
|
|
||||||
{
|
|
||||||
formField: "email",
|
|
||||||
processVariable: "customerEmail"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
fieldConditions: [
|
|
||||||
{
|
|
||||||
processVariable: "userType",
|
|
||||||
operator: "equals",
|
|
||||||
value: "premium",
|
|
||||||
targetField: "specialOffers",
|
|
||||||
action: "show"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### API Nodes
|
|
||||||
- **URL Interpolation**: Variables embedded in API endpoints
|
|
||||||
- **Request Body**: Variables in JSON payloads
|
|
||||||
- **Headers**: Dynamic authentication tokens/values
|
|
||||||
- **Output Variables**: API responses stored as process variables
|
|
||||||
- **Error Handling**: Error data captured in designated variables
|
|
||||||
|
|
||||||
**Example Configuration:**
|
|
||||||
```javascript
|
|
||||||
{
|
|
||||||
apiUrl: "https://api.example.com/users/{userId}",
|
|
||||||
requestBody: "{\"name\": \"{customerName}\", \"email\": \"{customerEmail}\"}",
|
|
||||||
headers: "{\"Authorization\": \"Bearer {authToken}\"}",
|
|
||||||
outputVariable: "apiResponse",
|
|
||||||
errorVariable: "apiError"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Script Nodes
|
|
||||||
- **Input Variables**: Pass process variables to script execution
|
|
||||||
- **Output Variables**: Script results stored back to process variables
|
|
||||||
- **Script Code**: Direct variable references in JavaScript code
|
|
||||||
|
|
||||||
**Example Configuration:**
|
|
||||||
```javascript
|
|
||||||
{
|
|
||||||
inputVariables: ["customerAge", "orderAmount"],
|
|
||||||
outputVariables: [
|
|
||||||
{
|
|
||||||
name: "discount",
|
|
||||||
type: "decimal",
|
|
||||||
description: "Calculated discount amount"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
scriptCode: `
|
|
||||||
const discount = customerAge > 65 ? orderAmount * 0.1 : 0;
|
|
||||||
return { discount };
|
|
||||||
`
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Business Rule Nodes
|
|
||||||
- **Conditions**: Variables used in rule evaluation logic
|
|
||||||
- **Actions**: Variables updated based on rule outcomes
|
|
||||||
- **Complex Logic**: AND/OR conditions with multiple variable checks
|
|
||||||
|
|
||||||
#### Gateway/Decision Nodes
|
|
||||||
- **Decision Logic**: Variables determine process flow paths
|
|
||||||
- **Condition Evaluation**: Dynamic routing based on variable values
|
|
||||||
|
|
||||||
### 3. Variable Reference Patterns
|
|
||||||
|
|
||||||
The system supports multiple variable reference formats:
|
|
||||||
|
|
||||||
- **Template**: `{variableName}`, `{{variableName}}`
|
|
||||||
- **JavaScript**: `${variableName}`, `processVariables.variableName`
|
|
||||||
- **JSON**: Direct string/object references
|
|
||||||
- **API Integration**: URL parameters, headers, body content
|
|
||||||
|
|
||||||
### 4. Variable Tracking & Dependencies
|
|
||||||
|
|
||||||
- **Usage Analysis**: Real-time tracking of where variables are used
|
|
||||||
- **Dependency Management**: Prevents deletion of variables in use
|
|
||||||
- **Navigation Support**: Click-to-navigate from variable to usage location
|
|
||||||
- **Reference Counting**: Shows total references per variable
|
|
||||||
|
|
||||||
### 5. Process Execution Context
|
|
||||||
|
|
||||||
Variables serve as the **data backbone** of process execution:
|
|
||||||
|
|
||||||
- **State Management**: Track process state between nodes
|
|
||||||
- **Data Transformation**: Convert and format data as it flows
|
|
||||||
- **Decision Making**: Enable dynamic process paths
|
|
||||||
- **Integration**: Bridge between external systems and process logic
|
|
||||||
- **User Interaction**: Store and recall user input across process steps
|
|
||||||
|
|
||||||
## Variable Types
|
|
||||||
|
|
||||||
### Basic Types
|
|
||||||
- **string**: Text values
|
|
||||||
- **int**: Whole numbers
|
|
||||||
- **decimal**: Decimal numbers
|
|
||||||
- **boolean**: True/False values
|
|
||||||
- **date**: Date values only
|
|
||||||
- **datetime**: Date and time values
|
|
||||||
|
|
||||||
### Complex Types
|
|
||||||
- **object**: JSON objects and complex data structures
|
|
||||||
- **array**: Lists of values
|
|
||||||
- **map**: Key-value pairs
|
|
||||||
|
|
||||||
### Special Types
|
|
||||||
- **currency**: Monetary values
|
|
||||||
- **percentage**: Percentage values
|
|
||||||
- **email**: Email addresses
|
|
||||||
- **url**: URLs
|
|
||||||
- **phone**: Phone numbers
|
|
||||||
- **uuid**: Unique identifiers
|
|
||||||
- **file**: File references
|
|
||||||
- **image**: Image references
|
|
||||||
- **binary**: Binary data
|
|
||||||
|
|
||||||
## Form Integration
|
|
||||||
|
|
||||||
### Form Node Configuration Steps
|
|
||||||
|
|
||||||
The form node configuration provides a comprehensive 4-step process:
|
|
||||||
|
|
||||||
#### Step 1: Form Selection
|
|
||||||
- Select existing forms or create new ones
|
|
||||||
- Integration with FormSelector component
|
|
||||||
|
|
||||||
#### Step 2: Form Data Mapping
|
|
||||||
- **Input Mappings**: Process variables → Form field pre-filling
|
|
||||||
- **Output Mappings**: Form submission data → Process variables
|
|
||||||
- Bidirectional data flow configuration
|
|
||||||
|
|
||||||
#### Step 3: Field Conditions
|
|
||||||
- Configure conditional field behavior based on process variables
|
|
||||||
- Supported operators: equals, not_equals, is_true, is_false, is_empty, etc.
|
|
||||||
- Actions: readonly, hide, required, optional, show, enable
|
|
||||||
|
|
||||||
#### Step 4: Task Assignment
|
|
||||||
- **Public**: Anyone can complete
|
|
||||||
- **Specific Users**: Select individual users
|
|
||||||
- **Role-based**: Assign to user roles
|
|
||||||
- **Dynamic**: Use process variables to determine assignee
|
|
||||||
|
|
||||||
## API Integration
|
|
||||||
|
|
||||||
Variables enable seamless integration with external APIs:
|
|
||||||
|
|
||||||
- **Dynamic URLs**: Embed variables in API endpoints
|
|
||||||
- **Request Customization**: Variables in headers, body, and parameters
|
|
||||||
- **Response Handling**: Store API responses in process variables
|
|
||||||
- **Error Management**: Capture and handle API errors
|
|
||||||
|
|
||||||
## Best Practices
|
|
||||||
|
|
||||||
### Variable Naming
|
|
||||||
- Use descriptive names (e.g., `customerEmail` instead of `email`)
|
|
||||||
- Follow camelCase convention
|
|
||||||
- Avoid spaces and special characters
|
|
||||||
- Use consistent prefixes for related variables
|
|
||||||
|
|
||||||
### Type Selection
|
|
||||||
- Choose the most specific type for better validation
|
|
||||||
- Use `object` for complex data structures
|
|
||||||
- Use `array` for lists of items
|
|
||||||
- Use special types (email, currency) for semantic clarity
|
|
||||||
|
|
||||||
### Scope Management
|
|
||||||
- Prefer process-level variables for data that persists across nodes
|
|
||||||
- Use global variables sparingly for truly global data
|
|
||||||
- Document variable purposes and expected values
|
|
||||||
|
|
||||||
### Dependency Management
|
|
||||||
- Review variable usage before deletion
|
|
||||||
- Use the usage tracking feature to understand dependencies
|
|
||||||
- Plan variable lifecycle aligned with process flow
|
|
||||||
|
|
||||||
## Development Notes
|
|
||||||
|
|
||||||
### Store Integration
|
|
||||||
Variables are primarily managed through the `processBuilder` store:
|
|
||||||
- `processStore.addProcessVariable()`
|
|
||||||
- `processStore.getProcessVariables()`
|
|
||||||
- `processStore.updateProcessVariable()`
|
|
||||||
- `processStore.deleteProcessVariable()`
|
|
||||||
|
|
||||||
### Component Integration
|
|
||||||
- VariableBrowser is used throughout node configuration modals
|
|
||||||
- VariableManager provides comprehensive variable management UI
|
|
||||||
- Real-time validation and error handling
|
|
||||||
|
|
||||||
### Performance Considerations
|
|
||||||
- Variable usage analysis runs on-demand to avoid performance issues
|
|
||||||
- Deep object cloning used to prevent reactivity issues
|
|
||||||
- Efficient grouping and filtering for large variable sets
|
|
||||||
|
|
||||||
## Related Documentation
|
|
||||||
|
|
||||||
- [Form Builder System](./form-builder-system.md)
|
|
||||||
- [Process Definition Schema](./json/process-builder/processDefinition.json)
|
|
||||||
- [Process Variables Example](./json/process-builder/processVariables.json)
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
import { ref, computed, onMounted, watch } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import FormScriptEngine from '~/components/FormScriptEngine.vue';
|
import FormScriptEngine from '~/components/FormScriptEngine.vue';
|
||||||
import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.vue';
|
import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.vue';
|
||||||
@ -36,7 +36,6 @@ const currentForm = ref(null);
|
|||||||
const tasks = ref([]);
|
const tasks = ref([]);
|
||||||
const conditionalLogicScript = ref('');
|
const conditionalLogicScript = ref('');
|
||||||
const combinedScript = ref('');
|
const combinedScript = ref('');
|
||||||
const fieldStates = ref({});
|
|
||||||
|
|
||||||
// Get process ID from route
|
// Get process ID from route
|
||||||
const processId = computed(() => route.params.id);
|
const processId = computed(() => route.params.id);
|
||||||
@ -131,115 +130,24 @@ const startProcessExecution = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Helper: Get all outgoing edges for a node
|
// Helper: Get next node ID by following edges
|
||||||
function getOutgoingEdges(currentNodeId) {
|
|
||||||
return workflowData.value.edges.filter(e => e.source === currentNodeId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper: Get next node ID by following edges (for single-path nodes)
|
|
||||||
function getNextNodeId(currentNodeId) {
|
function getNextNodeId(currentNodeId) {
|
||||||
const edges = getOutgoingEdges(currentNodeId);
|
const edge = workflowData.value.edges.find(e => e.source === currentNodeId);
|
||||||
return edges.length > 0 ? edges[0].target : null;
|
return edge ? edge.target : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper: Check if a node can auto-progress (has single outgoing edge)
|
// Move to next step in workflow (edge-based)
|
||||||
function canAutoProgress(node) {
|
|
||||||
const outgoingEdges = getOutgoingEdges(node.id);
|
|
||||||
return outgoingEdges.length === 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper: Get next node ID for decision/gateway nodes based on conditions
|
|
||||||
function getNextNodeIdForDecision(currentNodeId) {
|
|
||||||
const currentNodeObj = workflowData.value.nodes.find(n => n.id === currentNodeId);
|
|
||||||
const outgoingEdges = getOutgoingEdges(currentNodeId);
|
|
||||||
|
|
||||||
if (!currentNodeObj || !outgoingEdges.length) return null;
|
|
||||||
|
|
||||||
const { conditions = [], defaultPath } = currentNodeObj.data || {};
|
|
||||||
|
|
||||||
// Evaluate conditions
|
|
||||||
for (const condition of conditions) {
|
|
||||||
if (evaluateCondition(condition, processVariables.value)) {
|
|
||||||
// Find the edge that matches this condition's target
|
|
||||||
const edge = outgoingEdges.find(e => e.data?.conditionId === condition.id || e.label === condition.label);
|
|
||||||
if (edge) return edge.target;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If no conditions match, use default path
|
|
||||||
if (defaultPath) {
|
|
||||||
const defaultEdge = outgoingEdges.find(e => e.data?.isDefault || e.label?.toLowerCase().includes('default'));
|
|
||||||
if (defaultEdge) return defaultEdge.target;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback to first edge
|
|
||||||
return outgoingEdges[0]?.target || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper: Evaluate a single condition
|
|
||||||
function evaluateCondition(condition, variables) {
|
|
||||||
const { variable, operator, value } = condition;
|
|
||||||
const variableValue = variables[variable];
|
|
||||||
|
|
||||||
switch (operator) {
|
|
||||||
case 'equals':
|
|
||||||
case '==':
|
|
||||||
return variableValue == value;
|
|
||||||
case 'not_equals':
|
|
||||||
case '!=':
|
|
||||||
return variableValue != value;
|
|
||||||
case 'greater_than':
|
|
||||||
case '>':
|
|
||||||
return Number(variableValue) > Number(value);
|
|
||||||
case 'less_than':
|
|
||||||
case '<':
|
|
||||||
return Number(variableValue) < Number(value);
|
|
||||||
case 'greater_than_or_equal':
|
|
||||||
case '>=':
|
|
||||||
return Number(variableValue) >= Number(value);
|
|
||||||
case 'less_than_or_equal':
|
|
||||||
case '<=':
|
|
||||||
return Number(variableValue) <= Number(value);
|
|
||||||
case 'contains':
|
|
||||||
return String(variableValue).includes(String(value));
|
|
||||||
case 'not_contains':
|
|
||||||
return !String(variableValue).includes(String(value));
|
|
||||||
case 'is_empty':
|
|
||||||
return !variableValue || variableValue === '' || variableValue === null || variableValue === undefined;
|
|
||||||
case 'is_not_empty':
|
|
||||||
return variableValue && variableValue !== '' && variableValue !== null && variableValue !== undefined;
|
|
||||||
default:
|
|
||||||
console.warn('[Workflow] Unknown condition operator:', operator);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Move to a specific node by its ID
|
|
||||||
const moveToSpecificNode = (targetNodeId) => {
|
|
||||||
const nextIndex = workflowData.value.nodes.findIndex(n => n.id === targetNodeId);
|
|
||||||
if (nextIndex !== -1) {
|
|
||||||
currentStep.value = nextIndex;
|
|
||||||
const node = workflowData.value.nodes[currentStep.value];
|
|
||||||
console.log(`[Workflow] Moved to node: ${node.type} - ${node.data?.label || node.label}`);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Move to next step in workflow (only for single-path auto-progressable nodes)
|
|
||||||
const moveToNextStep = () => {
|
const moveToNextStep = () => {
|
||||||
const currentNode = workflowData.value.nodes[currentStep.value];
|
const currentNode = workflowData.value.nodes[currentStep.value];
|
||||||
if (!currentNode) return;
|
if (!currentNode) return;
|
||||||
|
|
||||||
// Only auto-progress if there's exactly one outgoing edge
|
|
||||||
if (!canAutoProgress(currentNode)) {
|
|
||||||
console.log(`[Workflow] Node ${currentNode.id} has multiple paths, waiting for user choice`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextNodeId = getNextNodeId(currentNode.id);
|
const nextNodeId = getNextNodeId(currentNode.id);
|
||||||
if (nextNodeId) {
|
if (nextNodeId) {
|
||||||
moveToSpecificNode(nextNodeId);
|
const nextIndex = workflowData.value.nodes.findIndex(n => n.id === nextNodeId);
|
||||||
|
if (nextIndex !== -1) {
|
||||||
|
currentStep.value = nextIndex;
|
||||||
|
const node = workflowData.value.nodes[currentStep.value];
|
||||||
|
console.log(`[Workflow] Entered node: ${node.type} - ${node.data?.label || node.label}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -247,31 +155,17 @@ const moveToNextStep = () => {
|
|||||||
const handleFormSubmit = async () => {
|
const handleFormSubmit = async () => {
|
||||||
try {
|
try {
|
||||||
stepLoading.value = true;
|
stepLoading.value = true;
|
||||||
|
|
||||||
console.log('[Workflow] Form submitted. Data:', formData.value);
|
console.log('[Workflow] Form submitted. Data:', formData.value);
|
||||||
|
// Save form data to process variables
|
||||||
|
Object.assign(processVariables.value, formData.value);
|
||||||
|
|
||||||
// Apply output mappings if configured
|
// Move to next step
|
||||||
if (currentNode.value.data?.outputMappings?.length > 0) {
|
|
||||||
applyOutputMappings(
|
|
||||||
currentNode.value.data,
|
|
||||||
formData.value,
|
|
||||||
processVariables.value
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// Fallback to current flat assignment behavior
|
|
||||||
Object.assign(processVariables.value, formData.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle assignment variables
|
|
||||||
if (currentNode.value.data?.assignmentVariable) {
|
|
||||||
processVariables.value[currentNode.value.data.assignmentVariable] = {
|
|
||||||
completedBy: 'currentUser', // TODO: Get from auth context
|
|
||||||
completedAt: new Date().toISOString(),
|
|
||||||
formData: { ...formData.value }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
moveToNextStep();
|
moveToNextStep();
|
||||||
|
|
||||||
console.log('[Workflow] After form submit, current node:', currentNode.value);
|
console.log('[Workflow] After form submit, current node:', currentNode.value);
|
||||||
|
|
||||||
|
// If next step is API or script, execute it automatically
|
||||||
if (currentNode.value && ['api', 'script'].includes(currentNode.value.type)) {
|
if (currentNode.value && ['api', 'script'].includes(currentNode.value.type)) {
|
||||||
await executeCurrentStep();
|
await executeCurrentStep();
|
||||||
}
|
}
|
||||||
@ -283,284 +177,49 @@ const handleFormSubmit = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- Utility: Substitute variables in a string ---
|
// Execute current step (for API/script nodes)
|
||||||
function substituteVariables(str, variables) {
|
|
||||||
if (typeof str !== 'string') return str;
|
|
||||||
return str.replace(/\{([a-zA-Z0-9_]+)\}/g, (match, varName) => {
|
|
||||||
const value = variables[varName];
|
|
||||||
if (value === undefined || value === null) return '';
|
|
||||||
if (typeof value === 'object') {
|
|
||||||
return JSON.stringify(value);
|
|
||||||
}
|
|
||||||
return String(value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Variable Mapping Functions ---
|
|
||||||
|
|
||||||
// Apply input mappings to pre-fill form with process variables
|
|
||||||
function applyInputMappings(nodeData, processVars, formData) {
|
|
||||||
const { inputMappings = [] } = nodeData;
|
|
||||||
console.log('[Workflow] Applying input mappings:', inputMappings);
|
|
||||||
|
|
||||||
inputMappings.forEach(mapping => {
|
|
||||||
const { processVariable, formField } = mapping;
|
|
||||||
if (processVars[processVariable] !== undefined) {
|
|
||||||
formData[formField] = processVars[processVariable];
|
|
||||||
console.log(`[Workflow] Mapped ${processVariable} -> ${formField}:`, processVars[processVariable]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply output mappings to save form data to process variables
|
|
||||||
function applyOutputMappings(nodeData, formData, processVars) {
|
|
||||||
const { outputMappings = [] } = nodeData;
|
|
||||||
console.log('[Workflow] Applying output mappings:', outputMappings);
|
|
||||||
|
|
||||||
outputMappings.forEach(mapping => {
|
|
||||||
const { formField, processVariable } = mapping;
|
|
||||||
if (formData[formField] !== undefined) {
|
|
||||||
processVars[processVariable] = formData[formField];
|
|
||||||
console.log(`[Workflow] Mapped ${formField} -> ${processVariable}:`, formData[formField]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply field conditions for dynamic form behavior
|
|
||||||
function applyFieldConditions(nodeData, processVars) {
|
|
||||||
const { fieldConditions = [] } = nodeData;
|
|
||||||
const fieldStates = {};
|
|
||||||
|
|
||||||
fieldConditions.forEach(condition => {
|
|
||||||
const { processVariable, operator, value, targetField, action } = condition;
|
|
||||||
|
|
||||||
if (evaluateCondition({ variable: processVariable, operator, value }, processVars)) {
|
|
||||||
fieldStates[targetField] = {
|
|
||||||
...fieldStates[targetField],
|
|
||||||
[action]: true
|
|
||||||
};
|
|
||||||
console.log(`[Workflow] Field condition applied: ${targetField} -> ${action}`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return fieldStates;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Utility: Build API request from node data ---
|
|
||||||
function buildApiRequest(nodeData, variables) {
|
|
||||||
// 1. URL (with param substitution)
|
|
||||||
let url = substituteVariables(nodeData.apiUrl, variables);
|
|
||||||
|
|
||||||
// 2. Params (for GET, DELETE, etc.)
|
|
||||||
let params = Array.isArray(nodeData.params) ? nodeData.params : [];
|
|
||||||
if (params.length) {
|
|
||||||
const query = params
|
|
||||||
.filter(p => p.key)
|
|
||||||
.map(p => `${encodeURIComponent(substituteVariables(p.key, variables))}=${encodeURIComponent(substituteVariables(p.value, variables))}`)
|
|
||||||
.join('&');
|
|
||||||
if (query) {
|
|
||||||
url += (url.includes('?') ? '&' : '?') + query;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Headers
|
|
||||||
let headers = {};
|
|
||||||
if (Array.isArray(nodeData.headers)) {
|
|
||||||
nodeData.headers.forEach(h => {
|
|
||||||
if (h.key) headers[substituteVariables(h.key, variables)] = substituteVariables(h.value, variables);
|
|
||||||
});
|
|
||||||
} else if (typeof nodeData.headers === 'object') {
|
|
||||||
headers = { ...nodeData.headers };
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. Authorization
|
|
||||||
if (nodeData.authorization && nodeData.authorization.type && nodeData.authorization.type !== 'none') {
|
|
||||||
const auth = nodeData.authorization;
|
|
||||||
if (auth.type === 'bearer' && auth.token) {
|
|
||||||
headers['Authorization'] = `Bearer ${substituteVariables(auth.token, variables)}`;
|
|
||||||
} else if (auth.type === 'basic' && auth.username && auth.password) {
|
|
||||||
const token = btoa(`${substituteVariables(auth.username, variables)}:${substituteVariables(auth.password, variables)}`);
|
|
||||||
headers['Authorization'] = `Basic ${token}`;
|
|
||||||
} else if (auth.type === 'apiKey' && auth.key && auth.value) {
|
|
||||||
if (auth.in === 'header') {
|
|
||||||
headers[substituteVariables(auth.key, variables)] = substituteVariables(auth.value, variables);
|
|
||||||
} else if (auth.in === 'query') {
|
|
||||||
url += (url.includes('?') ? '&' : '?') + `${encodeURIComponent(substituteVariables(auth.key, variables))}=${encodeURIComponent(substituteVariables(auth.value, variables))}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 5. Body
|
|
||||||
let body;
|
|
||||||
if (nodeData.body && nodeData.body.type && nodeData.body.type !== 'none') {
|
|
||||||
if (['form-data', 'x-www-form-urlencoded'].includes(nodeData.body.type)) {
|
|
||||||
const dataArr = Array.isArray(nodeData.body.data) ? nodeData.body.data : [];
|
|
||||||
if (nodeData.body.type === 'form-data') {
|
|
||||||
body = new FormData();
|
|
||||||
dataArr.forEach(item => {
|
|
||||||
if (item.key) body.append(substituteVariables(item.key, variables), substituteVariables(item.value, variables));
|
|
||||||
});
|
|
||||||
// Remove content-type header for FormData (browser will set it)
|
|
||||||
if (headers['Content-Type']) delete headers['Content-Type'];
|
|
||||||
} else {
|
|
||||||
// x-www-form-urlencoded
|
|
||||||
body = dataArr
|
|
||||||
.filter(item => item.key)
|
|
||||||
.map(item => `${encodeURIComponent(substituteVariables(item.key, variables))}=${encodeURIComponent(substituteVariables(item.value, variables))}`)
|
|
||||||
.join('&');
|
|
||||||
headers['Content-Type'] = 'application/x-www-form-urlencoded';
|
|
||||||
}
|
|
||||||
} else if (nodeData.body.type === 'raw') {
|
|
||||||
body = substituteVariables(nodeData.body.data, variables);
|
|
||||||
// Try to detect JSON
|
|
||||||
if (body && body.trim().startsWith('{')) {
|
|
||||||
headers['Content-Type'] = 'application/json';
|
|
||||||
}
|
|
||||||
} else if (nodeData.body.type === 'binary') {
|
|
||||||
// Not supported in workflow execution context
|
|
||||||
body = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { url, headers, body };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update executeCurrentStep for API node
|
|
||||||
const executeCurrentStep = async () => {
|
const executeCurrentStep = async () => {
|
||||||
try {
|
try {
|
||||||
stepLoading.value = true;
|
stepLoading.value = true;
|
||||||
|
|
||||||
console.log('[Workflow] Executing current step:', currentNode.value);
|
console.log('[Workflow] Executing current step:', currentNode.value);
|
||||||
|
|
||||||
if (currentNode.value?.type === 'api') {
|
if (currentNode.value?.type === 'api') {
|
||||||
console.log(`[Workflow] Executing API node: ${currentNode.value.data?.label || currentNode.value.label}`);
|
console.log(`[Workflow] Executing API node: ${currentNode.value.data?.label || currentNode.value.label}`);
|
||||||
const nodeData = currentNode.value.data || {};
|
// Enhanced API node execution
|
||||||
// Use new structure if present
|
const {
|
||||||
if (nodeData.body || nodeData.headers || nodeData.params || nodeData.authorization) {
|
apiUrl,
|
||||||
const { url, headers, body } = buildApiRequest(nodeData, processVariables.value);
|
apiMethod = 'GET',
|
||||||
const apiMethod = nodeData.apiMethod || 'GET';
|
headers = '{}',
|
||||||
const outputVariable = nodeData.outputVariable || 'apiResponse';
|
requestBody = '',
|
||||||
const errorVariable = nodeData.errorVariable || 'apiError';
|
outputVariable = 'apiResponse',
|
||||||
const continueOnError = nodeData.continueOnError || false;
|
errorVariable = 'apiError',
|
||||||
try {
|
continueOnError = false
|
||||||
const response = await $fetch(url, {
|
} = currentNode.value.data || {};
|
||||||
method: apiMethod,
|
try {
|
||||||
headers,
|
const response = await $fetch(apiUrl, {
|
||||||
body: ['GET', 'HEAD'].includes(apiMethod) ? undefined : body,
|
method: apiMethod,
|
||||||
});
|
headers: headers ? JSON.parse(headers) : {},
|
||||||
processVariables.value[outputVariable] = response;
|
body: requestBody ? JSON.parse(requestBody) : undefined,
|
||||||
processVariables.value[errorVariable] = null;
|
});
|
||||||
console.log('[Workflow] API call success. Output variable set:', outputVariable, response);
|
processVariables.value[outputVariable] = response;
|
||||||
if (canAutoProgress(currentNode.value)) {
|
processVariables.value[errorVariable] = null;
|
||||||
moveToNextStep();
|
console.log('[Workflow] API call success. Output variable set:', outputVariable, response);
|
||||||
} else {
|
moveToNextStep();
|
||||||
console.log('[Workflow] API completed, multiple paths available - waiting for user choice');
|
} catch (err) {
|
||||||
}
|
processVariables.value[errorVariable] = err;
|
||||||
} catch (err) {
|
console.error('[Workflow] API call failed:', err);
|
||||||
processVariables.value[errorVariable] = err;
|
if (continueOnError) {
|
||||||
console.error('[Workflow] API call failed:', err);
|
moveToNextStep();
|
||||||
if (continueOnError) {
|
} else {
|
||||||
if (canAutoProgress(currentNode.value)) {
|
error.value = 'API call failed: ' + (err.message || err);
|
||||||
moveToNextStep();
|
|
||||||
} else {
|
|
||||||
console.log('[Workflow] API failed but continuing, multiple paths available - waiting for user choice');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
error.value = 'API call failed: ' + (err.message || err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback: old structure
|
|
||||||
const {
|
|
||||||
apiUrl,
|
|
||||||
apiMethod = 'GET',
|
|
||||||
headers = '{}',
|
|
||||||
requestBody = '',
|
|
||||||
outputVariable = 'apiResponse',
|
|
||||||
errorVariable = 'apiError',
|
|
||||||
continueOnError = false
|
|
||||||
} = nodeData;
|
|
||||||
try {
|
|
||||||
const response = await $fetch(apiUrl, {
|
|
||||||
method: apiMethod,
|
|
||||||
headers: headers ? JSON.parse(headers) : {},
|
|
||||||
body: requestBody ? JSON.parse(requestBody) : undefined,
|
|
||||||
});
|
|
||||||
processVariables.value[outputVariable] = response;
|
|
||||||
processVariables.value[errorVariable] = null;
|
|
||||||
console.log('[Workflow] API call success. Output variable set:', outputVariable, response);
|
|
||||||
if (canAutoProgress(currentNode.value)) {
|
|
||||||
moveToNextStep();
|
|
||||||
} else {
|
|
||||||
console.log('[Workflow] API completed, multiple paths available - waiting for user choice');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
processVariables.value[errorVariable] = err;
|
|
||||||
console.error('[Workflow] API call failed:', err);
|
|
||||||
if (continueOnError) {
|
|
||||||
if (canAutoProgress(currentNode.value)) {
|
|
||||||
moveToNextStep();
|
|
||||||
} else {
|
|
||||||
console.log('[Workflow] API failed but continuing, multiple paths available - waiting for user choice');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
error.value = 'API call failed: ' + (err.message || err);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (currentNode.value?.type === 'script') {
|
} else if (currentNode.value?.type === 'script') {
|
||||||
console.log(`[Workflow] Executing script node: ${currentNode.value.data?.label || currentNode.value.label}`);
|
console.log(`[Workflow] Executing script node: ${currentNode.value.data?.label || currentNode.value.label}`);
|
||||||
// Simulate script execution
|
// Simulate script execution
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
await new Promise(resolve => setTimeout(resolve, 500));
|
||||||
|
moveToNextStep();
|
||||||
// Only auto-progress if there's a single outgoing edge
|
|
||||||
if (canAutoProgress(currentNode.value)) {
|
|
||||||
moveToNextStep();
|
|
||||||
} else {
|
|
||||||
console.log('[Workflow] Script completed, multiple paths available - waiting for user choice');
|
|
||||||
}
|
|
||||||
} else if (currentNode.value?.type === 'html') {
|
|
||||||
console.log(`[Workflow] Processing HTML node: ${currentNode.value.data?.label || currentNode.value.label}`);
|
|
||||||
// HTML nodes are user-interactive, so we don't auto-advance
|
|
||||||
// The user will click a button to continue
|
|
||||||
return;
|
|
||||||
} else if (currentNode.value?.type === 'notification') {
|
|
||||||
console.log(`[Workflow] Sending notification: ${currentNode.value.data?.label || currentNode.value.label}`);
|
|
||||||
// Enhanced notification node execution
|
|
||||||
const {
|
|
||||||
notificationType = 'info',
|
|
||||||
recipients = [],
|
|
||||||
message = '',
|
|
||||||
subject = '',
|
|
||||||
continueOnError = true
|
|
||||||
} = currentNode.value.data || {};
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Simulate notification sending
|
|
||||||
console.log('[Workflow] Notification sent:', { type: notificationType, recipients, message, subject });
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate API call delay
|
|
||||||
|
|
||||||
// Only auto-progress if there's a single outgoing edge
|
|
||||||
if (canAutoProgress(currentNode.value)) {
|
|
||||||
moveToNextStep();
|
|
||||||
} else {
|
|
||||||
console.log('[Workflow] Notification sent, multiple paths available - waiting for user choice');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Workflow] Notification failed:', err);
|
|
||||||
if (continueOnError) {
|
|
||||||
if (canAutoProgress(currentNode.value)) {
|
|
||||||
moveToNextStep();
|
|
||||||
} else {
|
|
||||||
console.log('[Workflow] Notification failed but continuing, multiple paths available - waiting for user choice');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
error.value = 'Notification failed: ' + (err.message || err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (['decision', 'gateway'].includes(currentNode.value?.type)) {
|
|
||||||
console.log(`[Workflow] Processing decision node: ${currentNode.value.data?.label || currentNode.value.label}`);
|
|
||||||
// Decision nodes require user interaction or automatic condition evaluation
|
|
||||||
// We'll handle this in the template section
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
// Add more node types as needed
|
// Add more node types as needed
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@ -579,9 +238,6 @@ const getStepInfo = (node) => {
|
|||||||
'api': { label: 'API Call', icon: 'material-symbols:api', color: 'purple' },
|
'api': { label: 'API Call', icon: 'material-symbols:api', color: 'purple' },
|
||||||
'script': { label: 'Script Execution', icon: 'material-symbols:code', color: 'orange' },
|
'script': { label: 'Script Execution', icon: 'material-symbols:code', color: 'orange' },
|
||||||
'decision': { label: 'Decision Point', icon: 'material-symbols:alt-route', color: 'yellow' },
|
'decision': { label: 'Decision Point', icon: 'material-symbols:alt-route', color: 'yellow' },
|
||||||
'gateway': { label: 'Decision Gateway', icon: 'material-symbols:fork-right', color: 'yellow' },
|
|
||||||
'html': { label: 'HTML Content', icon: 'material-symbols:code-blocks', color: 'indigo' },
|
|
||||||
'notification': { label: 'Notification', icon: 'material-symbols:notifications', color: 'pink' },
|
|
||||||
'end': { label: 'Process Complete', icon: 'material-symbols:check-circle', color: 'green' }
|
'end': { label: 'Process Complete', icon: 'material-symbols:check-circle', color: 'green' }
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -644,42 +300,20 @@ onMounted(() => {
|
|||||||
// Watch for step changes to auto-execute non-form steps or load form data
|
// Watch for step changes to auto-execute non-form steps or load form data
|
||||||
watch(currentStep, async (newStep) => {
|
watch(currentStep, async (newStep) => {
|
||||||
if (currentNode.value) {
|
if (currentNode.value) {
|
||||||
if (['api', 'script', 'notification'].includes(currentNode.value.type)) {
|
if (['api', 'script'].includes(currentNode.value.type)) {
|
||||||
await executeCurrentStep();
|
await executeCurrentStep();
|
||||||
} else if (currentNode.value.type === 'form') {
|
} else if (currentNode.value.type === 'form') {
|
||||||
// Load form data for form nodes
|
// Load form data for form nodes
|
||||||
const formId = currentNode.value.data?.formId;
|
const formId = currentNode.value.data?.formId;
|
||||||
if (formId) {
|
if (formId) {
|
||||||
currentForm.value = await loadFormData(formId);
|
currentForm.value = await loadFormData(formId);
|
||||||
|
|
||||||
// Apply input mappings to pre-fill form
|
|
||||||
if (currentNode.value.data?.inputMappings) {
|
|
||||||
applyInputMappings(
|
|
||||||
currentNode.value.data,
|
|
||||||
processVariables.value,
|
|
||||||
formData.value
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply field conditions
|
|
||||||
if (currentNode.value.data?.fieldConditions) {
|
|
||||||
fieldStates.value = applyFieldConditions(
|
|
||||||
currentNode.value.data,
|
|
||||||
processVariables.value
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update form store with form components and data for ComponentPreview
|
// Update form store with form components and data for ComponentPreview
|
||||||
if (currentForm.value?.formComponents) {
|
if (currentForm.value?.formComponents) {
|
||||||
formStore.formComponents = currentForm.value.formComponents;
|
formStore.formComponents = currentForm.value.formComponents;
|
||||||
formStore.updatePreviewFormData(formData.value);
|
formStore.updatePreviewFormData(formData.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (['decision', 'gateway'].includes(currentNode.value.type)) {
|
|
||||||
// Handle decision nodes
|
|
||||||
await executeDecisionNode();
|
|
||||||
}
|
}
|
||||||
// html nodes are handled in template - no auto-execution needed
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -688,13 +322,6 @@ watch(formData, (newData) => {
|
|||||||
formStore.updatePreviewFormData(newData);
|
formStore.updatePreviewFormData(newData);
|
||||||
}, { deep: true });
|
}, { deep: true });
|
||||||
|
|
||||||
// Watch for process variable changes and re-evaluate field conditions
|
|
||||||
watch(processVariables, (newVars) => {
|
|
||||||
if (currentNode.value?.type === 'form' && currentNode.value.data?.fieldConditions) {
|
|
||||||
fieldStates.value = applyFieldConditions(currentNode.value.data, newVars);
|
|
||||||
}
|
|
||||||
}, { deep: true });
|
|
||||||
|
|
||||||
// Add FormKit form ref
|
// Add FormKit form ref
|
||||||
const formRef = ref(null);
|
const formRef = ref(null);
|
||||||
|
|
||||||
@ -710,55 +337,6 @@ const validateAndSubmit = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle decision node execution (automatic or manual)
|
|
||||||
const executeDecisionNode = async () => {
|
|
||||||
try {
|
|
||||||
stepLoading.value = true;
|
|
||||||
const currentNodeObj = workflowData.value.nodes[currentStep.value];
|
|
||||||
const { executionType = 'automatic' } = currentNodeObj.data || {};
|
|
||||||
|
|
||||||
if (executionType === 'automatic') {
|
|
||||||
// Automatic decision based on conditions
|
|
||||||
const nextNodeId = getNextNodeIdForDecision(currentNodeObj.id);
|
|
||||||
if (nextNodeId) {
|
|
||||||
if (moveToSpecificNode(nextNodeId)) {
|
|
||||||
const node = workflowData.value.nodes[currentStep.value];
|
|
||||||
console.log(`[Workflow] Decision made automatically, moving to: ${node.data?.label || node.label}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Manual decisions are handled in the template with buttons
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Workflow] Error executing decision:', err);
|
|
||||||
error.value = 'Failed to execute decision';
|
|
||||||
} finally {
|
|
||||||
stepLoading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle manual decision choice
|
|
||||||
const makeDecision = (targetNodeId) => {
|
|
||||||
if (moveToSpecificNode(targetNodeId)) {
|
|
||||||
const node = workflowData.value.nodes[currentStep.value];
|
|
||||||
console.log(`[Workflow] Manual decision made, moving to: ${node.data?.label || node.label}`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper: Interpolate process variables in HTML content
|
|
||||||
const interpolateHtmlContent = (htmlContent) => {
|
|
||||||
if (!htmlContent || typeof htmlContent !== 'string') return htmlContent;
|
|
||||||
// Replace {{ processVariables.variableName }} with actual values
|
|
||||||
return htmlContent.replace(/\{\{\s*processVariables\.(\w+)\s*\}\}/g, (match, variableName) => {
|
|
||||||
const value = processVariables.value[variableName];
|
|
||||||
if (value === undefined || value === null) return '';
|
|
||||||
if (typeof value === 'object') {
|
|
||||||
// Pretty print object as JSON, wrapped in <pre> if not already inside <pre>
|
|
||||||
return `<pre style='display:inline;white-space:pre-wrap;'>${JSON.stringify(value, null, 2)}</pre>`;
|
|
||||||
}
|
|
||||||
return String(value);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Compute the workflow path by following edges from start to end
|
// Compute the workflow path by following edges from start to end
|
||||||
function computeWorkflowPath() {
|
function computeWorkflowPath() {
|
||||||
const path = [];
|
const path = [];
|
||||||
@ -793,68 +371,6 @@ const currentStepIndex = computed(() => {
|
|||||||
return workflowPath.value.indexOf(currentNode.value?.id) + 1;
|
return workflowPath.value.indexOf(currentNode.value?.id) + 1;
|
||||||
});
|
});
|
||||||
const totalSteps = computed(() => workflowPath.value.length);
|
const totalSteps = computed(() => workflowPath.value.length);
|
||||||
|
|
||||||
// Computed: Interpolated HTML content for HTML nodes
|
|
||||||
const interpolatedHtmlContent = computed(() => {
|
|
||||||
if (currentNode.value?.type !== 'html') return '';
|
|
||||||
|
|
||||||
const htmlContent = currentNode.value?.data?.htmlCode || currentNode.value?.data?.htmlContent || '';
|
|
||||||
return interpolateHtmlContent(htmlContent);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Computed: CSS styles for HTML nodes
|
|
||||||
const htmlNodeStyles = computed(() => {
|
|
||||||
if (currentNode.value?.type !== 'html') return '';
|
|
||||||
return currentNode.value?.data?.cssCode || '';
|
|
||||||
});
|
|
||||||
|
|
||||||
// CSS injection for HTML nodes
|
|
||||||
let currentStyleElement = null;
|
|
||||||
|
|
||||||
// Function to inject CSS
|
|
||||||
const injectHtmlNodeCSS = (cssCode) => {
|
|
||||||
// Remove previous style element
|
|
||||||
if (currentStyleElement) {
|
|
||||||
currentStyleElement.remove();
|
|
||||||
currentStyleElement = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add new styles if available
|
|
||||||
if (cssCode && cssCode.trim()) {
|
|
||||||
currentStyleElement = document.createElement('style');
|
|
||||||
currentStyleElement.textContent = cssCode;
|
|
||||||
currentStyleElement.setAttribute('data-workflow-html-node', 'true');
|
|
||||||
document.head.appendChild(currentStyleElement);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Watch for HTML node CSS changes and inject styles
|
|
||||||
watch(htmlNodeStyles, (newStyles) => {
|
|
||||||
injectHtmlNodeCSS(newStyles);
|
|
||||||
}, { immediate: true });
|
|
||||||
|
|
||||||
// Cleanup styles on unmount
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (currentStyleElement) {
|
|
||||||
currentStyleElement.remove();
|
|
||||||
currentStyleElement = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Helper: Get next node object for single-path nodes
|
|
||||||
function getNextNodeObject(currentNode) {
|
|
||||||
if (!currentNode || !workflowData.value?.nodes) return null;
|
|
||||||
const edges = getOutgoingEdges(currentNode.id);
|
|
||||||
if (edges.length !== 1) return null;
|
|
||||||
const nextNodeId = edges[0].target;
|
|
||||||
return workflowData.value.nodes.find(n => n.id === nextNodeId) || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper: Get next node label by node ID
|
|
||||||
function getNodeLabel(nodeId) {
|
|
||||||
const node = workflowData.value.nodes.find(n => n.id === nodeId);
|
|
||||||
return node?.data?.label || node?.label || 'Next Step';
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -947,9 +463,6 @@ function getNodeLabel(nodeId) {
|
|||||||
getStepInfo(currentNode).color === 'green' ? 'bg-green-100 text-green-600' :
|
getStepInfo(currentNode).color === 'green' ? 'bg-green-100 text-green-600' :
|
||||||
getStepInfo(currentNode).color === 'purple' ? 'bg-purple-100 text-purple-600' :
|
getStepInfo(currentNode).color === 'purple' ? 'bg-purple-100 text-purple-600' :
|
||||||
getStepInfo(currentNode).color === 'orange' ? 'bg-orange-100 text-orange-600' :
|
getStepInfo(currentNode).color === 'orange' ? 'bg-orange-100 text-orange-600' :
|
||||||
getStepInfo(currentNode).color === 'yellow' ? 'bg-yellow-100 text-yellow-600' :
|
|
||||||
getStepInfo(currentNode).color === 'indigo' ? 'bg-indigo-100 text-indigo-600' :
|
|
||||||
getStepInfo(currentNode).color === 'pink' ? 'bg-pink-100 text-pink-600' :
|
|
||||||
'bg-gray-100 text-gray-600'
|
'bg-gray-100 text-gray-600'
|
||||||
]">
|
]">
|
||||||
<Icon :name="getStepInfo(currentNode).icon" class="w-6 h-6" />
|
<Icon :name="getStepInfo(currentNode).icon" class="w-6 h-6" />
|
||||||
@ -1014,8 +527,7 @@ function getNodeLabel(nodeId) {
|
|||||||
<template v-for="(component, index) in currentForm.formComponents" :key="index">
|
<template v-for="(component, index) in currentForm.formComponents" :key="index">
|
||||||
<ComponentPreview
|
<ComponentPreview
|
||||||
:component="component"
|
:component="component"
|
||||||
:is-preview="false"
|
:is-preview="false"
|
||||||
:field-states="fieldStates"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<div class="flex justify-end pt-6 border-t border-gray-200">
|
<div class="flex justify-end pt-6 border-t border-gray-200">
|
||||||
@ -1061,167 +573,13 @@ function getNodeLabel(nodeId) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- API/Script/Notification Step -->
|
<!-- API/Script Step -->
|
||||||
<div v-else-if="['api', 'script', 'notification'].includes(currentNode.type)" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
<div v-else-if="['api', 'script'].includes(currentNode.type)" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
|
||||||
<!-- Processing State -->
|
<Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-4" />
|
||||||
<div v-if="stepLoading" class="text-center py-8">
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||||||
<Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-4" />
|
{{ currentNode.type === 'api' ? 'Calling API...' : 'Executing Script...' }}
|
||||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
</h3>
|
||||||
{{
|
<p class="text-gray-600">Please wait while we process this step</p>
|
||||||
currentNode.type === 'api' ? 'Calling API...' :
|
|
||||||
currentNode.type === 'script' ? 'Executing Script...' :
|
|
||||||
'Sending Notification...'
|
|
||||||
}}
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-600">Please wait while we process this step</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Completed State with Multiple Paths -->
|
|
||||||
<div v-else-if="!canAutoProgress(currentNode)" class="space-y-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<Icon name="material-symbols:check-circle" class="w-8 h-8 text-green-500 mx-auto mb-4" />
|
|
||||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
|
||||||
{{
|
|
||||||
currentNode.type === 'api' ? 'API Call Complete' :
|
|
||||||
currentNode.type === 'script' ? 'Script Executed' :
|
|
||||||
'Notification Sent'
|
|
||||||
}}
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-600 mb-6">{{ currentNode.data?.label || currentNode.label }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multiple Path Options -->
|
|
||||||
<div class="border-t border-gray-200 pt-4">
|
|
||||||
<h4 class="font-medium text-gray-700 mb-3">Choose your next step:</h4>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<template v-for="edge in getOutgoingEdges(currentNode.id)" :key="edge.id">
|
|
||||||
<RsButton
|
|
||||||
@click="makeDecision(edge.target)"
|
|
||||||
variant="outline"
|
|
||||||
class="justify-between p-3"
|
|
||||||
>
|
|
||||||
<span>Continue to: {{ getNodeLabel(edge.target) }}</span>
|
|
||||||
<Icon name="material-symbols:arrow-right-alt" />
|
|
||||||
</RsButton>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- HTML Content Step -->
|
|
||||||
<div v-else-if="currentNode.type === 'html'" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
||||||
<div class="mb-4">
|
|
||||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
|
||||||
{{ currentNode.data?.title || currentNode.data?.label || 'Content Display' }}
|
|
||||||
</h3>
|
|
||||||
<p v-if="currentNode.data?.description" class="text-gray-600 text-sm">
|
|
||||||
{{ currentNode.data.description }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- HTML Content -->
|
|
||||||
<div class="html-content-container border border-gray-200 rounded-lg p-4 mb-6">
|
|
||||||
<div
|
|
||||||
v-if="interpolatedHtmlContent"
|
|
||||||
v-html="interpolatedHtmlContent"
|
|
||||||
class="prose max-w-none"
|
|
||||||
></div>
|
|
||||||
<div v-else class="text-center text-gray-500 py-8">
|
|
||||||
<Icon name="material-symbols:code-blocks" class="w-12 h-12 mx-auto mb-2" />
|
|
||||||
<p>No HTML content provided</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Continue Options -->
|
|
||||||
<div class="pt-4 border-t border-gray-200">
|
|
||||||
<!-- Single Path - Simple Continue Button -->
|
|
||||||
<div v-if="canAutoProgress(currentNode)" class="flex justify-end">
|
|
||||||
<RsButton
|
|
||||||
@click="moveToNextStep"
|
|
||||||
:disabled="stepLoading"
|
|
||||||
variant="primary"
|
|
||||||
>
|
|
||||||
<Icon v-if="stepLoading" name="material-symbols:progress-activity" class="w-4 h-4 animate-spin mr-2" />
|
|
||||||
<template v-if="!stepLoading">
|
|
||||||
Continue to: {{ getNextNodeObject(currentNode)?.data?.label || getNextNodeObject(currentNode)?.label || 'Next Step' }}
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
Processing...
|
|
||||||
</template>
|
|
||||||
</RsButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Multiple Paths - Show Options -->
|
|
||||||
<div v-else class="space-y-3">
|
|
||||||
<h4 class="font-medium text-gray-700">Choose your next step:</h4>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<template v-for="edge in getOutgoingEdges(currentNode.id)" :key="edge.id">
|
|
||||||
<RsButton
|
|
||||||
@click="makeDecision(edge.target)"
|
|
||||||
variant="outline"
|
|
||||||
class="justify-between p-3"
|
|
||||||
>
|
|
||||||
<span>Continue to: {{ getNodeLabel(edge.target) }}</span>
|
|
||||||
<Icon name="material-symbols:arrow-right-alt" />
|
|
||||||
</RsButton>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Decision/Gateway Step -->
|
|
||||||
<div v-else-if="['decision', 'gateway'].includes(currentNode.type)" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
||||||
<div class="mb-4">
|
|
||||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
|
||||||
{{ currentNode.data?.title || currentNode.data?.label || 'Make a Decision' }}
|
|
||||||
</h3>
|
|
||||||
<p v-if="currentNode.data?.description" class="text-gray-600 text-sm">
|
|
||||||
{{ currentNode.data.description }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Manual Decision Options -->
|
|
||||||
<div v-if="currentNode.data?.executionType === 'manual'" class="space-y-4">
|
|
||||||
<p class="text-gray-700 mb-4">Please choose one of the following options:</p>
|
|
||||||
<div class="grid gap-3">
|
|
||||||
<template v-for="edge in workflowData.edges.filter(e => e.source === currentNode.id)" :key="edge.id">
|
|
||||||
<RsButton
|
|
||||||
@click="makeDecision(edge.target)"
|
|
||||||
variant="outline"
|
|
||||||
class="justify-start p-4 h-auto"
|
|
||||||
>
|
|
||||||
<div class="text-left">
|
|
||||||
<div class="font-medium">{{ edge.label || 'Option' }}</div>
|
|
||||||
<div v-if="edge.data?.description" class="text-sm text-gray-500 mt-1">
|
|
||||||
{{ edge.data.description }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Icon name="material-symbols:arrow-right-alt" class="ml-auto" />
|
|
||||||
</RsButton>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Automatic Decision Processing -->
|
|
||||||
<div v-else class="text-center py-8">
|
|
||||||
<Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-yellow-500 mx-auto mb-4" />
|
|
||||||
<h4 class="text-lg font-medium text-gray-900 mb-2">Evaluating Conditions</h4>
|
|
||||||
<p class="text-gray-600">Please wait while we determine the next step...</p>
|
|
||||||
|
|
||||||
<!-- Show conditions being evaluated -->
|
|
||||||
<div v-if="currentNode.data?.conditions?.length" class="mt-6 text-left">
|
|
||||||
<h5 class="font-medium text-gray-700 mb-3">Conditions:</h5>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div v-for="(condition, index) in currentNode.data.conditions" :key="index"
|
|
||||||
class="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
|
||||||
<Icon name="material-symbols:rule" class="w-4 h-4" />
|
|
||||||
<span>{{ condition.variable }} {{ condition.operator }} {{ condition.value }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Other Step Types -->
|
<!-- Other Step Types -->
|
||||||
@ -1235,46 +593,8 @@ function getNodeLabel(nodeId) {
|
|||||||
</RsButton>
|
</RsButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Variable Mapping Debug (only in development) -->
|
|
||||||
<div v-if="currentNode.type === 'form'" class="bg-gray-100 rounded-lg p-4">
|
|
||||||
<details>
|
|
||||||
<summary class="font-medium text-gray-700 cursor-pointer mb-2">Variable Mapping Debug</summary>
|
|
||||||
<div class="space-y-3 text-xs">
|
|
||||||
<!-- Input Mappings -->
|
|
||||||
<div v-if="currentNode.data?.inputMappings?.length">
|
|
||||||
<p class="font-medium text-gray-700">Input Mappings (Process → Form):</p>
|
|
||||||
<pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(currentNode.data.inputMappings, null, 2) }}</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Output Mappings -->
|
|
||||||
<div v-if="currentNode.data?.outputMappings?.length">
|
|
||||||
<p class="font-medium text-gray-700">Output Mappings (Form → Process):</p>
|
|
||||||
<pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(currentNode.data.outputMappings, null, 2) }}</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Field Conditions -->
|
|
||||||
<div v-if="currentNode.data?.fieldConditions?.length">
|
|
||||||
<p class="font-medium text-gray-700">Field Conditions:</p>
|
|
||||||
<pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(currentNode.data.fieldConditions, null, 2) }}</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Current Field States -->
|
|
||||||
<div v-if="Object.keys(fieldStates).length">
|
|
||||||
<p class="font-medium text-gray-700">Active Field States:</p>
|
|
||||||
<pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(fieldStates, null, 2) }}</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Form Data -->
|
|
||||||
<div v-if="Object.keys(formData).length">
|
|
||||||
<p class="font-medium text-gray-700">Current Form Data:</p>
|
|
||||||
<pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(formData, null, 2) }}</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Process Variables Debug (only in development) -->
|
<!-- Process Variables Debug (only in development) -->
|
||||||
<div v-if="Object.keys(processVariables).length > 0" class="bg-gray-100 rounded-lg p-4 mt-4">
|
<div v-if="Object.keys(processVariables).length > 0" class="bg-gray-100 rounded-lg p-4">
|
||||||
<details>
|
<details>
|
||||||
<summary class="font-medium text-gray-700 cursor-pointer mb-2">Process Variables (Debug)</summary>
|
<summary class="font-medium text-gray-700 cursor-pointer mb-2">Process Variables (Debug)</summary>
|
||||||
<pre class="text-xs text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(processVariables, null, 2) }}</pre>
|
<pre class="text-xs text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(processVariables, null, 2) }}</pre>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user