-import { computed, ref } from 'vue';
+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 },
- size: { type: String, default: null },
title: { type: String, default: null },
+ color: { type: String, default: null },
});
+
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const { t } = useI18n();
-const title = computed(() => $props.title ?? t('globals.system'));
+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));
-
+
- {{ title.charAt(0) }}
-
+
+ {{ title.charAt(0) }}
+
+
-
-
- {{ $props.description }}
-
+
+
+
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 985c9cc53..9585b81d8 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -1,6 +1,8 @@
-
+
-