From 692ff0bda64548a7816a80b6474e380a336c4882 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 23 Sep 2020 19:50:52 -0400
Subject: [PATCH] Allow setting up relations to system collections

Fixes #376
---
 app/src/displays/user/user.vue                |  8 +-
 app/src/interfaces/user/index.ts              |  1 +
 .../components/relationship-m2m.vue           | 72 +++++++++++-----
 .../components/relationship-m2o.vue           | 83 ++++++++++++++-----
 .../components/relationship-o2m.vue           | 58 +++++++++----
 5 files changed, 163 insertions(+), 59 deletions(-)

diff --git a/app/src/displays/user/user.vue b/app/src/displays/user/user.vue
index 6d6848808f..c9dabfab2b 100644
--- a/app/src/displays/user/user.vue
+++ b/app/src/displays/user/user.vue
@@ -1,6 +1,6 @@
 <template>
-	<span class="user" :class="display">
-		<user-popover v-if="value" :user="value.id">
+	<user-popover v-if="value" :user="value.id">
+		<div class="user" :class="display">
 			<img
 				v-if="(display === 'avatar' || display === 'both') && src"
 				:src="src"
@@ -16,8 +16,8 @@
 				:class="{ circle }"
 			/>
 			<span v-if="display === 'name' || display === 'both'">{{ value.first_name }} {{ value.last_name }}</span>
-		</user-popover>
-	</span>
+		</div>
+	</user-popover>
 </template>
 
 <script lang="ts">
diff --git a/app/src/interfaces/user/index.ts b/app/src/interfaces/user/index.ts
index 0ef7461287..93a7c06095 100644
--- a/app/src/interfaces/user/index.ts
+++ b/app/src/interfaces/user/index.ts
@@ -8,6 +8,7 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'person',
 	component: InterfaceUser,
 	types: ['uuid'],
