fix: better call logs list

frontend/src/components/ListRowItem.vue

@@ -1,13 +1,14 @@
 <template>
   <Tooltip
     :text="tooltipText"
-    :html="tooltipHTML"
     class="flex items-center space-x-2.5"
   >
     <slot name="prefix"></slot>
-    <div class="text-base truncate">
-      {{ label }}
-    </div>
+    <slot>
+      <div class="text-base truncate">
+        {{ label }}
+      </div>
+    </slot>
   </Tooltip>
 </template>
 <script setup>
@@ -26,13 +27,6 @@ const props = defineProps({
   },
 })
 
-const tooltipHTML = computed(() => {
-  if (props.type === 'html') {
-    return props.value?.toString()
-  }
-  return ''
-})
-
 const tooltipText = computed(() => {
   if (props.type === 'html') return ''
   if (props.type === 'pretty_date') {

frontend/src/components/ListView.vue

@@ -41,7 +41,10 @@
             :key="column.key"
             :class="[column.size, column.align]"
           >
-            <ListRowItem :value="getValue(row[column.key]).label" :type="column.type">
+            <ListRowItem
+              :value="getValue(row[column.key]).label"
+              :type="column.type"
+            >
               <template #prefix>
                 <div v-if="column.type === 'indicator'">
                   <IndicatorIcon :class="getValue(row[column.key]).color" />
@@ -65,7 +68,21 @@
                     shape="square"
                   />
                 </div>
+                <div v-else-if="column.type === 'icon'">
+                  <FeatherIcon
+                    :name="getValue(row[column.key]).icon"
+                    class="h-3 w-3"
+                  />
+                </div>
               </template>
+              <div v-if="column.type === 'badge'">
+                <Badge
+                  :variant="'subtle'"
+                  :theme="row[column.key].color"
+                  size="md"
+                  :label="row[column.key].label"
+                />
+              </div>
             </ListRowItem>
           </div>
         </router-link>
@@ -116,7 +133,7 @@
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import ListRowItem from '@/components/ListRowItem.vue'
-import { Checkbox, Avatar } from 'frappe-ui'
+import { Checkbox, Avatar, Badge, FeatherIcon } from 'frappe-ui'
 import { reactive, computed } from 'vue'
 
 const props = defineProps({

frontend/src/pages/CallLogs.vue

@@ -26,6 +26,7 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import SortIcon from '@/components/Icons/SortIcon.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import { secondsToDuration } from '@/utils'
 import { Button, createListResource } from 'frappe-ui'
 import { computed } from 'vue'
 
@@ -48,9 +49,9 @@ const callLogs = createListResource({
     'status',
     'type',
     'recording_url',
-    'modified',
+    'creation',
   ],
-  orderBy: 'modified desc',
+  orderBy: 'creation desc',
   cache: 'Call Logs',
   pageLength: 999,
   auto: true,
@@ -72,36 +73,24 @@ const columns = [
   {
     label: 'Duration',
     key: 'duration',
-    type: 'data',
+    type: 'icon',
     size: 'w-20',
   },
   {
     label: 'Type',
     key: 'type',
-    type: 'data',
+    type: 'icon',
     size: 'w-32',
   },
   {
     label: 'Status',
     key: 'status',
-    type: 'data',
+    type: 'badge',
     size: 'w-32',
   },
   {
-    label: 'Start Time',
-    key: 'start_time',
-    type: 'data',
-    size: 'w-32',
-  },
-  {
-    label: 'End Time',
-    key: 'end_time',
-    type: 'data',
-    size: 'w-32',
-  },
-  {
-    label: 'Last modified',
-    key: 'modified',
+    label: 'Created on',
+    key: 'creation',
     type: 'pretty_date',
     size: 'w-28',
   },
@@ -113,12 +102,19 @@ const rows = computed(() => {
       name: callLog.name,
       from: callLog.from,
       to: callLog.to,
-      duration: callLog.duration,
-      type: callLog.type,
-      status: callLog.status,
-      start_time: callLog.start_time,
-      end_time: callLog.end_time,
-      modified: callLog.modified,
+      duration: {
+        label: secondsToDuration(callLog.duration),
+        icon: 'clock',
+      },
+      type: {
+        label: callLog.type,
+        icon: callLog.type === 'Incoming' ? 'phone-incoming' : 'phone-outgoing',
+      },
+      status: {
+        label: callLog.status,
+        color: callLog.status === 'Completed' ? 'green' : 'gray',
+      },
+      creation: callLog.creation,
     }
   })
 })

frontend/src/utils.js

@@ -99,3 +99,16 @@ export function htmlToText(html) {
   div.innerHTML = html
   return div.textContent || div.innerText || ''
 }
+
+export function secondsToDuration(seconds) {
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const _seconds = Math.floor((seconds % 3600) % 60)
+
+  if (hours == 0 && minutes == 0) {
+    return `${_seconds}s`
+  } else if (hours == 0) {
+    return `${minutes}m ${_seconds}s`
+  }
+  return `${hours}h ${minutes}m ${_seconds}s`
+}