From 8e18312d785cf041e03cfe01dddaec87cd078499 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 25 Jul 2023 12:58:33 +0530
Subject: [PATCH] fix: added user avatar, logo, status indicator in list view

---
 .../src/components/Icons/IndicatorIcon.vue    | 20 +++++++++++++++++++
 frontend/src/components/ListView.vue          | 18 ++++++++++++++---
 frontend/src/pages/Contacts.vue               |  3 +++
 frontend/src/pages/Leads.vue                  |  6 ++++++
 4 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Icons/IndicatorIcon.vue

diff --git a/frontend/src/components/Icons/IndicatorIcon.vue b/frontend/src/components/Icons/IndicatorIcon.vue
new file mode 100644
index 00000000..dcac6020
--- /dev/null
+++ b/frontend/src/components/Icons/IndicatorIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <rect width="16" height="16" rx="4.5" :fill="color" />
+    <circle cx="8" cy="8" r="3" fill="white" />
+  </svg>
+</template>
+<script setup>
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+})
+</script>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index c74ce43d..9ae8d23b 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -63,10 +63,21 @@
           <div
             v-for="column in columns"
             :key="column.key"
-            class="text-base text-gray-900 truncate"
+            class="flex items-center space-x-2.5"
             :class="[column.size, column.align]"
           >
-            {{ row[column.key] }}
+            <div v-if="column.type === 'user'">
+              <Avatar v-if="row[column.key]" :label="row[column.key]" size="md" />
+            </div>
+            <div v-else-if="column.type === 'logo'">
+              <Avatar :label="row[column.key]" 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] }}
+            </div>
           </div>
         </div>
       </div>
@@ -74,9 +85,10 @@
   </div>
 </template>
 <script setup>
-import { FeatherIcon, Dropdown, Checkbox } from 'frappe-ui'
+import { FeatherIcon, Dropdown, Checkbox, Avatar } from 'frappe-ui'
 import SortIcon from './Icons/SortIcon.vue'
 import FilterIcon from './Icons/FilterIcon.vue'
+import IndicatorIcon from './Icons/IndicatorIcon.vue'
 import { ref } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 96ff0eff..82a6d624 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -24,16 +24,19 @@ const columns = [
   {
     label: 'Full Name',
     key: 'full_name',
+    type: 'user',
     size: 'w-44',
   },
   {
     label: 'Email',
     key: 'email',
+    type: 'email',
     size: 'w-44',
   },
   {
     label: 'Phone',
     key: 'phone',
+    type: 'phone',
     size: 'w-44',
   },
 ]
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index c85aed7d..749f900f 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -34,31 +34,37 @@ const columns = [
   {
     label: 'Full name',
     key: 'full_name',
+    type: 'user',
     size: 'w-44',
   },
   {
     label: 'Organization',
     key: 'organization_name',
+    type: 'logo',
     size: 'w-44',
   },
   {
     label: 'Status',
     key: 'status',
+    type: 'status',
     size: 'w-44',
   },
   {
     label: 'Email',
     key: 'email',
+    type: 'email',
     size: 'w-44',
   },
   {
     label: 'Mobile no',
     key: 'mobile_no',
+    type: 'phone',
     size: 'w-44',
   },
   {
     label: 'Lead owner',
     key: 'lead_owner',
+    type: 'user',
     size: 'w-44',
   },
 ]