paulmataruso/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2025-11-02 13:03:35 +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)
})
})
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">
<SlaBadge
v-if="conversation.first_response_due_at"
:dueAt="conversation.first_response_due_at"
:actualAt="conversation.first_reply_at"
:label="'FRD'"
:showSLAMet="false"
:showExtra="false"
/>
<SlaBadge
v-if="conversation.resolution_due_at"
:dueAt="conversation.resolution_due_at"
:actualAt="conversation.resolved_at"
:label="'RD'"
:showSLAMet="false"
:showExtra="false"
/>
</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">
<p class="font-medium">First reply at</p>
<SlaBadge
v-if="conversation.first_response_due_at"
:dueAt="conversation.first_response_due_at"
:actualAt="conversation.first_reply_at"
:key="conversation.uuid"
/>
</div>
<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 justify-start items-center space-x-2">
<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>
<Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
<div v-else>

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

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