refactor(editor): Extract OrderSwitcher component out of ActionsMode.vue (#11626)

This commit is contained in:
Ricardo Espinoza 2024-11-07 09:26:06 -05:00 committed by GitHub
parent fc39e3ca16
commit 28ad66cc12
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 24 deletions

View file

@ -1,16 +1,13 @@
<script setup lang="ts">
import { computed, onMounted, defineComponent, h } from 'vue';
import type { PropType } from 'vue';
import { computed, onMounted } from 'vue';
import type {
INodeCreateElement,
NodeFilterType,
IUpdateInformation,
ActionCreateElement,
NodeCreateElement,
} from '@/Interface';
import {
HTTP_REQUEST_NODE_TYPE,
REGULAR_NODE_CREATOR_VIEW,
TRIGGER_NODE_CREATOR_VIEW,
CUSTOM_API_CALL_KEY,
OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE,
@ -30,6 +27,7 @@ import type { IDataObject } from 'n8n-workflow';
import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@/composables/useI18n';
import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
import OrderSwitcher from './../OrderSwitcher.vue';
const emit = defineEmits<{
nodeTypeSelected: [value: [actionKey: string, nodeName: string] | [nodeName: string]];
@ -212,26 +210,6 @@ function addHttpNode() {
nodeCreatorStore.onActionsCustomAPIClicked({ app_identifier });
}
// Anonymous component to handle triggers and actions rendering order
const OrderSwitcher = defineComponent({
props: {
rootView: {
type: String as PropType<NodeFilterType>,
required: true,
},
},
setup(props, { slots }) {
return () =>
h(
'div',
{},
props.rootView === REGULAR_NODE_CREATOR_VIEW
? [slots.actions?.(), slots.triggers?.()]
: [slots.triggers?.(), slots.actions?.()],
);
},
});
onMounted(() => {
trackActionsView();
});

View file

@ -0,0 +1,21 @@
<script setup lang="ts">
import type { NodeFilterType } from '@/Interface';
import { REGULAR_NODE_CREATOR_VIEW } from '@/constants';
defineProps<{
rootView: NodeFilterType;
}>();
</script>
<template>
<div>
<template v-if="rootView === REGULAR_NODE_CREATOR_VIEW">
<slot name="actions" />
<slot name="triggers" />
</template>
<template v-else>
<slot name="triggers" />
<slot name="actions" />
</template>
</div>
</template>