mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-12 05:17:28 -08:00
⚡ Add optional sort option if "multipleValues" is set
This commit is contained in:
parent
aaae7964d6
commit
95315cec60
|
@ -10,8 +10,12 @@
|
|||
<div v-if="multipleValues === true">
|
||||
<div v-for="(value, index) in values[property.name]" :key="property.name + index" class="parameter-item">
|
||||
<div class="parameter-item-wrapper">
|
||||
<div class="delete-option" title="Delete" v-if="!isReadOnly">
|
||||
<div class="delete-option" v-if="!isReadOnly">
|
||||
<font-awesome-icon icon="trash" class="reset-icon clickable" title="Delete Item" @click="deleteOption(property.name, index)" />
|
||||
<div v-if="sortable">
|
||||
<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" title="Move up" @click="moveOptionUp(property.name, index)" />
|
||||
<font-awesome-icon v-if="index !== (values[property.name].length -1)" icon="angle-down" class="clickable" title="Move down" @click="moveOptionDown(property.name, index)" />
|
||||
</div>
|
||||
</div>
|
||||
<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name, index)" :hideDelete="true" @valueChanged="valueChanged" />
|
||||
</div>
|
||||
|
@ -19,7 +23,7 @@
|
|||
</div>
|
||||
<div v-else class="parameter-item">
|
||||
<div class="parameter-item-wrapper">
|
||||
<div class="delete-option" title="Delete" v-if="!isReadOnly">
|
||||
<div class="delete-option" v-if="!isReadOnly">
|
||||
<font-awesome-icon icon="trash" class="reset-icon clickable" title="Delete Item" @click="deleteOption(property.name)" />
|
||||
</div>
|
||||
<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name)" class="parameter-item" @valueChanged="valueChanged" :hideDelete="true" />
|
||||
|
@ -111,6 +115,9 @@ export default mixins(genericHelpers)
|
|||
}
|
||||
return [];
|
||||
},
|
||||
sortable (): string {
|
||||
return this.parameter.typeOptions && this.parameter.typeOptions.sortable;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
deleteOption (optionName: string, index?: number) {
|
||||
|
@ -133,6 +140,26 @@ export default mixins(genericHelpers)
|
|||
|
||||
return undefined;
|
||||
},
|
||||
moveOptionDown (optionName: string, index?: number) {
|
||||
this.values[optionName].splice(index + 1, 0, this.values[optionName].splice(index, 1)[0]);
|
||||
|
||||
const parameterData = {
|
||||
name: this.getPropertyPath(optionName),
|
||||
value: this.values[optionName],
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
moveOptionUp (optionName: string, index?: number) {
|
||||
this.values[optionName].splice(index - 1, 0, this.values[optionName].splice(index, 1)[0]);
|
||||
|
||||
const parameterData = {
|
||||
name: this.getPropertyPath(optionName),
|
||||
value: this.values[optionName],
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
optionSelected (optionName: string) {
|
||||
const option = this.getOptionProperties(optionName);
|
||||
if (option === undefined) {
|
||||
|
|
|
@ -10,8 +10,12 @@
|
|||
</div>
|
||||
|
||||
<div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type">
|
||||
<div class="delete-item clickable" v-if="!isReadOnly" title="Delete Item" @click="deleteItem(index)">
|
||||
<font-awesome-icon icon="trash" />
|
||||
<div class="delete-item clickable" v-if="!isReadOnly">
|
||||
<font-awesome-icon icon="trash" title="Delete Item" @click="deleteItem(index)" />
|
||||
<div v-if="sortable">
|
||||
<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" title="Move up" @click="moveOptionUp(index)" />
|
||||
<font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" title="Move down" @click="moveOptionDown(index)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="parameter.type === 'collection'">
|
||||
<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" @valueChanged="valueChanged" />
|
||||
|
@ -67,6 +71,9 @@ export default mixins(genericHelpers)
|
|||
hideDelete (): boolean {
|
||||
return this.parameter.options.length === 1;
|
||||
},
|
||||
sortable (): string {
|
||||
return this.parameter.typeOptions && this.parameter.typeOptions.sortable;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addItem () {
|
||||
|
@ -97,6 +104,26 @@ export default mixins(genericHelpers)
|
|||
getPath (index?: number): string {
|
||||
return this.path + (index !== undefined ? `[${index}]` : '');
|
||||
},
|
||||
moveOptionDown (index?: number) {
|
||||
this.values.splice(index + 1, 0, this.values.splice(index, 1)[0]);
|
||||
|
||||
const parameterData = {
|
||||
name: this.path,
|
||||
value: this.values,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
moveOptionUp (index?: number) {
|
||||
this.values.splice(index - 1, 0, this.values.splice(index, 1)[0]);
|
||||
|
||||
const parameterData = {
|
||||
name: this.path,
|
||||
value: this.values,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
valueChanged (parameterData: IUpdateInformation) {
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
|
@ -125,6 +152,7 @@ export default mixins(genericHelpers)
|
|||
top: .3em;
|
||||
z-index: 999;
|
||||
color: #f56c6c;
|
||||
width: 15px;
|
||||
|
||||
:hover {
|
||||
color: #ff0000;
|
||||
|
|
|
@ -409,6 +409,7 @@ export interface INodePropertyTypeOptions {
|
|||
password?: boolean; // Supported by: string
|
||||
rows?: number; // Supported by: string
|
||||
showAlpha?: boolean; // Supported by: color
|
||||
sortable?: boolean; // Supported when "multipleValues" set to true
|
||||
[key: string]: boolean | number | string | EditorTypes | undefined | string[];
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue