Resurrection of the broken pusher (#25)
This commit is contained in:
parent
3b26b78df0
commit
1313c50df2
5 changed files with 74 additions and 41 deletions
|
@ -56,5 +56,5 @@ window.onload = () => {
|
|||
components: { App },
|
||||
template: '<App/>',
|
||||
}).$mount('#app');
|
||||
window.pusher = vuePusher.init();
|
||||
};
|
||||
window.pusher = vuePusher.init();
|
||||
|
|
|
@ -1,37 +1,52 @@
|
|||
<template>
|
||||
<div class="conversations-sidebar medium-4 columns">
|
||||
|
||||
<!-- <SearchBox></SearchBox> -->
|
||||
|
||||
<div class="chat-list__top">
|
||||
<h1 class="page-title">{{ getInboxName }}</h1>
|
||||
<h1 class="page-title">
|
||||
{{ getInboxName }}
|
||||
</h1>
|
||||
<chat-filter @statusFilterChange="getDataForStatusTab"></chat-filter>
|
||||
</div>
|
||||
|
||||
<chat-type-tabs :items="assigneeTabItems" :activeTabIndex="activeAssigneeTab" @chatTabChange="getDataForTab" class="tab--chat-type"></chat-type-tabs>
|
||||
<chat-type-tabs
|
||||
:items="assigneeTabItems"
|
||||
:active-tab-index="activeAssigneeTab"
|
||||
class="tab--chat-type"
|
||||
@chatTabChange="getDataForTab"
|
||||
></chat-type-tabs>
|
||||
|
||||
<p v-if="!chatListLoading && !getChatsForTab(activeStatusTab).length" class="content-box">
|
||||
<p
|
||||
v-if="!chatListLoading && !getChatsForTab(activeStatusTab).length"
|
||||
class="content-box"
|
||||
>
|
||||
{{ $t('CHAT_LIST.LIST.404') }}
|
||||
</p>
|
||||
|
||||
<div class="text-center" v-if="chatListLoading"><span class="spinner message"></span></div>
|
||||
<div v-if="chatListLoading" class="text-center">
|
||||
<span class="spinner message"></span>
|
||||
</div>
|
||||
|
||||
<transition-group name="conversations-list" tag="div" class="conversations-list">
|
||||
<conversation-card v-for="chat in getChatsForTab(activeStatusTab)" :chat="chat" v-bind:key="chat"/>
|
||||
<transition-group
|
||||
name="conversations-list"
|
||||
tag="div"
|
||||
class="conversations-list"
|
||||
>
|
||||
<conversation-card
|
||||
v-for="chat in getChatsForTab(activeStatusTab)"
|
||||
:key="chat.id"
|
||||
:chat="chat"
|
||||
/>
|
||||
</transition-group>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* global axios */
|
||||
/* eslint-env browser */
|
||||
/* eslint no-console: 0 */
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import Thumbnail from './widgets/Thumbnail';
|
||||
import ChatFilter from './widgets/conversation/ChatFilter';
|
||||
import SearchBox from './widgets/SearchBox';
|
||||
import ChatTypeTabs from './widgets/ChatTypeTabs';
|
||||
import ConversationCard from './widgets/conversation/ConversationCard';
|
||||
import timeMixin from '../mixins/time';
|
||||
|
@ -39,8 +54,8 @@ import conversationMixin from '../mixins/conversations';
|
|||
import wootConstants from '../constants';
|
||||
|
||||
export default {
|
||||
props: ['conversationInbox', 'pageTitle'],
|
||||
mixins: [timeMixin, conversationMixin],
|
||||
props: ['conversationInbox', 'pageTitle'],
|
||||
data: () => ({
|
||||
chats: null,
|
||||
activeStatusTab: 0,
|
||||
|
@ -90,7 +105,9 @@ export default {
|
|||
},
|
||||
getInboxName() {
|
||||
const inboxId = Number(this.activeInbox);
|
||||
const [stateInbox] = this.inboxesList.filter(inbox => inbox.channel_id === inboxId);
|
||||
const [stateInbox] = this.inboxesList.filter(
|
||||
inbox => inbox.channel_id === inboxId
|
||||
);
|
||||
return !stateInbox ? this.pageTitle : stateInbox.label;
|
||||
},
|
||||
getToggleStatus() {
|
||||
|
@ -101,7 +118,6 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
fetchData() {
|
||||
if (this.chatLists.length === 0) {
|
||||
this.$store.dispatch('fetchAllConversations', {
|
||||
|
@ -127,14 +143,17 @@ export default {
|
|||
let copyList = [];
|
||||
if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.MINE) {
|
||||
copyList = this.mineChatsList.slice();
|
||||
} else if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.UNASSIGNED) {
|
||||
} else if (
|
||||
this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.UNASSIGNED
|
||||
) {
|
||||
copyList = this.unAssignedChatsList.slice();
|
||||
} else {
|
||||
copyList = this.allChatList.slice();
|
||||
}
|
||||
const sorted = copyList.sort((a, b) =>
|
||||
this.wootTime(this.lastMessage(a).created_at)
|
||||
.isBefore(this.wootTime(this.lastMessage(b).created_at))
|
||||
this.wootTime(this.lastMessage(a).created_at).isBefore(
|
||||
this.wootTime(this.lastMessage(b).created_at)
|
||||
)
|
||||
);
|
||||
|
||||
return sorted;
|
||||
|
@ -142,8 +161,6 @@ export default {
|
|||
},
|
||||
|
||||
components: {
|
||||
Thumbnail,
|
||||
SearchBox,
|
||||
ChatTypeTabs,
|
||||
ConversationCard,
|
||||
ChatFilter,
|
||||
|
|
|
@ -1,16 +1,26 @@
|
|||
|
||||
<template>
|
||||
<transition-group name="wizard-items" tag="div" class="wizard-box flex-child-shrink" :class="classObject">
|
||||
<div class="item" v-for="item in items" v-bind:key="item" :class="{ active: isActive(item), over: isOver(item) }">
|
||||
<h3>{{item.title}}
|
||||
<span class="completed" v-if="isOver(item)">
|
||||
<transition-group
|
||||
name="wizard-items"
|
||||
tag="div"
|
||||
class="wizard-box flex-child-shrink"
|
||||
:class="classObject"
|
||||
>
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
:class="{ active: isActive(item), over: isOver(item) }"
|
||||
>
|
||||
<h3>
|
||||
{{ item.title }}
|
||||
<span v-if="isOver(item)" class="completed">
|
||||
<i class="ion-checkmark"></i>
|
||||
</span>
|
||||
</h3>
|
||||
<span class="step">
|
||||
{{items.indexOf(item)+1}}
|
||||
{{ items.indexOf(item) + 1 }}
|
||||
</span>
|
||||
<p>{{item.body}}</p>
|
||||
<p>{{ item.body }}</p>
|
||||
</div>
|
||||
</transition-group>
|
||||
</template>
|
||||
|
@ -19,7 +29,12 @@
|
|||
/* eslint no-console: 0 */
|
||||
export default {
|
||||
props: {
|
||||
items: Array,
|
||||
items: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
isFullwidth: Boolean,
|
||||
},
|
||||
|
||||
|
|
|
@ -101,7 +101,7 @@ export default {
|
|||
|
||||
props: {
|
||||
inboxId: {
|
||||
type: String,
|
||||
type: [Number, String],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
|
|
@ -27,7 +27,7 @@ class VuePusher {
|
|||
|
||||
// eslint-disable-next-line
|
||||
bindEvent(channel) {
|
||||
channel.bind('message.created', function messageCreate(data) {
|
||||
channel.bind('message.created', data => {
|
||||
// Play sound if incoming
|
||||
if (!data.message_type) {
|
||||
new Audio(ding).play();
|
||||
|
@ -35,17 +35,18 @@ class VuePusher {
|
|||
this.app.$store.dispatch('addMessage', data);
|
||||
});
|
||||
|
||||
channel.bind('conversation.created', function conversationCreated(data) {
|
||||
channel.bind('conversation.created', data => {
|
||||
this.app.$store.dispatch('addConversation', data);
|
||||
});
|
||||
|
||||
channel.bind('status_change:conversation', function statusChange(data) {
|
||||
channel.bind('status_change:conversation', data => {
|
||||
this.app.$store.dispatch('addConversation', data);
|
||||
});
|
||||
|
||||
channel.bind('assignee.changed', function assigneeChanged(payload) {
|
||||
if (!payload.meta) return;
|
||||
const { assignee } = payload.meta;
|
||||
channel.bind('assignee.changed', payload => {
|
||||
const { meta } = payload;
|
||||
if (!meta) return;
|
||||
const { assignee } = meta;
|
||||
const { id } = payload;
|
||||
if (id) {
|
||||
this.app.$store.dispatch('updateAssignee', {
|
||||
|
|
Loading…
Reference in a new issue