adding action dropdown

This commit is contained in:
Csaba Tuncsik 2024-10-30 10:46:17 +01:00
parent d7ba206b30
commit 74434e7137
No known key found for this signature in database
2 changed files with 57 additions and 20 deletions

View file

@ -1,21 +1,24 @@
<script setup lang="ts">
import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { useI18n } from '@/composables/useI18n';
import type { INodeUi } from '@/Interface';
defineEmits<{
mouseenter: [event: MouseEvent];
mouseleave: [event: MouseEvent];
click: [event: MouseEvent];
click: [event: MouseEvent, selectedTrigger?: string];
}>();
const props = defineProps<{
waitingForWebhook?: boolean;
executing?: boolean;
disabled?: boolean;
triggerNodes: INodeUi[];
}>();
const i18n = useI18n();
const selectedTrigger = ref<string | undefined>();
const label = computed(() => {
if (!props.executing) {
@ -28,9 +31,25 @@ const label = computed(() => {
return i18n.baseText('nodeView.runButtonText.executingWorkflow');
});
const actions = computed(() => {
return props.triggerNodes.map((triggerNode) => {
return {
id: triggerNode.id,
label: triggerNode.name,
disabled: triggerNode.disabled,
};
});
});
const onActionSelect = (item: string) => {
selectedTrigger.value = item;
};
</script>
<template>
<div :class="$style.btnWrapper">
<div :class="$style.actionWrapper">
<KeyboardShortcutTooltip :label="label" :shortcut="{ metaKey: true, keys: ['↵'] }">
<N8nButton
:loading="executing"
@ -42,7 +61,24 @@ const label = computed(() => {
data-test-id="execute-workflow-button"
@mouseenter="$emit('mouseenter', $event)"
@mouseleave="$emit('mouseleave', $event)"
@click.stop="$emit('click', $event)"
@click.stop="$emit('click', $event, selectedTrigger)"
/>
</KeyboardShortcutTooltip>
<N8nActionDropdown v-if="triggerNodes.length > 1" :items="actions" @select="onActionSelect" />
</div>
</div>
</template>
<style module lang="scss">
.bntWrapper {
display: flex;
justify-content: center;
align-items: center;
}
.actionWrapper {
display: flex;
justify-content: center;
align-items: center;
}
</style>

View file

@ -1006,13 +1006,13 @@ const isClearExecutionButtonVisible = computed(
const workflowExecutionData = computed(() => workflowsStore.workflowExecutionData);
async function onRunWorkflow() {
async function onRunWorkflow(triggerNode?: string) {
trackRunWorkflow();
if (!isExecutionPreview.value && workflowsStore.isWaitingExecution) {
void runWorkflowResolvePending({});
void runWorkflowResolvePending({ triggerNode });
} else {
void runWorkflow({});
void runWorkflow({ triggerNode });
}
}
@ -1621,9 +1621,10 @@ onBeforeUnmount(() => {
:waiting-for-webhook="isExecutionWaitingForWebhook"
:disabled="isExecutionDisabled"
:executing="isWorkflowRunning"
:trigger-nodes="triggerNodes"
@mouseenter="onRunWorkflowButtonMouseEnter"
@mouseleave="onRunWorkflowButtonMouseLeave"
@click="onRunWorkflow"
@click="($event, selectedTrigger) => onRunWorkflow(selectedTrigger)"
/>
<CanvasChatButton v-if="containsChatTriggerNodes" @click="onOpenChat" />
<CanvasStopCurrentExecutionButton