Change-Id: Ibf6cfc82f56ae62fd1ec7997e160ca2e8025749dmr10.0
Hugo Zigha
4 years ago
committed by
Hugo Zigha
parent
22739de401
commit
116773786b
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<q-card
|
||||
dark
|
||||
bordered
|
||||
class="my-card csc-card-style column csc-item-odd no-wrap"
|
||||
>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-center">
|
||||
{{ title }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator
|
||||
dark
|
||||
inset
|
||||
/>
|
||||
|
||||
<q-card-section>
|
||||
<div
|
||||
v-if="!loading && error"
|
||||
class="text-h2 text-center csc-card-data-error"
|
||||
>
|
||||
N/A
|
||||
</div>
|
||||
<div
|
||||
v-if="!loading && !error"
|
||||
class="text-h2 text-center"
|
||||
>
|
||||
{{ count }}
|
||||
</div>
|
||||
<div
|
||||
class="text-h2 text-center"
|
||||
>
|
||||
<csc-spinner
|
||||
v-if="loading"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="!error"
|
||||
class="text-center"
|
||||
>
|
||||
{{ countTitle }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator
|
||||
dark
|
||||
inset
|
||||
/>
|
||||
|
||||
<q-card-section
|
||||
class="csc-card-list"
|
||||
/>
|
||||
|
||||
<q-separator
|
||||
dark
|
||||
inset
|
||||
/>
|
||||
|
||||
<q-card-section
|
||||
class="text-center"
|
||||
>
|
||||
<q-btn
|
||||
color="primary"
|
||||
unelevated
|
||||
flat
|
||||
:label="buttonTitle"
|
||||
:to="routeTo"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscSpinner from 'components/CscSpinner'
|
||||
export default {
|
||||
name: 'CscCardDashboard',
|
||||
components: {
|
||||
CscSpinner
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
countTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
buttonTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
itemsList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
routeTo: {
|
||||
type: [Object, String],
|
||||
required: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
error: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
.csc-card-style
|
||||
margin 10px
|
||||
width 30%
|
||||
height max-content
|
||||
min-width 284px
|
||||
|
||||
.csc-card-data-error
|
||||
color: $negative
|
||||
padding-bottom: 22px
|
||||
|
||||
.csc-card-list
|
||||
min-height: 316px
|
||||
</style>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<csc-page
|
||||
id="csc-page-dashboard"
|
||||
class="row justify-center"
|
||||
>
|
||||
<csc-card-dashboard
|
||||
:title="$t('Voicebox Messages')"
|
||||
:count="voicemailsCount"
|
||||
:count-title="$t('New Messages')"
|
||||
:button-title="$t('View Voicebox Messages')"
|
||||
:items-list="voicemailItems"
|
||||
:route-to="{ name: 'CscConversations', params: { initialTab: 'voicemail' } }"
|
||||
:loading="$wait.is('getVoicemailsData')"
|
||||
:error="voicemailsError"
|
||||
/>
|
||||
<csc-card-dashboard
|
||||
:title="$t('Call List')"
|
||||
:count="callsCount"
|
||||
:count-title="$t('Recent Calls')"
|
||||
:button-title="$t('View Call List')"
|
||||
:items-list="callItems"
|
||||
:route-to="{ name: 'CscConversations', params: { initialTab: 'call' } }"
|
||||
:loading="$wait.is('getCallsData')"
|
||||
:error="callsError"
|
||||
/>
|
||||
<csc-card-dashboard
|
||||
:title="$t('Registered Devices')"
|
||||
:count="registeredDevicesCount"
|
||||
:count-title="$t('Registered Devices')"
|
||||
:button-title="$t('View All Registered Devices')"
|
||||
:items-list="registeredDevicesItems"
|
||||
:route-to="{ name: 'RegisteredDevices', params: { initialTab: 'null' } }"
|
||||
:loading="$wait.is('getRegisteredDevicesData')"
|
||||
:error="registeredDevicesError"
|
||||
/>
|
||||
</csc-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscCardDashboard from 'components/pages/Dashboard/CscCardDashboard'
|
||||
import CscPage from 'components/CscPage'
|
||||
import { mapWaitingActions } from 'vue-wait'
|
||||
import {
|
||||
showGlobalError
|
||||
} from 'src/helpers/ui'
|
||||
export default {
|
||||
name: 'CscPageDashboard',
|
||||
components: {
|
||||
CscCardDashboard,
|
||||
CscPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
callItems: [],
|
||||
voicemailItems: [],
|
||||
registeredDevicesItems: [],
|
||||
callsCount: 0,
|
||||
voicemailsCount: 0,
|
||||
registeredDevicesCount: 0,
|
||||
voicemailsError: false,
|
||||
callsError: false,
|
||||
registeredDevicesError: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loadDatas()
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('dashboard', {
|
||||
getCallsData: 'getCallsData',
|
||||
getVoicemailsData: 'getVoicemailsData',
|
||||
getRegisteredDevicesData: 'getRegisteredDevicesData'
|
||||
}),
|
||||
async loadDatas () {
|
||||
const values = await Promise.allSettled([
|
||||
this.getCallsData(),
|
||||
this.getVoicemailsData(),
|
||||
this.getRegisteredDevicesData()
|
||||
])
|
||||
this.checkResponses('calls', values[0])
|
||||
this.checkResponses('voicemails', values[1])
|
||||
this.checkResponses('registered-devices', values[2])
|
||||
},
|
||||
checkResponses (type, response) {
|
||||
if (type === 'calls') {
|
||||
if (response.status === 'rejected') {
|
||||
this.callsError = true
|
||||
showGlobalError(response?.reason?.data?.message)
|
||||
} else {
|
||||
this.callsCount = response.value.totalCount
|
||||
this.callItems = response.value.items
|
||||
}
|
||||
} else if (type === 'voicemails') {
|
||||
if (response.status === 'rejected') {
|
||||
this.voicemailsError = true
|
||||
showGlobalError(response?.reason?.data?.message)
|
||||
} else {
|
||||
this.voicemailsCount = response.value.totalCount
|
||||
this.voicemailItems = response.value.items
|
||||
}
|
||||
} else if (type === 'registered-devices') {
|
||||
if (response.status === 'rejected') {
|
||||
this.registeredDevicesError = true
|
||||
showGlobalError(response?.reason?.data?.message)
|
||||
} else {
|
||||
this.registeredDevicesCount = response.value.totalCount
|
||||
this.registeredDevicesItems = response.value.items
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,39 @@
|
||||
import {
|
||||
getAllVoicemails,
|
||||
getAllCalls
|
||||
} from '../api/conversations'
|
||||
import {
|
||||
getSubscriberRegistrations
|
||||
} from '../api/subscriber'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
getters: {
|
||||
getSubscriberId (state, getters, rootState, rootGetters) {
|
||||
return parseInt(rootGetters['user/getSubscriberId'])
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async getVoicemailsData (context) {
|
||||
const res = await getAllVoicemails({
|
||||
subscriberId: context.getters.getSubscriberId,
|
||||
rows: 5
|
||||
})
|
||||
return res
|
||||
},
|
||||
async getCallsData (context) {
|
||||
const res = await getAllCalls({
|
||||
subscriberId: context.getters.getSubscriberId,
|
||||
rows: 5
|
||||
})
|
||||
return res
|
||||
},
|
||||
async getRegisteredDevicesData (context) {
|
||||
const res = await getSubscriberRegistrations({
|
||||
subscriber_id: context.getters.getSubscriberId,
|
||||
rows: 5
|
||||
})
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue