src/components/ui/VnAvatar.vue

@@ -8,18 +8,18 @@ import { getCssVar } from 'quasar';
 const $props = defineProps({
     workerId: { type: Number, required: true },
     description: { type: String, default: null },
-    title: { type: [String, Boolean], 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 !== false ? $props.title || t('globals.system') : false
-);
+const title = computed(() => $props.title?.toUpperCase() || t('globals.system'));
 const showLetter = ref(false);
 const backgroundColor = computed(() => {
     const color = $props.color || useColor(title.value);
@@ -33,9 +33,9 @@ watch(src, () => (showLetter.value = false));
         <QAvatar
             :style="{ backgroundColor }"
             v-bind="$attrs"
-            :title="title !== false ? title : undefined"
+            :title="title || t('globals.system')"
         >
-            <template v-if="showLetter && title !== false">
+            <template v-if="showLetter">
                 {{ title.charAt(0) }}
             </template>
             <QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />

src/pages/Claim/Card/ClaimBasicData.vue

@@ -94,7 +94,9 @@ const statesFilter = {
                         <VnAvatar
                             :worker-id="data.workerFk"
                             size="md"
-                            :title="false"
+                            :title="
+                                workersOptions.find(({ id }) => id == data.workerFk)?.name
+                            "
                             color="primary"
                         />
                     </template>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -15,6 +15,7 @@ const { t } = useI18n();
 
 const businessTypes = ref([]);
 const contactChannels = ref([]);
+const title = ref();
 </script>
 <template>
     <FetchData
@@ -95,12 +96,14 @@ const contactChannels = ref([]);
                     :label="t('customer.basicData.salesPerson')"
                     :rules="validate('client.salesPersonFk')"
                     :use-like="false"
+                    :emit-value="false"
+                    @update:model-value="(val) => (title = val?.nickname)"
                 >
                     <template #prepend>
                         <VnAvatar
                             :worker-id="data.salesPersonFk"
                             color="primary"
-                            :title="false"
+                            :title="title"
                         />
                     </template>
                 </VnSelect>