mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-09 22:24:05 -08:00
refactor(editor): Migrate RunDataJson.vue to composition API (#10861)
Co-authored-by: Raúl Gómez Morales <raul00gm@gmail.com>
This commit is contained in:
Ricardo Espinoza
GitHub
parent
a7d24d9dac
commit
05ae2aa9c5
|
|
@ -1,128 +1,91 @@
|
|||
<script lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, ref } from 'vue';
|
||||
import type { PropType } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { computed, defineAsyncComponent, ref } from 'vue';
|
||||
import VueJsonPretty from 'vue-json-pretty';
|
||||
import type { IDataObject, INodeExecutionData } from 'n8n-workflow';
|
||||
import type { INodeExecutionData } from 'n8n-workflow';
|
||||
import Draggable from '@/components/Draggable.vue';
|
||||
import { executionDataToJson } from '@/utils/nodeTypesUtils';
|
||||
import { isString } from '@/utils/typeGuards';
|
||||
import { shorten } from '@/utils/typesUtils';
|
||||
import type { INodeUi } from '@/Interface';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useNDVStore } from '@/stores/ndv.store';
|
||||
import MappingPill from './MappingPill.vue';
|
||||
import { getMappedExpression } from '@/utils/mappingUtils';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import { nonExistingJsonPath } from '@/constants';
|
||||
import { useExternalHooks } from '@/composables/useExternalHooks';
|
||||
import TextWithHighlights from './TextWithHighlights.vue';
|
||||
import { useTelemetry } from '@/composables/useTelemetry';
|
||||
|
||||
const LazyRunDataJsonActions = defineAsyncComponent(
|
||||
async () => await import('@/components/RunDataJsonActions.vue'),
|
||||
);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RunDataJson',
|
||||
components: {
|
||||
VueJsonPretty,
|
||||
Draggable,
|
||||
LazyRunDataJsonActions,
|
||||
MappingPill,
|
||||
TextWithHighlights,
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
editMode: { enabled?: boolean; value?: string };
|
||||
pushRef?: string;
|
||||
paneType?: string;
|
||||
node: INodeUi;
|
||||
inputData: INodeExecutionData[];
|
||||
mappingEnabled?: boolean;
|
||||
distanceFromActive: number;
|
||||
runIndex?: number;
|
||||
totalRuns?: number;
|
||||
search?: string;
|
||||
}>(),
|
||||
{
|
||||
editMode: () => ({}),
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Object as PropType<{ enabled?: boolean; value?: string }>,
|
||||
default: () => ({}),
|
||||
},
|
||||
pushRef: {
|
||||
type: String,
|
||||
},
|
||||
paneType: {
|
||||
type: String,
|
||||
},
|
||||
node: {
|
||||
type: Object as PropType<INodeUi>,
|
||||
required: true,
|
||||
},
|
||||
inputData: {
|
||||
type: Array as PropType<INodeExecutionData[]>,
|
||||
required: true,
|
||||
},
|
||||
mappingEnabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
distanceFromActive: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
},
|
||||
totalRuns: {
|
||||
type: Number,
|
||||
},
|
||||
search: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const externalHooks = useExternalHooks();
|
||||
);
|
||||
|
||||
const selectedJsonPath = ref(nonExistingJsonPath);
|
||||
const draggingPath = ref<null | string>(null);
|
||||
const displayMode = ref('json');
|
||||
const ndvStore = useNDVStore();
|
||||
|
||||
return {
|
||||
externalHooks,
|
||||
selectedJsonPath,
|
||||
draggingPath,
|
||||
displayMode,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useNDVStore, useWorkflowsStore),
|
||||
jsonData(): IDataObject[] {
|
||||
return executionDataToJson(this.inputData);
|
||||
},
|
||||
highlight(): boolean {
|
||||
return this.ndvStore.highlightDraggables;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getShortKey(el: HTMLElement): string {
|
||||
const externalHooks = useExternalHooks();
|
||||
const telemetry = useTelemetry();
|
||||
|
||||
const selectedJsonPath = ref(nonExistingJsonPath);
|
||||
const draggingPath = ref<null | string>(null);
|
||||
const displayMode = ref('json');
|
||||
|
||||
const jsonData = computed(() => executionDataToJson(props.inputData));
|
||||
|
||||
const highlight = computed(() => ndvStore.highlightDraggables);
|
||||
|
||||
const getShortKey = (el: HTMLElement) => {
|
||||
if (!el) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return shorten(el.dataset.name || '', 16, 2);
|
||||
},
|
||||
getJsonParameterPath(path: string): string {
|
||||
return shorten(el.dataset.name ?? '', 16, 2);
|
||||
};
|
||||
|
||||
const getJsonParameterPath = (path: string) => {
|
||||
const subPath = path.replace(/^(\["?\d"?])/, ''); // remove item position
|
||||
|
||||
return getMappedExpression({
|
||||
nodeName: this.node.name,
|
||||
distanceFromActive: this.distanceFromActive,
|
||||
nodeName: props.node.name,
|
||||
distanceFromActive: props.distanceFromActive,
|
||||
path: subPath,
|
||||
});
|
||||
},
|
||||
onDragStart(el: HTMLElement) {
|
||||
};
|
||||
|
||||
const onDragStart = (el: HTMLElement) => {
|
||||
if (el?.dataset.path) {
|
||||
this.draggingPath = el.dataset.path;
|
||||
draggingPath.value = el.dataset.path;
|
||||
}
|
||||
|
||||
this.ndvStore.resetMappingTelemetry();
|
||||
},
|
||||
onDragEnd(el: HTMLElement) {
|
||||
this.draggingPath = null;
|
||||
const mappingTelemetry = this.ndvStore.mappingTelemetry;
|
||||
ndvStore.resetMappingTelemetry();
|
||||
};
|
||||
|
||||
const onDragEnd = (el: HTMLElement) => {
|
||||
draggingPath.value = null;
|
||||
const mappingTelemetry = ndvStore.mappingTelemetry;
|
||||
const telemetryPayload = {
|
||||
src_node_type: this.node.type,
|
||||
src_field_name: el.dataset.name || '',
|
||||
src_nodes_back: this.distanceFromActive,
|
||||
src_run_index: this.runIndex,
|
||||
src_runs_total: this.totalRuns,
|
||||
src_field_nest_level: el.dataset.depth || 0,
|
||||
src_node_type: props.node.type,
|
||||
src_field_name: el.dataset.name ?? '',
|
||||
src_nodes_back: props.distanceFromActive,
|
||||
src_run_index: props.runIndex,
|
||||
src_runs_total: props.totalRuns,
|
||||
src_field_nest_level: el.dataset.depth ?? 0,
|
||||
src_view: 'json',
|
||||
src_element: el,
|
||||
success: false,
|
||||
|
|
@ -130,20 +93,20 @@ export default defineComponent({
|
|||
};
|
||||
|
||||
setTimeout(() => {
|
||||
void this.externalHooks.run('runDataJson.onDragEnd', telemetryPayload);
|
||||
this.$telemetry.track('User dragged data for mapping', telemetryPayload, {
|
||||
void externalHooks.run('runDataJson.onDragEnd', telemetryPayload);
|
||||
telemetry.track('User dragged data for mapping', telemetryPayload, {
|
||||
withPostHog: true,
|
||||
});
|
||||
}, 1000); // ensure dest data gets set if drop
|
||||
},
|
||||
getContent(value: unknown): string {
|
||||
};
|
||||
|
||||
const getContent = (value: unknown) => {
|
||||
return isString(value) ? `"${value}"` : JSON.stringify(value);
|
||||
},
|
||||
getListItemName(path: string): string {
|
||||
};
|
||||
|
||||
const getListItemName = (path: string) => {
|
||||
return path.replace(/^(\["?\d"?]\.?)/g, '');
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue