fix: show sla details on deal list view

frappe · Dec 11, 2023 · 562200c · 562200c
1 parent 78b9353
commit 562200c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/crm/fcrm/doctype/crm_deal/crm_deal.py b/crm/fcrm/doctype/crm_deal/crm_deal.py
@@ -135,6 +135,9 @@ def default_list_data():
 			"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
@@ -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
@@ -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