From c3c91803cba6bf7f77a87a03bca7e6666bfb5392 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 22 Jan 2024 17:25:45 +0530
Subject: [PATCH] feat: added comment in activity

---
 crm/api/activities.py                         | 20 +++++++++++++
 frontend/src/components/Activities.vue        | 29 +++++++++++++++++++
 frontend/src/components/Icons/CommentIcon.vue | 16 ++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 frontend/src/components/Icons/CommentIcon.vue

diff --git a/crm/api/activities.py b/crm/api/activities.py
index 5dd38ff2..ef42a929 100644
--- a/crm/api/activities.py
+++ b/crm/api/activities.py
@@ -95,6 +95,16 @@ def get_deal_activities(name):
 		}
 		activities.append(activity)
 
+	for comment in docinfo.comments:
+		activity = {
+			"activity_type": "comment",
+			"creation": comment.creation,
+			"owner": comment.owner,
+			"content": comment.content,
+			"is_lead": False,
+		}
+		activities.append(activity)
+
 	for communication in docinfo.communications:
 		activity = {
 			"activity_type": "communication",
@@ -191,6 +201,16 @@ def get_lead_activities(name):
 		}
 		activities.append(activity)
 
+	for comment in docinfo.comments:
+		activity = {
+			"activity_type": "comment",
+			"creation": comment.creation,
+			"owner": comment.owner,
+			"content": comment.content,
+			"is_lead": True,
+		}
+		activities.append(activity)
+
 	for communication in docinfo.communications:
 		activity = {
 			"activity_type": "communication",
diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 1a42d733..433bfe67 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -404,6 +404,31 @@
             </div>
           </div>
         </div>
+        <div class="mb-4" v-if="activity.activity_type == 'comment'">
+          <div class="mb-0.5 py-1.5 flex items-start justify-stretch gap-2 text-base">
+            <div class="inline-flex flex-wrap gap-1 text-gray-600">
+              <span class="font-medium text-gray-800">
+                {{ activity.owner_name }}
+              </span>
+              <span>added a</span>
+              <span class="max-w-xs truncate font-medium text-gray-800">
+                comment
+              </span>
+            </div>
+            <div class="ml-auto whitespace-nowrap">
+              <Tooltip
+                :text="dateFormat(activity.creation, dateTooltipFormat)"
+                class="text-gray-600"
+              >
+                {{ timeAgo(activity.creation) }}
+              </Tooltip>
+            </div>
+          </div>
+          <div
+            class="cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
+            v-html="activity.content"
+          />
+        </div>
         <div
           v-else-if="
             activity.activity_type == 'incoming_call' ||
@@ -692,6 +717,7 @@ import PlayIcon from '@/components/Icons/PlayIcon.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DotIcon from '@/components/Icons/DotIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
 import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
 import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
@@ -949,6 +975,9 @@ function timelineIcon(activity_type, is_lead) {
     case 'deal':
       icon = DealsIcon
       break
+    case 'comment':
+      icon = CommentIcon
+      break
     case 'communication':
       icon = EmailAtIcon
       break
diff --git a/frontend/src/components/Icons/CommentIcon.vue b/frontend/src/components/Icons/CommentIcon.vue
new file mode 100644
index 00000000..7719a491
--- /dev/null
+++ b/frontend/src/components/Icons/CommentIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 2.5C4.2911 2.5 1.5 4.84419 1.5 7.5C1.5 9.14452 2.54729 10.6518 4.25112 11.5816C4.50048 11.7177 4.758 12.0041 4.7326 12.4082C4.71107 12.7508 4.61659 13.2533 4.47175 13.6657C4.44071 13.7541 4.40789 13.8389 4.37434 13.9195C4.62005 13.8524 4.91964 13.7411 5.26646 13.5579C5.48882 13.4404 5.69385 13.2901 5.9102 13.1207C5.95058 13.089 5.9922 13.056 6.03481 13.0222C6.20816 12.8848 6.39803 12.7342 6.58835 12.6102C6.7875 12.4803 7.01146 12.4447 7.20831 12.4631C7.46767 12.4875 7.73186 12.5 8 12.5C11.7089 12.5 14.5 10.1558 14.5 7.5C14.5 4.84419 11.7089 2.5 8 2.5ZM0.5 7.5C0.5 4.08068 3.97691 1.5 8 1.5C12.0231 1.5 15.5 4.08068 15.5 7.5C15.5 10.9193 12.0231 13.5 8 13.5C7.70158 13.5 7.40709 13.4861 7.11751 13.459C6.97583 13.5528 6.83777 13.6621 6.67569 13.7905C6.62832 13.828 6.5789 13.8671 6.52674 13.908C6.30071 14.085 6.03818 14.2812 5.73354 14.4421C4.73389 14.9702 3.9948 15.0302 3.62977 15.0147C3.39759 15.0048 3.20936 14.8646 3.12194 14.6754C3.03801 14.4938 3.05143 14.2816 3.15736 14.1099C3.24804 13.963 3.40655 13.6808 3.52825 13.3343C3.62961 13.0457 3.70134 12.6878 3.72712 12.4347C1.81521 11.3748 0.5 9.58517 0.5 7.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>