From bd39b1b546d2d33bb4af32ac335be6dbff4402b9 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 25 Jan 2022 23:23:25 +0800
Subject: [PATCH] Fix fields order in Fields Permissions (#11265)

* fix fields ordering in Fields Permissions

* extract logic into reusable function

* refine comment
---
 app/src/composables/use-field-tree.ts         | 25 ++--------------
 .../permissions-detail/components/fields.vue  |  3 +-
 app/src/stores/fields.ts                      | 29 +++++++++++++++++++
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/app/src/composables/use-field-tree.ts b/app/src/composables/use-field-tree.ts
index 662a320f28..e829c80c5f 100644
--- a/app/src/composables/use-field-tree.ts
+++ b/app/src/composables/use-field-tree.ts
@@ -43,34 +43,13 @@ export function useFieldTree(
 	function getTree(collection?: string | null, parent?: FieldNode) {
 		const injectedFields = inject?.value?.fields.filter((field) => field.collection === collection);
 		const fields = fieldsStore
-			.getFieldsForCollection(collection!)
+			.getFieldsForCollectionSorted(collection!)
 			.concat(injectedFields || [])
-			.filter(
-				(field: Field) =>
-					field.meta?.special?.includes('group') ||
-					(!field.meta?.special?.includes('alias') && !field.meta?.special?.includes('no-data'))
-			);
-
-		const nonGroupFields = fields.filter((field: Field) => !field.meta?.group);
-
-		const sortGroupFields = (a: Field, b: Field) => {
-			if (!a.meta?.sort || !b.meta?.sort) return 0;
-			return a.meta.sort - b.meta.sort;
-		};
-
-		for (const [index, field] of nonGroupFields.entries()) {
-			const groupFields = fields.filter((groupField: Field) => groupField.meta?.group === field.field);
-			if (groupFields.length) {
-				nonGroupFields.splice(index + 1, 0, ...groupFields.sort(sortGroupFields));
-			}
-		}
-
-		const sortedFields = nonGroupFields
 			.filter((field) => !field.meta?.special?.includes('alias') && !field.meta?.special?.includes('no-data'))
 			.filter(filter)
 			.flatMap((field) => makeNode(field, parent));
 
-		return sortedFields.length ? sortedFields : undefined;
+		return fields.length ? fields : undefined;
 	}
 
 	function makeNode(field: Field, parent?: FieldNode): FieldNode | FieldNode[] {
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index 73bceb3ad0..ef86824426 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -32,6 +32,7 @@ import { Permission, Role } from '@directus/shared/types';
 import { Field } from '@directus/shared/types';
 import { useSync } from '@directus/shared/composables';
 import { useFieldsStore } from '@/stores';
+import { clone, orderBy } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -57,7 +58,7 @@ export default defineComponent({
 		const internalPermission = useSync(props, 'permission', emit);
 
 		const fieldsInCollection = computed(() => {
-			const fields = fieldsStore.getFieldsForCollection(props.permission.collection);
+			const fields = fieldsStore.getFieldsForCollectionSorted(props.permission.collection);
 
 			return fields.map((field: Field) => {
 				return {
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index c5d88b5cd5..3828cf5978 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -252,6 +252,35 @@ export const useFieldsStore = defineStore({
 				else return 1;
 			});
 		},
+		/**
+		 * Retrieve sorted fields including groups. This is necessary because
+		 * fields inside groups starts their sort number from 1 to N again.
+		 */
+		getFieldsForCollectionSorted(collection: string): Field[] {
+			const fields = this.fields
+				.filter((field) => field.collection === collection)
+				.filter(
+					(field: Field) =>
+						field.meta?.special?.includes('group') ||
+						(!field.meta?.special?.includes('alias') && !field.meta?.special?.includes('no-data'))
+				);
+
+			const nonGroupFields = fields.filter((field: Field) => !field.meta?.group);
+
+			const sortGroupFields = (a: Field, b: Field) => {
+				if (!a.meta?.sort || !b.meta?.sort) return 0;
+				return a.meta.sort - b.meta.sort;
+			};
+
+			for (const [index, field] of nonGroupFields.entries()) {
+				const groupFields = fields.filter((groupField: Field) => groupField.meta?.group === field.field);
+				if (groupFields.length) {
+					nonGroupFields.splice(index + 1, 0, ...groupFields.sort(sortGroupFields));
+				}
+			}
+
+			return nonGroupFields;
+		},
 		/**
 		 * Retrieve field info for a field or a related field
 		 */