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