mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-11 12:57:29 -08:00
fix(editor): Enable ctrl/cmd click in workflow editor header (#8387)
This commit is contained in:
parent
284d965b5a
commit
e43cf2fd71
|
@ -10,7 +10,7 @@
|
|||
:active="modelValue === option.value"
|
||||
:size="size"
|
||||
:disabled="disabled || option.disabled"
|
||||
@click.prevent.stop="onClick(option)"
|
||||
@click.prevent.stop="onClick(option, $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -47,12 +47,13 @@ export default defineComponent({
|
|||
type: Boolean,
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
methods: {
|
||||
onClick(option: { label: string; value: string; disabled?: boolean }) {
|
||||
onClick(option: { label: string; value: string; disabled?: boolean }, event: MouseEvent) {
|
||||
if (this.disabled || option.disabled) {
|
||||
return;
|
||||
}
|
||||
this.$emit('update:modelValue', option.value);
|
||||
this.$emit('update:modelValue', option.value, event);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import type { Route } from 'vue-router';
|
||||
import type { Route, RouteLocationRaw } from 'vue-router';
|
||||
import { mapStores } from 'pinia';
|
||||
import type { IExecutionsSummary } from 'n8n-workflow';
|
||||
import { pushConnection } from '@/mixins/pushConnection';
|
||||
|
@ -118,48 +118,69 @@ export default defineComponent({
|
|||
this.workflowToReturnTo = workflowName;
|
||||
}
|
||||
},
|
||||
onTabSelected(tab: string, event: MouseEvent) {
|
||||
onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
|
||||
const openInNewTab = event.ctrlKey || event.metaKey;
|
||||
|
||||
switch (tab) {
|
||||
case MAIN_HEADER_TABS.WORKFLOW:
|
||||
if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) {
|
||||
if (this.$route.name !== VIEWS.WORKFLOW) {
|
||||
void this.$router.push({
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: { name: this.workflowToReturnTo },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (this.$route.name !== VIEWS.NEW_WORKFLOW) {
|
||||
void this.$router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
this.uiStore.stateIsDirty = this.dirtyState;
|
||||
}
|
||||
}
|
||||
this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
|
||||
void this.navigateToWorkflowView(openInNewTab);
|
||||
break;
|
||||
|
||||
case MAIN_HEADER_TABS.EXECUTIONS:
|
||||
this.dirtyState = this.uiStore.stateIsDirty;
|
||||
this.workflowToReturnTo = this.currentWorkflow;
|
||||
const routeWorkflowId =
|
||||
this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
|
||||
if (this.activeExecution) {
|
||||
this.$router
|
||||
.push({
|
||||
name: VIEWS.EXECUTION_PREVIEW,
|
||||
params: { name: routeWorkflowId, executionId: this.activeExecution.id },
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
void this.$router.push({
|
||||
name: VIEWS.EXECUTION_HOME,
|
||||
params: { name: routeWorkflowId },
|
||||
});
|
||||
}
|
||||
this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
|
||||
void this.navigateToExecutionsView(openInNewTab);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
async navigateToWorkflowView(openInNewTab: boolean) {
|
||||
let routeToNavigateTo: RouteLocationRaw;
|
||||
if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) {
|
||||
routeToNavigateTo = {
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: { name: this.workflowToReturnTo },
|
||||
};
|
||||
} else {
|
||||
routeToNavigateTo = { name: VIEWS.NEW_WORKFLOW };
|
||||
}
|
||||
|
||||
if (openInNewTab) {
|
||||
const { href } = this.$router.resolve(routeToNavigateTo);
|
||||
window.open(href, '_blank');
|
||||
} else if (this.$route.name !== routeToNavigateTo.name) {
|
||||
if (this.$route.name === VIEWS.NEW_WORKFLOW) {
|
||||
this.uiStore.stateIsDirty = this.dirtyState;
|
||||
}
|
||||
this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
|
||||
await this.$router.push(routeToNavigateTo);
|
||||
}
|
||||
},
|
||||
|
||||
async navigateToExecutionsView(openInNewTab: boolean) {
|
||||
const routeWorkflowId =
|
||||
this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
|
||||
const routeToNavigateTo: RouteLocationRaw = this.activeExecution
|
||||
? {
|
||||
name: VIEWS.EXECUTION_PREVIEW,
|
||||
params: { name: routeWorkflowId, executionId: this.activeExecution.id },
|
||||
}
|
||||
: {
|
||||
name: VIEWS.EXECUTION_HOME,
|
||||
params: { name: routeWorkflowId },
|
||||
};
|
||||
|
||||
if (openInNewTab) {
|
||||
const { href } = this.$router.resolve(routeToNavigateTo);
|
||||
window.open(href, '_blank');
|
||||
} else if (this.$route.name !== routeToNavigateTo.name) {
|
||||
this.dirtyState = this.uiStore.stateIsDirty;
|
||||
this.workflowToReturnTo = this.currentWorkflow;
|
||||
this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
|
||||
await this.$router.push(routeToNavigateTo);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue