From 66420a144430f21df5f4c3b01f243ac62e6fcc27 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 26 Aug 2023 12:00:10 +0530
Subject: [PATCH] fix: added tooltip for listview column cells

---
 frontend/src/components/ListRowItem.vue | 37 ++++++++++++++++++++-----
 frontend/src/components/ListView.vue    |  3 +-
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ListRowItem.vue b/frontend/src/components/ListRowItem.vue
index 0aa7cf92..5469c570 100644
--- a/frontend/src/components/ListRowItem.vue
+++ b/frontend/src/components/ListRowItem.vue
@@ -1,15 +1,38 @@
 <template>
-  <slot name="prefix"></slot>
-  <slot v-if="$slots.default" />
-  <div v-else class="text-base text-gray-900 truncate">
-    {{ value }}
-  </div>
+  <Tooltip :text="tooltipText" class="flex items-center space-x-2.5">
+    <slot name="prefix"></slot>
+    <div class="text-base truncate">
+      {{ label }}
+    </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>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index bd62ad72..80af8fef 100644
--- a/frontend/src/components/ListView.vue
+++ b/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" />