Add user display (#509)

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>

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;

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'],
+}));

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>