forked from directus/directus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
relationship-configuration.vue
125 lines (104 loc) · 3.64 KB
/
relationship-configuration.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<div class="relationship">
<div v-if="localType === 'm2o'" class="field full">
<div class="label type-label">
{{ t('related_collection') }}
<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" filled />
</div>
<related-collection-select v-model="relatedCollectionM2O" />
</div>
<template v-else-if="localType === 'o2m'">
<div class="field half-left">
<div class="label type-label">
{{ t('related_collection') }}
<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" filled />
</div>
<related-collection-select v-model="o2mCollection" />
</div>
<div class="field half-right">
<div class="label type-label">
{{ t('foreign_key') }}
<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" filled />
</div>
<related-field-select v-model="o2mField" :collection="o2mCollection" :disabled="!o2mCollection" />
</div>
</template>
<div v-if="localType === 'm2m'" class="field full">
<div class="label type-label">
{{ t('related_collection') }}
<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" filled />
</div>
<related-collection-select v-model="relatedCollectionM2O" />
</div>
<div v-if="localType === 'translations'" class="field full">
<div class="label type-label">
{{ t('languages_collection') }}
<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" filled />
</div>
<related-collection-select v-model="relatedCollectionM2O" />
</div>
<div v-if="localType === 'm2a'" class="field full">
<div class="label type-label">
{{ t('related_collections') }}
<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" filled />
</div>
<v-select
v-model="oneAllowedCollections"
:placeholder="t('collection') + '...'"
:items="availableCollections"
item-value="collection"
item-text="collection"
item-label-font-family="var(--family-monospace)"
item-disabled="meta.singleton"
multiple
:multiple-preview-threshold="0"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { useCollectionsStore } from '@/stores/collections';
import { LOCAL_TYPES } from '@directus/constants';
import { orderBy } from 'lodash';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import RelatedCollectionSelect from '../shared/related-collection-select.vue';
import RelatedFieldSelect from '../shared/related-field-select.vue';
import { syncFieldDetailStoreProperty } from '../store';
defineProps<{
localType: (typeof LOCAL_TYPES)[number];
}>();
const collectionsStore = useCollectionsStore();
const { t } = useI18n();
const relatedCollectionM2O = syncFieldDetailStoreProperty('relations.m2o.related_collection');
const o2mCollection = syncFieldDetailStoreProperty('relations.o2m.collection');
const o2mField = syncFieldDetailStoreProperty('relations.o2m.field');
const oneAllowedCollections = syncFieldDetailStoreProperty('relations.m2o.meta.one_allowed_collections', []);
const availableCollections = computed(() => {
return [
...orderBy(collectionsStore.databaseCollections, ['collection'], ['asc']),
{
divider: true,
},
{
collection: t('system'),
selectable: false,
children: orderBy(collectionsStore.crudSafeSystemCollections, ['collection'], ['asc']),
},
];
});
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.relationship {
@include form-grid;
--v-select-font-family: var(--family-monospace);
--v-input-font-family: var(--family-monospace);
&:not(:empty) {
margin-bottom: 20px;
}
.v-input.matches {
--v-input-color: var(--primary);
}
}
</style>