fix: added tooltip for listview column cells

frontend/src/components/ListRowItem.vue

@@ -1,15 +1,38 @@
 <template>
-  <slot name="prefix"></slot>
+  <Tooltip :text="tooltipText" class="flex items-center space-x-2.5">
-  <slot v-if="$slots.default" />
+    <slot name="prefix"></slot>
-  <div v-else class="text-base text-gray-900 truncate">
+    <div class="text-base truncate">
-    {{ value }}
+      {{ label }}
-  </div>
+    </div>
+  </Tooltip>
 </template>
 <script setup>
+import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
+import { Tooltip } from 'frappe-ui'
+import { computed } from 'vue'
+
 const props = defineProps({
-  value: {
+  type: {
     type: String,
-    default: null,
+    default: 'text',
+  },
+  value: {
+    type: [String, Number, Object],
+    default: '',
   },
 })
+
+const tooltipText = computed(() => {
+  if (props.type === 'pretty_date') {
+    return dateFormat(props.value, dateTooltipFormat)
+  }
+  return props.value?.toString()
+})
+
+const label = computed(() => {
+  if (props.type === 'pretty_date') {
+    return timeAgo(props.value)
+  }
+  return props.value?.toString()
+})
 </script>

frontend/src/components/ListView.vue

@@ -39,10 +39,9 @@
           <div
             v-for="column in columns"
             :key="column.key"
-            class="flex items-center space-x-2.5"
             :class="[column.size, column.align]"
           >
-            <ListRowItem :value="getValue(row[column.key]).label">
+            <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" />