mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
refactor(editor): Refactor nodeHelpers mixin to composable (#7810)
- Convert `nodeHelpers` mixin into composable and fix types - Replace usage of the mixin with the new composable - Add missing store imports in components that were dependent on opaque imports from nodeHelpers mixin - Refactor the `CollectionParameter` component to the modern script setup syntax Github issue / Community forum post (link here to close automatically): --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
oleg
@@ -19,10 +19,10 @@
|
||||
|
||||
<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
|
||||
<n8n-button
|
||||
v-if="parameter.options.length === 1"
|
||||
v-if="(parameter.options ?? []).length === 1"
|
||||
type="tertiary"
|
||||
block
|
||||
@click="optionSelected(parameter.options[0].name)"
|
||||
@click="optionSelected((parameter.options ?? [])[0].name)"
|
||||
:label="getPlaceholderText"
|
||||
/>
|
||||
<div v-else class="add-option">
|
||||
@@ -36,7 +36,11 @@
|
||||
<n8n-option
|
||||
v-for="item in parameterOptions"
|
||||
:key="item.name"
|
||||
:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
|
||||
:label="
|
||||
isNodePropertyCollection(item)
|
||||
? i18n.nodeText().collectionOptionDisplayName(parameter, item, path)
|
||||
: item.name
|
||||
"
|
||||
:value="item.name"
|
||||
>
|
||||
</n8n-option>
|
||||
@@ -47,157 +51,155 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
import type { INodeUi, IUpdateInformation } from '@/Interface';
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, defineAsyncComponent } from 'vue';
|
||||
import type { IUpdateInformation } from '@/Interface';
|
||||
|
||||
import type { INodeProperties, INodePropertyOptions } from 'n8n-workflow';
|
||||
import type {
|
||||
INodeParameters,
|
||||
INodeProperties,
|
||||
INodePropertyCollection,
|
||||
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';
|
||||
|
||||
import { useNodeHelpers } from '@/composables/useNodeHelpers';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
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.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;
|
||||
}
|
||||
const selectedOption = ref<string | undefined>(undefined);
|
||||
export interface Props {
|
||||
hideDelete?: boolean;
|
||||
nodeValues: INodeParameters;
|
||||
parameter: INodeProperties;
|
||||
path: string;
|
||||
values: INodeProperties;
|
||||
isReadOnly?: boolean;
|
||||
}
|
||||
const emit = defineEmits<{
|
||||
(event: 'valueChanged', value: IUpdateInformation): void;
|
||||
}>();
|
||||
const props = defineProps<Props>();
|
||||
const ndvStore = useNDVStore();
|
||||
const i18n = useI18n();
|
||||
const nodeHelpers = useNodeHelpers();
|
||||
|
||||
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);
|
||||
},
|
||||
},
|
||||
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 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">
|
||||
|
||||
Reference in New Issue
Block a user