mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
254 lines
6.7 KiB
Vue
254 lines
6.7 KiB
Vue
<template>
|
|
<div class="collection-parameter" @keydown.stop>
|
|
<div class="collection-parameter-wrapper">
|
|
<div v-if="getProperties.length === 0" class="no-items-exist">
|
|
<n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
|
|
</div>
|
|
|
|
<Suspense>
|
|
<ParameterInputList
|
|
:parameters="getProperties"
|
|
:node-values="nodeValues"
|
|
:path="path"
|
|
:hide-delete="hideDelete"
|
|
:indent="true"
|
|
:is-read-only="isReadOnly"
|
|
@value-changed="valueChanged"
|
|
/>
|
|
</Suspense>
|
|
|
|
<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
|
|
<n8n-button
|
|
v-if="(parameter.options ?? []).length === 1"
|
|
type="tertiary"
|
|
block
|
|
:label="getPlaceholderText"
|
|
@click="optionSelected((parameter.options ?? [])[0].name)"
|
|
/>
|
|
<div v-else class="add-option">
|
|
<n8n-select
|
|
v-model="selectedOption"
|
|
:placeholder="getPlaceholderText"
|
|
size="small"
|
|
filterable
|
|
@update:model-value="optionSelected"
|
|
>
|
|
<n8n-option
|
|
v-for="item in parameterOptions"
|
|
:key="item.name"
|
|
:label="getParameterOptionLabel(item)"
|
|
:value="item.name"
|
|
data-test-id="collection-parameter-option"
|
|
>
|
|
</n8n-option>
|
|
</n8n-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed } from 'vue';
|
|
import type { IUpdateInformation } from '@/Interface';
|
|
|
|
import type {
|
|
INodeParameters,
|
|
INodeProperties,
|
|
INodePropertyCollection,
|
|
INodePropertyOptions,
|
|
} from 'n8n-workflow';
|
|
import { deepCopy } from 'n8n-workflow';
|
|
|
|
import { get } from 'lodash-es';
|
|
|
|
import { useNDVStore } from '@/stores/ndv.store';
|
|
import { useNodeHelpers } from '@/composables/useNodeHelpers';
|
|
import { useI18n } from '@/composables/useI18n';
|
|
|
|
const selectedOption = ref<string | undefined>(undefined);
|
|
export interface Props {
|
|
hideDelete?: boolean;
|
|
nodeValues: INodeParameters;
|
|
parameter: INodeProperties;
|
|
path: string;
|
|
values: INodeParameters;
|
|
isReadOnly?: boolean;
|
|
}
|
|
const emit = defineEmits<{
|
|
(event: 'valueChanged', value: IUpdateInformation): void;
|
|
}>();
|
|
const props = defineProps<Props>();
|
|
const ndvStore = useNDVStore();
|
|
const i18n = useI18n();
|
|
const nodeHelpers = useNodeHelpers();
|
|
|
|
const getPlaceholderText = computed(() => {
|
|
return (
|
|
i18n.nodeText().placeholder(props.parameter, props.path) ??
|
|
i18n.baseText('collectionParameter.choose')
|
|
);
|
|
});
|
|
|
|
function isNodePropertyCollection(
|
|
object: INodePropertyOptions | INodeProperties | INodePropertyCollection,
|
|
): object is INodePropertyCollection {
|
|
return 'values' in object;
|
|
}
|
|
|
|
function getParameterOptionLabel(
|
|
item: INodePropertyOptions | INodeProperties | INodePropertyCollection,
|
|
): string {
|
|
if (isNodePropertyCollection(item)) {
|
|
return i18n.nodeText().collectionOptionDisplayName(props.parameter, item, props.path);
|
|
}
|
|
|
|
return 'displayName' in item ? item.displayName : item.name;
|
|
}
|
|
|
|
function displayNodeParameter(parameter: INodeProperties) {
|
|
if (parameter.displayOptions === undefined) {
|
|
// If it is not defined no need to do a proper check
|
|
return true;
|
|
}
|
|
return nodeHelpers.displayParameter(props.nodeValues, parameter, props.path, ndvStore.activeNode);
|
|
}
|
|
|
|
function getOptionProperties(optionName: string) {
|
|
const properties = [];
|
|
for (const option of props.parameter.options ?? []) {
|
|
if (option.name === optionName) {
|
|
properties.push(option);
|
|
}
|
|
}
|
|
|
|
return properties;
|
|
}
|
|
const propertyNames = computed<string[]>(() => {
|
|
if (props.values) {
|
|
return Object.keys(props.values);
|
|
}
|
|
return [];
|
|
});
|
|
const getProperties = computed(() => {
|
|
const returnProperties = [];
|
|
let tempProperties;
|
|
for (const name of propertyNames.value) {
|
|
tempProperties = getOptionProperties(name);
|
|
if (tempProperties !== undefined) {
|
|
returnProperties.push(...tempProperties);
|
|
}
|
|
}
|
|
return returnProperties;
|
|
});
|
|
const filteredOptions = computed<Array<INodePropertyOptions | INodeProperties>>(() => {
|
|
return (props.parameter.options as Array<INodePropertyOptions | INodeProperties>).filter(
|
|
(option) => {
|
|
return displayNodeParameter(option as INodeProperties);
|
|
},
|
|
);
|
|
});
|
|
const parameterOptions = computed(() => {
|
|
return filteredOptions.value.filter((option) => {
|
|
return !propertyNames.value.includes(option.name);
|
|
});
|
|
});
|
|
|
|
function optionSelected(optionName: string) {
|
|
const options = getOptionProperties(optionName);
|
|
if (options.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const option = options[0];
|
|
const name = `${props.path}.${option.name}`;
|
|
|
|
let parameterData;
|
|
|
|
if (
|
|
'typeOptions' in option &&
|
|
option.typeOptions !== undefined &&
|
|
option.typeOptions.multipleValues === true
|
|
) {
|
|
// Multiple values are allowed
|
|
let newValue;
|
|
if (option.type === 'fixedCollection') {
|
|
// The "fixedCollection" entries are different as they save values
|
|
// in an object and then underneath there is an array. So initialize
|
|
// them differently.
|
|
const retrievedObjectValue = get(props.nodeValues, [props.path, optionName], {});
|
|
newValue = retrievedObjectValue;
|
|
} else {
|
|
// Everything else saves them directly as an array.
|
|
const retrievedArrayValue = get(props.nodeValues, [props.path, optionName], []) as Array<
|
|
typeof option.default
|
|
>;
|
|
if (Array.isArray(retrievedArrayValue)) {
|
|
newValue = retrievedArrayValue;
|
|
newValue.push(deepCopy(option.default));
|
|
}
|
|
}
|
|
|
|
parameterData = {
|
|
name,
|
|
value: newValue,
|
|
};
|
|
} else {
|
|
// Add a new option
|
|
parameterData = {
|
|
name,
|
|
value: 'default' in option ? deepCopy(option.default) : null,
|
|
};
|
|
}
|
|
|
|
emit('valueChanged', parameterData);
|
|
selectedOption.value = undefined;
|
|
}
|
|
function valueChanged(parameterData: IUpdateInformation) {
|
|
emit('valueChanged', parameterData);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.collection-parameter {
|
|
padding-left: var(--spacing-s);
|
|
|
|
.param-options {
|
|
margin-top: var(--spacing-xs);
|
|
|
|
.button {
|
|
color: var(--color-text-dark);
|
|
font-weight: var(--font-weight-normal);
|
|
--button-border-color: var(--color-foreground-base);
|
|
--button-background-color: var(--color-background-base);
|
|
|
|
--button-hover-font-color: var(--color-button-secondary-font);
|
|
--button-hover-border-color: var(--color-foreground-base);
|
|
--button-hover-background-color: var(--color-background-base);
|
|
|
|
--button-active-font-color: var(--color-button-secondary-font);
|
|
--button-active-border-color: var(--color-foreground-base);
|
|
--button-active-background-color: var(--color-background-base);
|
|
|
|
--button-focus-font-color: var(--color-button-secondary-font);
|
|
--button-focus-border-color: var(--color-foreground-base);
|
|
--button-focus-background-color: var(--color-background-base);
|
|
|
|
&:active,
|
|
&.active,
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-items-exist {
|
|
margin: var(--spacing-xs) 0;
|
|
}
|
|
.option {
|
|
position: relative;
|
|
padding: 0.25em 0 0.25em 1em;
|
|
}
|
|
}
|
|
</style>
|