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"> <script setup lang="ts">
import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue'; import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from '@/composables/useI18n'; import { useI18n } from '@/composables/useI18n';
import type { INodeUi } from '@/Interface';
defineEmits<{ defineEmits<{
mouseenter: [event: MouseEvent]; mouseenter: [event: MouseEvent];
mouseleave: [event: MouseEvent]; mouseleave: [event: MouseEvent];
click: [event: MouseEvent]; click: [event: MouseEvent, selectedTrigger?: string];
}>(); }>();
const props = defineProps<{ const props = defineProps<{
waitingForWebhook?: boolean; waitingForWebhook?: boolean;
executing?: boolean; executing?: boolean;
disabled?: boolean; disabled?: boolean;
triggerNodes: INodeUi[];
}>(); }>();
const i18n = useI18n(); const i18n = useI18n();
const selectedTrigger = ref<string | undefined>();
const label = computed(() => { const label = computed(() => {
if (!props.executing) { if (!props.executing) {
@ -28,21 +31,54 @@ const label = computed(() => {
return i18n.baseText('nodeView.runButtonText.executingWorkflow'); 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> </script>
<template> <template>
<KeyboardShortcutTooltip :label="label" :shortcut="{ metaKey: true, keys: ['↵'] }"> <div :class="$style.btnWrapper">
<N8nButton <div :class="$style.actionWrapper">
:loading="executing" <KeyboardShortcutTooltip :label="label" :shortcut="{ metaKey: true, keys: ['↵'] }">
:label="label" <N8nButton
:disabled="disabled" :loading="executing"
size="large" :label="label"
icon="flask" :disabled="disabled"
type="primary" size="large"
data-test-id="execute-workflow-button" icon="flask"
@mouseenter="$emit('mouseenter', $event)" type="primary"
@mouseleave="$emit('mouseleave', $event)" data-test-id="execute-workflow-button"
@click.stop="$emit('click', $event)" @mouseenter="$emit('mouseenter', $event)"
/> @mouseleave="$emit('mouseleave', $event)"
</KeyboardShortcutTooltip> @click.stop="$emit('click', $event, selectedTrigger)"
/>
</KeyboardShortcutTooltip>
<N8nActionDropdown v-if="triggerNodes.length > 1" :items="actions" @select="onActionSelect" />
</div>
</div>
</template> </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); const workflowExecutionData = computed(() => workflowsStore.workflowExecutionData);
async function onRunWorkflow() { async function onRunWorkflow(triggerNode?: string) {
trackRunWorkflow(); trackRunWorkflow();
if (!isExecutionPreview.value && workflowsStore.isWaitingExecution) { if (!isExecutionPreview.value && workflowsStore.isWaitingExecution) {
void runWorkflowResolvePending({}); void runWorkflowResolvePending({ triggerNode });
} else { } else {
void runWorkflow({}); void runWorkflow({ triggerNode });
} }
} }
@ -1621,9 +1621,10 @@ onBeforeUnmount(() => {
:waiting-for-webhook="isExecutionWaitingForWebhook" :waiting-for-webhook="isExecutionWaitingForWebhook"
:disabled="isExecutionDisabled" :disabled="isExecutionDisabled"
:executing="isWorkflowRunning" :executing="isWorkflowRunning"
:trigger-nodes="triggerNodes"
@mouseenter="onRunWorkflowButtonMouseEnter" @mouseenter="onRunWorkflowButtonMouseEnter"
@mouseleave="onRunWorkflowButtonMouseLeave" @mouseleave="onRunWorkflowButtonMouseLeave"
@click="onRunWorkflow" @click="($event, selectedTrigger) => onRunWorkflow(selectedTrigger)"
/> />
<CanvasChatButton v-if="containsChatTriggerNodes" @click="onOpenChat" /> <CanvasChatButton v-if="containsChatTriggerNodes" @click="onOpenChat" />
<CanvasStopCurrentExecutionButton <CanvasStopCurrentExecutionButton