From d47f5bae13ee76e6e4dd7b5c52ef100d900daea0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 13 Jan 2024 13:51:29 +0530
Subject: [PATCH] fix: added mapping to call log status to display on Ui

---
 frontend/src/pages/CallLog.vue  | 20 ++++++++++++++++++--
 frontend/src/pages/CallLogs.vue | 20 ++++++++++++++++++--
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/CallLog.vue b/frontend/src/pages/CallLog.vue
index 66d8a7e1..2cc0036e 100644
--- a/frontend/src/pages/CallLog.vue
+++ b/frontend/src/pages/CallLog.vue
@@ -35,9 +35,9 @@
         <div>
           <Badge
             :variant="'subtle'"
-            :theme="callLog.data.status === 'Completed' ? 'green' : 'gray'"
+            :theme="statusColorMap[callLog.data.status]"
             size="md"
-            :label="callLog.data.status"
+            :label="statusLabelMap[callLog.data.status]"
           />
         </div>
       </div>
@@ -245,6 +245,22 @@ const breadcrumbs = computed(() => [
     route: { name: 'Call Log', params: { callLogId: props.callLogId } },
   },
 ])
+
+const statusLabelMap = {
+  Completed: 'Completed',
+  Busy: 'Declined',
+  Ringing: 'Ringing',
+  'No Answer': 'Missed Call',
+  'In Progress': 'In Progress',
+}
+
+const statusColorMap = {
+  Completed: 'green',
+  Busy: 'orange',
+  Ringing: 'gray',
+  'No Answer': 'red',
+  'In Progress': 'blue',
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 35f8f7ba..e691517c 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -103,8 +103,8 @@ const rows = computed(() => {
         }
       } else if (row === 'status') {
         _rows[row] = {
-          label: callLog.status,
-          color: callLog.status === 'Completed' ? 'green' : 'gray',
+          label: statusLabelMap[callLog.status],
+          color: statusColorMap[callLog.status],
         }
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
@@ -116,4 +116,20 @@ const rows = computed(() => {
     return _rows
   })
 })
+
+const statusLabelMap = {
+  Completed: 'Completed',
+  Busy: 'Declined',
+  Ringing: 'Ringing',
+  'No Answer': 'Missed Call',
+  'In Progress': 'In Progress',
+}
+
+const statusColorMap = {
+  Completed: 'green',
+  Busy: 'orange',
+  Ringing: 'gray',
+  'No Answer': 'red',
+  'In Progress': 'blue',
+}
 </script>