fix: show user avatar in list view

frontend/src/components/ListView.vue

@@ -67,16 +67,27 @@
             :class="[column.size, column.align]"
           >
             <div v-if="column.type === 'user'">
-              <Avatar v-if="row[column.key]" :label="row[column.key]" size="md" />
+              <Avatar
+                v-if="getValue(row[column.key])"
+                class="flex items-center"
+                :image="getValue(row[column.key]).image"
+                :label="getValue(row[column.key]).label"
+                size="md"
+              />
             </div>
             <div v-else-if="column.type === 'logo'">
-              <Avatar :label="row[column.key]" size="md" shape="square" />
+              <Avatar
+                class="flex items-center"
+                :label="getValue(row[column.key]).label"
+                size="md"
+                shape="square"
+              />
             </div>
             <div v-else-if="column.type === 'status'">
               <IndicatorIcon />
             </div>
             <div class="text-base text-gray-900 truncate">
-              {{ row[column.key] }}
+              {{ getValue(row[column.key]).label }}
             </div>
           </div>
         </div>
@@ -153,4 +164,15 @@ const viewsDropdownOptions = [
     },
   },
 ]
+
+function getValue(value) {
+  if (typeof value === 'object') {
+    value.label = value.full_name
+    value.image = value.user_image
+    return value
+  }
+  return {
+    label: value,
+  }
+}
 </script>

frontend/src/pages/Contacts.vue

@@ -22,7 +22,7 @@ contacts.fetch()
 
 const columns = [
   {
-    label: 'Full Name',
+    label: 'Full name',
     key: 'full_name',
     type: 'user',
     size: 'w-44',

frontend/src/pages/Leads.vue

@@ -6,8 +6,10 @@
 import ListView from '../components/ListView.vue'
 import { computed } from 'vue'
 import { createListResource } from 'frappe-ui'
+import { usersStore } from '../stores/users'
 
 const title = 'Leads'
+const { getUser } = usersStore()
 
 const leads = createListResource({
   type: 'list',
@@ -32,9 +34,8 @@ leads.fetch()
 
 const columns = [
   {
-    label: 'Full name',
+    label: 'Name',
     key: 'full_name',
-    type: 'user',
     size: 'w-44',
   },
   {
@@ -77,7 +78,7 @@ const rows = computed(() => {
       status: lead.status,
       email: lead.email,
       mobile_no: lead.mobile_no,
-      lead_owner: lead.lead_owner,
+      lead_owner: getUser(lead.lead_owner),
     }
   })
 })