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

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>