63 lines
1.7 KiB
Vue
63 lines
1.7 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';
|
|
import { getCssVar } from 'quasar';
|
|
|
|
const $props = defineProps({
|
|
workerId: { type: Number, required: true },
|
|
description: { type: String, default: null },
|
|
title: { type: [String], 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?.toUpperCase() || t('globals.system'));
|
|
const showLetter = ref(false);
|
|
const backgroundColor = computed(() => {
|
|
const color = $props.color || useColor(title.value);
|
|
return getCssVar(color) || color;
|
|
});
|
|
|
|
watch(src, () => (showLetter.value = false));
|
|
</script>
|
|
<template>
|
|
<div class="column items-center">
|
|
<QAvatar
|
|
:style="{ backgroundColor }"
|
|
v-bind="$attrs"
|
|
:title="title || t('globals.system')"
|
|
>
|
|
<template v-if="showLetter">
|
|
{{ 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>
|
|
<style lang="scss" scoped>
|
|
[size='xxl'] {
|
|
.q-avatar,
|
|
.q-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.q-img {
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
</style>
|