Refactor GatewayConditionManager and VariableManager for Enhanced Variable Handling

- Removed default available variables in GatewayConditionManager, prompting users to add variables before creating conditions.
- Improved error handling in addCondition function to ensure valid variable format.
- Updated VariableManager to include additional fields for variable properties and modified the computed property to return both process and global variables.
- Enhanced the gatewayAvailableVariables computed property in the process builder to include detailed labels for both process and global variables.

components/process-flow/GatewayConditionManager.vue

@@ -8,14 +8,7 @@ const props = defineProps({
   },
   availableVariables: {
     type: Array,
-    default: () => [
+    default: () => []
-      { name: 'amount', label: 'Amount', type: 'number' },
-      { name: 'status', label: 'Status', type: 'string' },
-      { name: 'priority', label: 'Priority', type: 'string' },
-      { name: 'requestType', label: 'Request Type', type: 'string' },
-      { name: 'dueDate', label: 'Due Date', type: 'date' },
-      { name: 'isUrgent', label: 'Is Urgent', type: 'boolean' }
-    ]
   }
 });
 
@@ -83,13 +76,23 @@ const getInputTypeForVarType = (type) => {
 
 // Add new condition
 const addCondition = () => {
+  if (!props.availableVariables || !props.availableVariables.length) {
+    alert('No variables available. Please add a variable before creating a condition.');
+    return;
+  }
+  
   const defaultVar = props.availableVariables[0];
+  if (!defaultVar || !defaultVar.name) {
+    alert('Invalid variable format. Please make sure variables have proper name and type.');
+    return;
+  }
+  
   const newCondition = {
     id: `condition-${Date.now()}`,
     variable: defaultVar.name,
-    operator: getOperatorsForType(defaultVar.type)[0].value,
+    operator: getOperatorsForType(defaultVar.type || 'string')[0].value,
     value: '',
-    valueType: defaultVar.type,
+    valueType: defaultVar.type || 'string',
     output: '', // Output path label (e.g., "Yes" or "No")
   };
   
@@ -126,10 +129,13 @@ const updateCondition = (index, field, value) => {
 const conditionText = (condition) => {
   if (!condition.variable || !condition.operator) return '';
   
-  const variable = props.availableVariables.find(v => v.name === condition.variable);
+  const variable = props.availableVariables?.find(v => v.name === condition.variable);
   const operator = getOperatorsForType(variable?.type || 'string').find(op => op.value === condition.operator);
   
-  return `${variable?.label || condition.variable} ${operator?.label.split(' ')[0] || condition.operator} ${condition.value}`;
+  const variableName = variable?.label || variable?.name || condition.variable || 'Unknown variable';
+  const operatorText = operator?.label?.split(' ')[0] || condition.operator || '=';
+  
+  return `${variableName} ${operatorText} ${condition.value}`;
 };
 </script>
 
@@ -177,7 +183,7 @@ const conditionText = (condition) => {
                   :key="variable.name" 
                   :value="variable.name"
                 >
-                  {{ variable.label }}
+                  {{ variable.label || variable.name || 'Unnamed variable' }}
                 </option>
               </select>
               

components/process-flow/VariableManager.vue

@@ -102,6 +102,7 @@
         class="space-y-4"
       >
         <FormKit
+          name="name"
           v-model="variableForm.name"
           type="text"
           label="Name"
@@ -115,6 +116,7 @@
         />
 
         <FormKit
+          name="type"
           v-model="variableForm.type"
           type="select"
           label="Type"
@@ -134,6 +136,7 @@
         />
 
         <FormKit
+          name="scope"
           v-model="variableForm.scope"
           type="select"
           label="Scope"
@@ -148,6 +151,7 @@
         />
 
         <FormKit
+          name="description"
           v-model="variableForm.description"
           type="textarea"
           label="Description"
@@ -156,6 +160,7 @@
         />
 
         <FormKit
+          name="isRequired"
           v-model="variableForm.isRequired"
           type="checkbox"
           label="Required"
@@ -201,7 +206,12 @@ const variableForm = ref({
 
 // Computed
 const variables = computed(() => {
-  return variableStore.getAllVariables.process;
+  // This was only returning process variables, let's fix it to return both process and global variables
+  const allVars = [
+    ...variableStore.getAllVariables.process,
+    ...variableStore.getAllVariables.global
+  ];
+  return allVars;
 });
 
 // Methods

pages/process-builder/index.vue

@@ -174,11 +174,25 @@ const nodeDefaultPath = computed({
 
 // Computed for gateway available variables
 const gatewayAvailableVariables = computed(() => {
-  return variableStore.getAllVariables.process.map(v => ({
+  const processVars = variableStore.getAllVariables.process.map(v => ({
-    name: v.name,
+    name: v.name || 'unnamed',
-    label: v.name, // or v.description || v.name
+    label: v?.description
-    type: v.type
+      ? `${v.description} (${v.name || 'unnamed'}, process)`
+      : `${v.name || 'unnamed'} (process)` ,
+    type: v.type || 'string',
+    scope: 'process'
   }));
+  const globalVars = variableStore.getAllVariables.global.map(v => ({
+    name: v.name || 'unnamed',
+    label: v?.description
+      ? `${v.description} (${v.name || 'unnamed'}, global)`
+      : `${v.name || 'unnamed'} (global)` ,
+    type: v.type || 'string',
+    scope: 'global'
+  }));
+  const allVars = [...processVars, ...globalVars];
+  console.log('Gateway available variables:', allVars);
+  return allVars;
 });
 
 // Handle node selection
@@ -622,7 +636,7 @@ const onConditionsUpdated = (conditions) => {
               <GatewayConditionManager
                 :conditions="selectedNodeData.data.conditions"
                 @update="onConditionsUpdated"
-                :available-variables="gatewayAvailableVariables"
+                :availableVariables="gatewayAvailableVariables"
               />
             </div>
           </div>