github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-02 21:55:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

Default field sort order to database ordinal sort

Browse Source 
And use alphabetical where appropriate

Fixes #4341
This commit is contained in:
rijkvanzanten
2021-03-03 18:36:21 -05:00
parent c3dd7023a7
commit eb4deaa955
10 changed files with 89 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/v-field-select/v-field-select.vue
View File

@@ -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 || [],

8
app/src/composables/use-field-tree/types.ts
View File

@@ -1,8 +0,0 @@
import { TranslateResult } from 'vue-i18n';
export type FieldTree = {
field: string;
name: string | TranslateResult;
key: string;
children?: FieldTree[];
};

61
app/src/composables/use-field-tree/use-field-tree.ts
View File

@@ -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 };
}

11
app/src/layouts/tabular/tabular.vue
View File

@@ -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);

2
app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
View File

@@ -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:

2
app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
View File

@@ -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:

14
app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
View File

@@ -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({

17
app/src/stores/fields.ts
View File

@@ -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('.')) {