enhancement: Show agent availability status in conversation assignee select list (#2122)

* show agent status on conversation assignation

* add agent status in contact sidebar

* availability status badge component

* review fixes

* review fixes

* chore: Fixes issue with status badge (#2136)

* add empty case in agent list

* Chore: Availability badge shape issue. #2140

Co-authored-by: Nithin David <webofnithin@gmail.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Muhsin Keloth
2021-04-21 12:18:48 +05:30
committed by GitHub
parent 5c843b8a51
commit fdbc32f7c2
4 changed files with 75 additions and 27 deletions

View File

@@ -22,7 +22,17 @@
selected-label=""
:placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
:allow-empty="true"
/>
>
<template slot="option" slot-scope="props">
<div class="option__desc">
<availability-status-badge
:status="props.option.availability_status"
/>
<span class="option__title">{{ props.option.name }}</span>
</div>
</template>
<span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
</multiselect>
</div>
<div class="multiselect-wrap--small">
<label class="multiselect__label">
@@ -39,6 +49,7 @@
:placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
:allow-empty="true"
/>
<span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
</div>
</div>
<div v-if="browser.browser_name" class="conversation--details">
@@ -111,6 +122,8 @@ import ContactDetailsItem from './ContactDetailsItem.vue';
import ContactInfo from './contact/ContactInfo';
import ConversationLabels from './labels/LabelBox.vue';
import ContactCustomAttributes from './ContactCustomAttributes';
import AvailabilityStatusBadge from 'dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue';
import flag from 'country-code-emoji';
export default {
@@ -120,6 +133,7 @@ export default {
ContactDetailsItem,
ContactInfo,
ConversationLabels,
AvailabilityStatusBadge,
},
mixins: [alertMixin],
props: {
@@ -350,4 +364,8 @@ export default {
.multiselect__label {
margin-bottom: var(--space-smaller);
}
.option__desc {
display: flex;
align-items: center;
}
</style>