Md Afiq Iskandar
d03eda54c8
- Updated BusinessRuleNodeConfiguration.vue to utilize props for available variables, improving data handling and consistency. - Enhanced VariableManager.vue to group variables by type, providing a clearer organization and improved user experience. - Introduced dynamic UI elements for variable usage indication and current value previews, enhancing interactivity. - Implemented functionality to check variable usage across nodes, ensuring better management and awareness of variable dependencies. - Added computed properties to force reactivity on variable updates, ensuring configuration modals reflect the latest data. - Improved overall code clarity and maintainability through refactoring and enhanced comments.
849 lines
28 KiB
Vue
849 lines
28 KiB
Vue
<template>
|
|
<div class="variable-manager">
|
|
<!-- Header with Add Button -->
|
|
<div class="bg-gray-50 border-b border-gray-200 p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-start">
|
|
<div class="mr-4 text-blue-500 flex-shrink-0 mt-1">
|
|
<Icon name="material-symbols:data-object" class="text-2xl" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-900">Variables</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Define and manage variables to store and pass data within your process
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<RsButton
|
|
@click="
|
|
() => {
|
|
resetForm();
|
|
showAddVariable = true;
|
|
}
|
|
"
|
|
variant="primary"
|
|
size="sm"
|
|
>
|
|
<Icon name="material-symbols:add" class="mr-1" />
|
|
Add Variable
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="px-4 pt-3 pb-2">
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<Icon name="material-symbols:search" class="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
v-model="searchQuery"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
placeholder="Search variables..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variable List -->
|
|
<div class="p-4 overflow-auto flex-grow">
|
|
<!-- Empty State -->
|
|
<div v-if="!variables.length" class="text-center py-10 px-4 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50">
|
|
<Icon
|
|
name="material-symbols:data-object"
|
|
class="w-14 h-14 mx-auto mb-3 text-gray-400"
|
|
/>
|
|
<h4 class="text-base font-medium text-gray-900 mb-1">
|
|
No Variables Added Yet
|
|
</h4>
|
|
<p class="text-sm text-gray-500 mb-4 max-w-md mx-auto">
|
|
Variables allow you to store and manage data in your process flow. Add your first variable to get started.
|
|
</p>
|
|
<RsButton
|
|
@click="
|
|
() => {
|
|
resetForm();
|
|
showAddVariable = true;
|
|
}
|
|
"
|
|
variant="primary"
|
|
size="md"
|
|
>
|
|
<Icon name="material-symbols:add" class="mr-1" />
|
|
Add First Variable
|
|
</RsButton>
|
|
</div>
|
|
|
|
<!-- Variables by Type -->
|
|
<div v-else-if="Object.keys(variablesByType).length" class="space-y-3">
|
|
<div
|
|
v-for="(typeData, type) in variablesByType"
|
|
:key="type"
|
|
class="variable-type-section"
|
|
>
|
|
<!-- Type Header -->
|
|
<div
|
|
class="flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
|
|
@click="toggleTypeSection(type)"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-8 h-8 rounded-lg flex items-center justify-center text-sm font-semibold"
|
|
:class="typeData.colorClass"
|
|
>
|
|
<Icon :name="typeData.icon" class="w-4 h-4" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-gray-900">
|
|
{{ typeData.label }}
|
|
</h3>
|
|
<p class="text-xs text-gray-500">
|
|
{{ typeData.variables.length }} variable{{ typeData.variables.length !== 1 ? 's' : '' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<RsBadge
|
|
:variant="getTypeColor(type)"
|
|
size="sm"
|
|
>
|
|
{{ typeData.variables.length }}
|
|
</RsBadge>
|
|
<Icon
|
|
:name="collapsedSections[type] ? 'material-symbols:keyboard-arrow-right' : 'material-symbols:keyboard-arrow-down'"
|
|
class="w-5 h-5 text-gray-400 transition-transform duration-200"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variables in this type -->
|
|
<div
|
|
v-if="!collapsedSections[type]"
|
|
class="ml-4 space-y-1 border-l-2 border-gray-100 pl-4"
|
|
>
|
|
<div
|
|
v-for="variable in typeData.variables"
|
|
:key="variable.name"
|
|
class="variable-item bg-white border border-gray-200 rounded-lg hover:border-blue-300 hover:shadow-sm transition-all duration-150 group"
|
|
>
|
|
<div class="px-3 py-2.5">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2 min-w-0 flex-1">
|
|
<!-- Variable Name -->
|
|
<h4 class="text-sm font-medium text-gray-900 truncate">{{ variable.name }}</h4>
|
|
|
|
<!-- Show usage indicator -->
|
|
<div v-if="checkVariableUsage(variable.name).isUsed" class="mt-1">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
|
|
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
Used in process
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Current Value Preview -->
|
|
<div v-if="variable.value !== undefined && variable.value !== ''" class="flex-shrink-0">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
|
|
{{ getValuePreview(variable.value, variable.type) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<!-- View Usage Button (only show if variable is used) -->
|
|
<button
|
|
v-if="checkVariableUsage(variable.name).isUsed"
|
|
@click="showVariableUsage(variable)"
|
|
class="p-1 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded transition-colors"
|
|
title="View where this variable is used"
|
|
>
|
|
<Icon name="material-symbols:link" class="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
@click="editVariable(variable)"
|
|
class="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
|
title="Edit variable"
|
|
>
|
|
<Icon name="material-symbols:edit" class="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
@click="deleteVariable(variable)"
|
|
class="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
|
|
title="Delete variable"
|
|
>
|
|
<Icon name="material-symbols:delete" class="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p v-if="variable.description" class="text-xs text-gray-500 mt-1 line-clamp-1">
|
|
{{ variable.description }}
|
|
</p>
|
|
|
|
<!-- Full Current Value Display (expandable) -->
|
|
<div v-if="variable.value !== undefined && variable.value !== '' && expandedValues[variable.name]" class="mt-2">
|
|
<div class="bg-amber-50 rounded-md p-2 border border-amber-100">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-1.5">
|
|
<Icon name="material-symbols:settings" class="w-3 h-3 text-amber-600" />
|
|
<span class="text-xs font-medium text-amber-700 uppercase tracking-wide">Current Value</span>
|
|
</div>
|
|
<button
|
|
@click="expandedValues[variable.name] = false"
|
|
class="text-amber-600 hover:text-amber-800 text-xs"
|
|
>
|
|
<Icon name="material-symbols:close" class="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
<div class="font-mono text-xs text-amber-800 break-all">
|
|
{{ formatValue(variable.value, variable.type) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show full value button -->
|
|
<div v-else-if="variable.value !== undefined && variable.value !== '' && needsExpansion(variable.value, variable.type)" class="mt-1">
|
|
<button
|
|
@click="expandedValues[variable.name] = true"
|
|
class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1"
|
|
>
|
|
<Icon name="material-symbols:visibility" class="w-3 h-3" />
|
|
Show full value
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No search results -->
|
|
<div v-else class="text-center py-8">
|
|
<Icon
|
|
name="material-symbols:search-off"
|
|
class="w-12 h-12 mx-auto mb-3 text-gray-400"
|
|
/>
|
|
<h4 class="text-sm font-medium text-gray-900 mb-1">
|
|
No matching variables found
|
|
</h4>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
Try using different keywords or <a href="#" @click.prevent="searchQuery = ''" class="text-blue-500">clear your search</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add/Edit Variable Modal -->
|
|
<RsModal
|
|
v-model="showAddVariable"
|
|
:title="editingVariable ? 'Edit Variable' : 'Add Variable'"
|
|
size="md"
|
|
:hideFooter="true"
|
|
:overlayClose="false"
|
|
>
|
|
<div class="mb-4 flex items-start" v-if="!editingVariable">
|
|
<div class="mr-3 text-blue-500 flex-shrink-0 mt-1">
|
|
<Icon name="material-symbols:data-object" class="text-xl" />
|
|
</div>
|
|
<p class="text-sm text-gray-600">
|
|
Variables store data that can be used throughout your process flow. They can be updated by tasks, used in conditions,
|
|
or displayed in forms.
|
|
</p>
|
|
</div>
|
|
|
|
<FormKit
|
|
type="form"
|
|
@submit="saveVariable"
|
|
:actions="false"
|
|
class="space-y-4"
|
|
>
|
|
<FormKit
|
|
name="name"
|
|
v-model="variableForm.name"
|
|
type="text"
|
|
label="Variable Name"
|
|
placeholder="Enter variable name (e.g. customerName)"
|
|
validation="required|alpha_numeric|length:3,50"
|
|
:validation-messages="{
|
|
required: 'Variable name is required',
|
|
alpha_numeric:
|
|
'Variable name can only contain letters, numbers, and underscores',
|
|
length: 'Variable name must be between 3 and 50 characters',
|
|
}"
|
|
help="Use a descriptive name without spaces. Example: totalAmount, customerName, orderStatus"
|
|
/>
|
|
|
|
<FormKit
|
|
name="type"
|
|
v-model="variableForm.type"
|
|
type="select"
|
|
label="Data Type"
|
|
:options="variableTypes"
|
|
validation="required"
|
|
:validation-messages="{
|
|
required: 'Variable type is required',
|
|
}"
|
|
help="Select the type of data this variable will store"
|
|
/>
|
|
|
|
<FormKit
|
|
name="defaultValue"
|
|
v-model="variableForm.defaultValue"
|
|
:type="getInputTypeForVariableType(variableForm.type)"
|
|
:label="`Default Value${variableForm.type === 'boolean' ? '' : ' (Optional)'}`"
|
|
:placeholder="getPlaceholderForType(variableForm.type)"
|
|
:options="variableForm.type === 'boolean' ? [
|
|
{ label: 'True', value: true },
|
|
{ label: 'False', value: false }
|
|
] : undefined"
|
|
:help="getHelpTextForType(variableForm.type)"
|
|
/>
|
|
|
|
<FormKit
|
|
name="description"
|
|
v-model="variableForm.description"
|
|
type="textarea"
|
|
label="Description"
|
|
placeholder="Enter a description to help others understand what this variable is used for"
|
|
:rows="2"
|
|
help="A clear description helps others understand the purpose of this variable"
|
|
/>
|
|
|
|
<div class="flex justify-end space-x-2 pt-4 border-t border-gray-200">
|
|
<RsButton type="button" @click="closeModal" variant="tertiary">
|
|
Cancel
|
|
</RsButton>
|
|
<FormKit type="submit" input-class="rs-button rs-button-primary">
|
|
{{ editingVariable ? "Update Variable" : "Add Variable" }}
|
|
</FormKit>
|
|
</div>
|
|
</FormKit>
|
|
</RsModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { useProcessBuilderStore } from "~/stores/processBuilder";
|
|
|
|
const processStore = useProcessBuilderStore();
|
|
|
|
// State
|
|
const showAddVariable = ref(false);
|
|
const editingVariable = ref(null);
|
|
const searchQuery = ref("");
|
|
const collapsedSections = ref({});
|
|
const expandedValues = ref({});
|
|
const variableForm = ref({
|
|
name: "",
|
|
type: "string",
|
|
scope: "global",
|
|
description: "",
|
|
defaultValue: ""
|
|
});
|
|
|
|
// Variable type options with descriptions
|
|
const variableTypes = [
|
|
{ label: 'String - Text values', value: 'string' },
|
|
{ label: 'Int - Whole numbers', value: 'int' },
|
|
{ label: 'Decimal - Decimal numbers', value: 'decimal' },
|
|
{ label: 'Object - Complex data structure', value: 'object' },
|
|
{ label: 'DateTime - Date and time values', value: 'datetime' },
|
|
{ label: 'Date - Date values only', value: 'date' },
|
|
{ label: 'Boolean - True/False values', value: 'boolean' }
|
|
];
|
|
|
|
// Helper functions for default value input
|
|
const getInputTypeForVariableType = (type) => {
|
|
switch (type) {
|
|
case 'int':
|
|
case 'decimal':
|
|
return 'number';
|
|
case 'boolean':
|
|
return 'select';
|
|
case 'date':
|
|
return 'date';
|
|
case 'datetime':
|
|
return 'datetime-local';
|
|
case 'object':
|
|
return 'textarea';
|
|
default:
|
|
return 'text';
|
|
}
|
|
};
|
|
|
|
const getPlaceholderForType = (type) => {
|
|
switch (type) {
|
|
case 'string':
|
|
return 'Enter default text value';
|
|
case 'int':
|
|
return 'Enter default number (e.g. 0, 100)';
|
|
case 'decimal':
|
|
return 'Enter default decimal (e.g. 0.0, 99.99)';
|
|
case 'object':
|
|
return 'Enter default JSON object (e.g. {"key": "value"})';
|
|
case 'date':
|
|
return 'Select default date';
|
|
case 'datetime':
|
|
return 'Select default date and time';
|
|
case 'boolean':
|
|
return 'Select default boolean value';
|
|
default:
|
|
return 'Enter default value';
|
|
}
|
|
};
|
|
|
|
const getHelpTextForType = (type) => {
|
|
switch (type) {
|
|
case 'string':
|
|
return 'Default text that will be used when the variable is first created';
|
|
case 'int':
|
|
return 'Default whole number (no decimals)';
|
|
case 'decimal':
|
|
return 'Default decimal number (with decimal places)';
|
|
case 'object':
|
|
return 'Default JSON object - must be valid JSON format';
|
|
case 'date':
|
|
return 'Default date value for this variable';
|
|
case 'datetime':
|
|
return 'Default date and time value for this variable';
|
|
case 'boolean':
|
|
return 'Default true/false value for this variable';
|
|
default:
|
|
return 'Default value that will be used when the variable is first created';
|
|
}
|
|
};
|
|
|
|
// Computed
|
|
const variables = computed(() => {
|
|
// Get variables from the current process
|
|
return processStore.getProcessVariables();
|
|
});
|
|
|
|
// Filtered variables based on search query
|
|
const filteredVariables = computed(() => {
|
|
if (!searchQuery.value) return variables.value;
|
|
|
|
const query = searchQuery.value.toLowerCase();
|
|
return variables.value.filter(variable =>
|
|
variable.name.toLowerCase().includes(query) ||
|
|
(variable.description && variable.description.toLowerCase().includes(query)) ||
|
|
variable.type.toLowerCase().includes(query)
|
|
);
|
|
});
|
|
|
|
// Group variables by type
|
|
const variablesByType = computed(() => {
|
|
const varsToUse = searchQuery.value ? filteredVariables.value : variables.value;
|
|
const grouped = {};
|
|
|
|
// Define type metadata
|
|
const typeMetadata = {
|
|
string: {
|
|
label: 'Text Variables',
|
|
icon: 'material-symbols:text-fields',
|
|
colorClass: 'bg-blue-100 text-blue-700'
|
|
},
|
|
int: {
|
|
label: 'Integer Numbers',
|
|
icon: 'material-symbols:pin',
|
|
colorClass: 'bg-purple-100 text-purple-700'
|
|
},
|
|
decimal: {
|
|
label: 'Decimal Numbers',
|
|
icon: 'material-symbols:pin',
|
|
colorClass: 'bg-purple-100 text-purple-700'
|
|
},
|
|
boolean: {
|
|
label: 'Boolean Values',
|
|
icon: 'material-symbols:toggle-on',
|
|
colorClass: 'bg-indigo-100 text-indigo-700'
|
|
},
|
|
date: {
|
|
label: 'Dates',
|
|
icon: 'material-symbols:calendar-today',
|
|
colorClass: 'bg-amber-100 text-amber-700'
|
|
},
|
|
datetime: {
|
|
label: 'Date & Time',
|
|
icon: 'material-symbols:schedule',
|
|
colorClass: 'bg-amber-100 text-amber-700'
|
|
},
|
|
object: {
|
|
label: 'Objects & Arrays',
|
|
icon: 'material-symbols:data-object',
|
|
colorClass: 'bg-emerald-100 text-emerald-700'
|
|
}
|
|
};
|
|
|
|
// Group variables by type
|
|
varsToUse.forEach(variable => {
|
|
const type = variable.type || 'string';
|
|
if (!grouped[type]) {
|
|
grouped[type] = {
|
|
variables: [],
|
|
...typeMetadata[type] || {
|
|
label: type.charAt(0).toUpperCase() + type.slice(1),
|
|
icon: 'material-symbols:data-object',
|
|
colorClass: 'bg-gray-100 text-gray-700'
|
|
}
|
|
};
|
|
|
|
// Set all sections to collapsed by default
|
|
if (collapsedSections.value[type] === undefined) {
|
|
collapsedSections.value[type] = true;
|
|
}
|
|
}
|
|
grouped[type].variables.push(variable);
|
|
});
|
|
|
|
// Sort variables within each type
|
|
Object.values(grouped).forEach(typeData => {
|
|
typeData.variables.sort((a, b) => a.name.localeCompare(b.name));
|
|
});
|
|
|
|
return grouped;
|
|
});
|
|
|
|
// Methods
|
|
const toggleTypeSection = (type) => {
|
|
collapsedSections.value[type] = !collapsedSections.value[type];
|
|
};
|
|
|
|
const getValuePreview = (value, type) => {
|
|
const formatted = formatValue(value, type);
|
|
if (formatted.length > 15) {
|
|
return formatted.substring(0, 15) + '...';
|
|
}
|
|
return formatted;
|
|
};
|
|
|
|
const needsExpansion = (value, type) => {
|
|
const formatted = formatValue(value, type);
|
|
return formatted.length > 15;
|
|
};
|
|
|
|
const editVariable = (variable) => {
|
|
editingVariable.value = variable;
|
|
variableForm.value = {
|
|
...variable,
|
|
defaultValue: variable.value || ""
|
|
};
|
|
showAddVariable.value = true;
|
|
};
|
|
|
|
const deleteVariable = (variable) => {
|
|
// Check if the variable is being used in any nodes
|
|
const usageInfo = checkVariableUsage(variable.name);
|
|
|
|
let confirmMessage = `Are you sure you want to delete the variable "${variable.name}"?`;
|
|
|
|
if (usageInfo.isUsed) {
|
|
confirmMessage += `\n\nWARNING: This variable is currently being used in:\n${usageInfo.usageDetails.join('\n')}`;
|
|
confirmMessage += '\n\nDeleting this variable may cause issues in your process. Continue?';
|
|
}
|
|
|
|
if (confirm(confirmMessage)) {
|
|
processStore.deleteProcessVariable(variable.name);
|
|
|
|
if (usageInfo.isUsed) {
|
|
console.warn(`Deleted variable "${variable.name}" that was being used in:`, usageInfo.usageDetails);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Helper function to check where a variable is being used
|
|
const checkVariableUsage = (variableName) => {
|
|
const usageDetails = [];
|
|
let isUsed = false;
|
|
|
|
if (!processStore.currentProcess?.nodes) {
|
|
return { isUsed: false, usageDetails: [] };
|
|
}
|
|
|
|
processStore.currentProcess.nodes.forEach(node => {
|
|
if (!node.data) return;
|
|
|
|
const nodeLabel = node.data.label || `${node.type} node`;
|
|
|
|
switch (node.type) {
|
|
case 'api':
|
|
if (node.data.outputVariable === variableName) {
|
|
usageDetails.push(`- ${nodeLabel}: API Output Variable`);
|
|
isUsed = true;
|
|
}
|
|
if (node.data.errorVariable === variableName) {
|
|
usageDetails.push(`- ${nodeLabel}: API Error Variable`);
|
|
isUsed = true;
|
|
}
|
|
break;
|
|
|
|
case 'script':
|
|
if (node.data.errorVariable === variableName) {
|
|
usageDetails.push(`- ${nodeLabel}: Script Error Variable`);
|
|
isUsed = true;
|
|
}
|
|
if (node.data.outputVariables && Array.isArray(node.data.outputVariables)) {
|
|
node.data.outputVariables.forEach(output => {
|
|
if (output.name === variableName) {
|
|
usageDetails.push(`- ${nodeLabel}: Script Output Variable`);
|
|
isUsed = true;
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'form':
|
|
if (node.data.fieldMappings && Array.isArray(node.data.fieldMappings)) {
|
|
node.data.fieldMappings.forEach(mapping => {
|
|
if (mapping.processVariable === variableName) {
|
|
usageDetails.push(`- ${nodeLabel}: Form Field Mapping`);
|
|
isUsed = true;
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'businessRule':
|
|
if (node.data.conditions && Array.isArray(node.data.conditions)) {
|
|
node.data.conditions.forEach(conditionGroup => {
|
|
if (conditionGroup.conditions && Array.isArray(conditionGroup.conditions)) {
|
|
conditionGroup.conditions.forEach(condition => {
|
|
if (condition.variable === variableName) {
|
|
usageDetails.push(`- ${nodeLabel}: Business Rule Condition`);
|
|
isUsed = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'notification':
|
|
const placeholderPattern = `{${variableName}}`;
|
|
if (node.data.subject && node.data.subject.includes(placeholderPattern)) {
|
|
usageDetails.push(`- ${nodeLabel}: Notification Subject`);
|
|
isUsed = true;
|
|
}
|
|
if (node.data.content && node.data.content.includes(placeholderPattern)) {
|
|
usageDetails.push(`- ${nodeLabel}: Notification Content`);
|
|
isUsed = true;
|
|
}
|
|
break;
|
|
|
|
case 'gateway':
|
|
if (node.data.conditions && Array.isArray(node.data.conditions)) {
|
|
node.data.conditions.forEach(conditionGroup => {
|
|
if (conditionGroup.conditions && Array.isArray(conditionGroup.conditions)) {
|
|
conditionGroup.conditions.forEach(condition => {
|
|
if (condition.variable === variableName) {
|
|
usageDetails.push(`- ${nodeLabel}: Gateway Condition`);
|
|
isUsed = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
|
|
return { isUsed, usageDetails };
|
|
};
|
|
|
|
// Show variable usage details in an alert
|
|
const showVariableUsage = (variable) => {
|
|
const usageInfo = checkVariableUsage(variable.name);
|
|
|
|
if (usageInfo.isUsed) {
|
|
const message = `Variable "${variable.name}" is currently being used in:\n\n${usageInfo.usageDetails.join('\n')}`;
|
|
alert(message);
|
|
} else {
|
|
alert(`Variable "${variable.name}" is not currently being used in any nodes.`);
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
variableForm.value = {
|
|
name: "",
|
|
type: "string",
|
|
scope: "global",
|
|
description: "",
|
|
defaultValue: ""
|
|
};
|
|
editingVariable.value = null;
|
|
};
|
|
|
|
const closeModal = () => {
|
|
showAddVariable.value = false;
|
|
resetForm();
|
|
};
|
|
|
|
const saveVariable = async (formData) => {
|
|
try {
|
|
// Process default value based on type
|
|
let processedDefaultValue = formData.defaultValue;
|
|
|
|
if (formData.type === 'int' && processedDefaultValue !== '') {
|
|
processedDefaultValue = parseInt(processedDefaultValue);
|
|
} else if (formData.type === 'decimal' && processedDefaultValue !== '') {
|
|
processedDefaultValue = parseFloat(processedDefaultValue);
|
|
} else if (formData.type === 'object' && processedDefaultValue !== '') {
|
|
try {
|
|
processedDefaultValue = JSON.parse(processedDefaultValue);
|
|
} catch (e) {
|
|
alert('Invalid JSON format for object type. Please enter valid JSON.');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Create a new variable object
|
|
const newVariable = {
|
|
name: formData.name,
|
|
type: formData.type,
|
|
scope: "global",
|
|
description: formData.description,
|
|
value: processedDefaultValue
|
|
};
|
|
|
|
if (editingVariable.value) {
|
|
// Check if the variable name has changed
|
|
const oldName = editingVariable.value.name;
|
|
const newName = formData.name;
|
|
|
|
if (oldName !== newName) {
|
|
// Variable name has changed - use rename functionality to update all references
|
|
const success = processStore.renameProcessVariable(oldName, newName);
|
|
|
|
if (!success) {
|
|
alert(`Failed to rename variable. A variable named "${newName}" already exists or there was an error.`);
|
|
return;
|
|
}
|
|
|
|
// Additional update for other properties (type, description, value)
|
|
// Since rename only handles the name change and basic data copy
|
|
processStore.updateProcessVariable(newName, {
|
|
type: formData.type,
|
|
description: formData.description,
|
|
value: processedDefaultValue
|
|
});
|
|
|
|
console.log(`Variable "${oldName}" renamed to "${newName}" and all references updated`);
|
|
} else {
|
|
// Only properties changed, not the name
|
|
processStore.updateProcessVariable(editingVariable.value.name, newVariable);
|
|
}
|
|
} else {
|
|
// Add new variable
|
|
processStore.addProcessVariable(newVariable);
|
|
}
|
|
|
|
// Close modal and reset form
|
|
closeModal();
|
|
} catch (error) {
|
|
console.error("Error saving variable:", error);
|
|
alert('Error saving variable. Please check your input and try again.');
|
|
}
|
|
};
|
|
|
|
// Get badge color based on variable type
|
|
const getTypeColor = (type) => {
|
|
switch (type) {
|
|
case 'string': return 'info';
|
|
case 'int':
|
|
case 'decimal': return 'primary';
|
|
case 'object': return 'success';
|
|
case 'datetime':
|
|
case 'date': return 'warning';
|
|
case 'boolean': return 'secondary';
|
|
default: return 'secondary';
|
|
}
|
|
};
|
|
|
|
// Format variable value for display
|
|
const formatValue = (value, type) => {
|
|
if (value === undefined || value === null) return 'null';
|
|
|
|
switch (type) {
|
|
case 'object':
|
|
try {
|
|
return typeof value === 'string' ? value : JSON.stringify(value);
|
|
} catch (e) {
|
|
return String(value);
|
|
}
|
|
case 'boolean':
|
|
return value ? 'true' : 'false';
|
|
default:
|
|
return String(value);
|
|
}
|
|
};
|
|
|
|
// Get icon based on variable type
|
|
const getVariableIcon = (type) => {
|
|
switch (type) {
|
|
case 'string':
|
|
return 'material-symbols:text-fields';
|
|
case 'int':
|
|
case 'decimal':
|
|
return 'material-symbols:pin';
|
|
case 'boolean':
|
|
return 'material-symbols:toggle-on';
|
|
case 'date':
|
|
return 'material-symbols:calendar-today';
|
|
case 'datetime':
|
|
return 'material-symbols:schedule';
|
|
case 'object':
|
|
return 'material-symbols:data-object';
|
|
default:
|
|
return 'material-symbols:data-object';
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.variable-manager {
|
|
@apply h-full flex flex-col;
|
|
}
|
|
|
|
.variable-item {
|
|
@apply transition-all duration-200;
|
|
}
|
|
|
|
.variable-item:hover {
|
|
@apply transform -translate-y-0.5;
|
|
}
|
|
|
|
.line-clamp-1 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Light styling for FormKit form */
|
|
:deep(.formkit-outer) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
:deep(.formkit-label) {
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: #374151;
|
|
}
|
|
|
|
:deep(.formkit-help) {
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
:deep(.formkit-messages) {
|
|
font-size: 0.75rem;
|
|
color: #ef4444;
|
|
margin-top: 0.25rem;
|
|
}
|
|
</style>
|