github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-29 12:27:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

finish field suggestion

Browse Source
This commit is contained in:
Nitwel
2020-09-23 12:04:10 +02:00
committed by rijkvanzanten
parent 07ba2d4bd0
commit eebf3b8fce
5 changed files with 50 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,7 @@ import FieldListItem from '../v-field-template/field-list-item.vue';
import { useFieldsStore } from '@/stores';
import { Field } from '@/types/';
import Draggable from 'vuedraggable';
import useFieldTree from '@/composables/use-field-tree';
import useFieldTree, { findTree, filterTree } from '@/composables/use-field-tree';
import useCollection from '@/composables/use-collection';
import { FieldTree } from '../v-field-template/types';
import hideDragImage from '@/utils/hide-drag-image';
@@ -103,36 +103,6 @@ export default defineComponent({
return { menuActive, addField, removeField, selectableFields, selectedFields, hideDragImage, tree };
function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
if (tree === undefined) return undefined;
const fieldObject = tree.find((f) => f.field === fieldSections[0]);
if (fieldObject === undefined) return undefined;
if (fieldSections.length === 1) return fieldObject;
return findTree(fieldObject.children, fieldSections.slice(1));
}
function filterTree(
tree: FieldTree[] | undefined,
f: (field: FieldTree, prefix: string) => boolean,
prefix = ''
) {
if (tree === undefined) return undefined;
const newTree: FieldTree[] = [];
tree.forEach((field) => {
if (f(field, prefix)) {
newTree.push({
field: field.field,
name: field.name,
children: filterTree(field.children, f, prefix + field.field + '.'),
});
}
});
return newTree.length === 0 ? undefined : newTree;
}
function removeField(field: string) {
_value.value = _value.value.filter((f) => f !== field);
}

14
app/src/components/v-field-template/v-field-template.vue
View File

@@ -32,7 +32,7 @@ import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted } from '@vu
import FieldListItem from './field-list-item.vue';
import { useFieldsStore } from '@/stores';
import { Field } from '@/types/';
import useFieldTree from '@/composables/use-field-tree';
import useFieldTree, { findTree } from '@/composables/use-field-tree';
export default defineComponent({
components: { FieldListItem },
@@ -152,8 +152,10 @@ export default defineComponent({
}
function addField(fieldKey: string) {
console.log(fieldKey);
if (!contentEl.value) return;
const field: Field | null = fieldsStore.getField(props.collection, fieldKey);
const field = findTree(tree.value, fieldKey.split('.'));
if (!field) return;
const button = document.createElement('button');
@@ -161,6 +163,12 @@ export default defineComponent({
button.setAttribute('contenteditable', 'false');
button.innerText = String(field.name);
if (window.getSelection()?.rangeCount == 0) {
const range = document.createRange();
range.selectNodeContents(contentEl.value.children[0]);
window.getSelection()?.addRange(range);
}
const range = window.getSelection()?.getRangeAt(0);
if (!range) return;
range.deleteContents();
@@ -245,7 +253,7 @@ export default defineComponent({
return `<span class="text">${part}</span>`;
}
const fieldKey = part.replaceAll(/({|})/g, '').trim();
const field: Field | null = fieldsStore.getField(props.collection, fieldKey);
const field = findTree(tree.value, fieldKey.split('.'));
if (!field) return '';

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

@@ -1,4 +1,4 @@
import useFieldTree from './use-field-tree';
import useFieldTree, { filterTree, findTree } from './use-field-tree';
export default useFieldTree;
export { useFieldTree };
export { useFieldTree, filterTree, findTree };

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

@@ -3,6 +3,36 @@ import { FieldTree } from './types';
import { useFieldsStore, useRelationsStore } from '@/stores/';
import { Field, Relation } from '@/types';
export function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
if (tree === undefined) return undefined;
const fieldObject = tree.find((f) => f.field === fieldSections[0]);
if (fieldObject === undefined) return undefined;
if (fieldSections.length === 1) return fieldObject;
return findTree(fieldObject.children, fieldSections.slice(1));
}
export function filterTree(
tree: FieldTree[] | undefined,
f: (field: FieldTree, prefix: string) => boolean,
prefix = ''
) {
if (tree === undefined) return undefined;
const newTree: FieldTree[] = [];
tree.forEach((field) => {
if (f(field, prefix)) {
newTree.push({
field: field.field,
name: field.name,
children: filterTree(field.children, f, prefix + field.field + '.'),
});
}
});
return newTree.length === 0 ? undefined : newTree;
}
export default function useFieldTree(collection: Ref<string>, showHidden = false) {
const fieldsStore = useFieldsStore();
const relationsStore = useRelationsStore();

12
app/src/interfaces/many-to-one/options.vue
View File

@@ -40,13 +40,13 @@ export default defineComponent({
},
});
const collection = computed(() => {
if (props.fieldData.field === null || props.fieldData.meta?.collection === undefined) return null;
const relationData: Relation[] = relationsStore.getRelationsForField(
props.fieldData.meta?.collection,
props.fieldData.field
);
const collection = props.fieldData.meta?.collection;
const field = props.fieldData.field;
return relationData[0]?.one_collection;
if (collection === null || field === undefined) return null;
const relationData: Relation[] = relationsStore.getRelationsForField(collection, field);
return relationData.find((r) => r.many_collection === collection && r.many_field === field)?.one_collection;
});
return { template, collection };
},