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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 27 deletions

View file

@ -1,10 +1,7 @@
<template>
<div class="status">
<div class="status-view">
<div
:class="`status-badge status-badge__${currentUserAvailabilityStatus}`"
/>
<availability-status-badge :status="currentUserAvailabilityStatus" />
<div class="status-view--title">
{{ availabilityDisplayLabel }}
</div>
@ -28,7 +25,7 @@
:disabled="status.disabled"
@click="changeAvailabilityStatus(status.value)"
>
<span :class="`status-badge status-badge__${status.value}`" />
<availability-status-badge :status="status.value" />
{{ status.label }}
</button>
</woot-dropdown-item>
@ -48,6 +45,7 @@ import { mapGetters } from 'vuex';
import { mixin as clickaway } from 'vue-clickaway';
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge';
const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
@ -55,6 +53,7 @@ export default {
components: {
WootDropdownMenu,
WootDropdownItem,
AvailabilityStatusBadge,
},
mixins: [clickaway],
@ -147,26 +146,6 @@ export default {
}
}
.status-badge {
width: var(--space-one);
height: var(--space-one);
margin-right: var(--space-micro);
display: inline-block;
border-radius: 50%;
&__online {
background: var(--g-400);
}
&__offline {
background: var(--b-600);
}
&__busy {
background: var(--y-700);
}
}
.status-change {
.dropdown-pane {
top: -132px;