You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
6.2 KiB
159 lines
6.2 KiB
<template>
|
|
<csc-page :title="$t('pages.conversations.title')">
|
|
<q-infinite-scroll :handler="loadMore" :offset=1 ref="infinite">
|
|
<q-card v-for="(conversation, index) in conversations"
|
|
:key="conversation.caller"
|
|
class="conversation-card">
|
|
<csc-collapsible :icon="getCollapsibleIcons(conversation)"
|
|
:label="getCollapsibleLabel(conversation)"
|
|
:sublabel="conversation.start_time | readableDate">
|
|
<div v-if="isCall(conversation.type) || isVoicemail(conversation.type)">
|
|
<ul>
|
|
<li><strong>
|
|
{{ $t('pages.conversations.card.date') }}:
|
|
</strong> {{ conversation.start_time }}</li>
|
|
<li>
|
|
<strong>
|
|
{{ $t('pages.conversations.card.duration') }}:
|
|
</strong> {{ conversation.duration }}</li>
|
|
<li v-if="isVoicemail(conversation.type)">
|
|
<strong>
|
|
{{ $t('pages.conversations.card.folder') }}:
|
|
</strong> {{ conversation.folder }}</li>
|
|
</ul>
|
|
</div>
|
|
</csc-collapsible>
|
|
<div v-if="!isFax(conversation.type)">
|
|
<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(conversation,
|
|
'audioOnly'), $refs.popover[index].close()">
|
|
{{ $t('pages.conversations.buttons.audioCall') }}
|
|
</q-item>
|
|
<q-item @click="call(conversation,
|
|
'audioVideo'), $refs.popover[index].close()">
|
|
{{ $t('pages.conversations.buttons.videoCall') }}
|
|
</q-item>
|
|
</q-list>
|
|
</q-popover>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</div>
|
|
</q-card>
|
|
<div slot="message" class="row justify-center">
|
|
<q-spinner-dots :size="40"></q-spinner-dots>
|
|
</div>
|
|
</q-infinite-scroll>
|
|
</csc-page>
|
|
</template>
|
|
|
|
<script>
|
|
import CscPage from '../CscPage'
|
|
import CscCollapsible from '../card/CscCollapsible'
|
|
import { QBtn, QCardActions, QCard, QCardSeparator, QInfiniteScroll,
|
|
QPopover, QList, QItem, QSpinnerDots } from 'quasar-framework'
|
|
export default {
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
components: {
|
|
CscPage,
|
|
QBtn,
|
|
QCard,
|
|
QCardActions,
|
|
QCardSeparator,
|
|
CscCollapsible,
|
|
QInfiniteScroll,
|
|
QPopover,
|
|
QList,
|
|
QItem,
|
|
QSpinnerDots
|
|
},
|
|
computed: {
|
|
conversations() {
|
|
return this.$store.state.conversations.conversations;
|
|
}
|
|
},
|
|
methods: {
|
|
call(conversation, localMedia) {
|
|
let number = conversation.direction == 'out' ?
|
|
conversation.callee : conversation.caller;
|
|
this.$store.dispatch('call/start',
|
|
{ number: number, localMedia: localMedia });
|
|
},
|
|
loadMore(index, done) {
|
|
this.$store.dispatch('conversations/loadConversations')
|
|
.then(() => {
|
|
done();
|
|
}).catch((err) => {
|
|
done();
|
|
this.$refs.infinite.stop();
|
|
});
|
|
},
|
|
getCollapsibleIcons(item) {
|
|
let directionIcon = item.direction == 'out' ? 'call_made' :
|
|
'call_received';
|
|
switch (item.type) {
|
|
case 'call':
|
|
return 'phone ' + directionIcon;
|
|
break;
|
|
case 'call forward':
|
|
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(item) {
|
|
let prefix = item.status == 'ok' ?
|
|
this.$t('pages.conversations.labels.successful')
|
|
: this.$t('pages.conversations.labels.unsuccessful');
|
|
let direction = item.direction == 'in' ?
|
|
this.$t('pages.conversations.labels.from') :
|
|
this.$t('pages.conversations.labels.to');
|
|
return `${prefix} ${item.type} ${direction} ${item.caller}`;
|
|
},
|
|
isCall(type) {
|
|
return type == 'call';
|
|
},
|
|
isVoicemail(type) {
|
|
return type == 'voicemail';
|
|
},
|
|
isFax(type) {
|
|
return type == 'fax';
|
|
},
|
|
isXmpp(type) {
|
|
return type == 'xmpp';
|
|
},
|
|
isSms(type) {
|
|
return type == 'sms';
|
|
},
|
|
isCallForward(type) {
|
|
return type == 'call forward';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
@import '~variables'
|
|
.conversation-card
|
|
padding 15px
|
|
.q-btn
|
|
margin-bottom -10px
|
|
.q-infinite-scroll-message
|
|
margin-bottom 50px
|
|
</style>
|