Fix lose data on M2M (#9548)

* save initial items of m2m relation

* merge initial, draft and selected on new selection

app/src/interfaces/list-m2m/list-m2m.vue

@@ -171,7 +171,7 @@ export default defineComponent({
 			emitter
 		);
 
-		const { tableHeaders, items, loading } = usePreview(
+		const { tableHeaders, items, initialItems, loading } = usePreview(
 			value,
 			fields,
 			relationInfo,
@@ -184,7 +184,12 @@ export default defineComponent({
 		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey, editModalActive } =
 			useEdit(value, relationInfo, emitter);
 
-		const { stageSelection, selectModalActive, selectedPrimaryKeys } = useSelection(items, relationInfo, emitter);
+		const { stageSelection, selectModalActive, selectedPrimaryKeys } = useSelection(
+			items,
+			initialItems,
+			relationInfo,
+			emitter
+		);
 
 		const { sort, sortItems, sortedItems } = useSort(relationInfo, fields, items, emitter);
 

app/src/interfaces/list-m2m/use-preview.ts

@@ -11,6 +11,7 @@ import { getEndpoint } from '@/utils/get-endpoint';
 type UsablePreview = {
 	tableHeaders: Ref<Header[]>;
 	items: Ref<Record<string, any>[]>;
+	initialItems: Ref<Record<string, any>[]>;
 	loading: Ref<boolean>;
 	error: Ref<any>;
 };
@@ -30,6 +31,7 @@ export default function usePreview(
 	const fieldsStore = useFieldsStore();
 	const tableHeaders = ref<Header[]>([]);
 	const loading = ref(false);
+	const initialItems = ref<Record<string, any>[]>([]);
 	const items = ref<Record<string, any>[]>([]);
 	const error = ref<any>(null);
 
@@ -92,6 +94,8 @@ export default function usePreview(
 					})
 					.concat(...newItems);
 
+				if (!initialItems.value.length) initialItems.value = responseData;
+
 				items.value = responseData;
 			} catch (err: any) {
 				error.value = err;
@@ -140,7 +144,7 @@ export default function usePreview(
 		{ immediate: true }
 	);
 
-	return { tableHeaders, items, loading, error };
+	return { tableHeaders, items, initialItems, loading, error };
 
 	function getRelatedFields(fields: string[]) {
 		const { junctionField } = relation.value;

app/src/interfaces/list-m2m/use-selection.ts

@@ -10,6 +10,7 @@ type UsableSelection = {
 
 export default function useSelection(
 	items: Ref<Record<string, any>[]>,
+	initialItems: Ref<Record<string, any>[]>,
 	relation: Ref<RelationInfo>,
 	emit: (newVal: any[] | null) => void
 ): UsableSelection {
@@ -30,9 +31,22 @@ export default function useSelection(
 	});
 
 	function stageSelection(newSelection: (number | string)[]) {
-		const { junctionField } = relation.value;
+		const { junctionField, junctionPkField } = relation.value;
 
-		const selection = newSelection.map((item) => ({ [junctionField]: item }));
+		const selection = newSelection.map((item) => {
+			const initial = initialItems.value.find((existent) => existent[junctionField][junctionPkField] === item);
+			const draft = items.value.find((draft) => draft[junctionField][junctionPkField] === item);
+
+			return {
+				...initial,
+				...draft,
+				[junctionField]: {
+					...initial?.[junctionPkField],
+					...draft?.[junctionPkField],
+					[junctionPkField]: item,
+				},
+			};
+		});
 
 		if (selection.length === 0) emit(null);
 		else emit(selection);