mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-14 16:44:07 -08:00
adding action dropdown
This commit is contained in:
parent
d7ba206b30
commit
74434e7137
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue