mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Migrate NodeDetailsView.vue to use script setup (no-changelog) (#9762)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-06-17 09:53:35 -07:00 committed by GitHub
parent be7249f568
commit f7d7404907
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 530 additions and 621 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -138,8 +138,8 @@
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
import { createEventBus } from 'n8n-design-system/utils';
import type { IRunData, ConnectionTypes } from 'n8n-workflow';
import { jsonParse, NodeHelpers, NodeConnectionType } from 'n8n-workflow';
@ -177,28 +177,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@/composables/useI18n';
import { storeToRefs } from 'pinia';
export default defineComponent({
name: 'NodeDetailsView',
components: {
NodeSettings,
InputPanel,
OutputPanel,
NDVDraggablePanels,
TriggerPanel,
},
props: {
readOnly: {
type: Boolean,
},
renaming: {
type: Boolean,
},
isProductionExecutionPreview: {
type: Boolean,
default: false,
},
},
emits: [
const emit = defineEmits([
'saveKeyboardShortcut',
'valueChanged',
'nodeTypeSelected',
@ -206,8 +185,14 @@ export default defineComponent({
'openConnectionNodeCreator',
'redrawNode',
'stopExecution',
],
setup(props, { emit }) {
]);
const props = defineProps<{
readOnly: boolean;
renaming: boolean;
isProductionExecutionPreview: boolean;
}>();
const ndvStore = useNDVStore();
const externalHooks = useExternalHooks();
const nodeHelpers = useNodeHelpers();
@ -282,8 +267,7 @@ export default defineComponent({
const parentNodes = computed(() => {
if (activeNode.value) {
return (
workflow.value.getParentNodesByDepth(activeNode.value.name, 1).map(({ name }) => name) ||
[]
workflow.value.getParentNodesByDepth(activeNode.value.name, 1).map(({ name }) => name) || []
);
} else {
return [];
@ -339,9 +323,7 @@ export default defineComponent({
const hasOutputConnection = computed(() => {
if (!activeNode.value) return false;
const outgoingConnections = workflowsStore.outgoingConnectionsByNodeName(
activeNode.value.name,
);
const outgoingConnections = workflowsStore.outgoingConnectionsByNodeName(activeNode.value.name);
// Check if there's at-least one output connection
return (Object.values(outgoingConnections)?.[0]?.[0] ?? []).length > 0;
@ -394,11 +376,7 @@ export default defineComponent({
return 0;
}
const outputs = NodeHelpers.getNodeOutputs(
workflow.value,
workflowNode,
activeNodeType.value,
);
const outputs = NodeHelpers.getNodeOutputs(workflow.value, workflowNode, activeNodeType.value);
let node = inputNode.value;
@ -458,10 +436,7 @@ export default defineComponent({
const usedCredentials = workflowsStore.usedCredentials;
const foreignCredentialsArray: string[] = [];
if (
credentials &&
settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)
) {
if (credentials && settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
Object.values(credentials).forEach((credential) => {
if (
credential.id &&
@ -777,9 +752,7 @@ export default defineComponent({
parameters_pane_position: mainPanelPosition.value,
input_first_connector_runs: maxInputRun.value,
output_first_connector_runs: maxOutputRun.value,
selected_view_inputs: isTriggerNode.value
? 'trigger'
: ndvStore.inputPanelDisplayMode,
selected_view_inputs: isTriggerNode.value ? 'trigger' : ndvStore.inputPanelDisplayMode,
selected_view_outputs: ndvStore.outputPanelDisplayMode,
input_connectors: parentNodes.value.length,
output_connectors: outgoingConnections?.main?.length,
@ -825,70 +798,6 @@ export default defineComponent({
onBeforeUnmount(() => {
dataPinningEventBus.off('data-pinning-discovery', setIsTooltipVisible);
});
return {
externalHooks,
nodeHelpers,
pinnedData,
workflowHelpers,
workflowActivate,
redrawRequired,
isInputPaneActive,
isDragging,
activeNodeType,
pushRef,
workflowRunning,
showTriggerWaitingWarning,
activeNode,
isExecutableTriggerNode,
showTriggerPanel,
hasOutputConnection,
blockUi,
isActiveStickyNode,
isTriggerNode,
workflow,
canLinkRuns,
inputRun,
linked,
inputNodeName,
inputSize,
hasForeignCredential,
outputRun,
isOutputPaneActive,
foreignCredentials,
featureRequestUrl,
settingsEventBus,
inputPanelMargin,
nodeTypeSelected,
onOutputItemHover,
onOutputTableMounted,
onInputTableMounted,
onRunOutputIndexChange,
onStopExecution,
activateInputPane,
activateOutputPane,
onSearch,
onInputNodeChange,
onRunInputIndexChange,
onLinkRunToInput,
valueChanged,
onSwitchSelectedNode,
onOpenConnectionNodeCreator,
close,
onKeyDown,
onInputItemHover,
onWorkflowActivate,
onFeatureRequestClick,
onDragEnd,
onDragStart,
onPanelsInit,
onLinkRunToOutput,
onUnlinkRun,
onNodeExecute,
openSettings,
};
},
});
</script>
<style lang="scss">