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

Add notification when new field will be generated (#4148)

Browse Source 
* add notification when new field will be generated

* add detailed info on which data will be generated

* update style of notification

* update paddings
This commit is contained in:
Nitwel
2021-02-19 21:07:04 +01:00
committed by GitHub
parent b407b14d66
commit 79eff4d5b2
5 changed files with 226 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/lang/translations/en-US.yaml
View File

@@ -155,6 +155,9 @@ click_to_manage_translated_fields: >-
There are no translated fields yet. Click here to create them. | There is one translated field. Click here to manage
it. | There are {count} translated fields. Click here to manage them.
fields_group: Fields Group
new_data_alert: "The following will be created within your Data Model:"
new_field: "New Field"
new_collection: "New Collection"
configure_m2o: Configure your Many-to-One Relationship...
configure_o2m: Configure your One-to-Many Relationship...
configure_m2m: Configure your Many-to-Many Relationship...

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

@@ -191,6 +191,18 @@
<v-icon class="arrow" name="arrow_backward" />
<v-icon class="arrow" name="arrow_backward" />
</div>
<v-notice class="generated-data" v-if="generationInfo.length > 0" type="warning">
<span>
{{ $t('new_data_alert') }}
<ul>
<li v-for="(data, index) in generationInfo" :key="index">
<span class="field-name">{{ data.name }}</span>
({{ $t(data.isField ? 'new_field' : 'new_collection') }})
</li>
</ul>
</span>
</v-notice>
</div>
</template>
@@ -278,6 +290,38 @@ export default defineComponent({
}));
});
const generationInfo = computed(() => {
const message: { name: string; isField: boolean }[] = [];
if (state.relations[0].many_collection) {
if (junctionCollectionExists.value === false)
message.push({ name: state.relations[0].many_collection, isField: false });
if (junctionFieldExists(state.relations[0].many_field) === false && state.relations[0].many_field !== '')
message.push({
name: state.relations[0].many_collection + '.' + state.relations[0].many_field,
isField: true,
});
if (
junctionFieldExists(state.relations[1].one_collection_field) === false &&
state.relations[1].one_collection_field !== ''
)
message.push({
name: state.relations[0].many_collection + '.' + state.relations[1].one_collection_field,
isField: true,
});
if (junctionFieldExists(state.relations[1].many_field) === false && state.relations[1].many_field !== '')
message.push({
name: state.relations[0].many_collection + '.' + state.relations[1].many_field,
isField: true,
});
}
return message;
});
return {
relations: state.relations,
autoFill,
@@ -287,6 +331,7 @@ export default defineComponent({
junctionFields,
junctionCollectionExists,
junctionFieldExists,
generationInfo,
};
function junctionFieldExists(fieldKey: string) {
@@ -348,6 +393,19 @@ export default defineComponent({
margin-bottom: 36px;
}
.generated-data {
margin-top: 36px;
ul {
padding-top: 4px;
padding-left: 24px;
}
.field-name {
font-family: var(--family-monospace);
}
}
.related-collections-preview {
grid-row: 2 / span 2;
grid-column: 3;

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

@@ -218,6 +218,19 @@
</div>
<v-icon name="arrow_forward" class="arrow" />
</div>
<v-notice class="generated-data" v-if="generationInfo.length > 0" type="warning">
<span>
{{ $t('new_data_alert') }}
<ul>
<li v-for="(data, index) in generationInfo" :key="index">
<span class="field-name">{{ data.name }}</span>
({{ $t(data.isField ? 'new_field' : 'new_collection') }})
</li>
</ul>
</span>
</v-notice>
</div>
</template>
@@ -311,6 +324,44 @@ export default defineComponent({
const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
const generationInfo = computed(() => {
const message: { name: string; isField: boolean }[] = [];
if (state.relations[1].one_collection !== '') {
if (relatedCollectionExists.value === false) {
message.push({ name: state.relations[1].one_collection, isField: false });
if (state.relations[1].one_primary !== '')
message.push({
name: state.relations[1].one_collection + '.' + state.relations[1].one_primary,
isField: true,
});
}
if (hasCorresponding.value === true && correspondingField.value !== null)
message.push({ name: state.relations[1].one_collection + '.' + correspondingField.value, isField: true });
}
if (state.relations[0].many_collection) {
if (junctionCollectionExists.value === false)
message.push({ name: state.relations[0].many_collection, isField: false });
if (junctionFieldExists(state.relations[0].many_field) === false && state.relations[0].many_field !== '')
message.push({
name: state.relations[0].many_collection + '.' + state.relations[0].many_field,
isField: true,
});
if (junctionFieldExists(state.relations[1].many_field) === false && state.relations[1].many_field !== '')
message.push({
name: state.relations[0].many_collection + '.' + state.relations[1].many_field,
isField: true,
});
}
return message;
});
return {
relations: state.relations,
autoFill,
@@ -324,6 +375,7 @@ export default defineComponent({
hasCorresponding,
correspondingField,
correspondingLabel,
generationInfo,
};
function junctionFieldExists(fieldKey: string) {
@@ -459,4 +511,17 @@ export default defineComponent({
.v-notice {
margin-bottom: 36px;
}
.generated-data {
margin-top: 36px;
ul {
padding-top: 4px;
padding-left: 24px;
}
.field-name {
font-family: var(--family-monospace);
}
}
</style>

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

@@ -85,6 +85,19 @@
</div>
<v-icon name="arrow_forward" class="arrow" />
</div>
<v-notice class="generated-data" v-if="generationInfo.length > 0" type="warning">
<span>
{{ $t('new_data_alert') }}
<ul>
<li v-for="(data, index) in generationInfo" :key="index">
<span class="field-name">{{ data.name }}</span>
({{ $t(data.isField ? 'new_field' : 'new_collection') }})
</li>
</ul>
</span>
</v-notice>
</div>
</template>
@@ -125,6 +138,30 @@ export default defineComponent({
return !!collectionsStore.getCollection(state.relations[0].one_collection);
});
const generationInfo = computed(() => {
const message: { name: string; isField: boolean }[] = [];
if (relatedCollectionExists.value === false && state.relations[0].one_collection !== '') {
message.push({ name: state.relations[0].one_collection, isField: false });
if (state.relations[0].one_primary !== '')
message.push({
name: state.relations[0].one_collection + '.' + state.relations[0].one_primary,
isField: true,
});
}
if (
hasCorresponding.value === true &&
state.relations[0].one_collection !== '' &&
correspondingField.value !== null
) {
message.push({ name: state.relations[0].one_collection + '.' + correspondingField.value, isField: true });
}
return message;
});
return {
relations: state.relations,
availableCollections,
@@ -134,6 +171,7 @@ export default defineComponent({
correspondingLabel,
fieldData: state.fieldData,
relatedCollectionExists,
generationInfo,
};
function useRelation() {
@@ -259,4 +297,17 @@ export default defineComponent({
.v-notice {
margin-bottom: 36px;
}
.generated-data {
margin-top: 36px;
ul {
padding-top: 4px;
padding-left: 24px;
}
.field-name {
font-family: var(--family-monospace);
}
}
</style>

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

@@ -102,6 +102,19 @@
</div>
<v-icon name="arrow_forward" class="arrow" />
</div>
<v-notice class="generated-data" v-if="generationInfo.length > 0" type="warning">
<span>
{{ $t('new_data_alert') }}
<ul>
<li v-for="(data, index) in generationInfo" :key="index">
<span class="field-name">{{ data.name }}</span>
({{ $t(data.isField ? 'new_field' : 'new_collection') }})
</li>
</ul>
</span>
</v-notice>
</div>
</template>
@@ -112,7 +125,6 @@ import useSync from '@/composables/use-sync';
import { useFieldsStore, useCollectionsStore } from '@/stores';
import { orderBy } from 'lodash';
import i18n from '@/lang';
import { state } from '../store';
export default defineComponent({
@@ -144,7 +156,10 @@ export default defineComponent({
const { hasCorresponding, correspondingLabel } = useCorresponding();
const relatedCollectionExists = computed(() => {
return collectionsStore.state.collections.find((col) => col.collection === state.relations?.[0].many_collection);
return (
collectionsStore.state.collections.find((col) => col.collection === state.relations?.[0].many_collection) !==
undefined
);
});
const relatedFieldExists = computed(() => {
@@ -152,6 +167,24 @@ export default defineComponent({
return !!fieldsStore.getField(state.relations[0].many_collection, state.relations[0].many_field);
});
const generationInfo = computed(() => {
const message: { name: string; isField: boolean }[] = [];
if (state.relations[0].many_collection !== '') {
if (relatedCollectionExists.value === false)
message.push({ name: state.relations[0].many_collection, isField: false });
if (relatedFieldExists.value === false && state.relations[0].many_field !== '') {
message.push({
name: state.relations[0].many_collection + '.' + state.relations[0].many_field,
isField: true,
});
}
}
return message;
});
return {
relations: state.relations,
availableCollections,
@@ -163,6 +196,7 @@ export default defineComponent({
correspondingLabel,
relatedCollectionExists,
relatedFieldExists,
generationInfo,
};
function useRelation() {
@@ -367,4 +401,17 @@ export default defineComponent({
.v-notice {
margin-bottom: 36px;
}
.generated-data {
margin-top: 36px;
ul {
padding-top: 4px;
padding-left: 24px;
}
.field-name {
font-family: var(--family-monospace);
}
}
</style>