diff --git a/components/process-flow/VariableManager.vue b/components/process-flow/VariableManager.vue index b3b8c2e..5b8a1c4 100644 --- a/components/process-flow/VariableManager.vue +++ b/components/process-flow/VariableManager.vue @@ -518,8 +518,7 @@ const variableForm = ref({ // 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: 'Number - Decimal numbers', value: 'number' }, { label: 'Object - Complex data structure', value: 'object' }, { label: 'DateTime - Date and time values', value: 'datetime' }, { label: 'Date - Date values only', value: 'date' }, diff --git a/docs/json/form/manager-approval-customScript.js b/docs/json/form/manager-approval-customScript.js index dd42bb1..66483a4 100644 --- a/docs/json/form/manager-approval-customScript.js +++ b/docs/json/form/manager-approval-customScript.js @@ -14,7 +14,7 @@ const setApprovalDate = () => { const calculateRecommendedAmounts = () => { const totalClaimed = parseFloat(getField("total_cost_display")) || 0; const policyLimit = parseFloat(getField("policy_limit_display")) || 0; - const overBudget = parseFloat(getField("over_budget_amount_display")) || 0; + const overBudget = parseFloat(getField("over_budget_amount")) || 0; if (totalClaimed > 0 && policyLimit > 0) { const percentageOver = ((overBudget / policyLimit) * 100).toFixed(1); @@ -222,7 +222,7 @@ onFieldChange("manager_name", (newValue) => { function waitForFields(fields, callback, maxAttempts = 20) { let attempts = 0; function check() { - const allPresent = fields.every(f => getField(f) !== undefined); + const allPresent = fields.every((f) => getField(f) !== undefined); if (allPresent) { callback(); } else if (attempts < maxAttempts) { @@ -239,13 +239,15 @@ waitForFields( [ "total_cost_display", "policy_limit_display", - "over_budget_amount_display", + "over_budget_amount", // add any other required fields here ], () => { setApprovalDate(); calculateRecommendedAmounts(); - showInfo("Review the claim details above and make your approval decision below."); + showInfo( + "Review the claim details above and make your approval decision below." + ); } ); @@ -271,3 +273,23 @@ onFieldChange("manager_decision", function () { hideField("custom_approved_amount"); } })(); + +// Conditional Logic Script + +// Conditional logic for field: custom_approved_amount +onFieldChange("manager_decision", function () { + if (getField("manager_decision") === "approve_full") { + showField("custom_approved_amount"); + } else { + hideField("custom_approved_amount"); + } +}); + +// Initial evaluation for field: custom_approved_amount +(function () { + if (getField("manager_decision") === "approve_full") { + showField("custom_approved_amount"); + } else { + hideField("custom_approved_amount"); + } +})(); diff --git a/docs/json/form/manager-approval-form.json b/docs/json/form/manager-approval-form.json index 018d51e..c9500af 100644 --- a/docs/json/form/manager-approval-form.json +++ b/docs/json/form/manager-approval-form.json @@ -54,6 +54,7 @@ "type": "text", "label": "Claim Summary", "width": "100%", + "readonly": true, "gridColumn": "span 12", "validation": "", "placeholder": "Claim summary will be populated from process", @@ -73,6 +74,7 @@ "type": "text", "label": "Employee Name", "width": "50%", + "readonly": true, "gridColumn": "span 6", "validation": "", "placeholder": "Employee name", @@ -92,6 +94,7 @@ "type": "text", "label": "Department", "width": "50%", + "readonly": true, "gridColumn": "span 6", "validation": "", "placeholder": "Department", @@ -111,6 +114,7 @@ "type": "text", "label": "Trip Purpose", "width": "50%", + "readonly": true, "gridColumn": "span 6", "validation": "", "placeholder": "Trip purpose", @@ -130,6 +134,7 @@ "type": "text", "label": "Destination", "width": "50%", + "readonly": true, "gridColumn": "span 6", "validation": "", "placeholder": "Destination", @@ -165,9 +170,16 @@ "type": "number", "label": "Total Claimed Amount (RM)", "width": "33.33%", + "readonly": true, "gridColumn": "span 4", "validation": "", - "placeholder": "0.00" + "placeholder": "0.00", + "conditionalLogic": { + "action": "show", + "enabled": false, + "operator": "and", + "conditions": [] + } } }, { @@ -178,22 +190,36 @@ "type": "number", "label": "Policy Limit (RM)", "width": "33.33%", + "readonly": true, "gridColumn": "span 4", "validation": "", - "placeholder": "0.00" + "placeholder": "0.00", + "conditionalLogic": { + "action": "show", + "enabled": false, + "operator": "and", + "conditions": [] + } } }, { "type": "number", "props": { "help": "Amount exceeding policy limits", - "name": "over_budget_amount_display", + "name": "over_budget_amount", "type": "number", "label": "Over Budget Amount (RM)", "width": "33.33%", + "readonly": true, "gridColumn": "span 4", "validation": "", - "placeholder": "0.00" + "placeholder": "0.00", + "conditionalLogic": { + "action": "show", + "enabled": false, + "operator": "and", + "conditions": [] + } } }, { diff --git a/docs/json/process-builder/travel-workflow-process.json b/docs/json/process-builder/travel-workflow-process.json index 8659062..55819ad 100644 --- a/docs/json/process-builder/travel-workflow-process.json +++ b/docs/json/process-builder/travel-workflow-process.json @@ -55,50 +55,6 @@ "sourceHandle": "script-1753000005-right", "targetHandle": "gateway-1753000006-left" }, - { - "id": "gateway-1753000006-form-1753000007-edge", - "data": { "condition": "isOverBudget === true" }, - "type": "custom", - "label": "Requires Approval", - "source": "gateway-1753000006", - "target": "form-1753000007", - "animated": true, - "sourceHandle": "gateway-1753000006-top", - "targetHandle": "form-1753000007-left" - }, - { - "id": "gateway-1753000006-script-1753000008-edge", - "data": { "condition": "isOverBudget === false" }, - "type": "custom", - "label": "Auto Approve", - "source": "gateway-1753000006", - "target": "script-1753000008", - "animated": true, - "sourceHandle": "gateway-1753000006-bottom", - "targetHandle": "script-1753000008-left" - }, - { - "id": "form-1753000007-script-1753000009-edge", - "data": {}, - "type": "custom", - "label": "", - "source": "form-1753000007", - "target": "script-1753000009", - "animated": true, - "sourceHandle": "form-1753000007-right", - "targetHandle": "script-1753000009-left" - }, - { - "id": "script-1753000008-notification-1753000010-edge", - "data": {}, - "type": "custom", - "label": "", - "source": "script-1753000008", - "target": "notification-1753000010", - "animated": true, - "sourceHandle": "script-1753000008-right", - "targetHandle": "notification-1753000010-left" - }, { "id": "script-1753000009-notification-1753000011-edge", "data": {}, @@ -131,21 +87,65 @@ "animated": true, "sourceHandle": "notification-1753000011-bottom", "targetHandle": "end-1753000012-top" + }, + { + "id": "form-1753000007-script-set-approved-amount-1753423747167", + "data": {}, + "type": "custom", + "label": "", + "source": "form-1753000007", + "target": "script-set-approved-amount", + "animated": true, + "sourceHandle": "form-1753000007-right", + "targetHandle": "script-set-approved-amount-left" + }, + { + "id": "script-set-approved-amount-script-1753000009-1753423748408", + "data": {}, + "type": "custom", + "label": "", + "source": "script-set-approved-amount", + "target": "script-1753000009", + "animated": true, + "sourceHandle": "script-set-approved-amount-right", + "targetHandle": "script-1753000009-left" + }, + { + "id": "gateway-1753000006-form-1753000007-1753423756117", + "data": {}, + "type": "custom", + "label": "Requires Approval", + "source": "gateway-1753000006", + "target": "form-1753000007", + "animated": true, + "sourceHandle": "gateway-1753000006-right", + "targetHandle": "form-1753000007-left" + }, + { + "id": "gateway-1753000006-notification-1753000010-1753423759335", + "data": {}, + "type": "custom", + "label": "Auto Approve", + "source": "gateway-1753000006", + "target": "notification-1753000010", + "animated": true, + "sourceHandle": "gateway-1753000006-right", + "targetHandle": "notification-1753000010-left" } ], "nodes": [ { "id": "start-1753000001", - "data": { - "label": "Start Travel Claim", - "description": "Employee initiates travel reimbursement claim", + "data": { + "label": "Start Travel Claim", "shape": "circle", - "backgroundColor": "#dcfce7", - "borderColor": "#10b981" + "borderColor": "#10b981", + "description": "Employee initiates travel reimbursement claim", + "backgroundColor": "#dcfce7" }, "type": "start", "label": "Start Travel Claim", - "position": { "x": 100, "y": 300 } + "position": { "x": 105, "y": 300 } }, { "id": "form-1753000002", @@ -159,7 +159,11 @@ "borderColor": "#9333ea", "description": "Employee fills travel reimbursement claim form", "assignedRoles": [ - { "label": "Employee", "value": "3", "description": "Regular employee role" } + { + "label": "Employee", + "value": "3", + "description": "Regular employee role" + } ], "assignedUsers": [], "inputMappings": [], @@ -174,7 +178,10 @@ { "formField": "return_date", "processVariable": "returnDate" }, { "formField": "travel_type", "processVariable": "travelType" }, { "formField": "transport_cost", "processVariable": "transportCost" }, - { "formField": "accommodation_cost", "processVariable": "accommodationCost" }, + { + "formField": "accommodation_cost", + "processVariable": "accommodationCost" + }, { "formField": "meals_cost", "processVariable": "mealsCost" }, { "formField": "other_cost", "processVariable": "otherCost" }, { "formField": "has_receipts", "processVariable": "hasReceipts" } @@ -186,7 +193,7 @@ }, "type": "form", "label": "Travel Claim Form", - "position": { "x": 400, "y": 270 } + "position": { "x": 405, "y": 270 } }, { "id": "script-1753000003", @@ -198,8 +205,15 @@ "borderColor": "#6b7280", "description": "Validate form data and calculate totals", "inputVariables": [ - "employeeName", "tripPurpose", "destination", "transportCost", - "accommodationCost", "mealsCost", "otherCost", "departureDate", "returnDate" + "employeeName", + "tripPurpose", + "destination", + "transportCost", + "accommodationCost", + "mealsCost", + "otherCost", + "departureDate", + "returnDate" ], "scriptLanguage": "javascript", "backgroundColor": "#f9fafb", @@ -260,7 +274,7 @@ }, "type": "api", "label": "Get Policy Rates", - "position": { "x": 1100, "y": 270 } + "position": { "x": 1095, "y": 270 } }, { "id": "script-1753000005", @@ -271,7 +285,12 @@ "scriptCode": "// Process policy API response\nconst policyResponse = processVariables.policyApiResponse || {};\n\n// Mock policy rates based on travel type (in real system, would come from API)\nlet maxTransport = 0, maxAccommodation = 0, maxMeals = 0, maxOther = 0;\n\nswitch(processVariables.travelType) {\n case 'flight':\n maxTransport = 2000;\n maxAccommodation = 300 * processVariables.tripDuration;\n maxMeals = 150 * processVariables.tripDuration;\n maxOther = 100 * processVariables.tripDuration;\n break;\n case 'train':\n maxTransport = 500;\n maxAccommodation = 250 * processVariables.tripDuration;\n maxMeals = 120 * processVariables.tripDuration;\n maxOther = 80 * processVariables.tripDuration;\n break;\n case 'car':\n maxTransport = 800;\n maxAccommodation = 200 * processVariables.tripDuration;\n maxMeals = 100 * processVariables.tripDuration;\n maxOther = 60 * processVariables.tripDuration;\n break;\n default:\n maxTransport = 300;\n maxAccommodation = 150 * processVariables.tripDuration;\n maxMeals = 80 * processVariables.tripDuration;\n maxOther = 50 * processVariables.tripDuration;\n}\n\n// Calculate allowed amounts\nprocessVariables.allowedTransport = Math.min(processVariables.transportCost, maxTransport);\nprocessVariables.allowedAccommodation = Math.min(processVariables.accommodationCost, maxAccommodation);\nprocessVariables.allowedMeals = Math.min(processVariables.mealsCost, maxMeals);\nprocessVariables.allowedOther = Math.min(processVariables.otherCost, maxOther);\n\n// Calculate total allowed and reimbursement\nprocessVariables.totalAllowed = processVariables.allowedTransport + processVariables.allowedAccommodation + processVariables.allowedMeals + processVariables.allowedOther;\nprocessVariables.reimbursementAmount = processVariables.totalAllowed;\n\n// Check if over budget\nprocessVariables.isOverBudget = processVariables.totalCost > processVariables.totalAllowed;\nprocessVariables.overBudgetAmount = Math.max(0, processVariables.totalCost - processVariables.totalAllowed);\n\n// Create claim summary\nprocessVariables.claimSummary = `Travel Claim - ${processVariables.employeeName} - ${processVariables.tripPurpose} - ${processVariables.destination} - RM${processVariables.reimbursementAmount.toFixed(2)} reimbursement`;\n\n// Set initial approval status\nprocessVariables.approvalStatus = processVariables.isOverBudget ? 'pending_approval' : 'auto_approved';", "borderColor": "#6b7280", "description": "Calculate reimbursement based on policy rates", - "inputVariables": ["policyApiResponse", "totalCost", "travelType", "tripDuration"], + "inputVariables": [ + "policyApiResponse", + "totalCost", + "travelType", + "tripDuration" + ], "scriptLanguage": "javascript", "backgroundColor": "#f9fafb", "outputVariables": [ @@ -309,7 +328,7 @@ }, "type": "script", "label": "Calculate Reimbursement", - "position": { "x": 1450, "y": 270 } + "position": { "x": 1455, "y": 270 } }, { "id": "gateway-1753000006", @@ -358,7 +377,7 @@ }, "type": "gateway", "label": "Budget Check", - "position": { "x": 1800, "y": 270 } + "position": { "x": 1755, "y": 330 } }, { "id": "form-1753000007", @@ -368,71 +387,68 @@ "formId": 3, "formName": "Travel Claim Approval Form", "formUuid": "travel-approval-form-uuid", - "textColor": "#dc2626", - "borderColor": "#ef4444", + "textColor": "#6b21a8", + "borderColor": "#9333ea", "description": "Manager reviews and approves/rejects over-budget travel claim", "assignedRoles": [ - { "label": "Manager", "value": "4", "description": "Department manager role" } + { + "label": "Manager", + "value": "4", + "description": "Department manager role" + } ], "assignedUsers": [], "inputMappings": [ - { "processVariable": "claimSummary", "formField": "claim_summary" }, - { "processVariable": "totalCost", "formField": "total_cost_display" }, - { "processVariable": "overBudgetAmount", "formField": "over_budget_amount_display" }, - { "processVariable": "totalAllowed", "formField": "policy_limit_display" } + { "formField": "claim_summary", "processVariable": "claimSummary" }, + { + "formField": "employee_name_display", + "processVariable": "employeeName" + }, + { + "formField": "department_display", + "processVariable": "department" + }, + { + "formField": "trip_purpose_display", + "processVariable": "tripPurpose" + }, + { + "formField": "destination_display", + "processVariable": "destination" + }, + { "formField": "total_cost_display", "processVariable": "totalCost" }, + { + "formField": "policy_limit_display", + "processVariable": "totalAllowed" + }, + { + "formField": "over_budget_amount", + "processVariable": "overBudgetAmount" + } ], "assignmentType": "roles", "outputMappings": [ - { "formField": "manager_decision", "processVariable": "managerDecision" }, - { "formField": "manager_comments", "processVariable": "managerComments" } + { + "formField": "manager_decision", + "processVariable": "managerDecision" + }, + { + "formField": "manager_comments", + "processVariable": "managerComments" + }, + { + "formField": "custom_approved_amount", + "processVariable": "customApprovedAmount" + } ], - "backgroundColor": "#fef2f2", + "backgroundColor": "#faf5ff", "fieldConditions": [], "assignmentVariable": "", "assignmentVariableType": "user_id" }, "type": "form", "label": "Manager Approval", - "position": { "x": 2150, "y": 100 } - }, - { - "id": "script-1753000008", - "data": { - "label": "Auto Approve & Store", - "shape": "rectangle", - "textColor": "#374151", - "scriptCode": "// Auto-approve claim within budget\nprocessVariables.finalApprovalStatus = 'approved';\nprocessVariables.approvedAmount = processVariables.reimbursementAmount;\nprocessVariables.approvalTimestamp = new Date().toISOString();\nprocessVariables.approvedBy = 'System (Auto-approved)';\nprocessVariables.approvalComments = 'Claim is within policy limits and auto-approved.';\n\n// Create final claim record for storage\nprocessVariables.finalClaimRecord = {\n employeeName: processVariables.employeeName,\n employeeEmail: processVariables.employeeEmail,\n department: processVariables.department,\n tripPurpose: processVariables.tripPurpose,\n destination: processVariables.destination,\n totalClaimed: processVariables.totalCost,\n approvedAmount: processVariables.approvedAmount,\n status: processVariables.finalApprovalStatus,\n submissionDate: processVariables.submissionTimestamp,\n approvalDate: processVariables.approvalTimestamp,\n approvedBy: processVariables.approvedBy\n};\n\n// Mock API call to store claim (in real system, would call actual storage API)\nprocessVariables.claimId = 'CLAIM-' + Date.now();\nprocessVariables.storageResult = 'success';", - "borderColor": "#10b981", - "description": "Auto-approve claim and store in system", - "inputVariables": ["reimbursementAmount", "claimSummary"], - "scriptLanguage": "javascript", - "backgroundColor": "#f0fdf4", - "outputVariables": [ - { - "name": "finalApprovalStatus", - "type": "string", - "description": "Final approval status" - }, - { - "name": "approvedAmount", - "type": "number", - "description": "Final approved amount" - }, - { - "name": "claimId", - "type": "string", - "description": "Generated claim ID" - }, - { - "name": "approvalTimestamp", - "type": "string", - "description": "When claim was approved" - } - ] - }, - "type": "script", - "label": "Auto Approve & Store", - "position": { "x": 2150, "y": 440 } + "position": { "x": 1980, "y": 105 } }, { "id": "script-1753000009", @@ -440,7 +456,7 @@ "label": "Process Manager Decision", "shape": "rectangle", "textColor": "#374151", - "scriptCode": "// Process manager's decision\nprocessVariables.finalApprovalStatus = processVariables.managerDecision === 'approve' ? 'approved' : 'rejected';\nprocessVariables.approvalTimestamp = new Date().toISOString();\nprocessVariables.approvedBy = 'Manager';\nprocessVariables.approvalComments = processVariables.managerComments || '';\n\n// Set approved amount based on decision\nif (processVariables.finalApprovalStatus === 'approved') {\n processVariables.approvedAmount = processVariables.totalCost; // Manager can approve full amount\n} else {\n processVariables.approvedAmount = 0;\n}\n\n// Create final claim record for storage\nprocessVariables.finalClaimRecord = {\n employeeName: processVariables.employeeName,\n employeeEmail: processVariables.employeeEmail,\n department: processVariables.department,\n tripPurpose: processVariables.tripPurpose,\n destination: processVariables.destination,\n totalClaimed: processVariables.totalCost,\n approvedAmount: processVariables.approvedAmount,\n status: processVariables.finalApprovalStatus,\n submissionDate: processVariables.submissionTimestamp,\n approvalDate: processVariables.approvalTimestamp,\n approvedBy: processVariables.approvedBy,\n managerComments: processVariables.approvalComments\n};\n\n// Mock API call to store claim\nprocessVariables.claimId = 'CLAIM-' + Date.now();\nprocessVariables.storageResult = 'success';", + "scriptCode": "// Process manager's decision\nconst decision = processVariables.managerDecision;\nconst customAmount = parseFloat(processVariables.customApprovedAmount) || 0;\nconst policyLimit = parseFloat(processVariables.totalAllowed) || 0;\nif (decision === 'approve_full' && customAmount > 0) {\n processVariables.approvedAmount = customAmount;\n} else if (decision === 'approve_policy') {\n processVariables.approvedAmount = policyLimit;\n} else if (decision === 'reject') {\n processVariables.approvedAmount = 0;\n}\nprocessVariables.finalApprovalStatus = processVariables.managerDecision === 'approve' ? 'approved' : 'rejected';\nprocessVariables.approvalTimestamp = new Date().toISOString();\nprocessVariables.approvedBy = 'Manager';\nprocessVariables.approvalComments = processVariables.managerComments || '';\n\n// Set approved amount based on decision\nif (processVariables.finalApprovalStatus === 'approved') {\n processVariables.approvedAmount = processVariables.totalCost; // Manager can approve full amount\n} else {\n processVariables.approvedAmount = 0;\n}\n\n// Create final claim record for storage\nprocessVariables.finalClaimRecord = {\n employeeName: processVariables.employeeName,\n employeeEmail: processVariables.employeeEmail,\n department: processVariables.department,\n tripPurpose: processVariables.tripPurpose,\n destination: processVariables.destination,\n totalClaimed: processVariables.totalCost,\n approvedAmount: processVariables.approvedAmount,\n status: processVariables.finalApprovalStatus,\n submissionDate: processVariables.submissionTimestamp,\n approvalDate: processVariables.approvalTimestamp,\n approvedBy: processVariables.approvedBy,\n managerComments: processVariables.approvalComments\n};\n\n// Mock API call to store claim\nprocessVariables.claimId = 'CLAIM-' + Date.now();\nprocessVariables.storageResult = 'success';", "borderColor": "#6b7280", "description": "Process manager decision and store final result", "inputVariables": ["managerDecision", "managerComments", "totalCost"], @@ -471,7 +487,7 @@ }, "type": "script", "label": "Process Manager Decision", - "position": { "x": 2500, "y": 100 } + "position": { "x": 2520, "y": 105 } }, { "id": "notification-1753000010", @@ -487,7 +503,7 @@ "recipientRole": "", "recipientType": "email", "recipientUser": "", - "recipientEmail": "{employeeEmail}", + "recipientEmail": "mdafiqiskandar@gmail.com", "recipientGroup": "", "deliveryOptions": { "sms": false, "email": true, "inApp": true }, "richTextMessage": "", @@ -496,7 +512,7 @@ }, "type": "notification", "label": "Auto Approval Notification", - "position": { "x": 2500, "y": 440 } + "position": { "x": 2265, "y": 375 } }, { "id": "notification-1753000011", @@ -507,12 +523,12 @@ "priority": "high", "expiration": { "unit": "hours", "value": 48, "enabled": false }, "description": "Notify employee of manager's decision", - "htmlMessage": "
\n

📋 Travel Claim Decision

\n

Dear {employeeName},

\n

Your manager has reviewed your travel reimbursement claim.

\n \n
\n

Claim Details:

\n \n
\n \n
\n

Manager Comments:

\n

{approvalComments}

\n
\n \n

If approved, your reimbursement will be processed within 3-5 business days.

\n \n

Best regards,
\n Travel Management System

\n
", + "htmlMessage": "
\n

📋 Travel Claim Decision

\n

Dear {employeeName},

\n

Your manager has reviewed your travel reimbursement claim.

\n \n
\n

Claim Details:

\n \n
\n \n
\n

Manager Comments:

\n

{approvalComments}

\n
\n \n

If approved, your reimbursement will be processed within 3-5 business days.

\n \n

Best regards,
\n Travel Management System

\n
", "messageFormat": "html", "recipientRole": "", "recipientType": "email", "recipientUser": "", - "recipientEmail": "{employeeEmail}", + "recipientEmail": "mdafiqiskandar@gmail.com", "recipientGroup": "", "deliveryOptions": { "sms": false, "email": true, "inApp": true }, "richTextMessage": "", @@ -521,25 +537,25 @@ }, "type": "notification", "label": "Manager Decision Notification", - "position": { "x": 2850, "y": 100 } + "position": { "x": 2850, "y": 105 } }, { "id": "end-1753000012", - "data": { - "label": "End", - "description": "Travel claim process completed", + "data": { + "label": "End", "shape": "circle", - "backgroundColor": "#fef3c7", - "borderColor": "#f59e0b" + "borderColor": "#f59e0b", + "description": "Travel claim process completed", + "backgroundColor": "#fef3c7" }, "type": "end", "label": "End", - "position": { "x": 3200, "y": 300 } + "position": { "x": 3195, "y": 300 } } ], "viewport": { - "x": -50, - "y": 50, - "zoom": 0.6 + "x": -1535.387843430428, + "y": 250.2076943977823, + "zoom": 0.8368461998102432 } -} \ No newline at end of file +} diff --git a/docs/json/process-builder/travel-workflow-variables.json b/docs/json/process-builder/travel-workflow-variables.json index 865b34c..f4b76ac 100644 --- a/docs/json/process-builder/travel-workflow-variables.json +++ b/docs/json/process-builder/travel-workflow-variables.json @@ -1,73 +1,10 @@ { - "employeeName": { - "name": "employeeName", + "claimId": { + "name": "claimId", "type": "string", "scope": "global", "value": "", - "description": "Full name of the employee submitting the claim" - }, - "employeeEmail": { - "name": "employeeEmail", - "type": "string", - "scope": "global", - "value": "", - "description": "Email address of the employee for notifications" - }, - "department": { - "name": "department", - "type": "string", - "scope": "global", - "value": "", - "description": "Employee's department name" - }, - "tripPurpose": { - "name": "tripPurpose", - "type": "string", - "scope": "global", - "value": "", - "description": "Purpose or reason for the business trip" - }, - "destination": { - "name": "destination", - "type": "string", - "scope": "global", - "value": "", - "description": "Travel destination city and country" - }, - "departureDate": { - "name": "departureDate", - "type": "string", - "scope": "global", - "value": "", - "description": "Trip departure date in ISO format" - }, - "returnDate": { - "name": "returnDate", - "type": "string", - "scope": "global", - "value": "", - "description": "Trip return date in ISO format" - }, - "travelType": { - "name": "travelType", - "type": "string", - "scope": "global", - "value": "", - "description": "Primary mode of transportation (flight, train, car, bus)" - }, - "transportCost": { - "name": "transportCost", - "type": "number", - "scope": "global", - "value": 0, - "description": "Transportation expenses claimed" - }, - "accommodationCost": { - "name": "accommodationCost", - "type": "number", - "scope": "global", - "value": 0, - "description": "Accommodation expenses claimed" + "description": "Unique identifier generated for the claim" }, "mealsCost": { "name": "mealsCost", @@ -83,13 +20,6 @@ "value": 0, "description": "Other miscellaneous expenses claimed" }, - "hasReceipts": { - "name": "hasReceipts", - "type": "boolean", - "scope": "global", - "value": false, - "description": "Whether employee has all supporting receipts" - }, "totalCost": { "name": "totalCost", "type": "number", @@ -97,61 +27,54 @@ "value": 0, "description": "Total amount claimed (calculated)" }, - "isValidSubmission": { - "name": "isValidSubmission", + "approvedBy": { + "name": "approvedBy", + "type": "string", + "scope": "global", + "value": "", + "description": "Who approved the claim (System/Manager name)" + }, + "department": { + "name": "department", + "type": "string", + "scope": "global", + "value": "", + "description": "Employee's department name" + }, + "returnDate": { + "name": "returnDate", + "type": "string", + "scope": "global", + "value": "", + "description": "Trip return date in ISO format" + }, + "travelType": { + "name": "travelType", + "type": "string", + "scope": "global", + "value": "", + "description": "Primary mode of transportation (flight, train, car, bus)" + }, + "destination": { + "name": "destination", + "type": "string", + "scope": "global", + "value": "", + "description": "Travel destination city and country" + }, + "hasReceipts": { + "name": "hasReceipts", "type": "boolean", "scope": "global", "value": false, - "description": "Whether the form submission passed validation" + "description": "Whether employee has all supporting receipts" }, - "validationError": { - "name": "validationError", + "tripPurpose": { + "name": "tripPurpose", "type": "string", "scope": "global", "value": "", - "description": "Validation error message if submission is invalid" - }, - "tripDuration": { - "name": "tripDuration", - "type": "number", - "scope": "global", - "value": 0, - "description": "Trip duration in days (calculated)" - }, - "submissionTimestamp": { - "name": "submissionTimestamp", - "type": "string", - "scope": "global", - "value": "", - "description": "ISO timestamp when claim was submitted" - }, - "policyApiResponse": { - "name": "policyApiResponse", - "type": "object", - "scope": "global", - "value": null, - "description": "Response from company policy rates API" - }, - "policyApiError": { - "name": "policyApiError", - "type": "object", - "scope": "global", - "value": null, - "description": "Error from policy API if request fails" - }, - "allowedTransport": { - "name": "allowedTransport", - "type": "number", - "scope": "global", - "value": 0, - "description": "Maximum allowed transportation reimbursement per policy" - }, - "allowedAccommodation": { - "name": "allowedAccommodation", - "type": "number", - "scope": "global", - "value": 0, - "description": "Maximum allowed accommodation reimbursement per policy" + "description": "Purpose or reason for the business trip" }, "allowedMeals": { "name": "allowedMeals", @@ -167,19 +90,19 @@ "value": 0, "description": "Maximum allowed other expenses reimbursement per policy" }, - "totalAllowed": { - "name": "totalAllowed", - "type": "number", + "claimSummary": { + "name": "claimSummary", + "type": "string", "scope": "global", - "value": 0, - "description": "Total allowed reimbursement according to company policy" + "value": "", + "description": "Formatted summary string of the travel claim" }, - "reimbursementAmount": { - "name": "reimbursementAmount", - "type": "number", + "employeeName": { + "name": "employeeName", + "type": "string", "scope": "global", - "value": 0, - "description": "Final calculated reimbursement amount" + "value": "", + "description": "Full name of the employee submitting the claim" }, "isOverBudget": { "name": "isOverBudget", @@ -188,19 +111,47 @@ "value": false, "description": "Whether claimed amount exceeds policy limits" }, - "overBudgetAmount": { - "name": "overBudgetAmount", + "totalAllowed": { + "name": "totalAllowed", "type": "number", "scope": "global", "value": 0, - "description": "Amount by which claim exceeds policy limits" + "description": "Total allowed reimbursement according to company policy" }, - "claimSummary": { - "name": "claimSummary", + "tripDuration": { + "name": "tripDuration", + "type": "number", + "scope": "global", + "value": 0, + "description": "Trip duration in days (calculated)" + }, + "departureDate": { + "name": "departureDate", "type": "string", "scope": "global", "value": "", - "description": "Formatted summary string of the travel claim" + "description": "Trip departure date in ISO format" + }, + "employeeEmail": { + "name": "employeeEmail", + "type": "string", + "scope": "global", + "value": "", + "description": "Email address of the employee for notifications" + }, + "storageResult": { + "name": "storageResult", + "type": "string", + "scope": "global", + "value": "", + "description": "Result of storing claim in database (success/error)" + }, + "transportCost": { + "name": "transportCost", + "type": "number", + "scope": "global", + "value": 0, + "description": "Transportation expenses claimed" }, "approvalStatus": { "name": "approvalStatus", @@ -209,12 +160,19 @@ "value": "pending", "description": "Current approval status (pending_approval, auto_approved, etc.)" }, - "managerDecision": { - "name": "managerDecision", - "type": "string", + "approvedAmount": { + "name": "approvedAmount", + "type": "number", "scope": "global", - "value": "", - "description": "Manager's approval decision (approve/reject)" + "value": 0, + "description": "Final approved reimbursement amount" + }, + "policyApiError": { + "name": "policyApiError", + "type": "object", + "scope": "global", + "value": null, + "description": "Error from policy API if request fails" }, "managerComments": { "name": "managerComments", @@ -223,33 +181,26 @@ "value": "", "description": "Manager's comments on the approval decision" }, - "finalApprovalStatus": { - "name": "finalApprovalStatus", + "managerDecision": { + "name": "managerDecision", "type": "string", "scope": "global", "value": "", - "description": "Final approval status after all reviews (approved/rejected)" + "description": "Manager's approval decision (approve/reject)" }, - "approvedAmount": { - "name": "approvedAmount", + "validationError": { + "name": "validationError", + "type": "string", + "scope": "global", + "value": "", + "description": "Validation error message if submission is invalid" + }, + "allowedTransport": { + "name": "allowedTransport", "type": "number", "scope": "global", "value": 0, - "description": "Final approved reimbursement amount" - }, - "approvalTimestamp": { - "name": "approvalTimestamp", - "type": "string", - "scope": "global", - "value": "", - "description": "ISO timestamp when claim was approved/rejected" - }, - "approvedBy": { - "name": "approvedBy", - "type": "string", - "scope": "global", - "value": "", - "description": "Who approved the claim (System/Manager name)" + "description": "Maximum allowed transportation reimbursement per policy" }, "approvalComments": { "name": "approvalComments", @@ -265,18 +216,67 @@ "value": null, "description": "Complete claim record object for storage/archival" }, - "claimId": { - "name": "claimId", - "type": "string", + "overBudgetAmount": { + "name": "overBudgetAmount", + "type": "number", "scope": "global", - "value": "", - "description": "Unique identifier generated for the claim" + "value": 0, + "description": "Amount by which claim exceeds policy limits" }, - "storageResult": { - "name": "storageResult", + "accommodationCost": { + "name": "accommodationCost", + "type": "number", + "scope": "global", + "value": 0, + "description": "Accommodation expenses claimed" + }, + "approvalTimestamp": { + "name": "approvalTimestamp", "type": "string", "scope": "global", "value": "", - "description": "Result of storing claim in database (success/error)" + "description": "ISO timestamp when claim was approved/rejected" + }, + "isValidSubmission": { + "name": "isValidSubmission", + "type": "boolean", + "scope": "global", + "value": false, + "description": "Whether the form submission passed validation" + }, + "policyApiResponse": { + "name": "policyApiResponse", + "type": "object", + "scope": "global", + "value": null, + "description": "Response from company policy rates API" + }, + "finalApprovalStatus": { + "name": "finalApprovalStatus", + "type": "string", + "scope": "global", + "value": "", + "description": "Final approval status after all reviews (approved/rejected)" + }, + "reimbursementAmount": { + "name": "reimbursementAmount", + "type": "number", + "scope": "global", + "value": 0, + "description": "Final calculated reimbursement amount" + }, + "submissionTimestamp": { + "name": "submissionTimestamp", + "type": "string", + "scope": "global", + "value": "", + "description": "ISO timestamp when claim was submitted" + }, + "allowedAccommodation": { + "name": "allowedAccommodation", + "type": "number", + "scope": "global", + "value": 0, + "description": "Maximum allowed accommodation reimbursement per policy" } -} \ No newline at end of file +} diff --git a/pages/workflow/[id].vue b/pages/workflow/[id].vue index e211862..51bb5a7 100644 --- a/pages/workflow/[id].vue +++ b/pages/workflow/[id].vue @@ -901,45 +901,48 @@ onMounted(() => { // Watch for step changes to auto-execute non-form steps or load form data watch(currentStep, async (newStep) => { if (currentNode.value) { - if (['api', 'script', 'notification'].includes(currentNode.value.type)) { - await executeCurrentStep(); - } else if (currentNode.value.type === 'form') { - // Load form data for form nodes - const formId = currentNode.value.data?.formId; - if (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 - // Clear previous form state to prevent stale/leaked fields - formStore.formComponents = []; + stepLoading.value = true; // Start loading for any node + try { + if (["api", "script", "notification"].includes(currentNode.value.type)) { + await executeCurrentStep(); + } else if (currentNode.value.type === "form") { + // Reset all form-related state to prevent flush errors + formData.value = {}; + fieldStates.value = {}; formStore.updatePreviewFormData({}); - if (currentForm.value?.formComponents) { - formStore.formComponents = currentForm.value.formComponents; - formStore.updatePreviewFormData(formData.value); + formStore.formComponents = []; + // Load form data for form nodes + const formId = currentNode.value.data?.formId; + if (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 + if (currentForm.value?.formComponents) { + formStore.formComponents = currentForm.value.formComponents; + formStore.updatePreviewFormData(formData.value); + } } + } else if (["decision", "gateway"].includes(currentNode.value.type)) { + await executeDecisionNode(); } - } else if (['decision', 'gateway'].includes(currentNode.value.type)) { - // Handle decision nodes - await executeDecisionNode(); + // html nodes are handled in template - no auto-execution needed + } finally { + stepLoading.value = false; // End loading after all async work } - // html nodes are handled in template - no auto-execution needed } }); @@ -1369,10 +1372,10 @@ function getConditionGroupResult(conditionGroup, variables) { :actions="false" :incomplete-message="false" validation-visibility="submit" - :key="currentNode.value?.id" + :key="currentForm?.formId || currentNode.value?.id" >
-