From dde5517c74cdfc749264ea9c2188e4bb20f80c5f Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Thu, 30 Apr 2020 11:54:53 -0400
Subject: [PATCH] Add user display (#509)

---
 src/assets/avatar-placeholder.svg |  8 ++++
 src/displays/index.ts             |  2 +
 src/displays/user/index.ts        | 25 ++++++++++++
 src/displays/user/user.vue        | 68 +++++++++++++++++++++++++++++++
 4 files changed, 103 insertions(+)
 create mode 100644 src/assets/avatar-placeholder.svg
 create mode 100644 src/displays/user/index.ts
 create mode 100644 src/displays/user/user.vue

diff --git a/src/assets/avatar-placeholder.svg b/src/assets/avatar-placeholder.svg
new file mode 100644
index 0000000000..3ac7176f87
--- /dev/null
+++ b/src/assets/avatar-placeholder.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#F5F7F8" d="M0 0h64v64H0z"/>
+    <path d="M32 32c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8zm0 4c-5.34 0-16 2.68-16 8v4h32v-4c0-5.32-10.66-8-16-8z" fill="#B0BEC5" fill-rule="nonzero"/>
+    <path d="M8 8h48v48H8z"/>
+  </g>
+</svg>
diff --git a/src/displays/index.ts b/src/displays/index.ts
index 4a16d39c0f..63a5f04ab0 100644
--- a/src/displays/index.ts
+++ b/src/displays/index.ts
@@ -5,6 +5,7 @@ import DisplayStatusBadge from './status-badge/';
 import DisplayTags from './tags/';
 import DisplayFormattedText from './formatted-text';
 import DisplayImage from './image';
+import DisplayUser from './user';
 
 export const displays = [
 	DisplayIcon,
@@ -14,5 +15,6 @@ export const displays = [
 	DisplayTags,
 	DisplayFormattedText,
 	DisplayImage,
+	DisplayUser,
 ];
 export default displays;
diff --git a/src/displays/user/index.ts b/src/displays/user/index.ts
new file mode 100644
index 0000000000..b88f7a34ec
--- /dev/null
+++ b/src/displays/user/index.ts
@@ -0,0 +1,25 @@
+import { defineDisplay } from '@/displays/define';
+import DisplayUser from './user.vue';
+
+export default defineDisplay(({ i18n }) => ({
+	id: 'user',
+	name: i18n.t('user'),
+	types: ['user', 'owner', 'user_modified'],
+	icon: 'person',
+	handler: DisplayUser,
+	options: [
+		{
+			field: 'display',
+			name: i18n.t('display'),
+			default_value: 'avatar',
+			interface: 'dropdown',
+			options: {
+				choices: `
+				avatar :: Avatar
+				name :: Name
+				`,
+			},
+		},
+	],
+	fields: ['id', 'avatar.data', 'first_name', 'last_name'],
+}));
diff --git a/src/displays/user/user.vue b/src/displays/user/user.vue
new file mode 100644
index 0000000000..d4880af41d
--- /dev/null
+++ b/src/displays/user/user.vue
@@ -0,0 +1,68 @@
+<template>
+	<span v-if="display === 'name'">{{ value.first_name }} {{ value.last_name }}</span>
+	<img
+		v-else-if="display === 'avatar' && src"
+		:src="src"
+		role="presentation"
+		:alt="value && `${value.first_name} ${value.last_name}`"
+	/>
+	<img
+		v-else-if="display === 'avatar' && src === null"
+		src="../../assets/avatar-placeholder.svg"
+		role="presentation"
+		:alt="value && `${value.first_name} ${value.last_name}`"
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+
+type User = {
+	id: number;
+	avatar: {
+		data: {
+			thumbnails: {
+				key: string;
+				url: string;
+			}[];
+		};
+	};
+	first_name: string;
+	last_name: string;
+};
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Object as PropType<User>,
+			default: null,
+		},
+		display: {
+			type: String as PropType<'avatar' | 'name'>,
+			default: 'avatar',
+		},
+	},
+	setup(props) {
+		const src = computed(() => {
+			if (props.value === null) return null;
+			return (
+				props.value?.avatar?.data?.thumbnails?.find(
+					(thumb) => thumb.key === 'directus-small-crop'
+				)?.url || null
+			);
+		});
+
+		return { src };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+img {
+	display: inline-block;
+	width: auto;
+	height: 100%;
+	vertical-align: -30%;
+	border-radius: 4px;
+}
+</style>