github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-27 10:58:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

script[setup]: displays/related-values (#18393)

Browse Source
This commit is contained in:
Rijk van Zanten
2023-05-02 16:46:28 -04:00
committed by GitHub
parent aeb37ed0b7
commit ea05b9752e
1 changed files with 64 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
app/src/displays/related-values/related-values.vue
View File

@@ -33,102 +33,77 @@
<render-template v-else :template="internalTemplate" :item="value" :collection="relatedCollection" />
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, computed, PropType } from 'vue';
<script setup lang="ts">
import { getLocalTypeForField } from '@/utils/get-local-type';
import { getRelatedCollection } from '@/utils/get-related-collection';
import { useCollection } from '@directus/composables';
import { getLocalTypeForField } from '@/utils/get-local-type';
import { get } from 'lodash';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
props: {
collection: {
type: String,
required: true,
},
field: {
type: String,
required: true,
},
value: {
type: [Array, Object] as PropType<Record<string, any> | Record<string, any>[]>,
default: null,
},
template: {
type: String,
default: null,
},
},
setup(props) {
const { t, te } = useI18n();
const props = defineProps<{
collection: string;
field: string;
value: Record<string, any> | Record<string, any>[] | null;
template: string;
}>();
const relatedCollectionData = computed(() => {
return getRelatedCollection(props.collection, props.field);
});
const { t, te } = useI18n();
const relatedCollection = computed(() => {
return relatedCollectionData.value.relatedCollection;
});
const junctionCollection = computed(() => {
return relatedCollectionData.value.junctionCollection;
});
const localType = computed(() => {
return getLocalTypeForField(props.collection, props.field);
});
const { primaryKeyField } = useCollection(relatedCollection);
const primaryKeyFieldPath = computed(() => {
return relatedCollectionData.value.path
? [...relatedCollectionData.value.path, primaryKeyField.value?.field].join('.')
: primaryKeyField.value?.field;
});
const internalTemplate = computed(() => {
return props.template || `{{ ${primaryKeyFieldPath.value!} }}`;
});
const unit = computed(() => {
if (Array.isArray(props.value)) {
if (props.value.length === 1) {
if (te(`collection_names_singular.${relatedCollection.value}`)) {
return t(`collection_names_singular.${relatedCollection.value}`);
} else {
return t('item');
}
} else {
if (te(`collection_names_plural.${relatedCollection.value}`)) {
return t(`collection_names_plural.${relatedCollection.value}`);
} else {
return t('items');
}
}
}
return null;
});
return {
relatedCollection,
junctionCollection,
primaryKeyFieldPath,
getLinkForItem,
internalTemplate,
unit,
localType,
};
function getLinkForItem(item: any) {
if (!relatedCollectionData.value || !primaryKeyFieldPath.value) return null;
const primaryKey = get(item, primaryKeyFieldPath.value);
return `/content/${relatedCollection.value}/${encodeURIComponent(primaryKey)}`;
}
},
const relatedCollectionData = computed(() => {
return getRelatedCollection(props.collection, props.field);
});
const relatedCollection = computed(() => {
return relatedCollectionData.value.relatedCollection;
});
const junctionCollection = computed(() => {
return relatedCollectionData.value.junctionCollection;
});
const localType = computed(() => {
return getLocalTypeForField(props.collection, props.field);
});
const { primaryKeyField } = useCollection(relatedCollection);
const primaryKeyFieldPath = computed(() => {
return relatedCollectionData.value.path
? [...relatedCollectionData.value.path, primaryKeyField.value?.field].join('.')
: primaryKeyField.value?.field;
});
const internalTemplate = computed(() => {
return props.template || `{{ ${primaryKeyFieldPath.value!} }}`;
});
const unit = computed(() => {
if (Array.isArray(props.value)) {
if (props.value.length === 1) {
if (te(`collection_names_singular.${relatedCollection.value}`)) {
return t(`collection_names_singular.${relatedCollection.value}`);
} else {
return t('item');
}
} else {
if (te(`collection_names_plural.${relatedCollection.value}`)) {
return t(`collection_names_plural.${relatedCollection.value}`);
} else {
return t('items');
}
}
}
return null;
});
function getLinkForItem(item: any) {
if (!relatedCollectionData.value || !primaryKeyFieldPath.value) return null;
const primaryKey = get(item, primaryKeyFieldPath.value);
return `/content/${relatedCollection.value}/${encodeURIComponent(primaryKey)}`;
}
</script>
<style lang="scss" scoped>