github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add related collection link to data model settings (#18346)

Browse Source 
* Add related collection link to data model settings

* Add changeset

* Update .changeset/six-emus-joke.md

* Hide button for self-referencing relations

Co-authored-by: ian <licitdev@gmail.com>

* Use unref instead of .value

* Make typescript happier

---------

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
Co-authored-by: ian <licitdev@gmail.com>
This commit is contained in:
Hannes Küttner
2023-04-27 23:47:36 +02:00
committed by GitHub
parent e60c6cff5f
commit 02f0284540
2 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/six-emus-joke.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@directus/app': patch
---
Added a shortcut link in settings for relational fields in the data model

28
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -92,6 +92,14 @@
small
/>
<v-icon v-if="hidden" v-tooltip="t('hidden_field')" name="visibility_off" class="hidden-icon" small />
<router-link
v-if="showRelatedCollectionLink"
:to="`/settings/data-model/${relatedCollectionInfo!.relatedCollection}`"
>
<v-icon name="open_in_new" class="link-icon" small />
</router-link>
<field-select-menu
:field="field"
@toggle-visibility="toggleVisibility"
@@ -145,7 +153,7 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, PropType, ref, computed } from 'vue';
import { defineComponent, PropType, ref, computed, unref } from 'vue';
import { useCollectionsStore } from '@/stores/collections';
import { useFieldsStore } from '@/stores/fields';
import { useRouter } from 'vue-router';
@@ -160,6 +168,7 @@ import { hideDragImage } from '@/utils/hide-drag-image';
import Draggable from 'vuedraggable';
import formatTitle from '@directus/format-title';
import { useExtension } from '@/composables/use-extension';
import { getRelatedCollection } from '@/utils/get-related-collection';
export default defineComponent({
name: 'FieldSelect',
@@ -205,6 +214,15 @@ export default defineComponent({
const nestedFields = computed(() => props.fields.filter((field) => field.meta?.group === props.field.field));
const relatedCollectionInfo = computed(() => getRelatedCollection(props.field.collection, props.field.field));
const showRelatedCollectionLink = computed(
() =>
unref(relatedCollectionInfo) !== null &&
props.field.collection !== unref(relatedCollectionInfo)?.relatedCollection &&
['translations', 'm2o', 'm2m', 'o2m', 'files'].includes(unref(localType) as string)
);
return {
t,
interfaceName,
@@ -224,6 +242,8 @@ export default defineComponent({
hidden,
toggleVisibility,
localType,
showRelatedCollectionLink,
relatedCollectionInfo,
hideDragImage,
onGroupSortChange,
nestedFields,
@@ -376,6 +396,10 @@ export default defineComponent({
--v-icon-color: var(--warning);
--v-icon-color-hover: var(--warning);
}
&.link-icon:hover {
--v-icon-color: var(--foreground-normal);
}
}
.drag-handle {
@@ -522,7 +546,7 @@ export default defineComponent({
}
.icons {
.v-icon + .v-icon:not(:last-child) {
* + *:not(:last-child) {
margin-left: 8px;
}
}