From 8654a04dcf88879ded70e418b3fce25ea9ef8a73 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Sat, 24 May 2025 23:00:49 +0530
Subject: [PATCH] fix: make sure sla badges re-render on timestamp changes, use
 a composite :key

---
 .../list/ConversationListItem.vue             | 68 +++++++++++--------
 .../conversation/sidebar/ConversationInfo.vue | 12 ++--
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/frontend/src/features/conversation/list/ConversationListItem.vue b/frontend/src/features/conversation/list/ConversationListItem.vue
index 2a5ef41d..1d6bf686 100644
--- a/frontend/src/features/conversation/list/ConversationListItem.vue
+++ b/frontend/src/features/conversation/list/ConversationListItem.vue
@@ -55,35 +55,38 @@
           </div>
         </div>
 
-        {{ conversation.next_response_deadline_at }}
-        <br />
-        {{ conversation.last_reply_at }}
-
-        <div class="flex items-center mt-2 space-x-2">
-          <SlaBadge
-            v-if="conversation.first_response_deadline_at"
-            :dueAt="conversation.first_response_deadline_at"
-            :actualAt="conversation.first_reply_at"
-            :label="'FRD'"
-            :showExtra="false"
-          />
-          <SlaBadge
-            v-if="conversation.resolution_deadline_at"
-            :dueAt="conversation.resolution_deadline_at"
-            :actualAt="conversation.resolved_at"
-            :label="'RD'"
-            :showExtra="false"
-          />
-          <SlaBadge
-            :dueAt="conversation.next_response_deadline_at"
-            :actualAt="
-              ['met'].includes(conversation.next_response_sla_event_status)
-                ? conversation.last_reply_at
-                : null
-            "
-            :label="'NRD'"
-            :showExtra="false"
-          />
+        <!-- SLA Badges -->
+        <div class="flex items-center">
+          <div :class="getSlaClass(frdStatus)">
+            <SlaBadge
+              :dueAt="conversation.first_response_deadline_at"
+              :actualAt="conversation.first_reply_at"
+              :label="'FRD'"
+              :showExtra="false"
+              @status="frdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
+            />
+          </div>
+          <div :class="getSlaClass(rdStatus)">
+            <SlaBadge
+              :dueAt="conversation.resolution_deadline_at"
+              :actualAt="conversation.resolved_at"
+              :label="'RD'"
+              :showExtra="false"
+              @status="rdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
+            />
+          </div>
+          <div :class="getSlaClass(nrdStatus)">
+            <SlaBadge
+              :dueAt="conversation.next_response_deadline_at"
+              :actualAt="conversation.next_response_met_at"
+              :label="'NRD'"
+              :showExtra="false"
+              @status="nrdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -91,7 +94,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { formatTime } from '@/utils/datetime'
 import { Mail, Reply } from 'lucide-vue-next'
@@ -100,6 +103,9 @@ import SlaBadge from '@/features/sla/SlaBadge.vue'
 
 const router = useRouter()
 const route = useRoute()
+const frdStatus = ref('')
+const rdStatus = ref('')
+const nrdStatus = ref('')
 
 const props = defineProps({
   conversation: Object,
@@ -127,4 +133,6 @@ const trimmedLastMessage = computed(() => {
   const message = props.conversation.last_message || ''
   return message.length > 100 ? message.slice(0, 100) + '...' : message
 })
+
+const getSlaClass = (status) => (['overdue', 'remaining'].includes(status) ? 'mr-2' : '')
 </script>
diff --git a/frontend/src/features/conversation/sidebar/ConversationInfo.vue b/frontend/src/features/conversation/sidebar/ConversationInfo.vue
index e16f8aad..d1a58ff3 100644
--- a/frontend/src/features/conversation/sidebar/ConversationInfo.vue
+++ b/frontend/src/features/conversation/sidebar/ConversationInfo.vue
@@ -31,7 +31,7 @@
           v-if="conversation.first_response_deadline_at"
           :dueAt="conversation.first_response_deadline_at"
           :actualAt="conversation.first_reply_at"
-          :key="conversation.uuid"
+          :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
         />
       </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -50,7 +50,7 @@
           v-if="conversation.resolution_deadline_at"
           :dueAt="conversation.resolution_deadline_at"
           :actualAt="conversation.resolved_at"
-          :key="conversation.uuid"
+          :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
         />
       </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -68,12 +68,8 @@
         <SlaBadge
           v-if="conversation.next_response_deadline_at"
           :dueAt="conversation.next_response_deadline_at"
-          :actualAt="
-            ['met'].includes(conversation.next_response_sla_event_status)
-              ? conversation.last_reply_at
-              : null
-          "
-          :key="conversation.uuid"
+          :actualAt="conversation.next_response_met_at"
+          :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
         />
       </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />