Add collections interface

api/src/database/seeds/system.yaml

@@ -901,7 +901,7 @@ rows:
                       field: collection
                       type: string
                       system:
-                        interface: collections
+                        interface: collection
                         width: full
         special: json
         sort: 10

app/src/interfaces/collection/collection.vue

@@ -0,0 +1,45 @@
+<template>
+	<v-select :value="value" :disabled="disabled" :items="items" @input="$emit('input', $event)" />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+import { useCollectionsStore } from '@/stores/';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		includeSystem: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const collectionsStore = useCollectionsStore();
+
+		const collections = computed(() => {
+			if (props.includeSystem) return collectionsStore.state.collections;
+
+			return collectionsStore.state.collections.filter(
+				(collection) => collection.collection.startsWith('directus_') === false
+			);
+		});
+
+		const items = computed(() => {
+			return collections.value.map((collection) => ({
+				text: collection.name,
+				value: collection.collection,
+			}));
+		});
+
+		return { items };
+	},
+});
+</script>

app/src/interfaces/collection/index.ts

@@ -0,0 +1,29 @@
+import { defineInterface } from '@/interfaces/define';
+import InterfaceCollection from './collection.vue';
+
+export default defineInterface(({ i18n }) => ({
+	id: 'collections',
+	name: i18n.t('interfaces.collection.collection'),
+	description: i18n.t('interfaces.collection.description'),
+	icon: 'featured_play_list',
+	component: InterfaceCollection,
+	types: ['string'],
+	options: [
+		{
+			field: 'includeSystem',
+			name: i18n.t('system'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('interfaces.collection.include_system_collections'),
+				},
+			},
+			schema: {
+				default_value: false,
+			},
+		},
+	],
+	recommendedDisplays: ['collection'],
+}));

app/src/interfaces/collections/collections.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-select :value="value" :disabled="disabled" :items="items" @input="$emit('input', $event)" />
+	<interface-checkboxes :choices="items" @input="$listeners.input" :value="value" :disabled="disabled" />
 </template>
 
 <script lang="ts">
@@ -9,7 +9,7 @@ import { useCollectionsStore } from '@/stores/';
 export default defineComponent({
 	props: {
 		value: {
-			type: String,
+			type: Array,
 			default: null,
 		},
 		disabled: {

app/src/interfaces/collections/index.ts

@@ -7,7 +7,7 @@ export default defineInterface(({ i18n }) => ({
 	description: i18n.t('interfaces.collections.description'),
 	icon: 'featured_play_list',
 	component: InterfaceCollections,
-	types: ['string'],
+	types: ['json', 'csv'],
 	options: [
 		{
 			field: 'includeSystem',
@@ -25,5 +25,5 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 	],
-	recommendedDisplays: ['collection'],
+	recommendedDisplays: ['labels'],
 }));

app/src/lang/en-US/interfaces.json

@@ -14,6 +14,11 @@
 			"line_number": "Line Number",
 			"placeholder": "Enter code here..."
 		},
+		"collection": {
+			"collection": "Collection",
+			"description": "Select between existing collections",
+			"include_system_collections": "Include System Collections"
+		},
 		"collections": {
 			"collections": "Collections",
 			"description": "Select between existing collections",