mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-25 23:45:08 +00:00
b474929f5e
# Replace the deprecated `eventBus` with mitt.js ## Description Since eventBus and it's respective methods are deprecated and removed from all future releases of vue, this was blocking us from migrating. This PR replaces eventBus with [mitt](https://github.com/developit/mitt). I have created a wrapper mitt.js to simulate the same old event names so it's backwards compatible, without making a lot of changes. Fixes # (issue) ## Type of change Please delete options that are not relevant. - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality not to work as expected) - [ ] This change requires a documentation update ## How Has This Been Tested? 1. Made sure all the places we're listening to bus events are working as expected. 2. Respective specsf or the events from mitt. ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules
101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<template>
|
|
<div class="flex actions--container relative items-center gap-2">
|
|
<woot-button
|
|
v-if="!currentChat.muted"
|
|
v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
|
|
variant="clear"
|
|
color-scheme="secondary"
|
|
icon="speaker-mute"
|
|
@click="mute"
|
|
/>
|
|
<woot-button
|
|
v-else
|
|
v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
|
|
variant="clear"
|
|
color-scheme="secondary"
|
|
icon="speaker-1"
|
|
@click="unmute"
|
|
/>
|
|
<woot-button
|
|
v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
|
|
variant="clear"
|
|
color-scheme="secondary"
|
|
icon="share"
|
|
@click="toggleEmailActionsModal"
|
|
/>
|
|
<resolve-action
|
|
:conversation-id="currentChat.id"
|
|
:status="currentChat.status"
|
|
/>
|
|
<email-transcript-modal
|
|
v-if="showEmailActionsModal"
|
|
:show="showEmailActionsModal"
|
|
:current-chat="currentChat"
|
|
@cancel="toggleEmailActionsModal"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import alertMixin from 'shared/mixins/alertMixin';
|
|
import EmailTranscriptModal from './EmailTranscriptModal.vue';
|
|
import ResolveAction from '../../buttons/ResolveAction.vue';
|
|
import {
|
|
CMD_MUTE_CONVERSATION,
|
|
CMD_SEND_TRANSCRIPT,
|
|
CMD_UNMUTE_CONVERSATION,
|
|
} from '../../../routes/dashboard/commands/commandBarBusEvents';
|
|
|
|
export default {
|
|
components: {
|
|
EmailTranscriptModal,
|
|
ResolveAction,
|
|
},
|
|
mixins: [alertMixin],
|
|
data() {
|
|
return {
|
|
showEmailActionsModal: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({ currentChat: 'getSelectedChat' }),
|
|
},
|
|
mounted() {
|
|
this.$emitter.on(CMD_MUTE_CONVERSATION, this.mute);
|
|
this.$emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
|
|
this.$emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
|
|
},
|
|
destroyed() {
|
|
this.$emitter.off(CMD_MUTE_CONVERSATION, this.mute);
|
|
this.$emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
|
|
this.$emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
|
|
},
|
|
methods: {
|
|
mute() {
|
|
this.$store.dispatch('muteConversation', this.currentChat.id);
|
|
this.showAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
|
|
},
|
|
unmute() {
|
|
this.$store.dispatch('unmuteConversation', this.currentChat.id);
|
|
this.showAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
|
|
},
|
|
toggleEmailActionsModal() {
|
|
this.showEmailActionsModal = !this.showEmailActionsModal;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.more--button {
|
|
@apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
|
|
}
|
|
|
|
.dropdown-pane {
|
|
@apply -right-2 top-12;
|
|
}
|
|
|
|
.icon {
|
|
@apply mr-1 rtl:mr-0 rtl:ml-1 min-w-[1rem];
|
|
}
|
|
</style>
|