From 11ea192368bbaf2fe501473ad753da4994e73e8a Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 9 Jun 2021 20:13:21 -0400
Subject: [PATCH] Fix issue that would cause sort order of fields to be
 corrupted on field changes (#6174)

Fixes #6091
---
 .../use-form-fields/use-form-fields.ts        | 10 +++++++++-
 app/src/stores/fields.ts                      | 20 +------------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/app/src/composables/use-form-fields/use-form-fields.ts b/app/src/composables/use-form-fields/use-form-fields.ts
index 184900b233..04cf4e0353 100644
--- a/app/src/composables/use-form-fields/use-form-fields.ts
+++ b/app/src/composables/use-form-fields/use-form-fields.ts
@@ -5,12 +5,14 @@ import { getInterfaces } from '@/interfaces';
 import { InterfaceConfig } from '@/interfaces/types';
 import { Field } from '@/types';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
-import { clone } from 'lodash';
+import { clone, orderBy } from 'lodash';
 import { computed, ComputedRef, Ref } from 'vue';
 
 export default function useFormFields(fields: Ref<Field[]>): { formFields: ComputedRef<Field[]> } {
 	const { interfaces } = getInterfaces();
 
+	const systemFieldsCount = computed(() => fields.value.filter((field) => field.meta?.system === true).length);
+
 	const formFields = computed(() => {
 		let formFields = clone(fields.value);
 
@@ -42,6 +44,10 @@ export default function useFormFields(fields: Ref<Field[]>): { formFields: Compu
 				}
 			}
 
+			if (field.meta?.sort && field.meta?.system !== true) {
+				field.meta.sort = field.meta.sort + systemFieldsCount.value;
+			}
+
 			return field;
 		});
 
@@ -52,6 +58,8 @@ export default function useFormFields(fields: Ref<Field[]>): { formFields: Compu
 			return hidden !== true && systemFake === false;
 		});
 
+		formFields = orderBy(formFields, 'meta.sort');
+
 		return formFields;
 	});
 
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index 7b04c55ae3..9130524c2d 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -61,7 +61,7 @@ export const useFieldsStore = defineStore({
 
 			const fields: FieldRaw[] = fieldsResponse.data.data;
 
-			this.fields = this.adjustSortForSystem([...fields.map(this.parseField), fakeFilesField]);
+			this.fields = [...fields.map(this.parseField), fakeFilesField];
 
 			this.translateFields();
 		},
@@ -106,24 +106,6 @@ export const useFieldsStore = defineStore({
 				};
 			});
 		},
-		/**
-		 * System collections have system fields. We'll have to adjust all custom fields to have their
-		 * sort values incremented by the amount of system fields, to ensure the fields are sorted
-		 * correctly after the system fields. (#5520)
-		 */
-		adjustSortForSystem(fields: FieldRaw[]) {
-			const systemFields = fields.filter((field) => field.meta?.system === true);
-
-			if (systemFields.length === 0) {
-				return systemFields;
-			}
-
-			return fields.map((field) => {
-				if (field.meta?.system === true) return field;
-				if (field.meta?.sort) field.meta.sort += systemFields.length;
-				return field;
-			});
-		},
 		async createField(collectionKey: string, newField: Field) {
 			const stateClone = [...this.fields];