Md Afiq Iskandar
b4eb3265c2
- Introduced new HTML and Subprocess nodes in ProcessBuilderComponents.vue, allowing users to add custom HTML content and execute subprocesses within the process flow. - Updated ProcessFlowNodes.js to include HtmlNode and SubprocessNode components with appropriate properties and rendering logic. - Enhanced ProcessFlowCanvas.vue to manage the new node types effectively, ensuring proper integration with existing flow functionalities. - Improved index.vue to support configuration modals for HTML and Subprocess nodes, enhancing user interaction and customization options. - Refactored process management logic to accommodate new node types, ensuring seamless integration and consistent user experience across the process builder.
101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import SubprocessNodeConfiguration from './SubprocessNodeConfiguration.vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
nodeData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'update']);
|
|
|
|
const showModal = ref(props.modelValue);
|
|
const localNodeData = ref({});
|
|
|
|
// Sync modal visibility with the modelValue prop
|
|
watch(() => props.modelValue, (value) => {
|
|
showModal.value = value;
|
|
});
|
|
|
|
// Emit updates when the modal's visibility changes
|
|
watch(() => showModal.value, (value) => {
|
|
emit('update:modelValue', value);
|
|
});
|
|
|
|
// Keep a local copy of the node data to avoid direct prop mutation
|
|
watch(() => props.nodeData, (value) => {
|
|
localNodeData.value = JSON.parse(JSON.stringify(value));
|
|
}, { deep: true, immediate: true });
|
|
|
|
// Handle updates from the configuration component
|
|
function handleUpdate(updatedData) {
|
|
localNodeData.value = updatedData;
|
|
}
|
|
|
|
// Save changes and close the modal
|
|
function saveAndClose() {
|
|
emit('update', localNodeData.value);
|
|
closeModal();
|
|
}
|
|
|
|
// Close the modal without saving
|
|
function closeModal() {
|
|
showModal.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<RsModal
|
|
v-model="showModal"
|
|
title="Sub-process Configuration"
|
|
size="5xl"
|
|
:okCallback="saveAndClose"
|
|
okTitle="Save Changes"
|
|
:cancelCallback="closeModal"
|
|
cancelTitle="Cancel"
|
|
>
|
|
<template #body>
|
|
<div class="mb-6">
|
|
<div class="flex items-start">
|
|
<div class="mr-4 text-teal-500 flex-shrink-0 mt-1">
|
|
<Icon name="material-symbols:hub" class="text-2xl" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-1">Configure Sub-process</h3>
|
|
<p class="text-sm text-gray-600">
|
|
Select a process to execute as a sub-process. The main process will pause and wait for the selected sub-process to complete before continuing.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main configuration area -->
|
|
<SubprocessNodeConfiguration
|
|
:nodeData="localNodeData"
|
|
@update="handleUpdate"
|
|
/>
|
|
|
|
<!-- Quick Reference Guide -->
|
|
<div class="mt-6 bg-teal-50 p-4 rounded-md border border-teal-100">
|
|
<h4 class="font-medium text-teal-700 mb-2 flex items-center">
|
|
<Icon name="material-symbols:info-outline" class="mr-1" />
|
|
How Sub-processes Work
|
|
</h4>
|
|
<div class="text-sm text-teal-700">
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>Sub-processes run as independent instances.</li>
|
|
<li>You can map input variables from the parent process to the sub-process.</li>
|
|
<li>Output variables from the sub-process can be mapped back to the parent.</li>
|
|
<li>The parent process will wait until the sub-process reaches an end state.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</RsModal>
|
|
</template> |