mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 19:17:48 +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
89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
|
<transition name="network-notification-fade" tag="div">
|
|
<div v-show="showNotification" class="fixed top-4 left-2 z-50 group">
|
|
<div
|
|
class="flex items-center justify-between py-1 px-2 w-full rounded-lg shadow-lg bg-yellow-200 dark:bg-yellow-700 relative"
|
|
>
|
|
<fluent-icon
|
|
icon="wifi-off"
|
|
class="text-yellow-700/50 dark:text-yellow-50"
|
|
size="18"
|
|
/>
|
|
<span
|
|
class="text-xs tracking-wide font-medium px-2 text-yellow-700/70 dark:text-yellow-50"
|
|
>
|
|
{{ $t('NETWORK.NOTIFICATION.OFFLINE') }}
|
|
</span>
|
|
<woot-button
|
|
:title="$t('NETWORK.BUTTON.REFRESH')"
|
|
variant="clear"
|
|
size="small"
|
|
color-scheme="warning"
|
|
icon="arrow-clockwise"
|
|
class="visible transition-all duration-500 ease-in-out ml-1"
|
|
@click="refreshPage"
|
|
/>
|
|
<woot-button
|
|
variant="clear"
|
|
size="small"
|
|
color-scheme="warning"
|
|
icon="dismiss"
|
|
@click="closeNotification"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
|
import { mapGetters } from 'vuex';
|
|
import { BUS_EVENTS } from 'shared/constants/busEvents';
|
|
|
|
export default {
|
|
mixins: [globalConfigMixin],
|
|
|
|
data() {
|
|
return {
|
|
showNotification: !navigator.onLine,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
|
},
|
|
|
|
mounted() {
|
|
window.addEventListener('offline', this.updateOnlineStatus);
|
|
this.$emitter.on(BUS_EVENTS.WEBSOCKET_DISCONNECT, () => {
|
|
// TODO: Remove this after completing the conversation list refetching
|
|
// TODO: DIRTY FIX : CLEAN UP THIS WITH PROPER FIX, DELAYING THE RECONNECT FOR NOW
|
|
// THE CABLE IS FIRING IS VERY COMMON AND THUS INTERFERING USER EXPERIENCE
|
|
setTimeout(() => {
|
|
this.updateOnlineStatus({ type: 'offline' });
|
|
}, 4000);
|
|
});
|
|
},
|
|
|
|
beforeDestroy() {
|
|
window.removeEventListener('offline', this.updateOnlineStatus);
|
|
},
|
|
|
|
methods: {
|
|
refreshPage() {
|
|
window.location.reload();
|
|
},
|
|
|
|
closeNotification() {
|
|
this.showNotification = false;
|
|
},
|
|
|
|
updateOnlineStatus(event) {
|
|
if (event.type === 'offline') {
|
|
this.showNotification = true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|