From 562200cd4c8ad4b3b1ec671ed84253f5a21ff8c0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 11 Dec 2023 13:01:58 +0530
Subject: [PATCH] fix: show sla details on deal list view

---
 crm/fcrm/doctype/crm_deal/crm_deal.py         |  3 +++
 .../components/ListViews/DealsListView.vue    | 25 ++++++++++++++++++-
 frontend/src/pages/Deals.vue                  | 22 ++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
index f9f3ee7c..87cdfb72 100644
--- a/crm/fcrm/doctype/crm_deal/crm_deal.py
+++ b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -135,6 +135,9 @@ class CRMDeal(Document):
 			"email",
 			"mobile_no",
 			"deal_owner",
+			"sla_status",
+			"first_response_time",
+			"first_responded_on",
 			"modified",
 		]
 		return {'columns': columns, 'rows': rows}
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 1b5618b4..72efab98 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -44,9 +44,31 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div v-if="['modified', 'creation'].includes(column.key)" class="truncate text-base">
+          <div
+            v-if="
+              [
+                'modified',
+                'creation',
+                'first_response_time',
+                'first_responded_on',
+              ].includes(column.key)
+            "
+            class="truncate text-base"
+          >
             {{ item.timeAgo }}
           </div>
+          <div
+            v-else-if="column.key === 'sla_status'"
+            class="truncate text-base"
+          >
+            <Badge
+              v-if="item.label"
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="item.label"
+            />
+          </div>
           <div v-else-if="column.type === 'Check'">
             <FormControl
               type="checkbox"
@@ -74,6 +96,7 @@ import {
   ListRowItem,
   ListSelectBanner,
   FormControl,
+  Badge,
 } from 'frappe-ui'
 
 const props = defineProps({
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 0a935fca..03ffa94d 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -71,6 +71,7 @@ import {
   dateTooltipFormat,
   timeAgo,
   formatNumberIntoCurrency,
+  formatTime,
 } from '@/utils'
 import {
   FeatherIcon,
@@ -154,6 +155,16 @@ const rows = computed(() => {
           label: deal.status,
           color: getDealStatus(deal.status)?.iconColorClass,
         }
+      } else if (row == 'sla_status') {
+        _rows[row] = {
+          label: deal.sla_status,
+          color:
+            deal.sla_status === 'Failed'
+              ? 'red'
+              : deal.sla_status === 'Fulfilled'
+              ? 'green'
+              : 'gray',
+        }
       } else if (row == 'deal_owner') {
         _rows[row] = {
           label: deal.deal_owner && getUser(deal.deal_owner).full_name,
@@ -164,6 +175,17 @@ const rows = computed(() => {
           label: dateFormat(deal[row], dateTooltipFormat),
           timeAgo: timeAgo(deal[row]),
         }
+      } else if (['first_response_time', 'first_responded_on'].includes(row)) {
+        _rows[row] = {
+          label: deal.first_responded_on
+            ? dateFormat(deal.first_responded_on, dateTooltipFormat)
+            : '',
+          timeAgo: deal[row]
+            ? row == 'first_responded_on'
+              ? timeAgo(deal[row])
+              : formatTime(deal[row])
+            : '',
+        }
       }
     })
     return _rows