Md Afiq Iskandar
b8431c1a65
- Migrated custom node definitions from inline to individual `.vue` files for improved maintainability and production compatibility. - Updated `ProcessFlowCanvas.vue` to import new file-based node components and created a `customNodeTypes` object to manage node types. - Removed the deprecated `composables/processFlowNodes.js` and extracted shared styles into `composables/nodeStyles.js`. - Enhanced user experience by ensuring proper rendering and functionality of all node types in the process flow interface.
326 lines
8.0 KiB
Vue
326 lines
8.0 KiB
Vue
<script setup>
|
|
import { Handle, Position } from '@vue-flow/core'
|
|
|
|
// Define props that Vue Flow passes to custom nodes
|
|
const props = defineProps([
|
|
'id', // Node ID
|
|
'type', // Node type
|
|
'label', // Node label
|
|
'selected', // Selection state
|
|
'data' // Custom data object
|
|
])
|
|
|
|
// Computed properties for node display
|
|
const nodeLabel = computed(() => {
|
|
return props.label || (props.data && props.data.label) || 'Notification'
|
|
})
|
|
|
|
const notificationType = computed(() => {
|
|
return props.data?.notificationType || 'info'
|
|
})
|
|
|
|
const notificationTypeIcon = computed(() => {
|
|
const types = {
|
|
info: 'material-symbols:info-outline',
|
|
success: 'material-symbols:check-circle-outline',
|
|
warning: 'material-symbols:warning-outline',
|
|
error: 'material-symbols:error-outline'
|
|
}
|
|
return types[notificationType.value] || types.info
|
|
})
|
|
|
|
const notificationTypeColor = computed(() => {
|
|
const colors = {
|
|
info: 'text-blue-500',
|
|
success: 'text-green-500',
|
|
warning: 'text-yellow-500',
|
|
error: 'text-red-500'
|
|
}
|
|
return colors[notificationType.value] || colors.info
|
|
})
|
|
|
|
const recipientType = computed(() => {
|
|
return props.data?.recipientType || 'user'
|
|
})
|
|
|
|
const recipientLabel = computed(() => {
|
|
const types = {
|
|
user: 'User',
|
|
role: 'Role',
|
|
variable: 'Variable',
|
|
email: 'Email'
|
|
}
|
|
return types[recipientType.value] || 'User'
|
|
})
|
|
|
|
const isConfigured = computed(() => {
|
|
// Check if notification has required fields
|
|
return !!(props.data?.subject && props.data?.message)
|
|
})
|
|
|
|
// Computed for node styling based on colors
|
|
const nodeStyle = computed(() => {
|
|
const backgroundColor = props.data?.backgroundColor || '#f0f9ff'
|
|
const borderColor = props.data?.borderColor || '#0ea5e9'
|
|
const textColor = props.data?.textColor || '#0284c7'
|
|
|
|
return {
|
|
'--node-bg-color': backgroundColor,
|
|
'--node-border-color': borderColor,
|
|
'--node-text-color': textColor,
|
|
backgroundColor: backgroundColor,
|
|
borderColor: borderColor,
|
|
color: textColor
|
|
}
|
|
})
|
|
|
|
// Handle node click event
|
|
const emit = defineEmits(['node-click'])
|
|
const onClick = () => {
|
|
emit('node-click', props.id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['custom-node', 'node-notification', { 'selected': selected }]"
|
|
:style="nodeStyle"
|
|
@click="onClick"
|
|
>
|
|
<!-- Input handles -->
|
|
<Handle
|
|
type="target"
|
|
:position="Position.Top"
|
|
class="handle-notification-input handle-top"
|
|
:id="id + '-top'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<Handle
|
|
type="target"
|
|
:position="Position.Left"
|
|
class="handle-notification-input handle-left"
|
|
:id="id + '-left'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<!-- Output handles -->
|
|
<Handle
|
|
type="source"
|
|
:position="Position.Right"
|
|
class="handle-notification-output handle-right"
|
|
:id="id + '-right'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<Handle
|
|
type="source"
|
|
:position="Position.Bottom"
|
|
class="handle-notification-output handle-bottom"
|
|
:id="id + '-bottom'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<div class="custom-node-content">
|
|
<div class="flex items-center mb-1">
|
|
<div class="custom-node-icon">
|
|
<i :class="`material-icons ${notificationTypeColor}`">notifications</i>
|
|
</div>
|
|
<div class="custom-node-label" :title="nodeLabel">{{ nodeLabel }}</div>
|
|
</div>
|
|
|
|
<div class="node-details">
|
|
<p class="node-description">{{ data?.description || 'Send notification' }}</p>
|
|
<div class="node-rule-detail flex items-center justify-between text-xs mt-1">
|
|
<span class="node-rule-detail-label">Type:</span>
|
|
<span :class="`node-rule-detail-value ml-1 font-medium ${notificationTypeColor}`">
|
|
{{ notificationType.charAt(0).toUpperCase() + notificationType.slice(1) }}
|
|
</span>
|
|
</div>
|
|
<div class="node-rule-detail flex items-center justify-between text-xs mt-1">
|
|
<span class="node-rule-detail-label">Recipient:</span>
|
|
<span class="node-rule-detail-value ml-1 font-medium text-blue-600">
|
|
{{ recipientLabel }}
|
|
</span>
|
|
</div>
|
|
<div class="node-rule-detail flex items-center justify-between text-xs mt-1">
|
|
<span class="node-rule-detail-label">Status:</span>
|
|
<span :class="isConfigured ? 'node-rule-detail-value ml-1 font-medium text-green-600' : 'node-rule-detail-value ml-1 font-medium text-red-600'">
|
|
{{ isConfigured ? 'Configured' : 'Not configured' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Notification node specific styling */
|
|
.node-notification {
|
|
width: 180px;
|
|
background: white;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
min-height: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
border: 1px solid #ddd;
|
|
border-left: 4px solid #0ea5e9;
|
|
position: relative;
|
|
font-size: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.node-notification.selected {
|
|
border-color: #ff6b6b;
|
|
box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
|
|
}
|
|
|
|
.custom-node-content {
|
|
padding: 8px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.custom-node-icon {
|
|
margin-right: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.custom-node-icon .material-icons {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.custom-node-label {
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.node-details {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.node-description {
|
|
margin-bottom: 2px;
|
|
color: #666;
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.node-rule-detail {
|
|
display: flex;
|
|
font-size: 10px;
|
|
color: #666;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.node-rule-detail-label {
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.node-rule-detail-value {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100px;
|
|
}
|
|
|
|
/* Handle styles */
|
|
.handle-top, .handle-bottom, .handle-left, .handle-right {
|
|
width: 12px !important;
|
|
height: 12px !important;
|
|
border-radius: 50% !important;
|
|
background: #fff !important;
|
|
border: 2px solid #666 !important;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
cursor: crosshair;
|
|
z-index: 100 !important;
|
|
position: absolute !important;
|
|
}
|
|
|
|
.handle-top {
|
|
top: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
border-color: #2196F3 !important;
|
|
background: #e3f2fd !important;
|
|
}
|
|
|
|
.handle-bottom {
|
|
bottom: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
border-color: #4CAF50 !important;
|
|
background: #e8f5e9 !important;
|
|
}
|
|
|
|
.handle-left {
|
|
left: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
border-color: #2196F3 !important;
|
|
background: #e3f2fd !important;
|
|
}
|
|
|
|
.handle-right {
|
|
right: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
border-color: #4CAF50 !important;
|
|
background: #e8f5e9 !important;
|
|
}
|
|
|
|
/* Show handles on hover */
|
|
.node-notification:hover .handle-top,
|
|
.node-notification:hover .handle-bottom,
|
|
.node-notification:hover .handle-left,
|
|
.node-notification:hover .handle-right {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Handle hover effects */
|
|
.handle-top:hover {
|
|
transform: translateX(-50%) scale(1.1);
|
|
background: #2196F3 !important;
|
|
border-color: #1565C0 !important;
|
|
}
|
|
|
|
.handle-bottom:hover {
|
|
transform: translateX(-50%) scale(1.1);
|
|
background: #4CAF50 !important;
|
|
border-color: #2E7D32 !important;
|
|
}
|
|
|
|
.handle-left:hover {
|
|
transform: translateY(-50%) scale(1.1);
|
|
background: #2196F3 !important;
|
|
border-color: #1565C0 !important;
|
|
}
|
|
|
|
.handle-right:hover {
|
|
transform: translateY(-50%) scale(1.1);
|
|
background: #4CAF50 !important;
|
|
border-color: #2E7D32 !important;
|
|
}
|
|
</style> |