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
110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
|
<div
|
|
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
|
|
>
|
|
<form class="mx-0 flex flex-wrap" @submit.prevent="addAgents()">
|
|
<div class="w-full">
|
|
<page-header
|
|
:header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
|
|
:header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
|
|
/>
|
|
</div>
|
|
<div class="w-3/5">
|
|
<div class="w-full">
|
|
<label :class="{ error: $v.selectedAgents.$error }">
|
|
{{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
|
|
<multiselect
|
|
v-model="selectedAgents"
|
|
:options="agentList"
|
|
track-by="id"
|
|
label="name"
|
|
:multiple="true"
|
|
:close-on-select="false"
|
|
:clear-on-select="false"
|
|
:hide-selected="true"
|
|
selected-label
|
|
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
|
|
:deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
|
|
:placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
|
|
@select="$v.selectedAgents.$touch"
|
|
/>
|
|
<span v-if="$v.selectedAgents.$error" class="message">
|
|
{{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="w-full">
|
|
<woot-submit-button
|
|
:button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
|
|
:loading="isCreating"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint no-console: 0 */
|
|
import { mapGetters } from 'vuex';
|
|
|
|
import InboxMembersAPI from '../../../../api/inboxMembers';
|
|
import router from '../../../index';
|
|
import PageHeader from '../SettingsSubPageHeader.vue';
|
|
import alertMixin from 'shared/mixins/alertMixin';
|
|
|
|
export default {
|
|
components: {
|
|
PageHeader,
|
|
},
|
|
mixins: [alertMixin],
|
|
|
|
validations: {
|
|
selectedAgents: {
|
|
isEmpty() {
|
|
return !!this.selectedAgents.length;
|
|
},
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
selectedAgents: [],
|
|
isCreating: false,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters({
|
|
agentList: 'agents/getAgents',
|
|
}),
|
|
},
|
|
|
|
mounted() {
|
|
this.$store.dispatch('agents/get');
|
|
},
|
|
|
|
methods: {
|
|
async addAgents() {
|
|
this.isCreating = true;
|
|
const inboxId = this.$route.params.inbox_id;
|
|
const selectedAgents = this.selectedAgents.map(x => x.id);
|
|
|
|
try {
|
|
await InboxMembersAPI.update({ inboxId, agentList: selectedAgents });
|
|
router.replace({
|
|
name: 'settings_inbox_finish',
|
|
params: {
|
|
page: 'new',
|
|
inbox_id: this.$route.params.inbox_id,
|
|
},
|
|
});
|
|
} catch (error) {
|
|
this.showAlert(error.message);
|
|
}
|
|
this.isCreating = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|