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 Auto Fill to m2m junction

Browse Source
This commit is contained in:
rijkvanzanten
2020-09-14 11:27:36 -04:00
parent ec8b8fa97c
commit d4c4802046
5 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
</div>
<div class="field">
<div class="type-label">{{ $t('junction_collection') }}</div>
<v-input :class="{ matches: junctionCollectionExists }" v-model="junctionCollection" :placeholder="$t('collection') + '...'" :disabled="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 }">
@@ -33,7 +33,7 @@
</div>
<div class="field">
<div class="type-label">{{ $t('related_collection') }}</div>
<v-input :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 }">
@@ -57,7 +57,7 @@
</v-input>
</div>
<v-input disabled :value="relations[0].one_primary" />
<v-input v-model="relations[0].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="isExisting" db-safe>
<v-input 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 }">
@@ -81,7 +81,7 @@
</v-input>
<div class="spacer" />
<div class="spacer" />
<v-input v-model="relations[1].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="isExisting" db-safe>
<v-input 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 }">
@@ -104,6 +104,8 @@
</template>
</v-input>
<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-icon class="arrow" name="arrow_forward" />
<v-icon class="arrow" name="arrow_backward" />
</div>
@@ -111,7 +113,7 @@
</template>
<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';
import { defineComponent, computed, ref } from '@vue/composition-api';
import { orderBy } from 'lodash';
import { useCollectionsStore, useFieldsStore } from '@/stores/';
import { Field } from '@/types';
@@ -137,6 +139,15 @@ export default defineComponent({
const collectionsStore = useCollectionsStore();
const fieldsStore = useFieldsStore();
const autoFill = computed({
get() {
return state.autoFillJunctionRelation;
},
set(newAuto: boolean) {
state.autoFillJunctionRelation = newAuto;
}
})
const availableCollections = computed(() => {
return orderBy(
collectionsStore.state.collections.filter((collection) => {
@@ -188,7 +199,7 @@ export default defineComponent({
}));
});
return { relations: state.relations, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists };
return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists };
},
});
</script>
@@ -216,13 +227,13 @@ export default defineComponent({
pointer-events: none;
&:first-of-type {
bottom: 78px;
left: 32.7%;
bottom: 141px;
left: 32.5%;
}
&:last-of-type {
bottom: 14px;
left: 67.5%;
bottom: 76px;
left: 67.4%;
}
}
}

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

@@ -6,7 +6,7 @@
*/
import { useFieldsStore, useRelationsStore, useCollectionsStore } from '@/stores/';
import { reactive, watch, computed, ComputedRef } from '@vue/composition-api';
import { reactive, watch, computed, ComputedRef, WatchStopHandle } from '@vue/composition-api';
import { clone, throttle } from 'lodash';
import { getInterfaces } from '@/interfaces';
import { getDisplays } from '@/displays';
@@ -55,6 +55,8 @@ function initLocalStore(
relations: [],
newCollections: [],
newFields: [],
autoFillJunctionRelation: true,
});
availableInterfaces = computed<InterfaceConfig[]>(() => {
@@ -383,8 +385,6 @@ function initLocalStore(
]
})
}
console.log(state.newCollections, state.newFields);
}, 50);
if (!isExisting) {
@@ -462,6 +462,25 @@ function initLocalStore(
],
syncNewCollectionsM2M
)
let stop: WatchStopHandle;
watch(() => state.autoFillJunctionRelation, (startWatching) => {
if (startWatching) {
stop = watch([() => state.relations[1].one_collection, () => state.relations[1].one_primary], ([newRelatedCollection, newRelatedPrimary]: string[]) => {
if (newRelatedCollection) {
state.relations[0].many_collection = `${state.relations[0].one_collection}_${state.relations[1].one_collection}`;
state.relations[0].many_field = `${state.relations[0].one_collection}_${state.relations[0].one_primary}`;
}
if (newRelatedPrimary) {
state.relations[1].many_field = `${state.relations[1].one_collection}_${state.relations[1].one_primary}`;
}
});
} else {
stop?.();
}
}, { immediate: true });
}
if (type === 'presentation') {

2
app/src/modules/settings/routes/data-model/new-collection.vue
View File

@@ -204,7 +204,7 @@ export default defineComponent({
type: 'success',
});
router.push('/settings/data-model');
router.push(`/settings/data-model/${collectionName.value}`);
} catch (error) {
console.log(error);
saveError.value = error;