From eb4deaa955b5e2e0cfda2cefa067015bb6fe6e97 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 3 Mar 2021 18:36:21 -0500
Subject: [PATCH] Default field sort order to database ordinal sort

And use alphabetical where appropriate

Fixes #4341
---
 .../v-field-select/v-field-select.vue         |  6 +-
 app/src/composables/use-field-tree/types.ts   |  8 --
 .../use-field-tree/use-field-tree.ts          | 61 +-----------
 app/src/layouts/tabular/tabular.vue           | 11 ++-
 .../components/relationship-m2a.vue           |  2 +-
 .../components/relationship-m2m.vue           |  2 +-
 .../components/relationship-o2m.vue           | 14 +--
 app/src/stores/fields.ts                      | 17 ++--
 packages/schema/package.json                  | 96 +++++++++----------
 packages/schema/src/dialects/postgres.ts      | 39 +++-----
 10 files changed, 89 insertions(+), 167 deletions(-)
 delete mode 100644 app/src/composables/use-field-tree/types.ts

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index bf22fba451..50f6ad0a85 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted, PropType, computed } from '@vue/composition-api';
+import { defineComponent, toRefs, ref, PropType, computed } from '@vue/composition-api';
 import FieldListItem from '../v-field-template/field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field, Collection, Relation } from '@/types';
@@ -73,12 +73,10 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const fieldsStore = useFieldsStore();
-
 		const menuActive = ref(false);
 		const { collection } = toRefs(props);
 
