⚡ Add optional sort option if "multipleValues" is set

packages/editor-ui/src/components/FixedCollectionParameter.vue

@@ -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) {

packages/editor-ui/src/components/MultipleParameter.vue

@@ -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)">
+			<div class="delete-item clickable" v-if="!isReadOnly">
-				<font-awesome-icon icon="trash" />
+				<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;

packages/workflow/src/Interfaces.ts

@@ -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[];
 }