fix: replaced leads listview with frappeui listview component

frappe-ui

@@ -1 +1 @@
-Subproject commit 167ff453cb525674f976d53b126900b80b9a80a2
+Subproject commit a81806c302c5328be4d96e21352b843ed9c001c5

frontend/src/pages/Leads.vue

@@ -32,7 +32,66 @@
       <Button icon="more-horizontal" />
     </div>
   </div>
-  <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
+  <ListView
+    v-if="rows"
+    class="mt-0"
+    :columns="columns"
+    :rows="rows"
+    row-key="name"
+  >
+    <ListHeader />
+    <ListRows>
+      <ListRow
+        v-for="(row, i) in rows"
+        :key="row.name"
+        v-slot="{ column, item }"
+        :row="row"
+        :idx="i"
+      >
+        <ListRowItem :item="item">
+          <template #prefix>
+            <div v-if="column.key === 'status'">
+              <IndicatorIcon :class="item.color" />
+            </div>
+            <div v-else-if="column.key === 'lead_name'">
+              <Avatar
+                v-if="item.label"
+                class="flex items-center"
+                :image="item.image"
+                :label="item.image_label"
+                size="sm"
+              />
+            </div>
+            <div v-else-if="column.key === 'organization_name'">
+              <Avatar
+                v-if="item.label"
+                class="flex items-center"
+                :image="item.logo"
+                :label="item.label"
+                size="sm"
+              />
+            </div>
+            <div v-else-if="column.key === 'lead_owner'">
+              <Avatar
+                v-if="item.full_name"
+                class="flex items-center"
+                :image="item.user_image"
+                :label="item.full_name"
+                size="sm"
+              />
+            </div>
+            <div v-else-if="column.key === 'mobile_no'">
+              <PhoneIcon class="h-4 w-4" />
+            </div>
+          </template>
+          <div v-if="column.key === 'modified'" class="truncate text-base">
+            {{ item.timeAgo }}
+          </div>
+        </ListRowItem>
+      </ListRow>
+    </ListRows>
+    <ListSelectBanner />
+  </ListView>
   <Dialog
     v-model="showNewDialog"
     :options="{
@@ -53,17 +112,19 @@
 </template>
 
 <script setup>
-import ListView from '@/components/ListView.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import NewLead from '@/components/NewLead.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import { usersStore } from '@/stores/users'
 import { useOrderBy } from '@/composables/orderby'
 import { useFilter } from '@/composables/filter'
 import { useDebounceFn } from '@vueuse/core'
-import { leadStatuses } from '@/utils'
+import { leadStatuses, dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
 import {
+  Avatar,
   FeatherIcon,
   Dialog,
   Button,
@@ -71,17 +132,17 @@ import {
   createListResource,
   createResource,
   Breadcrumbs,
+  ListView,
+  ListHeader,
+  ListRows,
+  ListRow,
+  ListSelectBanner,
+  ListRowItem,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, computed, reactive, watch } from 'vue'
 
-const list = {
-  title: 'Leads',
-  plural_label: 'Leads',
-  singular_label: 'Lead',
-}
-
-const breadcrumbs = [{ label: list.title, route: { name: 'Leads' } }]
+const breadcrumbs = [{ label: 'Leads', route: { name: 'Leads' } }]
 
 const { getUser } = usersStore()
 const { get: getOrderBy } = useOrderBy()
@@ -149,44 +210,37 @@ const columns = [
   {
     label: 'Name',
     key: 'lead_name',
-    type: 'avatar',
-    size: 'w-44',
+    width: '12rem',
   },
   {
     label: 'Organization',
     key: 'organization_name',
-    type: 'logo',
-    size: 'w-36',
+    width: '10rem',
   },
   {
     label: 'Status',
     key: 'status',
-    type: 'indicator',
-    size: 'w-28',
+    width: '8rem',
   },
   {
     label: 'Email',
     key: 'email',
-    type: 'email',
-    size: 'w-44',
+    width: '12rem',
   },
   {
     label: 'Mobile no',
     key: 'mobile_no',
-    type: 'phone',
-    size: 'w-40',
+    width: '11rem',
   },
   {
     label: 'Lead owner',
     key: 'lead_owner',
-    type: 'avatar',
-    size: 'w-36',
+    width: '10rem',
   },
   {
     label: 'Last modified',
     key: 'modified',
-    type: 'pretty_date',
-    size: 'w-28',
+    width: '8rem',
   },
 ]
 
@@ -209,8 +263,15 @@ const rows = computed(() => {
       },
       email: lead.email,
       mobile_no: lead.mobile_no,
-      lead_owner: lead.lead_owner && getUser(lead.lead_owner),
-      modified: lead.modified,
+      lead_owner: {
+        label: lead.lead_owner && getUser(lead.lead_owner).full_name,
+        ...(lead.lead_owner && getUser(lead.lead_owner)),
+      },
+      modified: {
+        label: dateFormat(lead.modified, dateTooltipFormat),
+        timeAgo: timeAgo(lead.modified),
+      },
+      route: { name: 'Lead', params: { leadId: lead.name } },
     }
   })
 })