What has been done: - TT#27761, Conversations: Create custom modules for conversation items - TT#27763, Conversations: Implement "play voicemail" button with download functionality - TT#27764, Conversations: Implement hashed id based on conversation item type, call_type and id Change-Id: If772b3ed7e7db1dd7b93e48aacf1ce0d93acf5a8changes/06/17406/16
raxelsen
8 years ago
parent
3db9b924d7
commit
54c0aa0f71
@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<q-card class="conversation-card" :id="conversation._id">
|
||||||
|
<csc-collapsible :icon="getCollapsibleIcons()"
|
||||||
|
:label="getCollapsibleLabel()"
|
||||||
|
:sublabel="conversation.start_time | readableDate">
|
||||||
|
<div v-if="isType('call') || isType('voicemail')">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>
|
||||||
|
{{ $t('pages.conversations.card.duration') }}:
|
||||||
|
</strong> {{ conversation.duration }}</li>
|
||||||
|
<li v-if="isType('voicemail')">
|
||||||
|
<strong>
|
||||||
|
{{ $t('pages.conversations.card.folder') }}:
|
||||||
|
</strong> {{ conversation.folder }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</csc-collapsible>
|
||||||
|
<div v-if="!isType('fax')">
|
||||||
|
<q-card-separator />
|
||||||
|
<q-card-actions align="center">
|
||||||
|
<q-btn flat round small color="primary" icon="call">
|
||||||
|
{{ $t('pages.conversations.buttons.call') }}
|
||||||
|
<q-popover ref="popover">
|
||||||
|
<q-list separator link>
|
||||||
|
<q-item @click="call('audioOnly'),
|
||||||
|
$refs.popover.close()">
|
||||||
|
{{ $t('pages.conversations.buttons.audioCall') }}
|
||||||
|
</q-item>
|
||||||
|
<q-item @click="call('audioVideo'),
|
||||||
|
$refs.popover.close()">
|
||||||
|
{{ $t('pages.conversations.buttons.videoCall') }}
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-popover>
|
||||||
|
</q-btn>
|
||||||
|
<div v-if="isType('voicemail')">
|
||||||
|
<q-btn flat round small color="primary" icon="play_arrow"
|
||||||
|
@click="downloadVoiceMail(conversation.id)">
|
||||||
|
{{ $t('pages.conversations.buttons.play') }}
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-card-actions>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue'
|
||||||
|
import crypto from 'crypto-browserify'
|
||||||
|
import CscCollapsible from './card/CscCollapsible'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import { QBtn, QCardActions, QCard, QCardSeparator,
|
||||||
|
QPopover, QItem, QList } from 'quasar-framework'
|
||||||
|
import numberFormat from '../filters/number-format'
|
||||||
|
export default {
|
||||||
|
name: 'csc-conversation',
|
||||||
|
props: [
|
||||||
|
'conversation'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
QBtn,
|
||||||
|
QCard,
|
||||||
|
QCardActions,
|
||||||
|
QCardSeparator,
|
||||||
|
QPopover,
|
||||||
|
QItem,
|
||||||
|
QList,
|
||||||
|
CscCollapsible
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters('conversations', [
|
||||||
|
'getCardId'
|
||||||
|
])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
downloadVoiceMail(id) {
|
||||||
|
this.$store.dispatch('conversations/downloadVoiceMail', id);
|
||||||
|
},
|
||||||
|
call(localMedia) {
|
||||||
|
let conversation = this.conversation;
|
||||||
|
let number = conversation.direction == 'out' ?
|
||||||
|
conversation.callee : conversation.caller;
|
||||||
|
this.$store.dispatch('call/start',
|
||||||
|
{ number: number, localMedia: localMedia });
|
||||||
|
},
|
||||||
|
getCollapsibleIcons() {
|
||||||
|
let conversation = this.conversation;
|
||||||
|
let directionIcon = conversation.direction == 'out' ? 'call_made' :
|
||||||
|
'call_received';
|
||||||
|
switch (conversation.type) {
|
||||||
|
case 'call':
|
||||||
|
return 'phone ' + directionIcon;
|
||||||
|
break;
|
||||||
|
case 'callforward':
|
||||||
|
return 'call_merge ' + directionIcon;
|
||||||
|
break;
|
||||||
|
case 'voicemail':
|
||||||
|
return 'voicemail ' + directionIcon;
|
||||||
|
break;
|
||||||
|
case 'fax':
|
||||||
|
return 'insert_drive_file ' + directionIcon;
|
||||||
|
break; case 'sms':
|
||||||
|
return 'txtsms ' + directionIcon;
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getCollapsibleLabel() {
|
||||||
|
let conversation = this.conversation;
|
||||||
|
let prefix;
|
||||||
|
if (!conversation.status || ['ok', 'SUCCESS'].indexOf(conversation.status) > -1) {
|
||||||
|
prefix = this.$t('pages.conversations.labels.successful');
|
||||||
|
} else {
|
||||||
|
prefix = this.$t('pages.conversations.labels.unsuccessful');
|
||||||
|
}
|
||||||
|
let direction = conversation.direction == 'in' ?
|
||||||
|
this.$t('pages.conversations.labels.from') :
|
||||||
|
this.$t('pages.conversations.labels.to');
|
||||||
|
let number = conversation.caller;
|
||||||
|
if(conversation.direction === 'out') {
|
||||||
|
number = conversation.callee;
|
||||||
|
}
|
||||||
|
return `${prefix} ${conversation.type} ${direction} ${numberFormat(number)}`;
|
||||||
|
},
|
||||||
|
isType(type) {
|
||||||
|
return this.conversation.type == type;
|
||||||
|
},
|
||||||
|
getVoicemailUrl() {
|
||||||
|
return window.location.origin + this.conversation.voicemail;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
@import '~variables'
|
||||||
|
.conversation-card
|
||||||
|
padding 15px
|
||||||
|
.q-btn
|
||||||
|
margin-bottom -10px
|
||||||
|
.voicemail-controls
|
||||||
|
height 46px
|
||||||
|
padding 0 7px
|
||||||
|
.voicemail-outer
|
||||||
|
width 110px
|
||||||
|
height 50px
|
||||||
|
margin-left 10px
|
||||||
|
.voicemail-inner
|
||||||
|
position absolute
|
||||||
|
width 110px
|
||||||
|
</style>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<q-infinite-scroll :handler="loadMore" :offset=1 ref="infinite">
|
||||||
|
<csc-conversation v-for="(conversation, index) in conversations"
|
||||||
|
:conversation="conversation" :key="conversation._id">
|
||||||
|
</csc-conversation>
|
||||||
|
<div slot="message" class="row justify-center">
|
||||||
|
<q-spinner-dots :size="40"></q-spinner-dots>
|
||||||
|
</div>
|
||||||
|
</q-infinite-scroll>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscConversation from './CscConversation'
|
||||||
|
import { QInfiniteScroll, QSpinnerDots } from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-conversations',
|
||||||
|
props: ['conversations'],
|
||||||
|
components: {
|
||||||
|
CscConversation,
|
||||||
|
QInfiniteScroll,
|
||||||
|
QSpinnerDots
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadMore(index, done) {
|
||||||
|
this.$store.dispatch('conversations/loadConversations')
|
||||||
|
.then(() => {
|
||||||
|
done();
|
||||||
|
}).catch((err) => {
|
||||||
|
done();
|
||||||
|
this.$refs.infinite.stop();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue