feat: Allow agents to bulk assign labels to conversations (#4854)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Fayaz Ahmed
GitHub
parent
fdcaed75f6
commit
067c905329
5 changed files with 334 additions and 4 deletions
|
|
@ -95,6 +95,7 @@
|
|||
@select-all-conversations="selectAllConversations"
|
||||
@assign-agent="onAssignAgent"
|
||||
@update-conversations="onUpdateConversations"
|
||||
@assign-labels="onAssignLabels"
|
||||
/>
|
||||
<div ref="activeConversation" class="conversations-list">
|
||||
<conversation-card
|
||||
|
|
@ -598,6 +599,21 @@ export default {
|
|||
this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
|
||||
}
|
||||
},
|
||||
async onAssignLabels(labels) {
|
||||
try {
|
||||
await this.$store.dispatch('bulkActions/process', {
|
||||
type: 'Conversation',
|
||||
ids: this.selectedConversations,
|
||||
labels: {
|
||||
add: labels,
|
||||
},
|
||||
});
|
||||
this.selectedConversations = [];
|
||||
this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
|
||||
} catch (err) {
|
||||
this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
|
||||
}
|
||||
},
|
||||
async onUpdateConversations(status) {
|
||||
try {
|
||||
await this.$store.dispatch('bulkActions/process', {
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@ export default {
|
|||
}
|
||||
|
||||
.container {
|
||||
height: 24rem;
|
||||
max-height: 24rem;
|
||||
overflow-y: auto;
|
||||
.agent__list-container {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -19,11 +19,20 @@
|
|||
</span>
|
||||
</label>
|
||||
<div class="bulk-action__actions flex-between">
|
||||
<woot-button
|
||||
v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
|
||||
size="tiny"
|
||||
variant="smooth"
|
||||
color-scheme="secondary"
|
||||
icon="tag"
|
||||
class="margin-right-smaller"
|
||||
@click="toggleLabelActions"
|
||||
/>
|
||||
<woot-button
|
||||
v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
|
||||
size="tiny"
|
||||
variant="flat"
|
||||
color-scheme="success"
|
||||
variant="smooth"
|
||||
color-scheme="secondary"
|
||||
icon="repeat"
|
||||
class="margin-right-smaller"
|
||||
@click="toggleUpdateActions"
|
||||
|
|
@ -31,12 +40,19 @@
|
|||
<woot-button
|
||||
v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
|
||||
size="tiny"
|
||||
variant="flat"
|
||||
variant="smooth"
|
||||
color-scheme="secondary"
|
||||
icon="person-assign"
|
||||
@click="toggleAgentList"
|
||||
/>
|
||||
</div>
|
||||
<transition name="popover-animation">
|
||||
<label-actions
|
||||
v-if="showLabelActions"
|
||||
@assign="assignLabels"
|
||||
@close="showLabelActions = false"
|
||||
/>
|
||||
</transition>
|
||||
<transition name="popover-animation">
|
||||
<agent-selector
|
||||
v-if="showAgentsList"
|
||||
|
|
@ -68,10 +84,12 @@
|
|||
<script>
|
||||
import AgentSelector from './AgentSelector.vue';
|
||||
import UpdateActions from './UpdateActions.vue';
|
||||
import LabelActions from './LabelActions.vue';
|
||||
export default {
|
||||
components: {
|
||||
AgentSelector,
|
||||
UpdateActions,
|
||||
LabelActions,
|
||||
},
|
||||
props: {
|
||||
conversations: {
|
||||
|
|
@ -103,6 +121,7 @@ export default {
|
|||
return {
|
||||
showAgentsList: false,
|
||||
showUpdateActions: false,
|
||||
showLabelActions: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -115,12 +134,18 @@ export default {
|
|||
updateConversations(status) {
|
||||
this.$emit('update-conversations', status);
|
||||
},
|
||||
assignLabels(labels) {
|
||||
this.$emit('assign-labels', labels);
|
||||
},
|
||||
resolveConversations() {
|
||||
this.$emit('resolve-conversations');
|
||||
},
|
||||
toggleUpdateActions() {
|
||||
this.showUpdateActions = !this.showUpdateActions;
|
||||
},
|
||||
toggleLabelActions() {
|
||||
this.showLabelActions = !this.showLabelActions;
|
||||
},
|
||||
toggleAgentList() {
|
||||
this.showAgentsList = !this.showAgentsList;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<div v-on-clickaway="onClose" class="labels-container">
|
||||
<div class="triangle">
|
||||
<svg height="12" viewBox="0 0 24 12" width="24">
|
||||
<path
|
||||
d="M20 12l-8-8-12 12"
|
||||
fill="var(--white)"
|
||||
fill-rule="evenodd"
|
||||
stroke="var(--s-50)"
|
||||
stroke-width="1px"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header flex-between">
|
||||
<span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
|
||||
<woot-button
|
||||
size="tiny"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
icon="dismiss"
|
||||
@click="onClose"
|
||||
/>
|
||||
</div>
|
||||
<div class="labels-list">
|
||||
<header class="labels-list__header">
|
||||
<div class="label-list-search flex-between">
|
||||
<fluent-icon icon="search" class="search-icon" size="16" />
|
||||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
class="label--search_input"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="labels-list__body">
|
||||
<li
|
||||
v-for="label in filteredLabels"
|
||||
:key="label.id"
|
||||
class="label__list-item"
|
||||
>
|
||||
<label
|
||||
class="item"
|
||||
:class="{ 'label-selected': isLabelSelected(label.title) }"
|
||||
>
|
||||
<input
|
||||
v-model="selectedLabels"
|
||||
type="checkbox"
|
||||
:value="label.title"
|
||||
class="label-checkbox"
|
||||
/>
|
||||
<span class="label-title">{{ label.title }}</span>
|
||||
<span
|
||||
class="label-pill"
|
||||
:style="{ backgroundColor: label.color }"
|
||||
/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<footer class="labels-list__footer">
|
||||
<woot-button
|
||||
size="small"
|
||||
color-scheme="primary"
|
||||
:disabled="!selectedLabels.length"
|
||||
@click="$emit('assign', selectedLabels)"
|
||||
>
|
||||
<span>{{ $t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') }}</span>
|
||||
</woot-button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
mixins: [clickaway],
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
selectedLabels: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ labels: 'labels/getLabels' }),
|
||||
filteredLabels() {
|
||||
return this.labels.filter(label =>
|
||||
label.title.toLowerCase().includes(this.query.toLowerCase())
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isLabelSelected(label) {
|
||||
return this.selectedLabels.includes(label);
|
||||
},
|
||||
assignLabels(key) {
|
||||
this.$emit('update', key);
|
||||
},
|
||||
onClose() {
|
||||
this.$emit('close');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.labels-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 24rem;
|
||||
min-height: auto;
|
||||
|
||||
.labels-list__header {
|
||||
background-color: var(--white);
|
||||
padding: 0 var(--space-one);
|
||||
}
|
||||
|
||||
.labels-list__body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-one) 0;
|
||||
}
|
||||
|
||||
.labels-list__footer {
|
||||
padding: var(--space-small);
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-list-search {
|
||||
background-color: var(--s-50);
|
||||
border-radius: var(--border-radius-medium);
|
||||
border: 1px solid var(--s-100);
|
||||
padding: 0 var(--space-one);
|
||||
|
||||
.search-icon {
|
||||
color: var(--s-400);
|
||||
}
|
||||
|
||||
.label--search_input {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
font-size: var(--font-size-mini);
|
||||
height: unset;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.labels-container {
|
||||
background-color: var(--white);
|
||||
border-radius: var(--border-radius-large);
|
||||
border: 1px solid var(--s-50);
|
||||
box-shadow: var(--shadow-dropdown-pane);
|
||||
max-width: 24rem;
|
||||
min-width: 24rem;
|
||||
position: absolute;
|
||||
right: 4.5rem;
|
||||
top: var(--space-larger);
|
||||
transform-origin: top right;
|
||||
width: auto;
|
||||
z-index: var(--z-index-twenty);
|
||||
|
||||
.header {
|
||||
padding: var(--space-one);
|
||||
|
||||
span {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-height: 24rem;
|
||||
overflow-y: auto;
|
||||
|
||||
.label__list-container {
|
||||
height: 100%;
|
||||
}
|
||||
.label-list-search {
|
||||
padding: 0 var(--space-one);
|
||||
border: 1px solid var(--s-100);
|
||||
border-radius: var(--border-radius-medium);
|
||||
background-color: var(--s-50);
|
||||
.search-icon {
|
||||
color: var(--s-400);
|
||||
}
|
||||
|
||||
.label--search_input {
|
||||
border: 0;
|
||||
font-size: var(--font-size-mini);
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.triangle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
text-align: left;
|
||||
top: calc(var(--space-slab) * -1);
|
||||
z-index: var(--z-index-one);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.labels-placeholder {
|
||||
padding: var(--space-small);
|
||||
}
|
||||
|
||||
.label__list-item {
|
||||
margin: var(--space-smaller) 0;
|
||||
padding: 0 var(--space-one);
|
||||
|
||||
.item {
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius-medium);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: var(--space-smaller) var(--space-one);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--s-50);
|
||||
}
|
||||
|
||||
&.label-selected {
|
||||
background-color: var(--s-50);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.label-checkbox {
|
||||
margin: 0 var(--space-one) 0 0;
|
||||
}
|
||||
|
||||
.label-title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.label-pill {
|
||||
background-color: var(--s-50);
|
||||
border-radius: var(--border-radius-medium);
|
||||
height: var(--space-slab);
|
||||
width: var(--space-slab);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background-color: var(--white);
|
||||
padding: 0 var(--space-one);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-index-twenty);
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
background-color: var(--white);
|
||||
bottom: 0;
|
||||
padding: var(--space-small);
|
||||
position: sticky;
|
||||
z-index: var(--z-index-twenty);
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue