corrad-bp/components/process-flow/ValidationIndicator.vue

<script setup>
import { computed } from 'vue'
import ValidationTooltip from './ValidationTooltip.vue'

const props = defineProps({
  nodeId: {
    type: String,
    required: true
  },
  validationIssues: {
    type: Array,
    default: () => []
  },
  showTooltip: {
    type: Boolean,
    default: true
  }
})

// Computed properties for validation display
const hasIssues = computed(() => props.validationIssues.length > 0)

const validationSeverity = computed(() => {
  if (!hasIssues.value) return null
  
  const hasError = props.validationIssues.some(issue => issue.severity === 'error')
  const hasWarning = props.validationIssues.some(issue => issue.severity === 'warning')
  
  if (hasError) return 'error'
  if (hasWarning) return 'warning'
  return 'info'
})

const validationIcon = computed(() => {
  switch (validationSeverity.value) {
    case 'error': return 'material-symbols:error'
    case 'warning': return 'material-symbols:warning'
    case 'info': return 'material-symbols:info'
    default: return null
  }
})

const validationTooltip = computed(() => {
  if (!hasIssues.value) return null
  
  const issuesByType = {
    error: props.validationIssues.filter(i => i.severity === 'error'),
    warning: props.validationIssues.filter(i => i.severity === 'warning'),
    info: props.validationIssues.filter(i => i.severity === 'info')
  }
  
  const lines = []
  
  if (issuesByType.error.length > 0) {
    lines.push('ERRORS:')
    issuesByType.error.forEach(issue => lines.push(`• ${issue.message}`))
  }
  
  if (issuesByType.warning.length > 0) {
    if (lines.length > 0) lines.push('')
    lines.push('WARNINGS:')
    issuesByType.warning.forEach(issue => lines.push(`• ${issue.message}`))
  }
  
  if (issuesByType.info.length > 0) {
    if (lines.length > 0) lines.push('')
    lines.push('INFO:')
    issuesByType.info.forEach(issue => lines.push(`• ${issue.message}`))
  }
  
  return lines.join('\n')
})

const severityClass = computed(() => {
  return `validation-${validationSeverity.value}`
})

const severityColorClass = computed(() => {
  switch (validationSeverity.value) {
    case 'error': return '!text-red-500'
    case 'warning': return '!text-yellow-500'
    case 'info': return '!text-blue-500'
    default: return ''
  }
})
</script>

<template>
  <div 
    v-if="hasIssues"
    class="validation-indicator"
    :class="severityClass"
  >
    <ValidationTooltip 
      v-if="showTooltip" 
      :content="validationTooltip"
      :severity="validationSeverity"
      position="top"
    >
      <Icon 
        :name="validationIcon"
        :class="severityColorClass"
        class="validation-icon"
      ></Icon>
    </ValidationTooltip>
    
    <!-- Fallback without tooltip -->
    <Icon 
      v-else
      :name="validationIcon"
      :class="severityColorClass"
      class="validation-icon"
    ></Icon>
    
    <!-- Badge with issue count -->
    <span 
      v-if="validationIssues.length > 1"
      class="validation-badge"
      :class="severityClass"
    >
      {{ validationIssues.length }}
    </span>
  </div>
</template>

<style scoped>
.validation-indicator {
  @apply absolute -top-2 -right-2 z-50 flex items-center justify-center;
  @apply w-6 h-6 rounded-full bg-white border-2 shadow-sm;
  pointer-events: auto;
  cursor: help;
}

.validation-indicator.validation-error {
  @apply border-red-500 bg-red-50;
}

.validation-indicator.validation-warning {
  @apply border-yellow-500 bg-yellow-50;
}

.validation-indicator.validation-info {
  @apply border-blue-500 bg-blue-50;
}

.validation-icon {
  @apply text-sm;
}

.validation-badge {
  @apply absolute -top-1 -right-1 w-4 h-4 rounded-full text-xs;
  @apply flex items-center justify-center text-white font-bold;
  @apply bg-red-500;
}

.validation-badge.validation-warning {
  @apply bg-yellow-500;
}

.validation-badge.validation-info {
  @apply bg-blue-500;
}

/* Remove old tooltip styles - now using ValidationTooltip component */
</style>