paulmataruso/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2025-11-11 01:15:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: sla badge not visible in conversation info sidebar.

Browse Source
This commit is contained in:
Abhinav Raut
2025-02-28 21:32:08 +05:30
parent da5dfdbcde
commit 461ae3cf22
4 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/composables/useSla.js
View File

@@ -18,5 +18,5 @@ export function useSla (dueAt, actualAt) {
clearInterval(intervalId) clearInterval(intervalId)
}) })
}) })
return { sla, updateSla } return sla
} }

6
frontend/src/features/conversation/list/ConversationListItem.vue
View File

@@ -57,16 +57,18 @@
<div class="flex items-center mt-2 space-x-2"> <div class="flex items-center mt-2 space-x-2">
<SlaBadge <SlaBadge
v-if="conversation.first_response_due_at"
:dueAt="conversation.first_response_due_at" :dueAt="conversation.first_response_due_at"
:actualAt="conversation.first_reply_at" :actualAt="conversation.first_reply_at"
:label="'FRD'" :label="'FRD'"
:showSLAMet="false" :showExtra="false"
/> />
<SlaBadge <SlaBadge
v-if="conversation.resolution_due_at"
:dueAt="conversation.resolution_due_at" :dueAt="conversation.resolution_due_at"
:actualAt="conversation.resolved_at" :actualAt="conversation.resolved_at"
:label="'RD'" :label="'RD'"
:showSLAMet="false" :showExtra="false"
/> />
</div> </div>
</div> </div>

9
frontend/src/features/conversation/sidebar/ConversationInfo.vue
View File

@@ -27,8 +27,10 @@
<div class="flex justify-start items-center space-x-2"> <div class="flex justify-start items-center space-x-2">
<p class="font-medium">First reply at</p> <p class="font-medium">First reply at</p>
<SlaBadge <SlaBadge
v-if="conversation.first_response_due_at"
:dueAt="conversation.first_response_due_at" :dueAt="conversation.first_response_due_at"
:actualAt="conversation.first_reply_at" :actualAt="conversation.first_reply_at"
:key="conversation.uuid"
/> />
</div> </div>
<Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" /> <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -43,7 +45,12 @@
<div class="flex flex-col gap-1 mb-5"> <div class="flex flex-col gap-1 mb-5">
<div class="flex justify-start items-center space-x-2"> <div class="flex justify-start items-center space-x-2">
<p class="font-medium">Resolved at</p> <p class="font-medium">Resolved at</p>
<SlaBadge :dueAt="conversation.resolution_due_at" :actualAt="conversation.resolved_at" /> <SlaBadge
v-if="conversation.resolution_due_at"
:dueAt="conversation.resolution_due_at"
:actualAt="conversation.resolved_at"
:key="conversation.uuid"
/>
</div> </div>
<Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" /> <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
<div v-else> <div v-else>

61
frontend/src/features/sla/SlaBadge.vue
View File

@@ -1,32 +1,33 @@
<template> <template>
<div v-if="dueAt" class="flex justify-start items-center space-x-2"> <div v-if="dueAt" class="flex justify-start items-center space-x-2">
<TransitionGroup name="fade"> <!-- Overdue-->
<!-- Overdue--> <span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge box sla-overdue">
<span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge box sla-overdue"> <AlertCircle size="12" class="text-red-800" />
<AlertCircle size="10" class="text-red-800" /> <span class="sla-text text-red-800"
<span class="text-xs text-red-800">{{ label }} Overdue</span> >{{ label }} Overdue
<span v-if="showExtra">by {{ sla.value }}</span>
</span> </span>
</span>
<!-- SLA Hit --> <!-- SLA Hit -->
<span <span
v-else-if="sla?.status === 'hit' && showSLAMet" v-else-if="sla?.status === 'hit' && showExtra"
key="sla-hit" key="sla-hit"
class="sla-badge box sla-hit" class="sla-badge box sla-hit"
> >
<CheckCircle size="10" /> <CheckCircle size="12" />
<span class="sla-text">{{ label }} SLA met</span> <span class="sla-text">{{ label }} SLA met</span>
</span> </span>
<!-- Remaining --> <!-- Remaining -->
<span <span
v-else-if="sla?.status === 'remaining'" v-else-if="sla?.status === 'remaining'"
key="remaining" key="remaining"
class="sla-badge box sla-remaining" class="sla-badge box sla-remaining"
> >
<Clock size="10" /> <Clock size="12" />
<span class="sla-text">{{ label }} {{ sla.value }}</span> <span class="sla-text">{{ label }} {{ sla.value }}</span>
</span> </span>
</TransitionGroup>
</div> </div>
</template> </template>
@@ -38,12 +39,16 @@ const props = defineProps({
dueAt: String, dueAt: String,
actualAt: String, actualAt: String,
label: String, label: String,
showSLAMet: { showExtra: {
type: Boolean, type: Boolean,
default: true default: true
} }
}) })
const { sla } = useSla(ref(props.dueAt), ref(props.actualAt))
let sla = null
if (props.dueAt) {
sla = useSla(ref(props.dueAt), ref(props.actualAt))
}
</script> </script>
<style scoped> <style scoped>
@@ -62,4 +67,8 @@ const { sla } = useSla(ref(props.dueAt), ref(props.actualAt))
.sla-remaining { .sla-remaining {
@apply bg-yellow-100 text-yellow-800; @apply bg-yellow-100 text-yellow-800;
} }
.sla-text {
@apply text-[0.65rem];
}
</style> </style>