mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-15 10:35:09 +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
50 lines
1022 B
Vue
50 lines
1022 B
Vue
<template>
|
|
<div v-if="showBannerMessage" :class="`banner ${bannerType}`">
|
|
<span>
|
|
{{ bannerMessage }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { BUS_EVENTS } from 'shared/constants/busEvents';
|
|
import { emitter } from 'shared/helpers/mitt';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
showBannerMessage: false,
|
|
bannerMessage: '',
|
|
bannerType: 'error',
|
|
};
|
|
},
|
|
mounted() {
|
|
emitter.on(BUS_EVENTS.SHOW_ALERT, ({ message, type = 'error' }) => {
|
|
this.bannerMessage = message;
|
|
this.bannerType = type;
|
|
this.showBannerMessage = true;
|
|
setTimeout(() => {
|
|
this.showBannerMessage = false;
|
|
}, 3000);
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
.banner {
|
|
color: $color-white;
|
|
font-size: $font-size-default;
|
|
font-weight: $font-weight-bold;
|
|
padding: $space-slab;
|
|
text-align: center;
|
|
&.success {
|
|
background: $color-success;
|
|
}
|
|
&.error {
|
|
background: $color-error;
|
|
}
|
|
}
|
|
</style>
|