mirror of
https://github.com/directus/directus.git
synced 2026-02-19 10:14:33 -05:00
d6846d74eb
* Remove unused nested folders from components * Remove nested folders * Standardize composables output * Fix import inconsistencies * Same trick for directives * Same for routes * Replace reliance root grouped export in favor of explicit imports * Replace reliance on implicit imports * Remove nested folder structure * Consistent use of non-default exports in utils * Remove nested folder structure from private components * Fix test mock * Remove extraneous component registration for valuenull * Fix stores provider * Fix logo sprite
79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<div class="v-error selectable">
|
|
<output>[{{ code }}] {{ message }}</output>
|
|
<v-icon
|
|
v-if="isCopySupported"
|
|
v-tooltip="t('copy_details')"
|
|
small
|
|
class="copy-error"
|
|
:name="copied ? 'check' : 'content_copy'"
|
|
clickable
|
|
@click="copyError"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { defineComponent, computed, PropType, ref } from 'vue';
|
|
import { isPlainObject } from 'lodash';
|
|
import { useClipboard } from '@/composables/use-clipboard';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
error: {
|
|
type: [Object, Error] as PropType<Record<string, any>>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const { t } = useI18n();
|
|
|
|
const code = computed(() => {
|
|
return props.error?.response?.data?.errors?.[0]?.extensions?.code || props.error?.extensions?.code || 'UNKNOWN';
|
|
});
|
|
|
|
const message = computed(() => {
|
|
let message = props.error?.response?.data?.errors?.[0]?.message || props.error?.message;
|
|
|
|
if (message.length > 200) {
|
|
message = message.substring(0, 197) + '...';
|
|
}
|
|
|
|
return message;
|
|
});
|
|
|
|
const copied = ref(false);
|
|
|
|
const { isCopySupported, copyToClipboard } = useClipboard();
|
|
|
|
return { t, code, copyError, isCopySupported, copied, message };
|
|
|
|
async function copyError() {
|
|
const error = props.error?.response?.data || props.error;
|
|
const isCopied = await copyToClipboard(
|
|
JSON.stringify(error, isPlainObject(error) ? null : Object.getOwnPropertyNames(error), 2)
|
|
);
|
|
if (!isCopied) return;
|
|
copied.value = true;
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.v-error {
|
|
max-height: 50vh;
|
|
padding: 6px 12px;
|
|
overflow: auto;
|
|
color: var(--danger);
|
|
font-family: var(--family-monospace);
|
|
background-color: var(--danger-alt);
|
|
border-radius: var(--border-radius);
|
|
|
|
.copy-error {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
</style>
|