feat: Add Bulk actions to conversations (#4647)
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
parent
43a0b4c039
commit
79a525aa62
21 changed files with 693 additions and 12 deletions
|
@ -5,11 +5,24 @@
|
|||
active: isActiveChat,
|
||||
'unread-chat': hasUnread,
|
||||
'has-inbox-name': showInboxName,
|
||||
'conversation-selected': selected,
|
||||
}"
|
||||
@mouseenter="onCardHover"
|
||||
@mouseleave="onCardLeave"
|
||||
@click="cardClick(chat)"
|
||||
>
|
||||
<label v-if="hovered || selected" class="checkbox-wrapper">
|
||||
<input
|
||||
:value="selected"
|
||||
:checked="selected"
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
@change="onSelectConversation($event.target.checked)"
|
||||
@click.stop
|
||||
/>
|
||||
</label>
|
||||
<thumbnail
|
||||
v-if="!hideThumbnail"
|
||||
v-if="bulkActionCheck"
|
||||
:src="currentContact.thumbnail"
|
||||
:badge="inboxBadge"
|
||||
class="columns"
|
||||
|
@ -142,8 +155,16 @@ export default {
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hovered: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentChat: 'getSelectedChat',
|
||||
|
@ -152,7 +173,9 @@ export default {
|
|||
currentUser: 'getCurrentUser',
|
||||
accountId: 'getCurrentAccountId',
|
||||
}),
|
||||
|
||||
bulkActionCheck() {
|
||||
return !this.hideThumbnail && !this.hovered && !this.selected;
|
||||
},
|
||||
chatMetadata() {
|
||||
return this.chat.meta || {};
|
||||
},
|
||||
|
@ -260,6 +283,16 @@ export default {
|
|||
}
|
||||
router.push({ path: frontendURL(path) });
|
||||
},
|
||||
onCardHover() {
|
||||
this.hovered = !this.hideThumbnail;
|
||||
},
|
||||
onCardLeave() {
|
||||
this.hovered = false;
|
||||
},
|
||||
onSelectConversation(checked) {
|
||||
const action = checked ? 'select-conversation' : 'de-select-conversation';
|
||||
this.$emit(action, this.chat.id, this.inbox.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -272,6 +305,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.conversation-selected {
|
||||
background: var(--color-background-light);
|
||||
}
|
||||
|
||||
.has-inbox-name {
|
||||
&::v-deep .user-thumbnail-box {
|
||||
margin-top: var(--space-normal);
|
||||
|
@ -320,4 +357,22 @@ export default {
|
|||
margin-top: var(--space-minus-micro);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.checkbox-wrapper {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
margin-top: var(--space-normal);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--w-100);
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin: var(--space-zero);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue