in dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-sidebar.tsx [33:494]
setup(props, context) {
const variables = reactive({
dataList: [],
universal: [],
cloud: [],
logic: [],
di: [],
dq: [],
ml: [],
other: [],
fav: []
})
const { t } = useI18n()
const handleDagMenu = () => {
getDagMenu().then((res: any) => {
variables.dataList = res.map((item: any) => {
return {
...item,
starHover: false,
type: item.taskType
}
})
variables.universal = variables.dataList.filter(
(item: any) => item.taskCategory === 'Universal'
)
variables.cloud = variables.dataList.filter(
(item: any) => item.taskCategory === 'Cloud'
)
variables.logic = variables.dataList.filter(
(item: any) => item.taskCategory === 'Logic'
)
variables.di = variables.dataList.filter(
(item: any) => item.taskCategory === 'DataIntegration'
)
variables.ml = variables.dataList.filter(
(item: any) => item.taskCategory === 'MachineLearning'
)
variables.other = variables.dataList.filter(
(item: any) => item.taskCategory === 'Other'
)
variables.fav = variables.dataList.filter(
(item: any) => item.collection === true
)
})
}
const handleCollection = (item: any) => {
item.collection
? CancelCollection(item.taskType).then(() => {
handleDagMenu()
})
: Collection(item.taskType).then(() => {
handleDagMenu()
})
item.collection = !item.collection
}
onMounted(() => {
handleDagMenu()
})
return () => (
<div class={styles.sidebar}>
<NCollapse default-expanded-names='1' accordion>
{variables.fav.length > 0 && (
<NCollapseItem
title={t('project.menu.fav')}
name='0'
class='task-cate-fav'
v-slots={{
default: () => {
return variables.fav.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
{variables.universal.length > 0 && (
<NCollapseItem
title={t('project.menu.universal')}
name='1'
class='task-cate-universal'
v-slots={{
default: () => {
return variables.universal.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
{variables.cloud.length > 0 && (
<NCollapseItem
title={t('project.menu.cloud')}
name='2'
class='task-cate-cloud'
v-slots={{
default: () => {
return variables.cloud.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
{variables.logic.length > 0 && (
<NCollapseItem
title={t('project.menu.logic')}
name='3'
class='task-cate-logic'
v-slots={{
default: () => {
return variables.logic.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
{variables.di.length > 0 && (
<NCollapseItem
title={t('project.menu.di')}
name='4'
class='task-cate-di'
v-slots={{
default: () => {
return variables.di.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
{variables.dq.length > 0 && (
<NCollapseItem
title={t('project.menu.dq')}
name='5'
class='task-cate-dq'
v-slots={{
default: () => {
return variables.dq.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
{variables.ml.length > 0 && (
<NCollapseItem
title={t('project.menu.ml')}
name='6'
class='task-cate-ml'
v-slots={{
default: () => {
return variables.ml.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
{variables.other.length > 0 && (
<NCollapseItem
title={t('project.menu.other')}
name='7'
class='task-cate-other'
v-slots={{
default: () => {
return variables.other.map((task: any) => (
<div
class={[styles.draggable, `task-item-${task.type}`]}
draggable='true'
onDragstart={(e) => {
context.emit('dragStart', e, task.type as TaskType)
}}
>
<em
class={[
styles['sidebar-icon'],
styles['icon-' + task.type.toLocaleLowerCase()]
]}
/>
<span>{task.taskType}</span>
<div
class={styles.stars}
onMouseenter={() => {
task.starHover = true
}}
onMouseleave={() => {
task.starHover = false
}}
onClick={() => handleCollection(task)}
>
<NIcon
size='20'
color={
task.collection || task.starHover
? '#288FFF'
: '#ccc'
}
>
{task.collection ? <StarFilled /> : <StarOutlined />}
</NIcon>
</div>
</div>
))
}
}}
></NCollapseItem>
)}
</NCollapse>
</div>
)
}