-		const { info, primaryKeyField, fields: fieldsInCollection, sortField } = useCollection(collection);
+		const { info } = useCollection(collection);
 		const { tree } = useFieldTree(collection, {
 			fields: props.inject?.fields.filter((field) => field.collection === props.collection) || [],
 			relations: props.inject?.relations || [],
diff --git a/app/src/composables/use-field-tree/types.ts b/app/src/composables/use-field-tree/types.ts
deleted file mode 100644
index fbadb87503..0000000000
--- a/app/src/composables/use-field-tree/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { TranslateResult } from 'vue-i18n';
-
-export type FieldTree = {
-	field: string;
-	name: string | TranslateResult;
-	key: string;
-	children?: FieldTree[];
-};
diff --git a/app/src/composables/use-field-tree/use-field-tree.ts b/app/src/composables/use-field-tree/use-field-tree.ts
index a8f7bcb255..03e2a545d8 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -1,5 +1,4 @@
 import { Ref, computed } from '@vue/composition-api';
-import { FieldTree } from './types';
 import { useFieldsStore, useRelationsStore } from '@/stores/';
 import { Field, Relation } from '@/types';
 import { cloneDeep } from 'lodash';
@@ -18,7 +17,7 @@ export default function useFieldTree(
 	return { tree };
 
 	function parseLevel(collection: string, parentPath: string | null, level = 0) {
-		const fieldsInLevel = cloneDeep(fieldsStore.getFieldsForCollection(collection))
+		const fieldsInLevel = cloneDeep(fieldsStore.getFieldsForCollectionAlphabetical(collection))
 			.filter((field: Field) => {
 				const shown =
 					field.meta?.special?.includes('alias') !== true && field.meta?.special?.includes('no-data') !== true;
@@ -60,62 +59,4 @@ export default function useFieldTree(
 
 		return fieldsInLevel;
 	}
-
-	// const tree = computed<FieldTree[]>(() => {
-	// 	return [...fieldsStore.getFieldsForCollection(collection.value), ...(inject?.fields || [])]
-	// 		.filter((field: Field) => {
-	// 			const shown =
-	// 				field.meta?.special?.includes('alias') !== true &&
-	// 				field.meta?.special?.includes('no-data') !== true;
-	// 			return shown;
-	// 		})
-	// 		.map((field: Field) => parseField(field, []));
-
-	// 	function parseField(field: Field, parents: Field[]) {
-	// 		const fieldInfo: FieldTree = {
-	// 			field: field.field,
-	// 			name: field.name,
-	// 		};
-
-	// 		if (parents.length === 2) {
-	// 			return fieldInfo;
-	// 		}
-
-	// 		const relations = [
-	// 			...relationsStore.getRelationsForField(field.collection, field.field),
-	// 			...(inject?.relations || []).filter(
-	// 				(relation) =>
-	// 					(relation.many_collection === field.collection && relation.many_field === field.field) ||
-	// 					(relation.one_collection === field.collection && relation.one_field === field.field)
-	// 			),
-	// 		];
-
-	// 		if (relations.length > 0) {
-	// 			const relatedFields = relations
-	// 				.map((relation: Relation) => {
-	// 					const relatedCollection =
-	// 						relation.many_collection === field.collection
-	// 							? relation.one_collection
-	// 							: relation.many_collection;
-
-	// 					if (relation.junction_field === field.field) return [];
-
-	// 					return fieldsStore.getFieldsForCollection(relatedCollection).filter((field: Field) => {
-	// 						const shown =
-	// 							field.meta?.special?.includes('alias') !== true &&
-	// 							field.meta?.special?.includes('no-data') !== true;
-	// 						return shown;
-	// 					});
-	// 				})
-	// 				.flat()
-	// 				.map((childField: Field) => parseField(childField, [...parents, field]));
-
-	// 			fieldInfo.children = relatedFields;
-	// 		}
-
-	// 		return fieldInfo;
-	// 	}
-	// });
-
-	// return { tree };
 }
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 8d9ca34d13..b75232ae37 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -437,7 +437,12 @@ export default defineComponent({
 				get() {
 					return fields.value
 						.map((key) => fieldsInCollection.value.find((field) => field.field === key))
-						.filter((f) => f) as Field[];
+						.filter((f) => f)
+						.sort((a?: Field, b?: Field) => {
+							if (a!.field < b!.field) return -1;
+							else if (a!.field > b!.field) return 1;
+							else return 1;
+						}) as Field[];
 				},
 				set(val) {
 					fields.value = val.map((field) => field.field);
@@ -579,8 +584,8 @@ export default defineComponent({
 	position: sticky;
 	left: 0;
 	display: flex;
-	align-items: center;
 	justify-content: space-between;
+	align-items: center;
 	width: 100%;
 	padding: 32px var(--content-padding);
 
@@ -590,8 +595,8 @@ export default defineComponent({
 
 	.per-page {
 		display: flex;
-		align-items: center;
 		justify-content: flex-end;
+		align-items: center;
 		width: 240px;
 		color: var(--foreground-subdued);
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
index 6dc9c413f2..a38c61d1e8 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
@@ -313,7 +313,7 @@ export default defineComponent({
 		const junctionFields = computed(() => {
 			if (!junctionCollection.value) return [];
 
-			return fieldsStore.getFieldsForCollection(junctionCollection.value).map((field: Field) => ({
+			return fieldsStore.getFieldsForCollectionAlphabetical(junctionCollection.value).map((field: Field) => ({
 				text: field.field,
 				value: field.field,
 				disabled:
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index be971d1f68..ba6cd05231 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -346,7 +346,7 @@ export default defineComponent({
 		const junctionFields = computed(() => {
 			if (!junctionCollection.value) return [];
 
-			return fieldsStore.getFieldsForCollection(junctionCollection.value).map((field: Field) => ({
+			return fieldsStore.getFieldsForCollectionAlphabetical(junctionCollection.value).map((field: Field) => ({
 				text: field.field,
 				value: field.field,
 				disabled:
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index 88d2366c17..64b3db32f0 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -248,12 +248,14 @@ export default defineComponent({
 			const fields = computed(() => {
 				if (!state.relations[0].many_collection) return [];
 
-				return fieldsStore.getFieldsForCollection(state.relations[0].many_collection).map((field: Field) => ({
-					text: field.field,
-					value: field.field,
-					disabled:
-						!field.schema || field.schema?.is_primary_key || field.type !== currentCollectionPrimaryKey.value.type,
-				}));
+				return fieldsStore
+					.getFieldsForCollectionAlphabetical(state.relations[0].many_collection)
+					.map((field: Field) => ({
+						text: field.field,
+						value: field.field,
+						disabled:
+							!field.schema || field.schema?.is_primary_key || field.type !== currentCollectionPrimaryKey.value.type,
+					}));
 			});
 
 			const collectionMany = computed({
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index 3ab8572b37..8598aa3973 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -221,14 +221,15 @@ export const useFieldsStore = createStore({
 
 			return primaryKeyField;
 		},
-		getFieldsForCollection(collection: string) {
-			return this.state.fields
-				.filter((field) => field.collection === collection)
-				.sort((a, b) => {
-					if (a.field < b.field) return -1;
-					else if (a.field > b.field) return 1;
-					else return 1;
-				});
+		getFieldsForCollection(collection: string): Field[] {
+			return this.state.fields.filter((field) => field.collection === collection);
+		},
+		getFieldsForCollectionAlphabetical(collection: string): Field[] {
+			return this.getFieldsForCollection(collection).sort((a: Field, b: Field) => {
+				if (a.field < b.field) return -1;
+				else if (a.field > b.field) return 1;
+				else return 1;
+			});
 		},
 		getField(collection: string, fieldKey: string) {
 			if (fieldKey.includes('.')) {
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 07273ed9f1..a952c0291b 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -1,50 +1,50 @@
 {
-  "name": "@directus/schema",
-  "version": "9.0.0-rc.44",
-  "description": "Utility for extracting information about existing DB schema",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc --build && echo \"Built successfully\"",
-    "prepare": "npm run build",
-    "test": "npm run lint && ts-mocha test/**/*.spec.ts",
-    "dev": "npm-watch build",
-    "lint": "eslint \"src/**/*.ts\""
-  },
-  "watch": {
-    "build": {
-      "patterns": [
-        "src"
-      ],
-      "extensions": "ts",
-      "quiet": true,
-      "silent": true
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/directus/directus.git"
-  },
-  "keywords": [
-    "sql",
-    "knex",
-    "schema",
-    "mysql",
-    "postgresql",
-    "sqlite3",
-    "javascript"
-  ],
-  "author": "Rijk van Zanten <rijkvanzanten@me.com>",
-  "license": "GPL-3.0",
-  "bugs": {
-    "url": "https://github.com/directus/directus/issues"
-  },
-  "homepage": "https://github.com/directus/directus#readme",
-  "devDependencies": {
-    "npm-watch": "^0.7.0",
-    "typescript": "^3.9.5"
-  },
-  "peerDependencies": {
-    "knex": "^0.21.12"
-  }
+	"name": "@directus/schema",
+	"version": "9.0.0-rc.44",
+	"description": "Utility for extracting information about existing DB schema",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"build": "tsc --build && echo \"Built successfully\"",
+		"prepare": "npm run build",
+		"test": "npm run lint && ts-mocha test/**/*.spec.ts",
+		"dev": "npm-watch build",
+		"lint": "eslint \"src/**/*.ts\""
+	},
+	"watch": {
+		"build": {
+			"patterns": [
+				"src/*"
+			],
+			"extensions": "ts",
+			"quiet": true,
+			"silent": true
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/directus/directus.git"
+	},
+	"keywords": [
+		"sql",
+		"knex",
+		"schema",
+		"mysql",
+		"postgresql",
+		"sqlite3",
+		"javascript"
+	],
+	"author": "Rijk van Zanten <rijkvanzanten@me.com>",
+	"license": "GPL-3.0",
+	"bugs": {
+		"url": "https://github.com/directus/directus/issues"
+	},
+	"homepage": "https://github.com/directus/directus#readme",
+	"devDependencies": {
+		"npm-watch": "^0.7.0",
+		"typescript": "^3.9.5"
+	},
+	"peerDependencies": {
+		"knex": "^0.21.12"
+	}
 }
diff --git a/packages/schema/src/dialects/postgres.ts b/packages/schema/src/dialects/postgres.ts
index f459976930..529c2cf342 100644
--- a/packages/schema/src/dialects/postgres.ts
+++ b/packages/schema/src/dialects/postgres.ts
@@ -78,8 +78,7 @@ export default class Postgres implements Schema {
 		}
 
 		if (parts[1] && parts[1].includes('json')) return JSON.parse(value);
-		if (parts[1] && (parts[1].includes('char') || parts[1].includes('text')))
-			return String(value);
+		if (parts[1] && (parts[1].includes('char') || parts[1].includes('text'))) return String(value);
 
 		if (Number.isNaN(Number(value))) return value;
 
@@ -142,8 +141,7 @@ export default class Postgres implements Schema {
 			if (column.table_name in overview === false)
 				overview[column.table_name] = {
 					primary: primaryKeys.find(
-						(key: { table_name: string; column_name: string }) =>
-							key.table_name === column.table_name
+						(key: { table_name: string; column_name: string }) => key.table_name === column.table_name
 					)?.column_name,
 					columns: {},
 				};
@@ -228,9 +226,7 @@ export default class Postgres implements Schema {
 			.from('information_schema.tables')
 			.whereIn('table_schema', this.explodedSchema)
 			.andWhere({ table_name: table });
-		const record = await this.knex
-			.select<{ exists: boolean }>(this.knex.raw('exists (?)', [subquery]))
-			.first();
+		const record = await this.knex.select<{ exists: boolean }>(this.knex.raw('exists (?)', [subquery])).first();
 		return record?.exists || false;
 	}
 
@@ -293,21 +289,13 @@ export default class Postgres implements Schema {
 					.as('is_primary'),
 
 				knex
-					.select(
-						knex.raw(
-							'pg_catalog.col_description(pg_catalog.pg_class.oid, c.ordinal_position:: int)'
-						)
-					)
+					.select(knex.raw('pg_catalog.col_description(pg_catalog.pg_class.oid, c.ordinal_position:: int)'))
 					.from('pg_catalog.pg_class')
-					.whereRaw(
-						`pg_catalog.pg_class.oid = (select('"' || c.table_name || '"'):: regclass:: oid)`
-					)
+					.whereRaw(`pg_catalog.pg_class.oid = (select('"' || c.table_name || '"'):: regclass:: oid)`)
 					.andWhere({ 'pg_catalog.pg_class.relname': 'c.table_name' })
 					.as('column_comment'),
 
-				knex.raw(
-					'pg_get_serial_sequence(quote_ident(c.table_name), c.column_name) as serial'
-				),
+				knex.raw('pg_get_serial_sequence(quote_ident(c.table_name), c.column_name) as serial'),
 
 				'ffk.referenced_table_schema',
 				'ffk.referenced_table_name',
@@ -336,7 +324,8 @@ export default class Postgres implements Schema {
         AND ffk.column_name = c.column_name
       `
 			)
-			.whereIn('c.table_schema', this.explodedSchema);
+			.whereIn('c.table_schema', this.explodedSchema)
+			.orderBy(['c.table_name', 'c.ordinal_position']);
 
 		if (table) {
 			query.andWhere({ 'c.table_name': table });
@@ -349,9 +338,7 @@ export default class Postgres implements Schema {
 				name: rawColumn.column_name,
 				table: rawColumn.table_name,
 				data_type: rawColumn.data_type,
-				default_value: rawColumn.column_default
-					? this.parseDefaultValue(rawColumn.column_default)
-					: null,
+				default_value: rawColumn.column_default ? this.parseDefaultValue(rawColumn.column_default) : null,
 				max_length: rawColumn.character_maximum_length,
 				numeric_precision: rawColumn.numeric_precision,
 				numeric_scale: rawColumn.numeric_scale,
@@ -374,9 +361,7 @@ export default class Postgres implements Schema {
 					name: rawColumn.column_name,
 					table: rawColumn.table_name,
 					data_type: rawColumn.data_type,
-					default_value: rawColumn.column_default
-						? this.parseDefaultValue(rawColumn.column_default)
-						: null,
+					default_value: rawColumn.column_default ? this.parseDefaultValue(rawColumn.column_default) : null,
 					max_length: rawColumn.character_maximum_length,
 					numeric_precision: rawColumn.numeric_precision,
 					numeric_scale: rawColumn.numeric_scale,
@@ -406,9 +391,7 @@ export default class Postgres implements Schema {
 				table_name: table,
 				column_name: column,
 			});
-		const record = await this.knex
-			.select<{ exists: boolean }>(this.knex.raw('exists (?)', [subquery]))
-			.first();
+		const record = await this.knex.select<{ exists: boolean }>(this.knex.raw('exists (?)', [subquery])).first();
 		return record?.exists || false;
 	}