Change-Id: I42751d61c608c40b6a8df50980ea2a172dcedb80changes/96/21896/3
Hans-Peter Herzog
7 years ago
parent
60fd754bba
commit
858f8121c7
@ -0,0 +1,160 @@
|
|||||||
|
<template>
|
||||||
|
<q-item
|
||||||
|
class="csc-entity csc-call-item"
|
||||||
|
>
|
||||||
|
<q-item-side
|
||||||
|
:icon="icon"
|
||||||
|
:color="color"
|
||||||
|
/>
|
||||||
|
<q-item-main>
|
||||||
|
<q-item-tile
|
||||||
|
label
|
||||||
|
>
|
||||||
|
<span class="gt-sm csc-entity-title">{{ typeTerm }}</span>
|
||||||
|
<span class="gt-sm csc-entity-title">{{ direction }}</span>
|
||||||
|
<span class="csc-entity-title">{{ number | destinationFormat }}</span>
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
sublabel
|
||||||
|
>{{ call.start_time | smartTime }}
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-main>
|
||||||
|
<q-item-side
|
||||||
|
right
|
||||||
|
class="csc-item-buttons"
|
||||||
|
>
|
||||||
|
<q-item-tile>
|
||||||
|
<q-btn
|
||||||
|
icon="call"
|
||||||
|
color="primary"
|
||||||
|
slot="right"
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-popover ref="callPopover" anchor="bottom right" self="top right">
|
||||||
|
<csc-call-option-list
|
||||||
|
ref="callOptionPopover"
|
||||||
|
@init-call="initCall"
|
||||||
|
/>
|
||||||
|
</q-popover>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-side>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import CscCallOptionList from './CscCallOptionList'
|
||||||
|
import {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QBtn,
|
||||||
|
QPopover,
|
||||||
|
QList,
|
||||||
|
Platform
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-call-item',
|
||||||
|
props: [
|
||||||
|
'call'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QBtn,
|
||||||
|
QPopover,
|
||||||
|
QList,
|
||||||
|
CscCallOptionList
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
number() {
|
||||||
|
if(this.call.direction === 'out') {
|
||||||
|
return this.call.callee;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return this.call.caller;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
numberDialBack() {
|
||||||
|
if (_.isObject(this.call.relatedCall)) {
|
||||||
|
return this.call.relatedCall.caller;
|
||||||
|
}
|
||||||
|
else if(this.call.direction === 'out') {
|
||||||
|
return this.call.callee;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return this.call.caller;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
direction() {
|
||||||
|
if(this.call.direction === 'out') {
|
||||||
|
return 'to';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'from';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
typeTerm() {
|
||||||
|
if(this.call.call_type === 'call') {
|
||||||
|
return 'Call';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'Call forwarded'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon() {
|
||||||
|
if(this.call.call_type === 'cfu' || this.call.call_type === 'cfna' ||
|
||||||
|
this.call.call_type === 'cfb' && this.call.call_type === 'cft') {
|
||||||
|
return 'phone_forwarded';
|
||||||
|
}
|
||||||
|
else if (this.call.call_type === 'call' && this.call.direction === 'in' && this.call.status === 'cancel') {
|
||||||
|
return 'call_missed';
|
||||||
|
}
|
||||||
|
else if (this.call.call_type === 'call' && this.call.direction === 'in') {
|
||||||
|
return 'call_received';
|
||||||
|
}
|
||||||
|
else if (this.call.call_type === 'call' && this.call.direction === 'out') {
|
||||||
|
return 'call_made';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'phone';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color() {
|
||||||
|
if (this.call.call_type === 'call' && (this.call.status === 'cancel' ||
|
||||||
|
this.call.status === 'offline' || this.call.status === 'noanswer')) {
|
||||||
|
return 'negative';
|
||||||
|
}
|
||||||
|
else if (this.call.call_type === 'call' && (this.call.direction === 'in' ||
|
||||||
|
this.call.direction === 'out')) {
|
||||||
|
return 'primary';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'default';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isMobile() {
|
||||||
|
return Platform.is.mobile;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initCall(media) {
|
||||||
|
this.$refs.callPopover.close();
|
||||||
|
this.$emit('init-call', {
|
||||||
|
media: media,
|
||||||
|
number: this.numberDialBack
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<q-list item-separator link class="csc-toolbar-btn-popover">
|
||||||
|
<q-item @click="initCall('audioOnly')">
|
||||||
|
<q-item-side icon="mic" color="primary" />
|
||||||
|
<q-item-main :label="$t('startAudioCall')" />
|
||||||
|
</q-item>
|
||||||
|
<q-item @click="initCall('audioVideo')">
|
||||||
|
<q-item-side icon="videocam" color="primary" />
|
||||||
|
<q-item-main :label="$t('startVideoCall')" />
|
||||||
|
</q-item>
|
||||||
|
<q-item @click="initCall('audioScreen')">
|
||||||
|
<q-item-side icon="computer" color="primary" />
|
||||||
|
<q-item-main :label="$t('startScreenSharing')" />
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscCallOptionList from './CscCallOptionList'
|
||||||
|
import {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QPopover,
|
||||||
|
QList
|
||||||
|
} from 'quasar-framework'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'csc-call-option-list',
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QPopover,
|
||||||
|
QList,
|
||||||
|
CscCallOptionList
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initCall(media) {
|
||||||
|
this.$emit('init-call', media);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
</style>
|
||||||
@ -1,161 +0,0 @@
|
|||||||
<template>
|
|
||||||
<csc-card-collapsible :list-item="conversation" :collapsible="hasCollapsibleData"
|
|
||||||
:firstIcon="getFirstIcon()" :secondIcon="getSecondIcon()"
|
|
||||||
:sublabel="conversation.start_time | readableDate" :id="conversation._id">
|
|
||||||
<span slot="title">
|
|
||||||
{{ getTitle() }}
|
|
||||||
<span v-if="isType('fax')" style="padding-left:12px;">
|
|
||||||
<q-chip pointing="left" color="primary" class="csc-number-chip">
|
|
||||||
<strong>Pages:</strong>
|
|
||||||
{{ conversation.pages }}
|
|
||||||
</q-chip>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<div v-if="isType('call')" slot="main">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>
|
|
||||||
{{ $t('pages.conversations.card.duration') }}:
|
|
||||||
</strong> {{ conversation.duration }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="isType('voicemail')" slot="main">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>
|
|
||||||
{{ $t('pages.conversations.card.duration') }}:
|
|
||||||
</strong> {{ conversation.duration }}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>
|
|
||||||
{{ $t('pages.conversations.card.folder') }}:
|
|
||||||
</strong> {{ conversation.folder }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div v-if="!isType('fax')" slot="footer">
|
|
||||||
<q-card-separator />
|
|
||||||
<csc-voicemail-player id="csc-voicemail-player" v-if="isType('voicemail')" :id="conversation.id" />
|
|
||||||
<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>
|
|
||||||
<q-btn v-if="isType('voicemail')" flat round small color="primary"
|
|
||||||
icon="get_app" @click="downloadVoiceMail(conversation.id)">
|
|
||||||
{{ $t('pages.conversations.buttons.download') }}
|
|
||||||
</q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="isType('fax')" slot="footer">
|
|
||||||
<q-card-separator />
|
|
||||||
<q-card-actions align="center">
|
|
||||||
<q-btn flat round small color="primary"
|
|
||||||
icon="file_download" @click="downloadFax(conversation.id)">
|
|
||||||
{{ $t('pages.conversations.buttons.download') }}
|
|
||||||
</q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</div>
|
|
||||||
</csc-card-collapsible>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CscCardCollapsible from '../../card/CscCardCollapsible'
|
|
||||||
import CscVoicemailPlayer from './CscVoicemailPlayer'
|
|
||||||
import { QBtn, QPopover, QItem, QList, QCardActions,
|
|
||||||
QChip, QCardSeparator } from 'quasar-framework'
|
|
||||||
import numberFormat from '../../../filters/number-format'
|
|
||||||
export default {
|
|
||||||
name: 'csc-conversation',
|
|
||||||
props: [
|
|
||||||
'conversation'
|
|
||||||
],
|
|
||||||
components: {
|
|
||||||
QBtn,
|
|
||||||
QPopover,
|
|
||||||
QItem,
|
|
||||||
QList,
|
|
||||||
QChip,
|
|
||||||
QCardSeparator,
|
|
||||||
QCardActions,
|
|
||||||
CscCardCollapsible,
|
|
||||||
CscVoicemailPlayer
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
hasCollapsibleData() {
|
|
||||||
return (['call', 'voicemail'].indexOf(this.conversation.type) > -1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
downloadVoiceMail(id) {
|
|
||||||
this.$store.dispatch('conversations/downloadVoiceMail', id);
|
|
||||||
},
|
|
||||||
downloadFax(id) {
|
|
||||||
this.$store.dispatch('conversations/downloadFax', 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 });
|
|
||||||
},
|
|
||||||
getFirstIcon() {
|
|
||||||
let conversation = this.conversation;
|
|
||||||
switch (conversation.type) {
|
|
||||||
case 'call':
|
|
||||||
return 'phone';
|
|
||||||
case 'callforward':
|
|
||||||
return 'call_merge';
|
|
||||||
case 'voicemail':
|
|
||||||
return 'voicemail';
|
|
||||||
case 'fax':
|
|
||||||
return 'insert_drive_file';
|
|
||||||
case 'sms':
|
|
||||||
return 'txtsms';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getSecondIcon() {
|
|
||||||
let conversation = this.conversation;
|
|
||||||
return conversation.direction == 'out' ? 'call_made' : 'call_received';
|
|
||||||
},
|
|
||||||
getTitle() {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" rel="stylesheet/stylus">
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<csc-call-item
|
||||||
|
v-if="item.type == 'call'"
|
||||||
|
:call="item"
|
||||||
|
@init-call="initCall"
|
||||||
|
/>
|
||||||
|
<csc-fax-item
|
||||||
|
v-else-if="item.type == 'fax'"
|
||||||
|
:fax="item"
|
||||||
|
@init-call="initCall"
|
||||||
|
@download-fax="downloadFax"
|
||||||
|
/>
|
||||||
|
<csc-voice-mail-item
|
||||||
|
v-else-if="item.type == 'voicemail'"
|
||||||
|
:voice-mail="item"
|
||||||
|
@init-call="initCall"
|
||||||
|
@download-voice-mail="downloadVoiceMail"
|
||||||
|
@play-voice-mail="playVoiceMail"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscCallItem from './CscCallItem'
|
||||||
|
import CscFaxItem from './CscFaxItem'
|
||||||
|
import CscVoiceMailItem from './CscVoiceMailItem'
|
||||||
|
export default {
|
||||||
|
name: 'csc-conversation-item',
|
||||||
|
props: [
|
||||||
|
'item'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
CscCallItem,
|
||||||
|
CscFaxItem,
|
||||||
|
CscVoiceMailItem
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initCall(call) {
|
||||||
|
this.$emit('init-call', call);
|
||||||
|
},
|
||||||
|
downloadFax(fax) {
|
||||||
|
this.$emit('download-fax', fax);
|
||||||
|
},
|
||||||
|
downloadVoiceMail(voiceMail) {
|
||||||
|
this.$emit('download-voice-mail', voiceMail);
|
||||||
|
},
|
||||||
|
playVoiceMail(voiceMail) {
|
||||||
|
this.$emit('play-voice-mail', voiceMail);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
</style>
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<q-infinite-scroll
|
|
||||||
:handler="loadMore"
|
|
||||||
:offset=1
|
|
||||||
ref="infinite"
|
|
||||||
>
|
|
||||||
<csc-conversation
|
|
||||||
v-for="(conversation, index) in conversations"
|
|
||||||
:conversation="conversation"
|
|
||||||
:key="conversation._id"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
slot="message"
|
|
||||||
class="row justify-center"
|
|
||||||
>
|
|
||||||
<q-spinner-dots :size="40" />
|
|
||||||
</div>
|
|
||||||
</q-infinite-scroll>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CscConversation from './CscConversation'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import {
|
|
||||||
QInfiniteScroll,
|
|
||||||
QSpinnerDots
|
|
||||||
} from 'quasar-framework'
|
|
||||||
export default {
|
|
||||||
name: 'csc-conversations',
|
|
||||||
props: ['conversations'],
|
|
||||||
components: {
|
|
||||||
CscConversation,
|
|
||||||
QInfiniteScroll,
|
|
||||||
QSpinnerDots
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('call', [
|
|
||||||
'callState'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
reloadConversations() {
|
|
||||||
this.$store.dispatch('conversations/reloadConversations', 1);
|
|
||||||
this.$refs.infinite.reset();
|
|
||||||
this.$refs.infinite.resume();
|
|
||||||
},
|
|
||||||
loadMore(index, done) {
|
|
||||||
this.$store.dispatch('conversations/loadConversations')
|
|
||||||
.then(() => {
|
|
||||||
done();
|
|
||||||
}).catch(() => {
|
|
||||||
done();
|
|
||||||
this.$refs.infinite.stop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
callState(newState, oldState) {
|
|
||||||
let endedA = newState === 'ended';
|
|
||||||
let endedB = oldState === 'established' && newState === 'input';
|
|
||||||
let endedC = oldState === 'ringing' && newState === 'input';
|
|
||||||
if (endedA || endedB || endedC) {
|
|
||||||
this.reloadConversations();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" rel="stylesheet/stylus">
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<q-item class="csc-entity csc-fax-item">
|
||||||
|
<q-item-side
|
||||||
|
icon="description"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
<q-item-main>
|
||||||
|
<q-item-tile
|
||||||
|
label
|
||||||
|
>
|
||||||
|
<span class="gt-sm csc-entity-title">Fax from </span>
|
||||||
|
<span class="csc-entity-title">{{ fax.caller | numberFormat }}</span>
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
sublabel
|
||||||
|
>{{ fax.start_time | smartTime }}
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
v-if="fax.pages === 0"
|
||||||
|
sublabel
|
||||||
|
>No pages</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
v-else-if="fax.pages === 1"
|
||||||
|
sublabel
|
||||||
|
>{{ fax.pages }} page
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
v-else
|
||||||
|
sublabel
|
||||||
|
>{{ fax.pages }} pages
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-main>
|
||||||
|
<q-item-side
|
||||||
|
right
|
||||||
|
class="csc-item-buttons"
|
||||||
|
>
|
||||||
|
<q-item-tile>
|
||||||
|
<q-btn
|
||||||
|
icon="file_download"
|
||||||
|
color="primary"
|
||||||
|
slot="right"
|
||||||
|
flat
|
||||||
|
@click="downloadFax"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
icon="call"
|
||||||
|
color="primary"
|
||||||
|
slot="right"
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-popover ref="callPopover" anchor="bottom right" self="top right">
|
||||||
|
<csc-call-option-list
|
||||||
|
ref="callOptionPopover"
|
||||||
|
@init-call="initCall"
|
||||||
|
/>
|
||||||
|
</q-popover>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-side>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscCallOptionList from './CscCallOptionList'
|
||||||
|
import {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QPopover,
|
||||||
|
QBtn
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-fax-item',
|
||||||
|
props: [
|
||||||
|
'fax'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QPopover,
|
||||||
|
QBtn,
|
||||||
|
CscCallOptionList
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initCall(media) {
|
||||||
|
this.$refs.callPopover.close();
|
||||||
|
this.$emit('init-call', {
|
||||||
|
media: media,
|
||||||
|
number: this.fax.caller
|
||||||
|
});
|
||||||
|
},
|
||||||
|
downloadFax() {
|
||||||
|
this.$emit('download-fax', this.fax);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<q-item
|
||||||
|
class="csc-entity csc-voice-mail-item"
|
||||||
|
>
|
||||||
|
<q-item-side
|
||||||
|
color="primary"
|
||||||
|
icon="voicemail"
|
||||||
|
/>
|
||||||
|
<q-item-main>
|
||||||
|
<q-item-tile
|
||||||
|
label
|
||||||
|
>
|
||||||
|
<span class="gt-sm csc-entity-title">Voicemail from </span>
|
||||||
|
<span class="csc-entity-title">{{ voiceMail.caller | numberFormat }}</span>
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
sublabel
|
||||||
|
>{{ voiceMail.start_time | smartTime }}
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
sublabel
|
||||||
|
>Duration: {{ voiceMail.duration }} seconds
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile>
|
||||||
|
<csc-voice-mail-player
|
||||||
|
:id="voiceMail.id"
|
||||||
|
class="csc-voice-mail-player"
|
||||||
|
@play-voice-mail="playVoiceMail"
|
||||||
|
/>
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-main>
|
||||||
|
<q-item-side
|
||||||
|
right
|
||||||
|
class="csc-item-buttons"
|
||||||
|
>
|
||||||
|
<q-item-tile>
|
||||||
|
<q-btn
|
||||||
|
icon="file_download"
|
||||||
|
color="primary"
|
||||||
|
slot="right"
|
||||||
|
flat
|
||||||
|
@click="downloadVoiceMail"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
icon="call"
|
||||||
|
color="primary"
|
||||||
|
slot="right"
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-popover ref="callPopover" anchor="bottom right" self="top right">
|
||||||
|
<csc-call-option-list
|
||||||
|
ref="callOptionPopover"
|
||||||
|
@init-call="initCall"
|
||||||
|
/>
|
||||||
|
</q-popover>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-side>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscCallOptionList from './CscCallOptionList'
|
||||||
|
import CscVoiceMailPlayer from './CscVoiceMailPlayer'
|
||||||
|
import {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QPopover,
|
||||||
|
QBtn
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-voice-mail-item',
|
||||||
|
props: [
|
||||||
|
'voiceMail'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QPopover,
|
||||||
|
QBtn,
|
||||||
|
CscVoiceMailPlayer,
|
||||||
|
CscCallOptionList
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initCall(media) {
|
||||||
|
this.$refs.callPopover.close();
|
||||||
|
this.$emit('init-call', {
|
||||||
|
media: media,
|
||||||
|
number: this.voiceMail.callee
|
||||||
|
});
|
||||||
|
},
|
||||||
|
playVoiceMail() {
|
||||||
|
this.$emit('play-voice-mail', this.voiceMail);
|
||||||
|
},
|
||||||
|
downloadVoiceMail() {
|
||||||
|
this.$emit('download-voice-mail', this.voiceMail);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
|
||||||
|
.csc-voice-mail-player
|
||||||
|
padding 0
|
||||||
|
margin-top 16px
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export function addSecond(date) {
|
||||||
|
let newDate = new Date();
|
||||||
|
newDate.setTime(date.getTime() + 1000);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addMinute(date) {
|
||||||
|
let newDate = new Date();
|
||||||
|
newDate.setTime(date.getTime() + 60000);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addHour(date) {
|
||||||
|
let newDate = new Date();
|
||||||
|
newDate.setTime(date.getTime() + 3600000);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addDay(date) {
|
||||||
|
let newDate = new Date();
|
||||||
|
newDate.setTime(date.getTime() + 86400000);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addMonth(date) {
|
||||||
|
let newDate = new Date();
|
||||||
|
newDate.setUTCMonth(date.getUTCMonth() + 1);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addYear(date) {
|
||||||
|
let newDate = new Date();
|
||||||
|
newDate.setUTCFullYear(date.getUTCFullYear() + 1);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isToday(date, $today) {
|
||||||
|
let today = $today || new Date();
|
||||||
|
let todayStart = new Date(today.getTime());
|
||||||
|
let tomorrowStart = new Date(today.getTime() + 86400000);
|
||||||
|
tomorrowStart.setHours(0);
|
||||||
|
tomorrowStart.setMinutes(0);
|
||||||
|
tomorrowStart.setSeconds(0);
|
||||||
|
tomorrowStart.setMilliseconds(0);
|
||||||
|
todayStart.setHours(0);
|
||||||
|
todayStart.setMinutes(0);
|
||||||
|
todayStart.setSeconds(0);
|
||||||
|
todayStart.setMilliseconds(0);
|
||||||
|
return date.getTime() >= todayStart.getTime() &&
|
||||||
|
date.getTime() < tomorrowStart.getTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isYesterday(yesterday, $today) {
|
||||||
|
let today = $today || new Date();
|
||||||
|
let yesterdayStart = new Date(today.getTime() - 86400000);
|
||||||
|
let todayStart = new Date(today.getTime());
|
||||||
|
yesterdayStart.setHours(0);
|
||||||
|
yesterdayStart.setMinutes(0);
|
||||||
|
yesterdayStart.setSeconds(0);
|
||||||
|
yesterdayStart.setMilliseconds(0);
|
||||||
|
todayStart.setHours(0);
|
||||||
|
todayStart.setMinutes(0);
|
||||||
|
todayStart.setSeconds(0);
|
||||||
|
todayStart.setMilliseconds(0);
|
||||||
|
return yesterday.getTime() >= yesterdayStart.getTime() &&
|
||||||
|
yesterday.getTime() < todayStart.getTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isWithinLastWeek(date, $today) {
|
||||||
|
let today = $today || new Date();
|
||||||
|
let weekStart = new Date(today.getTime() - 86400000 * 6);
|
||||||
|
let todayStart = new Date(today.getTime());
|
||||||
|
weekStart.setHours(0);
|
||||||
|
weekStart.setMinutes(0);
|
||||||
|
weekStart.setSeconds(0);
|
||||||
|
weekStart.setMilliseconds(0);
|
||||||
|
todayStart.setHours(0);
|
||||||
|
todayStart.setMinutes(0);
|
||||||
|
todayStart.setSeconds(0);
|
||||||
|
todayStart.setMilliseconds(0);
|
||||||
|
return date.getTime() >= weekStart.getTime() &&
|
||||||
|
date.getTime() < todayStart.getTime();
|
||||||
|
}
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import { assert } from 'chai';
|
||||||
|
import { isYesterday, isToday, isWithinLastWeek } from '../../src/helpers/date-helper'
|
||||||
|
|
||||||
|
describe('Date helper', function() {
|
||||||
|
|
||||||
|
it('should check whether a given date is yesterday or not', function() {
|
||||||
|
let today = new Date('2000-01-01 00:00:00');
|
||||||
|
let beforeYesterday = new Date('1999-12-30 00:00:00');
|
||||||
|
let tomorrow = new Date('2000-01-02 00:00:00');
|
||||||
|
|
||||||
|
let yesterday1 = new Date('1999-12-31 00:00:00');
|
||||||
|
let yesterday2 = new Date('1999-12-31 14:00:00');
|
||||||
|
let yesterday3 = new Date('1999-12-31 23:59:59');
|
||||||
|
|
||||||
|
assert.isTrue(isYesterday(yesterday1, today));
|
||||||
|
assert.isTrue(isYesterday(yesterday2, today));
|
||||||
|
assert.isTrue(isYesterday(yesterday3, today));
|
||||||
|
|
||||||
|
assert.isFalse(isYesterday(beforeYesterday, today));
|
||||||
|
assert.isFalse(isYesterday(today, today));
|
||||||
|
assert.isFalse(isYesterday(tomorrow, today));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should check whether a given date is today or not', function() {
|
||||||
|
let today = new Date('2000-01-01 00:00:00');
|
||||||
|
let yesterday = new Date('1999-12-31 00:00:00');
|
||||||
|
let beforeYesterday = new Date('1999-12-30 00:00:00');
|
||||||
|
let tomorrow = new Date('2000-01-02 00:00:00');
|
||||||
|
let afterTomorrow = new Date('2000-01-03 00:00:00');
|
||||||
|
|
||||||
|
let today1 = new Date('2000-01-01 00:00:00');
|
||||||
|
let today2 = new Date('2000-01-01 14:00:00');
|
||||||
|
let today3 = new Date('2000-01-01 23:59:59');
|
||||||
|
|
||||||
|
assert.isTrue(isToday(today, today));
|
||||||
|
assert.isTrue(isToday(today1, today));
|
||||||
|
assert.isTrue(isToday(today2, today));
|
||||||
|
assert.isTrue(isToday(today3, today));
|
||||||
|
|
||||||
|
assert.isFalse(isToday(beforeYesterday, today));
|
||||||
|
assert.isFalse(isToday(yesterday, today));
|
||||||
|
assert.isFalse(isToday(tomorrow, today));
|
||||||
|
assert.isFalse(isToday(afterTomorrow, today));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should check whether a given date is within last week or not', function(){
|
||||||
|
|
||||||
|
let today = new Date('2000-01-01 00:00:00');
|
||||||
|
let validDay1 = new Date('1999-12-31 00:00:00');
|
||||||
|
let validDay2 = new Date('1999-12-30 00:00:00');
|
||||||
|
let validDay3 = new Date('1999-12-29 00:00:00');
|
||||||
|
let validDay4 = new Date('1999-12-28 00:00:00');
|
||||||
|
let validDay5 = new Date('1999-12-27 00:00:00');
|
||||||
|
let validDay6 = new Date('1999-12-26 00:00:00');
|
||||||
|
|
||||||
|
let invalidDay1 = new Date('1999-12-25 00:00:00');
|
||||||
|
let invalidDay2 = new Date('1999-12-24 00:00:00');
|
||||||
|
let invalidDay3 = new Date('1999-12-23 00:00:00');
|
||||||
|
|
||||||
|
assert.isTrue(isWithinLastWeek(validDay1, today));
|
||||||
|
assert.isTrue(isWithinLastWeek(validDay2, today));
|
||||||
|
assert.isTrue(isWithinLastWeek(validDay3, today));
|
||||||
|
assert.isTrue(isWithinLastWeek(validDay4, today));
|
||||||
|
assert.isTrue(isWithinLastWeek(validDay5, today));
|
||||||
|
assert.isTrue(isWithinLastWeek(validDay6, today));
|
||||||
|
|
||||||
|
assert.isFalse(isWithinLastWeek(today, today));
|
||||||
|
assert.isFalse(isWithinLastWeek(invalidDay1, today));
|
||||||
|
assert.isFalse(isWithinLastWeek(invalidDay2, today));
|
||||||
|
assert.isFalse(isWithinLastWeek(invalidDay3, today));
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in new issue