Add manual sort support to files

Fixes #849

app/src/interfaces/files/files.vue

@@ -5,12 +5,15 @@
 	<div v-else class="files">
 		<v-table
 			inline
-			:items="items"
+			:items="sortedItems || items"
 			:loading="loading"
 			:headers.sync="tableHeaders"
 			:item-key="relationInfo.junctionPkField"
 			:disabled="disabled"
+			@update:items="sortItems($event)"
 			@click:row="editItem"
+			:show-manual-sort="sortField !== null"
+			:manual-sort-key="sortField"
 		>
 			<template #item.$thumbnail="{ item }">
 				<render-display
@@ -81,6 +84,7 @@ import useRelation from '@/interfaces/many-to-many/use-relation';
 import useSelection from '@/interfaces/many-to-many/use-selection';
 import usePreview from '@/interfaces/many-to-many/use-preview';
 import useEdit from '@/interfaces/many-to-many/use-edit';
+import useSort from '@/interfaces/many-to-many/use-sort';
 
 export default defineComponent({
 	components: { DrawerCollection, DrawerItem },
@@ -185,6 +189,8 @@ export default defineComponent({
 
 		const { showUpload, onUpload } = useUpload();
 
+		const { sort, sortItems, sortedItems } = useSort(sortField, fields, items, emitter);
+
 		return {
 			junction,
 			relation,
@@ -208,6 +214,9 @@ export default defineComponent({
 			editItem,
 			editModalActive,
 			relatedPrimaryKey,
+			sort,
+			sortItems,
+			sortedItems,
 		};
 
 		function useUpload() {

app/src/interfaces/files/index.ts

@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceFiles from './files.vue';
+import FilesOptions from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'files',
@@ -10,6 +11,6 @@ export default defineInterface(({ i18n }) => ({
 	types: ['alias'],
 	localTypes: ['files'],
 	relationship: 'm2m',
-	options: [],
+	options: FilesOptions,
 	recommendedDisplays: ['files'],
 }));

app/src/interfaces/files/options.vue

@@ -0,0 +1,92 @@
+<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">
+			<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>

app/src/interfaces/many-to-many/many-to-many.vue

@@ -2,7 +2,7 @@
 	<v-notice type="warning" v-if="!junction || !relation">
 		{{ $t('relationship_not_setup') }}
 	</v-notice>
-	<div class="one-to-many" v-else>
+	<div class="many-to-many" v-else>
 		<v-table
 			:loading="loading"
 			:items="sortedItems || items"

app/src/interfaces/many-to-one/many-to-one.vue

@@ -361,7 +361,7 @@ export default defineComponent({
 		function usePreview() {
 			const displayTemplate = computed(() => {
 				if (props.template !== null) return props.template;
-				return collectionInfo.value?.meta?.display_template;
+				return collectionInfo.value?.meta?.display_template || `{{ ${relatedPrimaryKeyField} }}`;
 			});
 
 			const requiredFields = computed(() => {