LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: UI to show the SLA threshold in chat screen (#9146)

Browse Source 
- UI will show the breach in the conversation list.
- UI will show the breach in the conversation header.

Fixes: https://linear.app/chatwoot/issue/CW-3146/update-the-ui-to-show-the-breach-in-the-conversation-list
Fixes: https://linear.app/chatwoot/issue/CW-3144/ui-update-to-show-the-breachgoing-to-breach
This commit is contained in:
Sivin Varghese
2024-04-04 15:46:46 +05:30
committed by GitHub
parent e21d7552d3
commit e49ef773d8
21 changed files with 745 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@@ -1,12 +1,12 @@
<template>
<div
class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
>
<div
class="flex-1 w-full min-w-0 flex flex-col items-center justify-center"
class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
:class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
>
<div class="flex justify-start items-center min-w-0 w-fit max-w-full">
<div class="flex items-center justify-start max-w-full min-w-0 w-fit">
<back-button
v-if="showBackButton"
:back-url="backButtonUrl"
@@ -19,10 +19,10 @@
:status="currentContact.availability_status"
/>
<div
class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-fit overflow-hidden"
class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
>
<div
class="flex items-center flex-row gap-1 m-0 p-0 w-fit max-w-full"
class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
>
<woot-button
variant="link"
@@ -31,7 +31,7 @@
@click.prevent="$emit('contact-panel-toggle')"
>
<span
class="text-base leading-tight font-medium text-slate-900 dark:text-slate-100"
class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
>
{{ currentContact.name }}
</span>
@@ -46,7 +46,7 @@
</div>
<div
class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
>
<inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
<span
@@ -67,9 +67,10 @@
</div>
</div>
<div
class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
:class="{ 'justify-end': isContactPanelOpen }"
>
<SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
<more-actions :conversation-id="currentChat.id" />
</div>
</div>
@@ -85,6 +86,7 @@ import inboxMixin from 'shared/mixins/inboxMixin';
import InboxName from '../InboxName.vue';
import MoreActions from './MoreActions.vue';
import Thumbnail from '../Thumbnail.vue';
import SLACardLabel from './components/SLACardLabel.vue';
import wootConstants from 'dashboard/constants/globals';
import { conversationListPageURL } from 'dashboard/helper/URLHelper';
import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
@@ -95,6 +97,7 @@ export default {
InboxName,
MoreActions,
Thumbnail,
SLACardLabel,
},
mixins: [inboxMixin, agentMixin, eventListenerMixins],
props: {
@@ -173,6 +176,9 @@ export default {
hasMultipleInboxes() {
return this.$store.getters['inboxes/getInboxes'].length > 1;
},
hasSlaPolicyId() {
return this.chat?.sla_policy_id;
},
},
methods: {