mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
refactor(editor): Apply Prettier (no-changelog) (#4920)
* ⚡ Adjust `format` script * 🔥 Remove exemption for `editor-ui` * 🎨 Prettify * 👕 Fix lint
This commit is contained in:
Iván Ovejero
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<n8n-input-label
|
||||
:label="hideLabel ? '': $locale.nodeText().inputLabelDisplayName(parameter, path)"
|
||||
:tooltipText="hideLabel ? '': $locale.nodeText().inputLabelDescription(parameter, path)"
|
||||
:label="hideLabel ? '' : $locale.nodeText().inputLabelDisplayName(parameter, path)"
|
||||
:tooltipText="hideLabel ? '' : $locale.nodeText().inputLabelDescription(parameter, path)"
|
||||
:showTooltip="focused"
|
||||
:showOptions="menuExpanded || focused || forceShowExpression"
|
||||
:bold="false"
|
||||
@@ -35,7 +35,13 @@
|
||||
:buttons="dataMappingTooltipButtons"
|
||||
>
|
||||
<template #content>
|
||||
<span v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })" />
|
||||
<span
|
||||
v-html="
|
||||
$locale.baseText(`dataMapping.${displayMode}Hint`, {
|
||||
interpolate: { name: parameter.displayName },
|
||||
})
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<parameter-input-wrapper
|
||||
ref="param"
|
||||
@@ -63,12 +69,7 @@
|
||||
<script lang="ts">
|
||||
import Vue, { PropType } from 'vue';
|
||||
|
||||
import {
|
||||
IN8nButton,
|
||||
INodeUi,
|
||||
IRunDataDisplayMode,
|
||||
IUpdateInformation,
|
||||
} from '@/Interface';
|
||||
import { IN8nButton, INodeUi, IRunDataDisplayMode, IUpdateInformation } from '@/Interface';
|
||||
|
||||
import ParameterOptions from '@/components/ParameterOptions.vue';
|
||||
import DraggableTarget from '@/components/DraggableTarget.vue';
|
||||
@@ -78,210 +79,217 @@ import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
|
||||
import { hasExpressionMapping, isResourceLocatorValue, hasOnlyListMode } from '@/utils';
|
||||
import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
|
||||
import { INodeParameters, INodeProperties, INodePropertyMode } from 'n8n-workflow';
|
||||
import { BaseTextKey } from "@/plugins/i18n";
|
||||
import { BaseTextKey } from '@/plugins/i18n';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useNDVStore } from '@/stores/ndv';
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
)
|
||||
.extend({
|
||||
name: 'parameter-input-full',
|
||||
components: {
|
||||
ParameterOptions,
|
||||
DraggableTarget,
|
||||
ParameterInputWrapper,
|
||||
export default mixins(showMessage).extend({
|
||||
name: 'parameter-input-full',
|
||||
components: {
|
||||
ParameterOptions,
|
||||
DraggableTarget,
|
||||
ParameterInputWrapper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
menuExpanded: false,
|
||||
forceShowExpression: false,
|
||||
dataMappingTooltipButtons: [] as IN8nButton[],
|
||||
mappingTooltipEnabled: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
displayOptions: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
menuExpanded: false,
|
||||
forceShowExpression: false,
|
||||
dataMappingTooltipButtons: [] as IN8nButton[],
|
||||
mappingTooltipEnabled: false,
|
||||
};
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
props: {
|
||||
displayOptions: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hideLabel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
parameter: {
|
||||
type: Object as PropType<INodeProperties>,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
},
|
||||
value: {
|
||||
type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
|
||||
},
|
||||
hideLabel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
created() {
|
||||
const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
|
||||
this.dataMappingTooltipButtons = [
|
||||
{
|
||||
attrs: {
|
||||
label: this.$locale.baseText('_reusableBaseText.dismiss' as BaseTextKey),
|
||||
},
|
||||
listeners: {
|
||||
click: mappingTooltipDismissHandler,
|
||||
},
|
||||
parameter: {
|
||||
type: Object as PropType<INodeProperties>,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
},
|
||||
value: {
|
||||
type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
|
||||
this.dataMappingTooltipButtons = [
|
||||
{
|
||||
attrs: {
|
||||
label: this.$locale.baseText('_reusableBaseText.dismiss' as BaseTextKey),
|
||||
},
|
||||
];
|
||||
listeners: {
|
||||
click: mappingTooltipDismissHandler,
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useNDVStore),
|
||||
node(): INodeUi | null {
|
||||
return this.ndvStore.activeNode;
|
||||
},
|
||||
computed: {
|
||||
...mapStores(
|
||||
useNDVStore,
|
||||
),
|
||||
node (): INodeUi | null {
|
||||
return this.ndvStore.activeNode;
|
||||
},
|
||||
hint (): string | null {
|
||||
return this.$locale.nodeText().hint(this.parameter, this.path);
|
||||
},
|
||||
isInputTypeString (): boolean {
|
||||
return this.parameter.type === 'string';
|
||||
},
|
||||
isResourceLocator (): boolean {
|
||||
return this.parameter.type === 'resourceLocator';
|
||||
},
|
||||
isDropDisabled (): boolean {
|
||||
return this.parameter.noDataExpression || this.isReadOnly || this.isResourceLocator;
|
||||
},
|
||||
showExpressionSelector (): boolean {
|
||||
return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
|
||||
},
|
||||
isInputDataEmpty (): boolean {
|
||||
return this.ndvStore.isDNVDataEmpty('input');
|
||||
},
|
||||
displayMode(): IRunDataDisplayMode {
|
||||
return this.ndvStore.inputPanelDisplayMode;
|
||||
},
|
||||
showMappingTooltip (): boolean {
|
||||
return this.mappingTooltipEnabled && this.focused && this.isInputTypeString && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
|
||||
},
|
||||
hint(): string | null {
|
||||
return this.$locale.nodeText().hint(this.parameter, this.path);
|
||||
},
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.focused = true;
|
||||
setTimeout(() => {
|
||||
this.mappingTooltipEnabled = true;
|
||||
}, 500);
|
||||
if (!this.parameter.noDataExpression) {
|
||||
this.ndvStore.setMappableNDVInputFocus(this.parameter.displayName);
|
||||
}
|
||||
},
|
||||
onBlur() {
|
||||
this.focused = false;
|
||||
this.mappingTooltipEnabled = false;
|
||||
if (!this.parameter.noDataExpression) {
|
||||
this.ndvStore.setMappableNDVInputFocus('');
|
||||
}
|
||||
},
|
||||
onMenuExpanded(expanded: boolean) {
|
||||
this.menuExpanded = expanded;
|
||||
},
|
||||
optionSelected (command: string) {
|
||||
if (this.$refs.param) {
|
||||
(this.$refs.param as Vue).$emit('optionSelected', command);
|
||||
}
|
||||
},
|
||||
valueChanged (parameterData: IUpdateInformation) {
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
onDrop(data: string) {
|
||||
this.forceShowExpression = true;
|
||||
setTimeout(() => {
|
||||
if (this.node) {
|
||||
const prevValue = this.isResourceLocator ? this.value.value : this.value;
|
||||
let updatedValue: string;
|
||||
if (typeof prevValue === 'string' && prevValue.startsWith('=') && prevValue.length > 1) {
|
||||
updatedValue = `${prevValue} ${data}`;
|
||||
}
|
||||
else {
|
||||
updatedValue = `=${data}`;
|
||||
}
|
||||
isInputTypeString(): boolean {
|
||||
return this.parameter.type === 'string';
|
||||
},
|
||||
isResourceLocator(): boolean {
|
||||
return this.parameter.type === 'resourceLocator';
|
||||
},
|
||||
isDropDisabled(): boolean {
|
||||
return this.parameter.noDataExpression || this.isReadOnly || this.isResourceLocator;
|
||||
},
|
||||
showExpressionSelector(): boolean {
|
||||
return this.isResourceLocator ? !hasOnlyListMode(this.parameter) : true;
|
||||
},
|
||||
isInputDataEmpty(): boolean {
|
||||
return this.ndvStore.isDNVDataEmpty('input');
|
||||
},
|
||||
displayMode(): IRunDataDisplayMode {
|
||||
return this.ndvStore.inputPanelDisplayMode;
|
||||
},
|
||||
showMappingTooltip(): boolean {
|
||||
return (
|
||||
this.mappingTooltipEnabled &&
|
||||
this.focused &&
|
||||
this.isInputTypeString &&
|
||||
!this.isInputDataEmpty &&
|
||||
window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.focused = true;
|
||||
setTimeout(() => {
|
||||
this.mappingTooltipEnabled = true;
|
||||
}, 500);
|
||||
if (!this.parameter.noDataExpression) {
|
||||
this.ndvStore.setMappableNDVInputFocus(this.parameter.displayName);
|
||||
}
|
||||
},
|
||||
onBlur() {
|
||||
this.focused = false;
|
||||
this.mappingTooltipEnabled = false;
|
||||
if (!this.parameter.noDataExpression) {
|
||||
this.ndvStore.setMappableNDVInputFocus('');
|
||||
}
|
||||
},
|
||||
onMenuExpanded(expanded: boolean) {
|
||||
this.menuExpanded = expanded;
|
||||
},
|
||||
optionSelected(command: string) {
|
||||
if (this.$refs.param) {
|
||||
(this.$refs.param as Vue).$emit('optionSelected', command);
|
||||
}
|
||||
},
|
||||
valueChanged(parameterData: IUpdateInformation) {
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
onDrop(data: string) {
|
||||
this.forceShowExpression = true;
|
||||
setTimeout(() => {
|
||||
if (this.node) {
|
||||
const prevValue = this.isResourceLocator ? this.value.value : this.value;
|
||||
let updatedValue: string;
|
||||
if (typeof prevValue === 'string' && prevValue.startsWith('=') && prevValue.length > 1) {
|
||||
updatedValue = `${prevValue} ${data}`;
|
||||
} else {
|
||||
updatedValue = `=${data}`;
|
||||
}
|
||||
|
||||
|
||||
let parameterData;
|
||||
if (this.isResourceLocator) {
|
||||
if (!isResourceLocatorValue(this.value)) {
|
||||
parameterData = {
|
||||
node: this.node.name,
|
||||
name: this.path,
|
||||
value: { __rl: true, value: updatedValue, mode: '' },
|
||||
};
|
||||
}
|
||||
else if (this.value.mode === 'list' && this.parameter.modes && this.parameter.modes.length > 1) {
|
||||
let mode = this.parameter.modes.find((mode: INodePropertyMode) => mode.name === 'id') || null;
|
||||
if (!mode) {
|
||||
mode = this.parameter.modes.filter((mode: INodePropertyMode) => mode.name !== 'list')[0];
|
||||
}
|
||||
|
||||
parameterData = {
|
||||
node: this.node.name,
|
||||
name: this.path,
|
||||
value: { __rl: true, value: updatedValue, mode: mode ? mode.name : '' },
|
||||
};
|
||||
}
|
||||
else {
|
||||
parameterData = {
|
||||
node: this.node.name,
|
||||
name: this.path,
|
||||
value: { __rl: true, value: updatedValue, mode: this.value.mode },
|
||||
};
|
||||
let parameterData;
|
||||
if (this.isResourceLocator) {
|
||||
if (!isResourceLocatorValue(this.value)) {
|
||||
parameterData = {
|
||||
node: this.node.name,
|
||||
name: this.path,
|
||||
value: { __rl: true, value: updatedValue, mode: '' },
|
||||
};
|
||||
} else if (
|
||||
this.value.mode === 'list' &&
|
||||
this.parameter.modes &&
|
||||
this.parameter.modes.length > 1
|
||||
) {
|
||||
let mode =
|
||||
this.parameter.modes.find((mode: INodePropertyMode) => mode.name === 'id') || null;
|
||||
if (!mode) {
|
||||
mode = this.parameter.modes.filter(
|
||||
(mode: INodePropertyMode) => mode.name !== 'list',
|
||||
)[0];
|
||||
}
|
||||
|
||||
parameterData = {
|
||||
node: this.node.name,
|
||||
name: this.path,
|
||||
value: { __rl: true, value: updatedValue, mode: mode ? mode.name : '' },
|
||||
};
|
||||
} else {
|
||||
parameterData = {
|
||||
node: this.node.name,
|
||||
name: this.path,
|
||||
value: updatedValue,
|
||||
value: { __rl: true, value: updatedValue, mode: this.value.mode },
|
||||
};
|
||||
}
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
|
||||
if (window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true') {
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('dataMapping.success.title'),
|
||||
message: this.$locale.baseText('dataMapping.success.moreInfo'),
|
||||
type: 'success',
|
||||
});
|
||||
|
||||
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
|
||||
}
|
||||
|
||||
this.ndvStore.setMappingTelemetry({
|
||||
dest_node_type: this.node.type,
|
||||
dest_parameter: this.path,
|
||||
dest_parameter_mode: typeof prevValue === 'string' && prevValue.startsWith('=')? 'expression': 'fixed',
|
||||
dest_parameter_empty: prevValue === '' || prevValue === undefined,
|
||||
dest_parameter_had_mapping: typeof prevValue === 'string' && prevValue.startsWith('=') && hasExpressionMapping(prevValue),
|
||||
success: true,
|
||||
});
|
||||
} else {
|
||||
parameterData = {
|
||||
node: this.node.name,
|
||||
name: this.path,
|
||||
value: updatedValue,
|
||||
};
|
||||
}
|
||||
this.forceShowExpression = false;
|
||||
}, 200);
|
||||
},
|
||||
onMappingTooltipDismissed() {
|
||||
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showMappingTooltip(newValue: boolean) {
|
||||
if (!newValue) {
|
||||
this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
|
||||
if (window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true') {
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('dataMapping.success.title'),
|
||||
message: this.$locale.baseText('dataMapping.success.moreInfo'),
|
||||
type: 'success',
|
||||
});
|
||||
|
||||
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
|
||||
}
|
||||
|
||||
this.ndvStore.setMappingTelemetry({
|
||||
dest_node_type: this.node.type,
|
||||
dest_parameter: this.path,
|
||||
dest_parameter_mode:
|
||||
typeof prevValue === 'string' && prevValue.startsWith('=') ? 'expression' : 'fixed',
|
||||
dest_parameter_empty: prevValue === '' || prevValue === undefined,
|
||||
dest_parameter_had_mapping:
|
||||
typeof prevValue === 'string' &&
|
||||
prevValue.startsWith('=') &&
|
||||
hasExpressionMapping(prevValue),
|
||||
success: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
this.forceShowExpression = false;
|
||||
}, 200);
|
||||
},
|
||||
});
|
||||
onMappingTooltipDismissed() {
|
||||
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showMappingTooltip(newValue: boolean) {
|
||||
if (!newValue) {
|
||||
this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user