github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-30 11:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Allow setting up relations to system collections

Browse Source 
Fixes #376
This commit is contained in:
rijkvanzanten
2020-09-23 19:50:52 -04:00
parent 49173879ec
commit 692ff0bda6
5 changed files with 163 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/displays/user/user.vue
View File

@@ -1,6 +1,6 @@
<template>
<span class="user" :class="display">
<user-popover v-if="value" :user="value.id">
<user-popover v-if="value" :user="value.id">
<div class="user" :class="display">
<img
v-if="(display === 'avatar' || display === 'both') && src"
:src="src"
@@ -16,8 +16,8 @@
:class="{ circle }"
/>
<span v-if="display === 'name' || display === 'both'">{{ value.first_name }} {{ value.last_name }}</span>
</user-popover>
</span>
</div>
</user-popover>
</template>
<script lang="ts">

1
app/src/interfaces/user/index.ts
View File

@@ -8,6 +8,7 @@ export default defineInterface(({ i18n }) => ({
icon: 'person',
component: InterfaceUser,
types: ['uuid'],
relationship: 'm2o',
options: [
{
field: 'selectMode',

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

@@ -28,16 +28,31 @@
<v-list dense class="monospace">
<v-list-item
v-for="item in collectionItems"
:key="item.value"
:active="relations[0].many_collection === item.value"
:disabled="item.disabled"
@click="relations[0].many_collection = item.value"
v-for="collection in availableCollections"
:key="collection.collection"
:active="relations[0].many_collection === collection.collection"
@click="relations[0].many_collection = collection.collection"
>
<v-list-item-content>
{{ item.text }}
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-group>
<template #activator>{{ $t('system') }}</template>
<v-list-item
v-for="collection in systemCollections"
:key="collection.collection"
:active="relations[0].many_collection === collection.collection"
@click="relations[0].many_collection = collection.collection"
>
<v-list-item-content>
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</v-menu>
</template>
@@ -66,16 +81,31 @@
<v-list dense class="monospace">
<v-list-item
v-for="item in collectionItems"
:key="item.value"
:active="relations[1].one_collection === item.value"
:disabled="item.disabled"
@click="relations[1].one_collection = item.value"
v-for="collection in availableCollections"
:key="collection.collection"
:active="relations[1].one_collection === collection.collection"
@click="relations[1].one_collection = collection.collection"
>
<v-list-item-content>
{{ item.text }}
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-group>
<template #activator>{{ $t('system') }}</template>
<v-list-item
v-for="collection in systemCollections"
:key="collection.collection"
:active="relations[1].one_collection === collection.collection"
@click="relations[1].one_collection = collection.collection"
>
<v-list-item-content>
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</v-menu>
</template>
@@ -232,12 +262,15 @@ export default defineComponent({
);
});
const collectionItems = computed(() =>
availableCollections.value.map((collection) => ({
text: collection.collection,
value: collection.collection,
}))
);
const systemCollections = computed(() => {
return orderBy(
collectionsStore.state.collections.filter((collection) => {
return collection.collection.startsWith('directus_') === true;
}),
['collection'],
['asc']
);
});
const junctionCollection = computed({
get() {
@@ -275,7 +308,8 @@ export default defineComponent({
return {
relations: state.relations,
autoFill,
collectionItems,
availableCollections,
systemCollections,
junctionCollection,
junctionFields,
junctionCollectionExists,

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

@@ -8,32 +8,64 @@
</div>
<div class="field">
<div class="type-label">{{ $t('related_collection') }}</div>
<v-input :class="{ matches: relatedCollectionExists }" db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
<v-input
:class="{ matches: relatedCollectionExists }"
db-safe
key="related-collection"
v-model="relations[0].one_collection"
:disabled="isExisting"
:placeholder="$t('collection') + '...'"
>
<template #append>
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
<v-icon
name="list_alt"
@click="toggle"
v-tooltip="$t('select_existing')"
:disabled="isExisting"
/>
</template>
<v-list dense class="monospace">
<v-list-item
v-for="item in items"
:key="item.value"
:active="relations[0].one_collection === item.value"
:disabled="item.disabled"
@click="relations[0].one_collection = item.value"
v-for="collection in availableCollections"
:key="collection.collection"
:active="relations[0].one_collection === collection.collection"
@click="relations[0].one_collection = collection.collection"
>
<v-list-item-content>
{{ item.text }}
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-group>
<template #activator>{{ $t('system') }}</template>
<v-list-item
v-for="collection in systemCollections"
:key="collection.collection"
:active="relations[0].one_collection === collection.collection"
@click="relations[0].one_collection = collection.collection"
>
<v-list-item-content>
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</v-menu>
</template>
</v-input>
</div>
<v-input disabled :value="relations[0].many_field" />
<v-input db-safe :disabled="relatedCollectionExists" v-model="relations[0].one_primary" :placeholder="$t('primary_key') + '...'" />
<v-input
db-safe
:disabled="relatedCollectionExists"
v-model="relations[0].one_primary"
:placeholder="$t('primary_key') + '...'"
/>
<v-icon class="arrow" name="arrow_back" />
</div>
@@ -46,7 +78,12 @@
</div>
<div class="field">
<div class="type-label">{{ $t('field_name') }}</div>
<v-input :disabled="hasCorresponding === false" v-model="correspondingField" :placeholder="$t('field_name') + '...'" db-safe />
<v-input
:disabled="hasCorresponding === false"
v-model="correspondingField"
:placeholder="$t('field_name') + '...'"
db-safe
/>
</div>
<v-icon name="arrow_forward" class="arrow" />
</div>
@@ -83,7 +120,7 @@ export default defineComponent({
const collectionsStore = useCollectionsStore();
const fieldsStore = useFieldsStore();
const { items } = useRelation();
const { availableCollections, systemCollections } = useRelation();
const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
const relatedCollectionExists = computed(() => {
@@ -92,7 +129,8 @@ export default defineComponent({
return {
relations: state.relations,
items,
availableCollections,
systemCollections,
hasCorresponding,
correspondingField,
correspondingLabel,
@@ -111,14 +149,17 @@ export default defineComponent({
);
});
const items = computed(() =>
availableCollections.value.map((collection) => ({
text: collection.collection,
value: collection.collection,
}))
);
const systemCollections = computed(() => {
return orderBy(
collectionsStore.state.collections.filter((collection) => {
return collection.collection.startsWith('directus_') === true;
}),
['collection'],
['asc']
);
});
return { items };
return { availableCollections, systemCollections };
}
function useCorresponding() {
@@ -152,8 +193,8 @@ export default defineComponent({
if (newField.$type === 'corresponding') {
return {
...newField,
field
}
field,
};
}
return newField;

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

@@ -28,16 +28,31 @@
<v-list dense class="monospace">
<v-list-item
v-for="item in items"
:key="item.value"
:active="relations[0].many_collection === item.value"
:disabled="item.disabled"
@click="relations[0].many_collection = item.value"
v-for="collection in availableCollections"
:key="collection.collection"
:active="relations[0].many_collection === collection.collection"
@click="relations[0].many_collection = collection.collection"
>
<v-list-item-content>
{{ item.text }}
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-group>
<template #activator>{{ $t('system') }}</template>
<v-list-item
v-for="collection in systemCollections"
:key="collection.collection"
:active="relations[0].many_collection === collection.collection"
@click="relations[0].many_collection = collection.collection"
>
<v-list-item-content>
{{ collection.collection }}
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</v-menu>
</template>
@@ -121,7 +136,13 @@ export default defineComponent({
const collectionsStore = useCollectionsStore();
const fieldsStore = useFieldsStore();
const { items, fields, currentCollectionPrimaryKey, collectionMany } = useRelation();
const {
availableCollections,
systemCollections,
fields,
currentCollectionPrimaryKey,
collectionMany,
} = useRelation();
const { hasCorresponding, correspondingLabel } = useCorresponding();
const relatedCollectionExists = computed(() => {
@@ -137,7 +158,8 @@ export default defineComponent({
return {
relations: state.relations,
items,
availableCollections,
systemCollections,
fields,
currentCollectionPrimaryKey,
collectionMany,
@@ -161,12 +183,18 @@ export default defineComponent({
);
});
const items = computed(() =>
availableCollections.value.map((collection) => ({
text: collection.collection,
value: collection.collection,
}))
);
const systemCollections = computed(() => {
return orderBy(
collectionsStore.state.collections.filter((collection) => {
return (
collection.collection.startsWith('directus_') === true &&
collection.collection !== props.collection
);
}),
['collection'],
['asc']
);
});
const currentCollectionPrimaryKey = computed(() =>
fieldsStore.getPrimaryKeyFieldForCollection(props.collection)
@@ -197,7 +225,7 @@ export default defineComponent({
},
});
return { availableCollections, items, fields, currentCollectionPrimaryKey, collectionMany };
return { availableCollections, systemCollections, fields, currentCollectionPrimaryKey, collectionMany };
}
function useCorresponding() {