From 698b1ea3934aae17ff0f33b0d37f2e09f76fc3a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Varela?= <joselcvarela@gmail.com>
Date: Mon, 27 Dec 2021 15:52:30 +0000
Subject: [PATCH] add sort on create m2m item (#10703)

---
 app/src/interfaces/list-m2m/list-m2m.vue | 19 ++++++++++++++-----
 app/src/interfaces/list-m2m/use-edit.ts  | 21 ++++++++++++++++++++-
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index 2c70a0bec0..af9bb2f5c0 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -21,13 +21,13 @@
 				:model-value="sortedItems"
 				item-key="id"
 				handle=".drag-handle"
-				:disabled="!junction.meta.sort_field"
+				:disabled="!junction.meta?.sort_field"
 				@update:model-value="sortItems($event)"
 			>
 				<template #item="{ element }">
 					<v-list-item :dense="sortedItems.length > 4" block clickable @click="editItem(element)">
 						<v-icon
-							v-if="junction.meta.sort_field"
+							v-if="junction.meta?.sort_field"
 							name="drag_handle"
 							class="drag-handle"
 							left
@@ -46,7 +46,7 @@
 		</v-list>
 
 		<div v-if="!disabled" class="actions">
-			<v-button v-if="enableCreate && createAllowed" @click="editModalActive = true">{{ t('create_new') }}</v-button>
+			<v-button v-if="enableCreate && createAllowed" @click="createNew()">{{ t('create_new') }}</v-button>
 			<v-button v-if="enableSelect && selectAllowed" @click="selectModalActive = true">
 				{{ t('add_existing') }}
 			</v-button>
@@ -204,8 +204,16 @@ export default defineComponent({
 			getPrimaryKeys
 		);
 
-		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey, editModalActive } =
-			useEdit(value, relationInfo, emitter);
+		const {
+			currentlyEditing,
+			editItem,
+			createNew,
+			editsAtStart,
+			stageEdits,
+			cancelEdit,
+			relatedPrimaryKey,
+			editModalActive,
+		} = useEdit(value, relationInfo, emitter);
 
 		const { stageSelection, selectModalActive, selectedPrimaryKeys } = useSelection(
 			items,
@@ -226,6 +234,7 @@ export default defineComponent({
 			loading,
 			currentlyEditing,
 			editItem,
+			createNew,
 			junctionCollection,
 			relationCollection,
 			editsAtStart,
diff --git a/app/src/interfaces/list-m2m/use-edit.ts b/app/src/interfaces/list-m2m/use-edit.ts
index 92cdab0b34..0ba2e33f12 100644
--- a/app/src/interfaces/list-m2m/use-edit.ts
+++ b/app/src/interfaces/list-m2m/use-edit.ts
@@ -4,6 +4,7 @@ import { RelationInfo } from '@/composables/use-m2m';
 
 type UsableEdit = {
 	currentlyEditing: Ref<string | number | null>;
+	createNew: () => void;
 	editItem: (item: any) => void;
 	editsAtStart: Ref<Record<string, any>>;
 	stageEdits: (edits: any) => void;
@@ -33,6 +34,15 @@ export default function useEdit(
 		relatedPrimaryKey.value = get(item, [junctionField, relationPkField], null);
 	}
 
+	function createNew() {
+		const { sortField } = relation.value;
+
+		editModalActive.value = true;
+		editsAtStart.value = { ...(sortField ? { [sortField]: (value.value || []).length } : null) };
+		currentlyEditing.value = null;
+		relatedPrimaryKey.value = null;
+	}
+
 	function stageEdits(edits: any) {
 		const { relationPkField, junctionField, junctionPkField } = relation.value;
 
@@ -78,5 +88,14 @@ export default function useEdit(
 		relatedPrimaryKey.value = null;
 	}
 
-	return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey, editModalActive };
+	return {
+		currentlyEditing,
+		editItem,
+		createNew,
+		editsAtStart,
+		stageEdits,
+		cancelEdit,
+		relatedPrimaryKey,
+		editModalActive,
+	};
 }