Skip to content
Snippets Groups Projects
Commit d8c6f02a authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Add a component that let user select between workflows

parent 49cbb832
No related branches found
No related tags found
1 merge request!75Resolve "workflow selection UI"
Pipeline #66825 canceled
<template>
<v-item-group>
<v-container fluid>
<v-row>
<v-col
v-for="workflow in workflows"
:key="workflow.id"
cols="12"
md="4"
>
<v-item v-slot="{ active, toggle }">
<v-card
class="d-flex flex-column"
@click="
toggle($event)
selectWorkflow(workflow)
"
>
<v-toolbar elevation="2">
<v-toolbar-title class="text-h5">
{{ workflow.name }} </v-toolbar-title
><v-spacer></v-spacer>
<v-chip
v-for="tag in workflow.tags"
:key="tag"
color="secondary"
>
{{ tag }}</v-chip
>
</v-toolbar>
<v-card-text color="transparent">
{{ workflow.annotation }}
</v-card-text>
<v-divider></v-divider>
<v-list dense>
<v-subheader>Steps</v-subheader>
<template v-for="step in workflow.steps">
<v-list-item v-if="step.tool_id" :key="step.id" dense>
<v-list-item-content>
<v-list-item-title
><span class="text--disabled">{{ step.id }}. </span>
{{ getToolName(step.tool_id) }}
</v-list-item-title>
</v-list-item-content>
<v-chip x-small>{{ step.tool_version }}</v-chip>
</v-list-item>
</template>
</v-list>
<v-fade-transition>
<v-overlay v-if="active" absolute color="primary" opacity="0.2">
<v-icon x-large color="accent darken-1"
>mdi-check-bold</v-icon
>
</v-overlay>
</v-fade-transition>
</v-card>
</v-item>
</v-col>
</v-row>
</v-container>
</v-item-group>
</template>
<script>
export default {
model: {
prop: 'selectedWorkflow',
event: 'selection',
},
props: {
selectedWorklow: { type: Object, default: () => ({}) },
workflows: { type: Array, default: () => [] },
},
methods: {
getToolName(toolId) {
return toolId.split('/').slice(-2, -1).toString()
},
getActiveColor(isActive) {
return isActive ? 'primary' : 'transparent'
},
selectWorkflow(workflow) {
this.$emit('selection', workflow)
},
},
}
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment