Add missing sort option in m2a builder interface

Ref #3231

app/src/interfaces/_system/field/field.vue

@@ -78,7 +78,7 @@ export default defineComponent({
 			})
 		);
 
-		return { selectItems, values };
+		return { selectItems, values, fields };
 	},
 });
 </script>

app/src/interfaces/m2a-builder/index.ts

@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceManyToAny from './m2a-builder.vue';
+import Options from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'm2a-builder',
@@ -9,5 +10,5 @@ export default defineInterface(({ i18n }) => ({
 	relational: true,
 	types: ['alias'],
 	groups: ['m2a'],
-	options: [],
+	options: Options,
 }));

app/src/interfaces/m2a-builder/m2a-builder.vue

@@ -1,16 +1,7 @@
-<!--
-
-@TODO
-
-- sort (dnd)
-- processM2A in PayloadService
-
--->
-
 <template>
 	<div class="m2a-builder">
 		<div v-if="previewLoading" class="loader">
-			<v-skeleton-loader v-for="n in 5" :key="n" />
+			<v-skeleton-loader v-for="n in (value || []).length" :key="n" />
 		</div>
 
 		<draggable
@@ -276,13 +267,20 @@ export default defineComponent({
 				// related values
 				const values = cloneDeep(props.value || [])
 					.map((val) => {
-						if (isPlainObject(val)) {
-							return val;
-						}
+						const junctionKey = isPlainObject(val) ? val[o2mRelation.value.many_primary] : val;
 
-						return junctionRowMap.value.find(
-							(junctionRow) => junctionRow[o2mRelation.value.many_primary] === val
+						const savedValues = junctionRowMap.value.find(
+							(junctionRow) => junctionRow[o2mRelation.value.many_primary] === junctionKey
 						);
+
+						if (isPlainObject(val)) {
+							return {
+								...savedValues,
+								...val,
+							};
+						} else {
+							return savedValues;
+						}
 					})
 					.filter((val) => val);
 
@@ -342,6 +340,12 @@ export default defineComponent({
 							junctionRowsToInspect.push(stagedValue);
 						}
 
+						// There's a case where you sort with no other changes where the one_collection_field doesn't exist
+						// and there's no further changes nested in the many field
+						else if (anyRelation.value.one_collection_field! in stagedValue === false) {
+							junctionRowsToInspect.push(stagedValue[o2mRelation.value.many_primary]);
+						}
+
 						// Otherwise, it's an object with the edits on an existing item, or a newly added item
 						// In both cases, it'll have the "one_collection_field" set. Both theoretically can have a primary key
 						// though the primary key could be a newly created one
@@ -595,6 +599,12 @@ export default defineComponent({
 	}
 }
 
+.loader {
+	.v-skeleton-loader + .v-skeleton-loader {
+		margin-top: 12px;
+	}
+}
+
 .buttons {
 	display: grid;
 	grid-gap: 12px;

app/src/interfaces/m2a-builder/options.vue

@@ -0,0 +1,96 @@
+<template>
+	<v-notice type="warning" v-if="junctionCollection === null">
+		{{ $t('interfaces.one-to-many.no_collection') }}
+	</v-notice>
+	<div v-else class="form-grid">
+		<div class="field half-space">
+			<p class="type-label">{{ $t('sort_field') }}</p>
+
+			<interface-field
+				v-model="sortField"
+				:collection="junctionCollection"
+				:type-allow-list="['bigInteger', 'integer']"
+				allowNone
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Field } from '@/types';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+import { useRelationsStore } from '@/stores/';
+import { Relation, Collection } from '@/types';
+import { useCollectionsStore } from '../../stores';
+
+export default defineComponent({
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		fieldData: {
+			type: Object as PropType<Field>,
+			default: null,
+		},
+		relations: {
+			type: Array as PropType<Relation[]>,
+			default: () => [],
+		},
+		value: {
+			type: Object as PropType<any>,
+			default: null,
+		},
+		newCollections: {
+			type: Array as PropType<Collection[]>,
+			default: () => [],
+		},
+		newFields: {
+			type: Array as PropType<Field[]>,
+			default: () => [],
+		},
+	},
+	setup(props, { emit }) {
+		const collectionsStore = useCollectionsStore();
+		const relationsStore = useRelationsStore();
+
+		const sortField = computed({
+			get() {
+				return props.value?.sortField;
+			},
+			set(newFields: string) {
+				emit('input', {
+					...(props.value || {}),
+					sortField: newFields,
+				});
+			},
+		});
+
+		const junctionCollection = computed(() => {
+			if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
+			const { field } = props.fieldData;
+
+			const junctionRelation = props.relations.find(
+				(relation) => relation.one_collection === props.collection && relation.one_field === field
+			);
+
+			return junctionRelation?.many_collection || null;
+		});
+
+		const junctionCollectionExists = computed(() => {
+			return !!collectionsStore.state.collections.find(
+				(collection) => collection.collection === junctionCollection.value
+			);
+		});
+
+		return { sortField, junctionCollection, junctionCollectionExists };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+.form-grid {
+	@include form-grid;
+}
+</style>