n8n/packages/editor-ui/src/components/CollectionParameter.vue

<template>
	<div @keydown.stop class="collection-parameter">
		<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>
				<parameter-input-list
					:parameters="getProperties"
					:nodeValues="nodeValues"
					:path="path"
					:hideDelete="hideDelete"
					:indent="true"
					:isReadOnly="isReadOnly"
					@valueChanged="valueChanged"
				/>
			</Suspense>

			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
				<n8n-button
					v-if="parameter.options.length === 1"
					type="tertiary"
					block
					@click="optionSelected(parameter.options[0].name)"
					:label="getPlaceholderText"
				/>
				<div v-else class="add-option">
					<n8n-select
						v-model="selectedOption"
						:placeholder="getPlaceholderText"
						size="small"
						@update:modelValue="optionSelected"
						filterable
					>
						<n8n-option
							v-for="item in parameterOptions"
							:key="item.name"
							:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
							:value="item.name"
						>
						</n8n-option>
					</n8n-select>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
import { mapStores } from 'pinia';
import type { INodeUi, IUpdateInformation } from '@/Interface';

import type { INodeProperties, INodePropertyOptions } from 'n8n-workflow';
import { deepCopy } from 'n8n-workflow';

import { nodeHelpers } from '@/mixins/nodeHelpers';

import { get } from 'lodash-es';

import { useNDVStore } from '@/stores/ndv.store';

const ParameterInputList = defineAsyncComponent(async () => import('./ParameterInputList.vue'));

export default defineComponent({
	name: 'CollectionParameter',
	mixins: [nodeHelpers],
	props: [
		'hideDelete', // boolean
		'nodeValues', // NodeParameters
		'parameter', // INodeProperties
		'path', // string
		'values', // NodeParameters
		'isReadOnly', // boolean
	],
	components: {
		ParameterInputList,
	},
	data() {
		return {
			selectedOption: undefined,
		};
	},
	computed: {
		...mapStores(useNDVStore),
		getPlaceholderText(): string {
			const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
			return placeholder ? placeholder : this.$locale.baseText('collectionParameter.choose');
		},
		getProperties(): INodeProperties[] {
			const returnProperties = [];
			let tempProperties;
			for (const name of this.propertyNames) {
				tempProperties = this.getOptionProperties(name);
				if (tempProperties !== undefined) {
					returnProperties.push(...tempProperties);
				}
			}
			return returnProperties;
		},
		// Returns all the options which should be displayed
		filteredOptions(): Array<INodePropertyOptions | INodeProperties> {
			return (this.parameter.options as Array<INodePropertyOptions | INodeProperties>).filter(
				(option) => {
					return this.displayNodeParameter(option as INodeProperties);
				},
			);
		},
		node(): INodeUi | null {
			return this.ndvStore.activeNode;
		},
		// Returns all the options which did not get added already
		parameterOptions(): Array<INodePropertyOptions | INodeProperties> {
			return (this.filteredOptions as Array<INodePropertyOptions | INodeProperties>).filter(
				(option) => {
					return !this.propertyNames.includes(option.name);
				},
			);
		},
		propertyNames(): string[] {
			if (this.values) {
				return Object.keys(this.values);
			}
			return [];
		},
	},
	methods: {
		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];
		},
		getOptionProperties(optionName: string): INodeProperties[] {
			const properties: INodeProperties[] = [];
			for (const option of this.parameter.options) {
				if (option.name === optionName) {
					properties.push(option);
				}
			}

			return properties;
		},
		displayNodeParameter(parameter: INodeProperties) {
			if (parameter.displayOptions === undefined) {
				// If it is not defined no need to do a proper check
				return true;
			}
			return this.displayParameter(this.nodeValues, parameter, this.path, this.node);
		},
		optionSelected(optionName: string) {
			const options = this.getOptionProperties(optionName);
			if (options.length === 0) {
				return;
			}

			const option = options[0];
			const name = `${this.path}.${option.name}`;

			let parameterData;

			if (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.
					newValue = get(this.nodeValues, `${this.path}.${optionName}`, {});
				} else {
					// Everything else saves them directly as an array.
					newValue = get(this.nodeValues, `${this.path}.${optionName}`, []);
					newValue.push(deepCopy(option.default));
				}

				parameterData = {
					name,
					value: newValue,
				};
			} else {
				// Add a new option
				parameterData = {
					name,
					value: deepCopy(option.default),
				};
			}

			this.$emit('valueChanged', parameterData);
			this.selectedOption = undefined;
		},
		valueChanged(parameterData: IUpdateInformation) {
			this.$emit('valueChanged', parameterData);
		},
	},
});
</script>

<style lang="scss">
.collection-parameter {
	padding-left: var(--spacing-s);

	.param-options {
		margin-top: var(--spacing-xs);

		.button {
			--button-background-color: var(--color-background-base);
		}
	}

	.no-items-exist {
		margin: var(--spacing-xs) 0;
	}
	.option {
		position: relative;
		padding: 0.25em 0 0.25em 1em;
	}
}
</style>