Prevent sorting on illegal fields

Fixes #955
This commit is contained in:
rijkvanzanten
2020-11-11 15:05:53 -05:00
parent e02365e5c3
commit 393078cc98
7 changed files with 84 additions and 31 deletions

View File

@@ -94,9 +94,16 @@ export class FieldsService {
let aliasFields = [
...((await this.payloadService.processValues('read', await aliasQuery)) as FieldMeta[]),
...systemFieldRows,
];
if (collection) {
aliasFields.push(
...systemFieldRows.filter((fieldMeta) => fieldMeta.collection === collection)
);
} else {
aliasFields.push(...systemFieldRows);
}
const aliasTypes = ['alias', 'o2m', 'm2m', 'files', 'files', 'translations'];
aliasFields = aliasFields.filter((field) => {
@@ -113,7 +120,7 @@ export class FieldsService {
const data = {
collection: field.collection,
field: field.field,
type: field.special?.[0],
type: Array.isArray(field.special) ? field.special[0] : field.special,
schema: null,
meta: field,
};

View File

@@ -4,7 +4,7 @@ export default function useSync<T, K extends keyof T>(
props: T,
key: K,
emit: (event: string, ...args: any[]) => void
): Ref<Readonly<T[K]>> {
): Ref<T[K]> {
return computed<T[K]>({
get() {
return props[key];

View File

@@ -112,6 +112,18 @@
</div>
</template>
<v-info v-else-if="error" type="danger" :title="$t('unexpected_error')" icon="error" center>
{{ $t('unexpected_error_copy') }}
<template #append>
<v-error :error="error" />
<v-button small @click="resetPresetAndRefresh" class="reset-preset">
{{ $t('reset_page_preferences') }}
</v-button>
</template>
</v-info>
<slot v-else-if="itemCount === 0 && activeFilterCount > 0" name="no-results" />
<slot v-else-if="itemCount === 0" name="no-items" />
</div>
@@ -119,18 +131,18 @@
<script lang="ts">
import { defineComponent, PropType, toRefs, inject, computed, ref } from '@vue/composition-api';
import { Filter } from '@/types';
import useSync from '@/composables/use-sync/';
import useCollection from '@/composables/use-collection/';
import useItems from '@/composables/use-items';
import { Filter } from '../../types';
import useSync from '../../composables/use-sync/';
import useCollection from '../../composables/use-collection/';
import useItems from '../../composables/use-items';
import Card from './components/card.vue';
import getFieldsFromTemplate from '@/utils/get-fields-from-template';
import { useRelationsStore } from '@/stores/';
import getFieldsFromTemplate from '../../utils/get-fields-from-template';
import { useRelationsStore } from '../../stores/';
import CardsHeader from './components/header.vue';
import i18n from '@/lang';
import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
import useElementSize from '@/composables/use-element-size';
import i18n from '../../lang';
import adjustFieldsForDisplays from '../../utils/adjust-fields-for-displays';
import useElementSize from '../../composables/use-element-size';
import { clone } from 'lodash';
type Item = Record<string, any>;
@@ -189,6 +201,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
resetPreset: {
type: Function as PropType<() => Promise<void>>,
default: null,
},
},
setup(props, { emit }) {
const relationsStore = useRelationsStore();
@@ -230,7 +246,7 @@ export default defineComponent({
page,
fields: fields,
filters: _filters,
searchQuery: _searchQuery,
searchQuery: _searchQuery as any,
});
const newLink = computed(() => {
@@ -287,8 +303,14 @@ export default defineComponent({
activeFilterCount,
refresh,
selectAll,
resetPresetAndRefresh,
};
async function resetPresetAndRefresh() {
await props?.resetPreset?.();
refresh();
}
function refresh() {
getItems();
}
@@ -405,8 +427,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
@import '@/styles/mixins/form-grid';
@import '../../styles/mixins/breakpoint';
@import '../../styles/mixins/form-grid';
.layout-cards {
padding: var(--content-padding);
@@ -476,4 +498,8 @@ export default defineComponent({
.nested-options {
@include form-grid;
}
.reset-preset {
margin-top: 24px;
}
</style>

View File

@@ -29,6 +29,7 @@
<v-list-item
v-for="field in fieldsWithoutFake"
:key="field.field"
:disabled="field.disabled"
:active="field.field === sortKey"
@click="_sort = field.field"
>
@@ -49,8 +50,8 @@
<script lang="ts">
import { defineComponent, PropType, computed } from '@vue/composition-api';
import { Field } from '@/types';
import useSync from '@/composables/use-sync';
import { Field } from '../../../types';
import useSync from '../../../composables/use-sync';
export default defineComponent({
props: {
@@ -83,7 +84,15 @@ export default defineComponent({
return props.fields.find((field) => field.field === sortKey.value);
});
const fieldsWithoutFake = computed(() => props.fields.filter((field) => field.field.startsWith('$') === false));
const fieldsWithoutFake = computed(() => {
return props.fields
.filter((field) => field.field.startsWith('$') === false)
.map((field) => ({
field: field.field,
name: field.name,
disabled: ['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type),
}));
});
return {
toggleSize,

View File

@@ -145,18 +145,18 @@
import Vue from 'vue';
import { defineComponent, PropType, ref, computed, inject, toRefs, Ref, watch } from '@vue/composition-api';
import { HeaderRaw, Item } from '@/components/v-table/types';
import { Field, Filter } from '@/types';
import router from '@/router';
import useSync from '@/composables/use-sync';
import { HeaderRaw, Item } from '../../components/v-table/types';
import { Field, Filter } from '../../types';
import router from '../../router';
import useSync from '../../composables/use-sync';
import { debounce, clone } from 'lodash';
import Draggable from 'vuedraggable';
import useCollection from '@/composables/use-collection';
import useItems from '@/composables/use-items';
import i18n from '@/lang';
import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
import hideDragImage from '@/utils/hide-drag-image';
import useShortcut from '@/composables/use-shortcut';
import useCollection from '../../composables/use-collection';
import useItems from '../../composables/use-items';
import i18n from '../../lang';
import adjustFieldsForDisplays from '../../utils/adjust-fields-for-displays';
import hideDragImage from '../../utils/hide-drag-image';
import useShortcut from '../../composables/use-shortcut';
type layoutOptions = {
widths?: {
@@ -432,6 +432,9 @@ export default defineComponent({
type: field.type,
field: field.field,
},
sortable:
['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type) ===
false,
}));
},
set(val) {
@@ -525,7 +528,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
@import '../../styles/mixins/breakpoint';
.layout-tabular {
display: contents;

View File

@@ -110,6 +110,7 @@
:layout-query.sync="layoutQuery"
:filters="filtersWithFolderAndType"
:search-query="searchQuery"
:reset-preset="resetPreset"
@update:filters="filters = $event"
>
<template #no-results>
@@ -201,7 +202,9 @@ export default defineComponent({
const userStore = useUserStore();
const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_files'));
const { layout, layoutOptions, layoutQuery, filters, searchQuery, resetPreset } = usePreset(
ref('directus_files')
);
const { batchLink } = useLinks();
const { confirmDelete, deleting, batchDelete } = useBatchDelete();
const { breadcrumb, title } = useBreadcrumb();
@@ -303,6 +306,7 @@ export default defineComponent({
batchDeleteAllowed,
createAllowed,
createFolderAllowed,
resetPreset,
};
function useBatchDelete() {

View File

@@ -95,6 +95,7 @@
:layout-query.sync="layoutQuery"
:filters="_filters"
:search-query="searchQuery"
:reset-preset="resetPreset"
@update:filters="filters = $event"
>
<template #no-results>
@@ -165,7 +166,9 @@ export default defineComponent({
const selection = ref<Item[]>([]);
const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_users'));
const { layout, layoutOptions, layoutQuery, filters, searchQuery, resetPreset } = usePreset(
ref('directus_users')
);
const { addNewLink, batchLink } = useLinks();
const { confirmDelete, deleting, batchDelete } = useBatchDelete();
const { breadcrumb, title } = useBreadcrumb();
@@ -230,6 +233,7 @@ export default defineComponent({
batchEditAllowed,
batchDeleteAllowed,
createAllowed,
resetPreset,
};
async function refresh() {