46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup>
|
|
import { computed, ref } 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 },
|
|
size: { type: String, default: null },
|
|
title: { type: String, default: null },
|
|
});
|
|
const { getTokenMultimedia } = useSession();
|
|
const token = getTokenMultimedia();
|
|
const { t } = useI18n();
|
|
|
|
const title = computed(() => $props.title ?? t('globals.system'));
|
|
const showLetter = ref(false);
|
|
</script>
|
|
<template>
|
|
<div class="avatar-picture column items-center">
|
|
<QAvatar
|
|
:style="{
|
|
backgroundColor: useColor(title),
|
|
}"
|
|
:size="$props.size"
|
|
:title="title"
|
|
>
|
|
<template v-if="showLetter">{{ title.charAt(0) }}</template>
|
|
<QImg
|
|
v-else
|
|
:src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
|
|
spinner-color="white"
|
|
@error="showLetter = true"
|
|
/>
|
|
</QAvatar>
|
|
<div class="description">
|
|
<slot name="description" v-if="$props.description">
|
|
<p>
|
|
{{ $props.description }}
|
|
</p>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|