Show sub fields if parent exists (#15041)

* Show sub fields if parent exists
Search relationship fields

* Revert back to 20
This commit is contained in:
Gerard Lamusse
2022-08-17 16:02:33 +02:00
committed by GitHub
parent 1fedc5bdfd
commit b1449dd1cc
2 changed files with 11 additions and 8 deletions

View File

@@ -3,7 +3,7 @@
<slot name="prepend" />
<v-list-item v-if="fieldsCount > 20">
<v-list-item-content>
<v-input v-model="search" autofocus small :placeholder="t('search')">
<v-input v-model="search" autofocus small :placeholder="t('search')" @click.stop>
<template #append>
<v-icon small name="search" />
</template>
@@ -23,12 +23,12 @@
</template>
<script lang="ts" setup>
import { useFieldTree } from '@/composables/use-field-tree';
import { FieldNode, useFieldTree } from '@/composables/use-field-tree';
import { Field } from '@directus/shared/types';
import { computed, ref, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import VFieldListItem from './v-field-list-item.vue';
import { debounce } from 'lodash';
import { debounce, isNil } from 'lodash';
import { useFieldsStore } from '@/stores/fields';
interface Props {
@@ -86,14 +86,17 @@ const treeList = computed(() => {
}
});
function filter(field: Field): boolean {
function filter(field: Field, parent?: FieldNode): boolean {
if (
!includeRelations.value &&
(field.collection !== collection.value || (field.type === 'alias' && !field.meta?.special?.includes('group')))
)
return false;
if (!search.value) return true;
const children = fieldsStore.getFieldGroupChildren(collection.value, field.field);
if (!search.value || isNil(parent) === false) return true;
const children = isNil(field.schema?.foreign_key_table)
? fieldsStore.getFieldGroupChildren(field.collection, field.field)
: fieldsStore.getFieldsForCollection(field.schema!.foreign_key_table);
return children?.some((field) => matchesSearch(field)) || matchesSearch(field);
function matchesSearch(field: Field) {

View File

@@ -26,7 +26,7 @@ export type FieldTreeContext = {
export function useFieldTree(
collection: Ref<string | null>,
inject?: Ref<{ fields: Field[]; relations: Relation[] } | null>,
filter: (field: Field) => boolean = () => true
filter: (field: Field, parent?: FieldNode) => boolean = () => true
): FieldTreeContext {
const fieldsStore = useFieldsStore();
const relationsStore = useRelationsStore();
@@ -60,7 +60,7 @@ export function useFieldTree(
field.meta?.special?.includes('group') ||
(!field.meta?.special?.includes('alias') && !field.meta?.special?.includes('no-data'))
)
.filter((field) => filter(field));
.filter((field) => filter(field, parent));
const topLevelFields = allFields.filter((field) => {
if (parent?.group === true) return field.meta?.group === parent?.field;