feat(editor): Add drag and drop data mapping (#3708)
* commit package lock * refactor param options out * use action toggle * handle click on toggle * update color toggle * fix toggle * show options * update expression color * update pointer * fix readonly * fix readonly * fix expression spacing * refactor input label * show icon for headers * center icon * fix multi params * add credential options * increase spacing * update expression view * update transition * update el padding * rename side to options * fix label overflow * fix bug with unnessary lines * add overlay * fix bug affecting other pages * clean up spacing * rename * update icon size * fix toggle in users * clean up func * clean up css * use css var * fix overlay bug * clean up input * clean up input * clean up unnessary css * revert * update quotes * rename method * remove console errors * refactor data table * add drag button * make hoverable cells * add drag hint * disabel for output panel * add drag * disable for readonly * Add dragging * add draggable pill * add mapping targets * remove font color * Transferable * fix linting issue * teleport component * fix line * disable for readonly * fix position of data pill * fix position of data pill * ignore import * add droppable state * remove draggable key * update bg color * add value drop * use direct input * remove transition * add animation * shorten name * handle empty value * fix switch bug * fix up animation * add notification * add hint * add tooltip * show draggable hintm * fix multiple expre * fix hoverable * keep options on focus * increase timeouts * fix bug in set node * add transition on hover out * fix tooltip onboarding bug * only update expression if changes * add open delay * fix header highlight issue * update text * dont show tooltip always * update docs url * update ee border * add sticky behav * hide error highlight if dropping * switch out grip icon * increase timeout * add delay * show hint on execprev * add telemetry event * add telemetry event * add telemetry event * fire event on hint showing * fix telemetry event * add path * fix drag hint issue * decrease bottom margin * update mapping keys * remove file * hide overflow * sort params * add space * prevent scrolling * remove dropshadow * force cursor * address some comments * add thead tbody * add size opt
This commit is contained in:
Mutasem Aldmour
GitHub
@@ -1,45 +1,26 @@
|
||||
<template>
|
||||
<div :class="$style['parameter-options']">
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
@command="(opt) => $emit('optionSelected', opt)"
|
||||
size="mini"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<font-awesome-icon
|
||||
icon="cogs"
|
||||
class="reset-icon clickable"
|
||||
:title="$locale.baseText('parameterInput.parameterOptions')"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-if="parameter.noDataExpression !== true && !isValueExpression"
|
||||
command="addExpression"
|
||||
>
|
||||
{{ $locale.baseText('parameterInput.addExpression') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="parameter.noDataExpression !== true && isValueExpression"
|
||||
command="removeExpression"
|
||||
>
|
||||
{{ $locale.baseText('parameterInput.removeExpression') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="hasRemoteMethod"
|
||||
command="refreshOptions"
|
||||
>
|
||||
{{ $locale.baseText('parameterInput.refreshList') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
command="resetValue"
|
||||
:disabled="isDefault"
|
||||
divided
|
||||
>
|
||||
{{ $locale.baseText('parameterInput.resetValue') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<div :class="$style.container">
|
||||
<n8n-action-toggle
|
||||
v-if="shouldShowOptions"
|
||||
placement="bottom-end"
|
||||
size="small"
|
||||
color="foreground-xdark"
|
||||
iconSize="small"
|
||||
:actions="actions"
|
||||
@action="(action) => $emit('optionSelected', action)"
|
||||
@visible-change="onMenuToggle"
|
||||
/>
|
||||
<n8n-radio-buttons
|
||||
v-if="parameter.noDataExpression !== true"
|
||||
size="small"
|
||||
:value="selectedView"
|
||||
:disabled="isReadOnly"
|
||||
@input="onViewSelected"
|
||||
:options="[
|
||||
{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed'},
|
||||
{ label: $locale.baseText('parameterInput.expression'), value: 'expression'},
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -49,20 +30,101 @@ import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
name: 'ParameterOptions',
|
||||
props: [
|
||||
'displayOptionsComputed',
|
||||
'optionSelected',
|
||||
'parameter',
|
||||
'isValueExpression',
|
||||
'isDefault',
|
||||
'hasRemoteMethod',
|
||||
'isReadOnly',
|
||||
'value',
|
||||
'showOptions',
|
||||
],
|
||||
computed: {
|
||||
isDefault (): boolean {
|
||||
return this.parameter.default === this.value;
|
||||
},
|
||||
shouldShowOptions (): boolean {
|
||||
if (this.isReadOnly === true) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.parameter.type === 'collection' || this.parameter.type === 'credentialsSelect') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.showOptions === true) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
selectedView () {
|
||||
if (this.isValueExpression) {
|
||||
return 'expression';
|
||||
}
|
||||
|
||||
return 'fixed';
|
||||
},
|
||||
isValueExpression () {
|
||||
if (this.parameter.noDataExpression === true) {
|
||||
return false;
|
||||
}
|
||||
if (typeof this.value === 'string' && this.value.charAt(0) === '=') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
hasRemoteMethod (): boolean {
|
||||
return !!this.getArgument('loadOptionsMethod') || !!this.getArgument('loadOptions');
|
||||
},
|
||||
actions (): Array<{label: string, value: string, disabled?: boolean}> {
|
||||
const actions = [
|
||||
{
|
||||
label: this.$locale.baseText('parameterInput.resetValue'),
|
||||
value: 'resetValue',
|
||||
disabled: this.isDefault,
|
||||
},
|
||||
];
|
||||
|
||||
if (this.hasRemoteMethod) {
|
||||
return [
|
||||
{
|
||||
label: this.$locale.baseText('parameterInput.refreshList'),
|
||||
value: 'refreshOptions',
|
||||
},
|
||||
...actions,
|
||||
];
|
||||
}
|
||||
|
||||
return actions;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onMenuToggle(visible: boolean) {
|
||||
this.$emit('menu-expanded', visible);
|
||||
},
|
||||
onViewSelected(selected: string) {
|
||||
if (selected === 'expression' ) {
|
||||
this.$emit('optionSelected', this.isValueExpression? 'openExpression': 'addExpression');
|
||||
}
|
||||
|
||||
if (selected === 'fixed' && this.isValueExpression) {
|
||||
this.$emit('optionSelected', 'removeExpression');
|
||||
}
|
||||
},
|
||||
getArgument (argumentName: string): string | number | boolean | undefined {
|
||||
if (this.parameter.typeOptions === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (this.parameter.typeOptions[argumentName] === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return this.parameter.typeOptions[argumentName];
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.parameter-options {
|
||||
width: 25px;
|
||||
text-align: right;
|
||||
float: right;
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user