Use new sort util in app

app/src/components/v-table/v-table.vue

@@ -45,8 +45,8 @@
 				tag="tbody"
 				handle=".drag-handle"
 				:disabled="disabled || _sort.by !== manualSortKey"
-				@change="onSortChange"
 				:set-data="hideDragImage"
+				@end="onSortChange"
 			>
 				<table-row
 					v-for="item in _items"
@@ -363,25 +363,18 @@ export default defineComponent({
 			}
 		}
 
-		interface VueDraggableChangeEvent extends CustomEvent {
-			moved?: {
-				oldIndex: number;
-				newIndex: number;
-
-				element: Record<string, any>;
-			};
+		interface EndEvent extends CustomEvent {
+			oldIndex: number;
+			newIndex: number;
 		}
 
-		function onSortChange(event: VueDraggableChangeEvent) {
+		function onSortChange(event: EndEvent) {
 			if (props.disabled) return;
 
-			if (event.moved) {
-				emit('manual-sort', {
-					item: event.moved.element,
-					oldIndex: event.moved.oldIndex,
-					newIndex: event.moved.newIndex,
-				});
-			}
+			const item = _items.value[event.oldIndex][props.itemKey];
+			const to = _items.value[event.newIndex][props.itemKey];
+
+			emit('manual-sort', { item, to });
 		}
 	},
 });

app/src/composables/use-items/use-items.ts

@@ -216,50 +216,20 @@ export function useItems(collection: Ref<string>, query: Query) {
 	}
 
 	type ManualSortData = {
-		item: Record<string, any>;
-		oldIndex: number;
-		newIndex: number;
+		item: string | number;
+		to: string | number;
 	};
 
-	async function changeManualSort({ item, oldIndex, newIndex }: ManualSortData) {
+	async function changeManualSort({ item, to }: ManualSortData) {
 		const pk = primaryKeyField.value?.field;
 		if (!pk) return;
 
-		const move = newIndex > oldIndex ? 'down' : 'up';
-		const selectionRange = move === 'down' ? [oldIndex + 1, newIndex + 1] : [newIndex, oldIndex];
+		const fromIndex = items.value.findIndex((existing: Record<string, any>) => existing[pk] === item);
+		const toIndex = items.value.findIndex((existing: Record<string, any>) => existing[pk] === to);
 
-		const updates = items.value.slice(...selectionRange).map((toBeUpdatedItem: any) => {
-			const sortValue = getPositionForItem(toBeUpdatedItem);
+		items.value = moveInArray(items.value, fromIndex, toIndex);
 
-			return {
-				[pk]: toBeUpdatedItem[pk],
-				sort: move === 'down' ? sortValue - 1 : sortValue + 1,
-			};
-		});
-
-		const sortOfItemOnNewIndex = newIndex + 1 + limit.value * (page.value - 1);
-
-		updates.push({
-			[pk]: item[pk],
-			sort: sortOfItemOnNewIndex,
-		});
-
-		// Reflect changes in local items array
-		items.value = moveInArray(items.value, oldIndex, newIndex);
-
-		// Save updates to items
-		await api.patch(endpoint.value, updates);
-	}
-
-	// Used as default value for the sort position. This is the index of the given item in the array
-	// of items, offset by the page count and current page
-
-	function getPositionForItem(item: any) {
-		const pk = primaryKeyField.value?.field;
-		if (!pk) return;
-
-		const index = items.value.findIndex((existingItem: any) => existingItem[pk] === item[pk]);
-
-		return index + 1 + limit.value * (page.value - 1);
+		const endpoint = computed(() => `/utils/sort/${collection.value}`);
+		await api.post(endpoint.value, { item, to });
 	}
 }

app/src/layouts/tabular/tabular.vue

@@ -227,7 +227,7 @@ export default defineComponent({
 			page,
 			fields: fieldsWithRelational,
 			filters: _filters,
-			searchQuery,
+			searchQuery: _searchQuery,
 		});
 
 		const {

app/src/utils/move-in-array/move-in-array.ts

@@ -21,5 +21,6 @@ export default function moveInArray(array: readonly any[], fromIndex: number, to
 			...array.slice(targetIndex, length),
 		];
 	}
+
 	return array;
 }