All files / web/src/components/workflow-list NewWorkflowDialog.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { VALIDATION_MESSAGES } from '@/constants'
 
interface Props {
  visible: boolean
}
 
const props = defineProps<Props>()
 
const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()
 
const router = useRouter()
const workflowName = ref('')
 
const dialogVisible = ref(props.visible)
 
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
  if (newVal) {
    workflowName.value = ''
  }
})
 
watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal)
})
 
function handleCreate() {
  if (!workflowName.value?.trim()) {
    ElMessage.error(VALIDATION_MESSAGES.ENTER_WORKFLOW_NAME)
    return
  }
  
  router.push(`/workflow?name=${encodeURIComponent(workflowName.value)}`)
  dialogVisible.value = false
}
 
function handleCancel() {
  dialogVisible.value = false
}
</script>
 
<template>
  <ElDialog 
    v-model="dialogVisible" 
    title="Create New Workflow" 
    width="500px"
    :close-on-click-modal="false"
  >
    <ElForm label-width="80px" @submit.prevent>
      <ElFormItem label="Name" required>
        <ElInput
          v-model="workflowName"
          placeholder="Enter workflow name"
          @keyup.enter="handleCreate"
        />
      </ElFormItem>
    </ElForm>
    
    <template #footer>
      <ElButton @click="handleCancel">Cancel</ElButton>
      <ElButton type="primary" @click="handleCreate">Create</ElButton>
    </template>
  </ElDialog>
</template>