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

feat: Add snooze, reopen option to bulk actions (#4831)

Browse Source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Fayaz Ahmed
2022-06-13 12:14:27 +05:30
committed by GitHub
parent aa903a5da9
commit 2198930185
9 changed files with 331 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/dashboard/assets/scss/_utility-helpers.scss
View File

@@ -60,3 +60,9 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.flex-between {
align-items: center;
display: flex;
justify-content: space-between;
}

60
app/javascript/dashboard/components/ChatList.vue
View File

@@ -84,7 +84,18 @@
<p v-if="!chatListLoading && !conversationList.length" class="content-box">
{{ $t('CHAT_LIST.LIST.404') }}
</p>
<conversation-bulk-actions
v-if="selectedConversations.length"
:conversations="selectedConversations"
:all-conversations-selected="allConversationsSelected"
:selected-inboxes="uniqueInboxes"
:show-open-action="allSelectedConversationsStatus('open')"
:show-resolved-action="allSelectedConversationsStatus('resolved')"
:show-snoozed-action="allSelectedConversationsStatus('snoozed')"
@select-all-conversations="selectAllConversations"
@assign-agent="onAssignAgent"
@update-conversations="onUpdateConversations"
/>
<div ref="activeConversation" class="conversations-list">
<conversation-card
v-for="chat in conversationList"
@@ -114,11 +125,7 @@
</woot-button>
<p
v-if="
conversationList.length &&
hasCurrentPageEndReached &&
!chatListLoading
"
v-if="showEndOfListMessage"
class="text-center text-muted end-of-list-text"
>
{{ $t('CHAT_LIST.EOF') }}
@@ -136,16 +143,6 @@
@applyFilter="onApplyFilter"
/>
</woot-modal>
<conversation-bulk-actions
v-if="selectedConversations.length"
:conversations="selectedConversations"
:all-conversations-selected="allConversationsSelected"
:selected-inboxes="uniqueInboxes"
@select-all-conversations="selectAllConversations"
@assign-agent="onAssignAgent"
@resolve-conversations="onResolveConversations"
/>
</div>
</template>
@@ -164,7 +161,7 @@ import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
import filterQueryGenerator from '../helper/filterQueryGenerator.js';
import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Actions.vue';
import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
import alertMixin from 'shared/mixins/alertMixin';
import {
@@ -252,6 +249,13 @@ export default {
}
return {};
},
showEndOfListMessage() {
return (
this.conversationList.length &&
this.hasCurrentPageEndReached &&
!this.chatListLoading
);
},
assigneeTabItems() {
const ASSIGNEE_TYPE_TAB_KEYS = {
me: 'mineCount',
@@ -363,8 +367,10 @@ export default {
},
allConversationsSelected() {
return (
JSON.stringify(this.selectedConversations) ===
JSON.stringify(this.conversationList.map(item => item.id))
this.conversationList.length === this.selectedConversations.length &&
this.conversationList.every(el =>
this.selectedConversations.includes(el.id)
)
);
},
uniqueInboxes() {
@@ -592,21 +598,27 @@ export default {
this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
}
},
async onResolveConversations() {
async onUpdateConversations(status) {
try {
await this.$store.dispatch('bulkActions/process', {
type: 'Conversation',
ids: this.selectedConversations,
fields: {
status: 'resolved',
status,
},
});
this.selectedConversations = [];
this.showAlert(this.$t('BULK_ACTION.RESOLVE_SUCCESFUL'));
} catch (error) {
this.showAlert(this.$t('BULK_ACTION.RESOLVE_FAILED'));
this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
} catch (err) {
this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
}
},
allSelectedConversationsStatus(status) {
if (!this.selectedConversations.length) return false;
return this.selectedConversations.every(item => {
return this.$store.getters.getConversationById(item).status === status;
});
},
},
};
</script>

3
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View File

@@ -11,14 +11,13 @@
@mouseleave="onCardLeave"
@click="cardClick(chat)"
>
<label v-if="hovered || selected" class="checkbox-wrapper">
<label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
<input
:value="selected"
:checked="selected"
class="checkbox"
type="checkbox"
@change="onSelectConversation($event.target.checked)"
@click.stop
/>
</label>
<thumbnail

47
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
View File

@@ -1,5 +1,16 @@
<template>
<div class="bulk-action__agents">
<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.AGENT_SELECT_LABEL') }}</span>
<woot-button
@@ -148,30 +159,30 @@ export default {
</script>
<style scoped lang="scss">
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.bulk-action__agents {
position: absolute;
bottom: 40px;
right: var(--space-small);
width: 100%;
box-shadow: var(--shadow-dropdown-pane);
background-color: var(--white);
border-radius: var(--border-radius-large);
border: 1px solid var(--s-50);
background-color: var(--white);
width: 75%;
box-shadow: var(--shadow-dropdown-pane);
max-width: 75%;
position: absolute;
right: var(--space-small);
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-default);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
}
}
.container {
height: 240px;
height: 24rem;
overflow-y: auto;
.agent__list-container {
height: 100%;
@@ -194,6 +205,14 @@ export default {
}
}
}
.triangle {
display: block;
z-index: var(--z-index-one);
position: absolute;
top: calc(var(--space-slab) * -1);
right: var(--space-micro);
text-align: left;
}
}
ul {
margin: 0;

85
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Actions.vue → app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
View File

@@ -7,6 +7,7 @@
type="checkbox"
class="checkbox"
:checked="allConversationsSelected"
:indeterminate.prop="!allConversationsSelected"
@change="selectAll($event)"
/>
<span>
@@ -19,13 +20,13 @@
</label>
<div class="bulk-action__actions flex-between">
<woot-button
v-tooltip="$t('BULK_ACTION.RESOLVE_TOOLTIP')"
v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
size="tiny"
variant="flat"
color-scheme="success"
icon="checkmark"
icon="repeat"
class="margin-right-smaller"
@click="resolveConversations"
@click="toggleUpdateActions"
/>
<woot-button
v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
@@ -33,10 +34,10 @@
variant="flat"
color-scheme="secondary"
icon="person-assign"
@click="showAgentsList = true"
@click="toggleAgentList"
/>
</div>
<transition name="menu-slide">
<transition name="popover-animation">
<agent-selector
v-if="showAgentsList"
:selected-inboxes="selectedInboxes"
@@ -45,6 +46,18 @@
@close="showAgentsList = false"
/>
</transition>
<transition name="popover-animation">
<update-actions
v-if="showUpdateActions"
:selected-inboxes="selectedInboxes"
:conversation-count="conversations.length"
:show-resolve="!showResolvedAction"
:show-reopen="!showOpenAction"
:show-snooze="!showSnoozedAction"
@update="updateConversations"
@close="showUpdateActions = false"
/>
</transition>
</div>
<div v-if="allConversationsSelected" class="bulk-action__alert">
{{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
@@ -54,9 +67,11 @@
<script>
import AgentSelector from './AgentSelector.vue';
import UpdateActions from './UpdateActions.vue';
export default {
components: {
AgentSelector,
UpdateActions,
},
props: {
conversations: {
@@ -71,15 +86,25 @@ export default {
type: Array,
default: () => [],
},
showOpenAction: {
type: Boolean,
default: false,
},
showResolvedAction: {
type: Boolean,
default: false,
},
showSnoozedAction: {
type: Boolean,
default: false,
},
},
data() {
return {
showAgentsList: false,
showUpdateActions: false,
};
},
mounted() {
this.$refs.selectAllCheck.indeterminate = true;
},
methods: {
selectAll(e) {
this.$emit('select-all-conversations', e.target.checked);
@@ -87,24 +112,25 @@ export default {
submit(agent) {
this.$emit('assign-agent', agent);
},
updateConversations(status) {
this.$emit('update-conversations', status);
},
resolveConversations() {
this.$emit('resolve-conversations');
},
toggleUpdateActions() {
this.showUpdateActions = !this.showUpdateActions;
},
toggleAgentList() {
this.showAgentsList = !this.showAgentsList;
},
},
};
</script>
<style scoped lang="scss">
.flex-between {
align-items: center;
display: flex;
justify-content: space-between;
}
.bulk-action__container {
background-color: var(--s-50);
border-top: 1px solid var(--s-100);
box-shadow: var(--shadow-bulk-action-container);
border-bottom: 1px solid var(--s-100);
padding: var(--space-normal) var(--space-one);
position: relative;
}
@@ -132,4 +158,29 @@ export default {
margin-top: var(--space-small);
padding: var(--space-half) var(--space-one);
}
.popover-animation-enter-active,
.popover-animation-leave-active {
transition: transform ease-out 0.1s;
}
.popover-animation-enter {
opacity: 0;
transform: scale(0.95);
}
.popover-animation-enter-to {
opacity: 1;
transform: scale(1);
}
.popover-animation-leave {
opacity: 1;
transform: scale(1);
}
.popover-animation-leave-to {
opacity: 0;
transform: scale(0.95);
}
</style>

166
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div v-on-clickaway="onClose" class="actions-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.UPDATE.CHANGE_STATUS') }}</span>
<woot-button
size="tiny"
variant="clear"
color-scheme="secondary"
icon="dismiss"
@click="onClose"
/>
</div>
<div class="container">
<woot-dropdown-menu>
<template v-for="action in actions">
<woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
<woot-button
variant="clear"
color-scheme="secondary"
size="small"
:icon="action.icon"
@click="updateConversations(action.key)"
>
{{ actionLabel(action.key) }}
</woot-button>
</woot-dropdown-item>
</template>
</woot-dropdown-menu>
</div>
</div>
</template>
<script>
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';
export default {
components: {
WootDropdownItem,
WootDropdownMenu,
},
mixins: [clickaway],
props: {
selectedInboxes: {
type: Array,
default: () => [],
},
conversationCount: {
type: Number,
default: 0,
},
showResolve: {
type: Boolean,
default: true,
},
showReopen: {
type: Boolean,
default: true,
},
showSnooze: {
type: Boolean,
default: true,
},
},
data() {
return {
query: '',
selectedAction: null,
actions: [
{
icon: 'checkmark',
key: 'resolved',
},
{
icon: 'arrow-redo',
key: 'open',
},
{
icon: 'send-clock',
key: 'snoozed',
},
],
};
},
methods: {
updateConversations(key) {
this.$emit('update', key);
},
goBack() {
this.selectedAgent = null;
},
onClose() {
this.$emit('close');
},
showAction(key) {
const actionsMap = {
resolved: this.showResolve,
open: this.showReopen,
snoozed: this.showSnooze,
};
return actionsMap[key] || false;
},
actionLabel(key) {
const labelsMap = {
resolved: this.$t('CONVERSATION.HEADER.RESOLVE_ACTION'),
open: this.$t('CONVERSATION.HEADER.REOPEN_ACTION'),
snoozed: this.$t('BULK_ACTION.UPDATE.SNOOZE_UNTIL_NEXT_REPLY'),
};
return labelsMap[key] || '';
},
},
};
</script>
<style scoped lang="scss">
.actions-container {
background-color: var(--white);
border-radius: var(--border-radius-large);
border: 1px solid var(--s-50);
box-shadow: var(--shadow-dropdown-pane);
position: absolute;
right: var(--space-small);
top: 48px;
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 {
padding: var(--space-one);
padding-top: var(--space-zero);
}
.triangle {
display: block;
position: absolute;
right: 2.8rem;
text-align: left;
top: calc(var(--space-slab) * -1);
z-index: var(--z-index-one);
}
}
ul {
margin: 0;
list-style: none;
}
</style>

33
app/javascript/dashboard/i18n/locale/en/bulkActions.json
View File

@@ -1,17 +1,22 @@
{
"BULK_ACTION": {
"CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
"AGENT_SELECT_LABEL": "Select Agent",
"ASSIGN_CONFIRMATION_LABEL": "Are you sure you want to assign %{conversationCount} %{conversationLabel} to",
"GO_BACK_LABEL": "Go back",
"ASSIGN_LABEL": "Assign",
"ASSIGN_AGENT_TOOLTIP": "Assign Agent",
"RESOLVE_TOOLTIP": "Resolve",
"ASSIGN_SUCCESFUL": "Conversations assigned successfully",
"ASSIGN_FAILED": "Failed to assign conversations, please try again",
"RESOLVE_SUCCESFUL": "Conversations resolved successfully",
"RESOLVE_FAILED": "Failed to resolve conversations, please try again",
"ALL_CONVERSATIONS_SELECTED_ALERT": "Conversations visible on this page are only selected.",
"AGENT_LIST_LOADING": "Loading Agents"
"BULK_ACTION": {
"CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
"AGENT_SELECT_LABEL": "Select Agent",
"ASSIGN_CONFIRMATION_LABEL": "Are you sure you want to assign %{conversationCount} %{conversationLabel} to",
"GO_BACK_LABEL": "Go back",
"ASSIGN_LABEL": "Assign",
"ASSIGN_AGENT_TOOLTIP": "Assign Agent",
"ASSIGN_SUCCESFUL": "Conversations assigned successfully",
"ASSIGN_FAILED": "Failed to assign conversations, please try again",
"RESOLVE_SUCCESFUL": "Conversations resolved successfully",
"RESOLVE_FAILED": "Failed to resolve conversations, please try again",
"ALL_CONVERSATIONS_SELECTED_ALERT": "Conversations visible on this page are only selected.",
"AGENT_LIST_LOADING": "Loading Agents",
"UPDATE": {
"CHANGE_STATUS": "Change status",
"SNOOZE_UNTIL_NEXT_REPLY": "Snooze until next reply",
"UPDATE_SUCCESFUL": "Conversation status updated successfully.",
"UPDATE_FAILED": "Failed to update conversations, please try again"
}
}
}