fix: make sure sla badges re-render on timestamp changes, use a composite :key

This commit is contained in:
Abhinav Raut
2025-05-24 23:00:49 +05:30
parent 4c766d8ccb
commit 8654a04dcf
2 changed files with 42 additions and 38 deletions
@@ -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>
@@ -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" />