github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-17 10:51:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix creation of junction fields on m2m when using corresponding

Browse Source 
Fixes #368
This commit is contained in:
rijkvanzanten
2020-09-22 11:32:29 -04:00
parent 4b90a0b37c
commit 0a266e098a
3 changed files with 96 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,11 +8,22 @@
</div>
<div class="field">
<div class="type-label">{{ $t('junction_collection') }}</div>
<v-input :class="{ matches: junctionCollectionExists }" v-model="junctionCollection" :placeholder="$t('collection') + '...'" :disabled="autoFill || isExisting" db-safe>
<v-input
:class="{ matches: junctionCollectionExists }"
v-model="junctionCollection"
:placeholder="$t('collection') + '...'"
:disabled="autoFill || isExisting"
db-safe
>
<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="autoFill || isExisting" />
<v-icon
name="list_alt"
@click="toggle"
v-tooltip="$t('select_existing')"
:disabled="autoFill || isExisting"
/>
</template>
<v-list dense class="monospace">
@@ -34,11 +45,23 @@
</div>
<div class="field">
<div class="type-label">{{ $t('related_collection') }}</div>
<v-input :autofocus="autoFill" :class="{ matches: relatedCollectionExists }" v-model="relations[1].one_collection" :placeholder="$t('collection') + '...'" :disabled="type === 'files' || isExisting" db-safe>
<v-input
:autofocus="autoFill"
:class="{ matches: relatedCollectionExists }"
v-model="relations[1].one_collection"
:placeholder="$t('collection') + '...'"
:disabled="type === 'files' || isExisting"
db-safe
>
<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="type === 'files' || isExisting" />
<v-icon
name="list_alt"
@click="toggle"
v-tooltip="$t('select_existing')"
:disabled="type === 'files' || isExisting"
/>
</template>
<v-list dense class="monospace">
@@ -59,11 +82,22 @@
</v-input>
</div>
<v-input disabled :value="relations[0].one_primary" />
<v-input :class="{ matches: junctionFieldExists(relations[0].many_field)}" v-model="relations[0].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
<v-input
:class="{ matches: junctionFieldExists(relations[0].many_field) }"
v-model="relations[0].many_field"
:placeholder="$t('foreign_key') + '...'"
:disabled="autoFill || isExisting"
db-safe
>
<template #append v-if="junctionCollectionExists">
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
<v-icon
name="list_alt"
@click="toggle"
v-tooltip="$t('select_existing')"
:disabled="autoFill || isExisting"
/>
</template>
<v-list dense class="monospace">
@@ -84,11 +118,22 @@
</v-input>
<div class="spacer" />
<div class="spacer" />
<v-input :class="{ matches: junctionFieldExists(relations[1].many_field)}" v-model="relations[1].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
<v-input
:class="{ matches: junctionFieldExists(relations[1].many_field) }"
v-model="relations[1].many_field"
:placeholder="$t('foreign_key') + '...'"
:disabled="autoFill || isExisting"
db-safe
>
<template #append v-if="junctionCollectionExists">
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
<v-icon
name="list_alt"
@click="toggle"
v-tooltip="$t('select_existing')"
:disabled="autoFill || isExisting"
/>
</template>
<v-list dense class="monospace">
@@ -107,9 +152,14 @@
</v-menu>
</template>
</v-input>
<v-input db-safe :disabled="relatedCollectionExists" v-model="relations[1].one_primary" :placeholder="$t('primary_key') + '...'" />
<v-input
db-safe
:disabled="relatedCollectionExists"
v-model="relations[1].one_primary"
:placeholder="$t('primary_key') + '...'"
/>
<div class="spacer" />
<v-checkbox block v-model="autoFill" :label="$t('auto_fill')" />
<v-checkbox :disabled="isExisting" block v-model="autoFill" :label="$t('auto_fill')" />
<v-icon class="arrow" name="arrow_forward" />
<v-icon class="arrow" name="arrow_backward" />
</div>
@@ -123,7 +173,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>
@@ -164,13 +219,13 @@ export default defineComponent({
},
set(newAuto: boolean) {
state.autoFillJunctionRelation = newAuto;
}
})
},
});
const availableCollections = computed(() => {
return orderBy(
collectionsStore.state.collections.filter((collection) => {
return (collection.collection.startsWith('directus_') === false);
return collection.collection.startsWith('directus_') === false;
}),
['collection'],
['asc']
@@ -217,7 +272,19 @@ export default defineComponent({
const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists, junctionFieldExists, hasCorresponding, correspondingField, correspondingLabel };
return {
relations: state.relations,
autoFill,
collectionItems,
junctionCollection,
junctionFields,
junctionCollectionExists,
relatedCollectionExists,
junctionFieldExists,
hasCorresponding,
correspondingField,
correspondingLabel,
};
function junctionFieldExists(fieldKey: string) {
if (!junctionCollection.value) return false;
@@ -230,8 +297,12 @@ export default defineComponent({
return !!state.newFields.find((field: any) => field.$type === 'corresponding');
},
set(enabled: boolean) {
if (enabled === true) {
if (
enabled === true &&
!!state.newFields.find((field: any) => field.$type === 'corresponding') === false
) {
state.newFields = [
...state.newFields,
{
$type: 'corresponding',
field: state.relations[0].one_collection,
@@ -260,12 +331,12 @@ export default defineComponent({
if (newField.$type === 'corresponding') {
return {
...newField,
field: field
}
field: field,
};
}
return newField;
})
});
state.relations[1].one_field = field;
},
@@ -309,12 +380,12 @@ export default defineComponent({
&:first-of-type {
bottom: 141px;
left: 32.5%;
left: 32.5%;
}
&:last-of-type {
bottom: 76px;
left: 67.4%;
left: 67.4%;
}
}
}

8
app/src/modules/settings/routes/data-model/field-detail/store.ts
View File

@@ -81,8 +81,6 @@ function initLocalStore(
matchesRelation = inter.relationship === type;
}
console.log(inter.id, matchesType, matchesRelation);
return matchesType && matchesRelation;
})
.sort((a, b) => (a.name > b.name ? 1 : -1));
@@ -225,7 +223,7 @@ function initLocalStore(
}
if (type === 'o2m') {
state.fieldData.schema = null;
delete state.fieldData.schema;
state.fieldData.type = null;
const syncNewCollectionsO2M = throttle(() => {
@@ -321,7 +319,7 @@ function initLocalStore(
}
if (type === 'm2m' || type === 'files' || type === 'translations') {
state.fieldData.schema = null;
delete state.fieldData.schema;
state.fieldData.type = null;
const syncNewCollectionsM2M = throttle(([junctionCollection, manyCurrent, manyRelated, relatedCollection]) => {
@@ -558,7 +556,7 @@ function initLocalStore(
}
if (type === 'presentation') {
state.fieldData.schema = null;
delete state.fieldData.schema;
state.fieldData.type = null;
state.fieldData.meta.special = ['alias'];