Show errors on detail page, add v-error comp

src/components/register.ts

@@ -10,6 +10,7 @@ import VChip from './v-chip/';
 import VDetail from './v-detail';
 import VDialog from './v-dialog';
 import VDivider from './v-divider';
+import VError from './v-error';
 import VFancySelect from './v-fancy-select';
 import VFieldTemplate from './v-field-template';
 import VForm from './v-form';
@@ -59,6 +60,7 @@ Vue.component('v-chip', VChip);
 Vue.component('v-detail', VDetail);
 Vue.component('v-dialog', VDialog);
 Vue.component('v-divider', VDivider);
+Vue.component('v-error', VError);
 Vue.component('v-fancy-select', VFancySelect);
 Vue.component('v-field-template', VFieldTemplate);
 Vue.component('v-form', VForm);

src/components/v-error/index.ts

@@ -0,0 +1,4 @@
+import VError from './v-error.vue';
+
+export default VError;
+export { VError };

src/components/v-error/v-error.vue

@@ -0,0 +1,56 @@
+<template>
+	<div class="v-error">
+		<output>{{ code }}</output>
+		<v-icon
+			v-tooltip="$t('copy_details')"
+			v-if="showCopy"
+			small
+			class="copy-error"
+			:name="copied ? 'check' : 'content_copy'"
+			@click="copyError"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType, ref } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		error: {
+			type: [Object, Error] as PropType<any>,
+			required: true,
+		},
+	},
+	setup(props) {
+		const code = computed(() => {
+			return props.error?.response?.data?.error?.code || 'UNKNOWN';
+		});
+
+		const copied = ref(false);
+
+		const showCopy = computed(() => !!navigator.clipboard?.writeText);
+
+		return { code, copyError, showCopy, copied };
+
+		async function copyError() {
+			await navigator.clipboard.writeText(JSON.stringify(props.error, null, 2));
+			copied.value = true;
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-error {
+	padding: 6px 12px;
+	color: var(--danger);
+	font-family: var(--family-monospace);
+	background-color: var(--danger-alt);
+	border-radius: var(--border-radius);
+
+	.copy-error {
+		margin-left: 12px;
+	}
+}
+</style>

src/lang/en-US/index.json

@@ -345,6 +345,8 @@
 	"presets": "Presets",
 
 	"unexpected_error": "An unexpected error occured",
+	"unexpected_error_copy": "Something went wrong.. Please try again later.",
+	"copy_details": "Copy Details",
 
 	"password_reset_sent": "We've sent you a secure link to reset your password",
 	"password_reset_successful": "Password successfully reset",

src/layouts/tabular/tabular.vue

@@ -124,6 +124,14 @@
 			</template>
 		</v-table>
 
+		<v-info v-else-if="error" type="danger" :title="$t('unexpected_error')" icon="error" center>
+			{{ $t('unexpected_error_copy') }}
+
+			<template #append>
+				<v-error :error="error" />
+			</template>
+		</v-info>
+
 		<v-info v-else-if="itemCount === 0 && activeFilterCount > 0" :title="$t('no_results')" icon="search" center>
 			{{ $t('no_results_copy') }}