47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useSession } from 'src/composables/useSession';
|
|
import { useColor } from 'src/composables/useColor';
|
|
|
|
const $props = defineProps({
|
|
workerId: { type: Number, required: true },
|
|
description: { type: String, default: null },
|
|
title: { type: [String, Boolean], default: null },
|
|
color: { type: String, default: null },
|
|
});
|
|
const { getTokenMultimedia } = useSession();
|
|
const token = getTokenMultimedia();
|
|
const { t } = useI18n();
|
|
const src = computed(
|
|
() => `/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`
|
|
);
|
|
const title = computed(() =>
|
|
$props.title !== false ? $props.title || t('globals.system') : false
|
|
);
|
|
const showLetter = ref(false);
|
|
|
|
watch(src, () => (showLetter.value = false));
|
|
</script>
|
|
<template>
|
|
<div class="column items-center">
|
|
<QAvatar
|
|
:style="{
|
|
backgroundColor: color ? color : useColor(title),
|
|
}"
|
|
v-bind="$attrs"
|
|
:title="title !== false ? title : undefined"
|
|
>
|
|
<template v-if="showLetter && title !== false">
|
|
{{ title.charAt(0) }}
|
|
</template>
|
|
<QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />
|
|
</QAvatar>
|
|
<div class="description">
|
|
<slot name="description" v-if="description">
|
|
<p v-text="description" />
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|