KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/javascript/dashboard/components/layout/AvailabilityStatus.vue
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;

29
app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue Normal file
View file

@ -0,0 +1,29 @@
<template>
<div :class="`status-badge status-badge__${status}`" />
</template>
<script>
export default {
props: {
status: { type: String, default: '' },
},
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/variables';
.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);
}
}
</style>

24
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View file

@ -46,6 +46,14 @@
@select="assignAgent"
@remove="removeAgent"
>
<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>
@ -57,11 +65,13 @@
import { mapGetters } from 'vuex';
import MoreActions from './MoreActions';
import Thumbnail from '../Thumbnail';
import AvailabilityStatusBadge from '../conversation/AvailabilityStatusBadge';
export default {
components: {
MoreActions,
Thumbnail,
AvailabilityStatusBadge,
},
props: {
@ -126,7 +136,6 @@ export default {
bus.$emit('newToastMessage', this.$t('CONVERSATION.CHANGE_AGENT'));
});
},
removeAgent() {},
},
};
@ -142,4 +151,17 @@ export default {
.conv-header {
flex: 0 0 var(--space-jumbo);
}
.option__desc {
display: flex;
align-items: center;
}
.option__desc {
&::v-deep .status-badge {
margin-right: var(--space-small);
min-width: 0;
flex-shrink: 0;
}
}
</style>

18
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
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>