+	relationship: 'm2o',
 	options: [
 		{
 			field: 'selectMode',
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 2f1b87c607..542a270140 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -28,16 +28,31 @@
 
 							<v-list dense class="monospace">
 								<v-list-item
-									v-for="item in collectionItems"
-									:key="item.value"
-									:active="relations[0].many_collection === item.value"
-									:disabled="item.disabled"
-									@click="relations[0].many_collection = item.value"
+									v-for="collection in availableCollections"
+									:key="collection.collection"
+									:active="relations[0].many_collection === collection.collection"
+									@click="relations[0].many_collection = collection.collection"
 								>
 									<v-list-item-content>
-										{{ item.text }}
+										{{ collection.collection }}
 									</v-list-item-content>
 								</v-list-item>
+
+								<v-divider />
+
+								<v-list-group>
+									<template #activator>{{ $t('system') }}</template>
+									<v-list-item
+										v-for="collection in systemCollections"
+										:key="collection.collection"
+										:active="relations[0].many_collection === collection.collection"
+										@click="relations[0].many_collection = collection.collection"
+									>
+										<v-list-item-content>
+											{{ collection.collection }}
+										</v-list-item-content>
+									</v-list-item>
+								</v-list-group>
 							</v-list>
 						</v-menu>
 					</template>
@@ -66,16 +81,31 @@
 
 							<v-list dense class="monospace">
 								<v-list-item
-									v-for="item in collectionItems"
-									:key="item.value"
-									:active="relations[1].one_collection === item.value"
-									:disabled="item.disabled"
-									@click="relations[1].one_collection = item.value"
+									v-for="collection in availableCollections"
+									:key="collection.collection"
+									:active="relations[1].one_collection === collection.collection"
+									@click="relations[1].one_collection = collection.collection"
 								>
 									<v-list-item-content>
-										{{ item.text }}
+										{{ collection.collection }}
 									</v-list-item-content>
 								</v-list-item>
+
+								<v-divider />
+
+								<v-list-group>
+									<template #activator>{{ $t('system') }}</template>
+									<v-list-item
+										v-for="collection in systemCollections"
+										:key="collection.collection"
+										:active="relations[1].one_collection === collection.collection"
+										@click="relations[1].one_collection = collection.collection"
+									>
+										<v-list-item-content>
+											{{ collection.collection }}
+										</v-list-item-content>
+									</v-list-item>
+								</v-list-group>
 							</v-list>
 						</v-menu>
 					</template>
@@ -232,12 +262,15 @@ export default defineComponent({
 			);
 		});
 
-		const collectionItems = computed(() =>
-			availableCollections.value.map((collection) => ({
-				text: collection.collection,
-				value: collection.collection,
-			}))
-		);
+		const systemCollections = computed(() => {
+			return orderBy(
+				collectionsStore.state.collections.filter((collection) => {
+					return collection.collection.startsWith('directus_') === true;
+				}),
+				['collection'],
+				['asc']
+			);
+		});
 
 		const junctionCollection = computed({
 			get() {
@@ -275,7 +308,8 @@ export default defineComponent({
 		return {
 			relations: state.relations,
 			autoFill,
-			collectionItems,
+			availableCollections,
+			systemCollections,
 			junctionCollection,
 			junctionFields,
 			junctionCollectionExists,
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index c9d2cae7fa..73644ae599 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -8,32 +8,64 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('related_collection') }}</div>
-				<v-input :class="{ matches: relatedCollectionExists }" db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
+				<v-input
+					:class="{ matches: relatedCollectionExists }"
+					db-safe
+					key="related-collection"
+					v-model="relations[0].one_collection"
+					:disabled="isExisting"
+					:placeholder="$t('collection') + '...'"
+				>
 					<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="isExisting" />
+								<v-icon
+									name="list_alt"
+									@click="toggle"
+									v-tooltip="$t('select_existing')"
+									:disabled="isExisting"
+								/>
 							</template>
 
 							<v-list dense class="monospace">
 								<v-list-item
-									v-for="item in items"
-									:key="item.value"
-									:active="relations[0].one_collection === item.value"
-									:disabled="item.disabled"
-									@click="relations[0].one_collection = item.value"
+									v-for="collection in availableCollections"
+									:key="collection.collection"
+									:active="relations[0].one_collection === collection.collection"
+									@click="relations[0].one_collection = collection.collection"
 								>
 									<v-list-item-content>
-										{{ item.text }}
+										{{ collection.collection }}
 									</v-list-item-content>
 								</v-list-item>
+
+								<v-divider />
+
+								<v-list-group>
+									<template #activator>{{ $t('system') }}</template>
+									<v-list-item
+										v-for="collection in systemCollections"
+										:key="collection.collection"
+										:active="relations[0].one_collection === collection.collection"
+										@click="relations[0].one_collection = collection.collection"
+									>
+										<v-list-item-content>
+											{{ collection.collection }}
+										</v-list-item-content>
+									</v-list-item>
+								</v-list-group>
 							</v-list>
 						</v-menu>
 					</template>
 				</v-input>
 			</div>
 			<v-input disabled :value="relations[0].many_field" />
-			<v-input db-safe :disabled="relatedCollectionExists" v-model="relations[0].one_primary" :placeholder="$t('primary_key') + '...'" />
+			<v-input
+				db-safe
+				:disabled="relatedCollectionExists"
+				v-model="relations[0].one_primary"
+				:placeholder="$t('primary_key') + '...'"
+			/>
 			<v-icon class="arrow" name="arrow_back" />
 		</div>
 
@@ -46,7 +78,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>
@@ -83,7 +120,7 @@ export default defineComponent({
 		const collectionsStore = useCollectionsStore();
 		const fieldsStore = useFieldsStore();
 
-		const { items } = useRelation();
+		const { availableCollections, systemCollections } = useRelation();
 		const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
 
 		const relatedCollectionExists = computed(() => {
@@ -92,7 +129,8 @@ export default defineComponent({
 
 		return {
 			relations: state.relations,
-			items,
+			availableCollections,
+			systemCollections,
 			hasCorresponding,
 			correspondingField,
 			correspondingLabel,
@@ -111,14 +149,17 @@ export default defineComponent({
 				);
 			});
 
-			const items = computed(() =>
-				availableCollections.value.map((collection) => ({
-					text: collection.collection,
-					value: collection.collection,
-				}))
-			);
+			const systemCollections = computed(() => {
+				return orderBy(
+					collectionsStore.state.collections.filter((collection) => {
+						return collection.collection.startsWith('directus_') === true;
+					}),
+					['collection'],
+					['asc']
+				);
+			});
 
-			return { items };
+			return { availableCollections, systemCollections };
 		}
 
 		function useCorresponding() {
@@ -152,8 +193,8 @@ export default defineComponent({
 						if (newField.$type === 'corresponding') {
 							return {
 								...newField,
-								field
-							}
+								field,
+							};
 						}
 
 						return newField;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index 364edb107e..5b44bc2668 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -28,16 +28,31 @@
 
 							<v-list dense class="monospace">
 								<v-list-item
-									v-for="item in items"
-									:key="item.value"
-									:active="relations[0].many_collection === item.value"
-									:disabled="item.disabled"
-									@click="relations[0].many_collection = item.value"
+									v-for="collection in availableCollections"
+									:key="collection.collection"
+									:active="relations[0].many_collection === collection.collection"
+									@click="relations[0].many_collection = collection.collection"
 								>
 									<v-list-item-content>
-										{{ item.text }}
+										{{ collection.collection }}
 									</v-list-item-content>
 								</v-list-item>
+
+								<v-divider />
+
+								<v-list-group>
+									<template #activator>{{ $t('system') }}</template>
+									<v-list-item
+										v-for="collection in systemCollections"
+										:key="collection.collection"
+										:active="relations[0].many_collection === collection.collection"
+										@click="relations[0].many_collection = collection.collection"
+									>
+										<v-list-item-content>
+											{{ collection.collection }}
+										</v-list-item-content>
+									</v-list-item>
+								</v-list-group>
 							</v-list>
 						</v-menu>
 					</template>
@@ -121,7 +136,13 @@ export default defineComponent({
 		const collectionsStore = useCollectionsStore();
 		const fieldsStore = useFieldsStore();
 
-		const { items, fields, currentCollectionPrimaryKey, collectionMany } = useRelation();
+		const {
+			availableCollections,
+			systemCollections,
+			fields,
+			currentCollectionPrimaryKey,
+			collectionMany,
+		} = useRelation();
 		const { hasCorresponding, correspondingLabel } = useCorresponding();
 
 		const relatedCollectionExists = computed(() => {
@@ -137,7 +158,8 @@ export default defineComponent({
 
 		return {
 			relations: state.relations,
-			items,
+			availableCollections,
+			systemCollections,
 			fields,
 			currentCollectionPrimaryKey,
 			collectionMany,
@@ -161,12 +183,18 @@ export default defineComponent({
 				);
 			});
 
-			const items = computed(() =>
-				availableCollections.value.map((collection) => ({
-					text: collection.collection,
-					value: collection.collection,
-				}))
-			);
+			const systemCollections = computed(() => {
+				return orderBy(
+					collectionsStore.state.collections.filter((collection) => {
+						return (
+							collection.collection.startsWith('directus_') === true &&
+							collection.collection !== props.collection
+						);
+					}),
+					['collection'],
+					['asc']
+				);
+			});
 
 			const currentCollectionPrimaryKey = computed(() =>
 				fieldsStore.getPrimaryKeyFieldForCollection(props.collection)
@@ -197,7 +225,7 @@ export default defineComponent({
 				},
 			});
 
-			return { availableCollections, items, fields, currentCollectionPrimaryKey, collectionMany };
+			return { availableCollections, systemCollections, fields, currentCollectionPrimaryKey, collectionMany };
 		}
 
 		function useCorresponding() {