2019-06-23 03:35:23 -07:00
|
|
|
<template>
|
2019-09-19 14:59:25 -07:00
|
|
|
<div class="paramter-input-list-wrapper">
|
2019-06-23 03:35:23 -07:00
|
|
|
<div v-for="parameter in filteredParameters" :key="parameter.name">
|
|
|
|
<div
|
|
|
|
v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
|
|
|
|
class="parameter-item"
|
|
|
|
>
|
|
|
|
<multiple-parameter
|
|
|
|
:parameter="parameter"
|
|
|
|
:values="getParameterValue(nodeValues, parameter.name, path)"
|
|
|
|
:nodeValues="nodeValues"
|
|
|
|
:path="getPath(parameter.name)"
|
|
|
|
@valueChanged="valueChanged"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2021-08-21 05:11:32 -07:00
|
|
|
<div v-else-if="parameter.type === 'notice'" v-html="parameter.displayName" class="parameter-item parameter-notice"></div>
|
|
|
|
|
2019-06-23 03:35:23 -07:00
|
|
|
<div
|
|
|
|
v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
|
|
|
|
class="multi-parameter"
|
|
|
|
>
|
|
|
|
<div class="parameter-name" :title="parameter.displayName">
|
|
|
|
<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
|
|
|
|
<font-awesome-icon
|
|
|
|
icon="trash"
|
|
|
|
class="reset-icon clickable"
|
|
|
|
title="Parameter Options"
|
|
|
|
@click="deleteOption(parameter.name)"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{{parameter.displayName}}:
|
2021-08-29 04:36:17 -07:00
|
|
|
<n8n-tooltip placement="top" class="parameter-info" v-if="parameter.description" >
|
2021-09-03 01:47:17 -07:00
|
|
|
<div slot="content" v-html="addTargetBlank(parameter.description)"></div>
|
2019-06-23 03:35:23 -07:00
|
|
|
<font-awesome-icon icon="question-circle"/>
|
2021-08-29 04:36:17 -07:00
|
|
|
</n8n-tooltip>
|
2019-06-23 03:35:23 -07:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<collection-parameter
|
|
|
|
v-if="parameter.type === 'collection'"
|
|
|
|
:parameter="parameter"
|
|
|
|
:values="getParameterValue(nodeValues, parameter.name, path)"
|
|
|
|
:nodeValues="nodeValues"
|
|
|
|
:path="getPath(parameter.name)"
|
|
|
|
@valueChanged="valueChanged"
|
|
|
|
/>
|
|
|
|
<fixed-collection-parameter
|
|
|
|
v-else-if="parameter.type === 'fixedCollection'"
|
|
|
|
:parameter="parameter"
|
|
|
|
:values="getParameterValue(nodeValues, parameter.name, path)"
|
|
|
|
:nodeValues="nodeValues"
|
|
|
|
:path="getPath(parameter.name)"
|
|
|
|
@valueChanged="valueChanged"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
|
|
|
|
<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
|
|
|
|
<font-awesome-icon
|
|
|
|
icon="trash"
|
|
|
|
class="reset-icon clickable"
|
|
|
|
title="Delete Parameter"
|
|
|
|
@click="deleteOption(parameter.name)"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<parameter-input-full
|
|
|
|
:parameter="parameter"
|
|
|
|
:value="getParameterValue(nodeValues, parameter.name, path)"
|
|
|
|
:displayOptions="true"
|
|
|
|
:path="getPath(parameter.name)"
|
2021-09-11 01:15:36 -07:00
|
|
|
:isReadOnly="isReadOnly"
|
2019-06-23 03:35:23 -07:00
|
|
|
@valueChanged="valueChanged"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
|
|
|
import {
|
2021-05-14 22:36:41 -07:00
|
|
|
INodeParameters,
|
2019-06-23 03:35:23 -07:00
|
|
|
INodeProperties,
|
2021-05-15 15:51:14 -07:00
|
|
|
NodeParameterValue,
|
2019-06-23 03:35:23 -07:00
|
|
|
} from 'n8n-workflow';
|
|
|
|
|
|
|
|
import { IUpdateInformation } from '@/Interface';
|
|
|
|
|
|
|
|
import MultipleParameter from '@/components/MultipleParameter.vue';
|
|
|
|
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
2021-05-14 22:28:51 -07:00
|
|
|
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
|
2019-06-23 03:35:23 -07:00
|
|
|
import ParameterInputFull from '@/components/ParameterInputFull.vue';
|
|
|
|
|
2021-08-26 10:42:38 -07:00
|
|
|
import { addTargetBlank } from './helpers';
|
|
|
|
|
2021-05-15 16:59:33 -07:00
|
|
|
import { get, set } from 'lodash';
|
2019-06-23 03:35:23 -07:00
|
|
|
|
|
|
|
import mixins from 'vue-typed-mixins';
|
|
|
|
|
|
|
|
export default mixins(
|
|
|
|
genericHelpers,
|
2021-05-14 22:28:51 -07:00
|
|
|
workflowHelpers,
|
2019-06-23 03:35:23 -07:00
|
|
|
)
|
|
|
|
.extend({
|
|
|
|
name: 'ParameterInputList',
|
|
|
|
components: {
|
|
|
|
MultipleParameter,
|
|
|
|
ParameterInputFull,
|
|
|
|
},
|
|
|
|
props: [
|
|
|
|
'nodeValues', // INodeParameters
|
|
|
|
'parameters', // INodeProperties
|
|
|
|
'path', // string
|
|
|
|
'hideDelete', // boolean
|
|
|
|
],
|
|
|
|
computed: {
|
2021-05-15 15:51:14 -07:00
|
|
|
filteredParameters (): INodeProperties[] {
|
2019-06-23 03:35:23 -07:00
|
|
|
return this.parameters.filter((parameter: INodeProperties) => this.displayNodeParameter(parameter));
|
|
|
|
},
|
2021-05-15 15:51:14 -07:00
|
|
|
filteredParameterNames (): string[] {
|
|
|
|
return this.filteredParameters.map(parameter => parameter.name);
|
|
|
|
},
|
2019-06-23 03:35:23 -07:00
|
|
|
},
|
|
|
|
methods: {
|
2021-08-26 10:42:38 -07:00
|
|
|
addTargetBlank,
|
2019-06-23 03:35:23 -07:00
|
|
|
multipleValues (parameter: INodeProperties): boolean {
|
|
|
|
if (this.getArgument('multipleValues', parameter) === true) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
getArgument (
|
|
|
|
argumentName: string,
|
2019-12-29 13:02:21 -08:00
|
|
|
parameter: INodeProperties,
|
2020-01-04 20:28:09 -08:00
|
|
|
): string | string[] | number | boolean | undefined{
|
2019-06-23 03:35:23 -07:00
|
|
|
if (parameter.typeOptions === undefined) {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (parameter.typeOptions[argumentName] === undefined) {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
return parameter.typeOptions[argumentName];
|
|
|
|
},
|
|
|
|
getPath (parameterName: string): string {
|
|
|
|
return (this.path ? `${this.path}.` : '') + parameterName;
|
|
|
|
},
|
|
|
|
deleteOption (optionName: string): void {
|
|
|
|
const parameterData = {
|
|
|
|
name: this.getPath(optionName),
|
2019-07-14 05:10:16 -07:00
|
|
|
value: undefined,
|
2019-06-23 03:35:23 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
// TODO: If there is only one option it should delete the whole one
|
|
|
|
|
|
|
|
this.$emit('valueChanged', parameterData);
|
|
|
|
},
|
|
|
|
displayNodeParameter (parameter: INodeProperties): boolean {
|
2020-02-09 13:33:40 -08:00
|
|
|
if (parameter.type === 'hidden') {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2019-06-23 03:35:23 -07:00
|
|
|
if (parameter.displayOptions === undefined) {
|
|
|
|
// If it is not defined no need to do a proper check
|
|
|
|
return true;
|
|
|
|
}
|
2021-05-14 22:28:51 -07:00
|
|
|
|
2021-05-14 22:36:41 -07:00
|
|
|
const nodeValues: INodeParameters = {};
|
2021-05-14 22:28:51 -07:00
|
|
|
let rawValues = this.nodeValues;
|
|
|
|
if (this.path) {
|
|
|
|
rawValues = get(this.nodeValues, this.path);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Resolve expressions
|
|
|
|
const resolveKeys = Object.keys(rawValues);
|
|
|
|
let key: string;
|
|
|
|
let i = 0;
|
2021-05-15 16:59:33 -07:00
|
|
|
let parameterGotResolved = false;
|
2021-05-14 22:28:51 -07:00
|
|
|
do {
|
2021-05-14 22:36:41 -07:00
|
|
|
key = resolveKeys.shift() as string;
|
2021-05-14 22:28:51 -07:00
|
|
|
if (typeof rawValues[key] === 'string' && rawValues[key].charAt(0) === '=') {
|
|
|
|
// Contains an expression that
|
|
|
|
if (rawValues[key].includes('$parameter') && resolveKeys.some(parameterName => rawValues[key].includes(parameterName))) {
|
|
|
|
// Contains probably an expression of a missing parameter so skip
|
|
|
|
resolveKeys.push(key);
|
|
|
|
continue;
|
|
|
|
} else {
|
|
|
|
// Contains probably no expression with a missing parameter so resolve
|
2021-05-29 17:49:20 -07:00
|
|
|
try {
|
|
|
|
nodeValues[key] = this.resolveExpression(rawValues[key], nodeValues) as NodeParameterValue;
|
|
|
|
} catch (e) {
|
|
|
|
// If expression is invalid ignore
|
|
|
|
nodeValues[key] = '';
|
|
|
|
}
|
2021-05-15 16:59:33 -07:00
|
|
|
parameterGotResolved = true;
|
2021-05-14 22:28:51 -07:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// Does not contain an expression, add directly
|
|
|
|
nodeValues[key] = rawValues[key];
|
|
|
|
}
|
|
|
|
// TODO: Think about how to calculate this best
|
|
|
|
if (i++ > 50) {
|
|
|
|
// Make sure we do not get caught
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
} while(resolveKeys.length !== 0);
|
|
|
|
|
2021-05-15 16:59:33 -07:00
|
|
|
if (parameterGotResolved === true) {
|
|
|
|
if (this.path) {
|
|
|
|
rawValues = JSON.parse(JSON.stringify(this.nodeValues));
|
|
|
|
set(rawValues, this.path, nodeValues);
|
|
|
|
return this.displayParameter(rawValues, parameter, this.path);
|
|
|
|
} else {
|
|
|
|
return this.displayParameter(nodeValues, parameter, '');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.displayParameter(this.nodeValues, parameter, this.path);
|
2019-06-23 03:35:23 -07:00
|
|
|
},
|
|
|
|
valueChanged (parameterData: IUpdateInformation): void {
|
|
|
|
this.$emit('valueChanged', parameterData);
|
|
|
|
},
|
|
|
|
},
|
2021-05-15 15:51:14 -07:00
|
|
|
watch: {
|
|
|
|
filteredParameterNames(newValue, oldValue) {
|
2021-05-29 17:49:20 -07:00
|
|
|
if (newValue === undefined) {
|
|
|
|
return;
|
|
|
|
}
|
2021-05-15 15:51:14 -07:00
|
|
|
// After a parameter does not get displayed anymore make sure that its value gets removed
|
|
|
|
// Is only needed for the edge-case when a parameter gets displayed depending on another field
|
|
|
|
// which contains an expression.
|
|
|
|
for (const parameter of oldValue) {
|
|
|
|
if (!newValue.includes(parameter)) {
|
|
|
|
const parameterData = {
|
|
|
|
name: `${this.path}.${parameter}`,
|
|
|
|
node: this.$store.getters.activeNode.name,
|
|
|
|
value: undefined,
|
|
|
|
};
|
|
|
|
this.$emit('valueChanged', parameterData);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2019-06-23 03:35:23 -07:00
|
|
|
beforeCreate: function () { // tslint:disable-line
|
|
|
|
// Because we have a circular dependency on CollectionParameter import it here
|
|
|
|
// to not break Vue.
|
|
|
|
this.$options!.components!.FixedCollectionParameter = require('./FixedCollectionParameter.vue').default;
|
|
|
|
this.$options!.components!.CollectionParameter = require('./CollectionParameter.vue').default;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2019-09-19 14:59:25 -07:00
|
|
|
.paramter-input-list-wrapper {
|
|
|
|
.delete-option {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
z-index: 999;
|
|
|
|
color: #f56c6c;
|
2019-06-23 03:35:23 -07:00
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
&:hover {
|
|
|
|
color: #ff0000;
|
|
|
|
}
|
2019-06-23 03:35:23 -07:00
|
|
|
}
|
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
.multi-parameter {
|
|
|
|
position: relative;
|
|
|
|
margin: 0.5em 0;
|
|
|
|
padding: 0.5em 0;
|
2019-06-23 03:35:23 -07:00
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
>.parameter-name {
|
|
|
|
font-weight: 600;
|
|
|
|
border-bottom: 1px solid #999;
|
2019-06-23 03:35:23 -07:00
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
&:hover {
|
|
|
|
.parameter-info {
|
|
|
|
display: inline;
|
|
|
|
}
|
|
|
|
}
|
2019-06-23 03:35:23 -07:00
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
.delete-option {
|
|
|
|
top: 0;
|
|
|
|
left: -0.9em;
|
|
|
|
}
|
2019-06-23 03:35:23 -07:00
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
.parameter-info {
|
|
|
|
display: none;
|
|
|
|
}
|
2019-06-23 03:35:23 -07:00
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
.parameter-item {
|
|
|
|
position: relative;
|
2021-08-29 04:36:17 -07:00
|
|
|
margin: 8px 0;
|
2019-06-23 03:35:23 -07:00
|
|
|
|
2019-09-19 14:59:25 -07:00
|
|
|
>.delete-option {
|
|
|
|
left: -0.9em;
|
|
|
|
top: 0.6em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.parameter-item:hover > .delete-option,
|
|
|
|
.parameter-name:hover > .delete-option {
|
|
|
|
display: block;
|
2019-06-23 03:35:23 -07:00
|
|
|
}
|
2021-08-21 05:11:32 -07:00
|
|
|
|
|
|
|
.parameter-notice {
|
|
|
|
background-color: #fff5d3;
|
|
|
|
color: $--custom-font-black;
|
|
|
|
margin: 0.3em 0;
|
|
|
|
padding: 0.8em;
|
2021-08-29 04:36:17 -07:00
|
|
|
line-height: 1.5;
|
2021-08-21 05:11:32 -07:00
|
|
|
|
2021-08-29 04:36:17 -07:00
|
|
|
a {
|
|
|
|
font-weight: var(--font-weight-bold);
|
2021-08-21 05:11:32 -07:00
|
|
|
}
|
|
|
|
}
|
2019-06-23 03:35:23 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|