From dbea287fdc1df7e781c33d980d457a3743f7282e Mon Sep 17 00:00:00 2001 From: Tijana Maksimovic Date: Fri, 22 Jun 2018 13:53:33 +0200 Subject: [PATCH] TT#20309 Conversations: As a Customer, I want to filter items by type (call, voicemail, fax, etc. ...) What has been done: TT#38957 Implement UI for the tab navigation TT#38958 Implement filtering method TT#38959 Implement update list method/incorporate existing reloadItems method Change-Id: Ib606c25082c02b606c571cb033eb4f4a96f45eb6 --- TESTDATA.md | 7 +- src/api/conversations.js | 31 +++- .../pages/Conversations/Conversations.vue | 175 ++++++++++++++---- src/locales/en.json | 9 +- src/store/conversations.js | 33 ++-- 5 files changed, 188 insertions(+), 67 deletions(-) diff --git a/TESTDATA.md b/TESTDATA.md index 44b60fe4..f4ba2681 100644 --- a/TESTDATA.md +++ b/TESTDATA.md @@ -35,9 +35,10 @@ mysql < ./conversations_dump.sql ## VOICEMAIL -1. Go to Settings > Subscribers > Details > Master Data, and set "Primary Number"/E164 to the desired number (for example 43993007) -1. Go to Settings > Subscribers > Details > Preferences, and under "Call Forwards" create a call forward destination under "Call Forward Unconditional" to voicemail -1. Initiate a call from another subscriber to the subscriber you just set call forward for, and leave a voicemail +1. Go to Settings > Subscribers, choose a subscriber (for example 43993007) who will be a caller. Go to Details > Master Data > Edit, and set "Primary Number"/E164 to the desired number (in this case 43993007) +1. Go back to Settings > Subscribers, choose another subscriber (for example 43993006) who will act as a callee. Go to Details > Master Data > Edit, and set "Primary Number"/E164 to the desired number (in this case 43993006) +1. While in the second subscriber's details, go to Preferences, and under "Call Forwards" create a call forward destination under "Call Forward Unconditional" to voicemail +1. Initiate a call from the first subscriber to the subscriber you just set call forward for, and leave a voicemail See [calls section](#calls) for information on how to initiate calls. diff --git a/src/api/conversations.js b/src/api/conversations.js index fda50642..60f07c9f 100644 --- a/src/api/conversations.js +++ b/src/api/conversations.js @@ -1,19 +1,32 @@ +import _ from 'lodash' import { saveAs } from 'file-saver' import Vue from 'vue' import { getList } from './common' -export function getConversations(id, page, rows) { - return getList({ - path: 'api/conversations/', - root: '_embedded.ngcp:conversations', - params: { - subscriber_id: id, - page: page, - rows: rows, - order_by: 'timestamp', + +export function getConversations(options) { + return new Promise((resolve, reject)=>{ + let type = _.get(options, 'type', null); + let params ={ + subscriber_id: _.get(options, 'subscriberId'), + page: _.get(options, 'page', 1), + rows: _.get(options, 'rows', 25), + order_by: _.get(options, 'order_by', 'timestamp'), order_by_direction: 'desc' + }; + if(type !== null) { + params.type = type; } + getList({ + path: 'api/conversations/', + root: '_embedded.ngcp:conversations', + params: params + }).then((list)=>{ + resolve(list); + }).catch((err)=>{ + reject(err); + }); }); } diff --git a/src/components/pages/Conversations/Conversations.vue b/src/components/pages/Conversations/Conversations.vue index 0be86f3d..b8425a88 100644 --- a/src/components/pages/Conversations/Conversations.vue +++ b/src/components/pages/Conversations/Conversations.vue @@ -3,41 +3,78 @@ ref="page" class="csc-list-page" > - - - -
- -
-
- {{ $t('pages.conversations.emptyListMessage') }} -
- + + + + + +
+ +
+
+ {{ noResultsMessage }} +
+ + @@ -58,13 +95,35 @@ scroll, QList, QSpinnerDots, - dom + dom, + QTabs, + QTab, + QTabPane } from 'quasar-framework' const { offset } = dom export default { data () { return { - scrollEventEmitted: false + scrollEventEmitted: false, + selectedTab: 'call-fax-voicemail', + tabs: [ + { + label: this.$t('pages.conversations.tabLabelAll'), + value: 'call-fax-voicemail' + }, + { + label: this.$t('pages.conversations.tabLabelCalls'), + value: 'call' + }, + { + label: this.$t('pages.conversations.tabLabelFaxes'), + value: 'fax' + }, + { + label: this.$t('pages.conversations.tabLabelVoicemails'), + value: 'voicemail' + } + ] } }, components: { @@ -72,7 +131,10 @@ CscConversationItem, QScrollObservable, QList, - QSpinnerDots + QSpinnerDots, + QTabs, + QTab, + QTabPane }, mounted() { this.$store.commit('conversations/resetList'); @@ -92,7 +154,21 @@ ...mapGetters('call', [ 'callState', 'isCallAvailable' - ]) + ]), + noResultsMessage() { + if(this.selectedTab === 'call-fax-voicemail') { + return this.$t('pages.conversations.emptyListMessage'); + } + else if(this.selectedTab === 'call') { + return this.$t('pages.conversations.noCallsMessage'); + } + else if(this.selectedTab === 'fax') { + return this.$t('pages.conversations.noFaxesMessage'); + } + else if(this.selectedTab === 'voicemail') { + return this.$t('pages.conversations.noVoicemailsMessage'); + } + } }, methods: { scroll(data) { @@ -105,8 +181,11 @@ this.scrollEventEmitted = false; } }, - nextPage() { - this.$store.dispatch('conversations/nextPage'); + nextPage(type) { + if(type === 'call-fax-voicemail') { + type = null; + } + this.$store.dispatch('conversations/nextPage', type); }, initCall(call) { this.layout.showRight(); @@ -128,7 +207,20 @@ }); }, reloadItems() { - this.$store.dispatch('conversations/reloadItems', 1); + let type = this.selectedTab; + if(type === 'call-fax-voicemail') { + type = null; + } + this.$store.dispatch('conversations/reloadItems', { + retryCount: 1, + type: type + }); + }, + filterByType(type) { + if(type !== this.selectedTab) { + this.$store.commit('conversations/resetList'); + this.$store.dispatch('conversations/nextPage', type); + } } }, watch: { @@ -168,7 +260,10 @@ let endedB = oldState === 'established' && newState === 'input'; let endedC = oldState === 'ringing' && newState === 'input'; let endedD = oldState === 'incoming' && newState === 'input'; - if (endedA || endedB || endedC || endedD) { + if (endedA && ((this.selectedTab === 'call') || (this.selectedTab === 'call-fax-voicemail')) + || endedB && ((this.selectedTab === 'call') || (this.selectedTab === 'call-fax-voicemail')) + || endedC && ((this.selectedTab === 'call') || (this.selectedTab === 'call-fax-voicemail')) + || endedD && ((this.selectedTab === 'call') || (this.selectedTab === 'call-fax-voicemail'))) { this.reloadItems(); } }, diff --git a/src/locales/en.json b/src/locales/en.json index bc597371..63b991ba 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -120,7 +120,14 @@ "downloadFaxSuccessMessage": "Fax downloaded successfully", "downloadFaxErrorMessage": "Downloading of fax failed", "emptyListMessage": "No Calls, Voicemails or Faxes found", - "reloadItemsErrorMessage": "Reloading conversation items failed" + "noFaxesMessage": "No Faxes found", + "noVoicemailsMessage": "No Voicemails found", + "noCallsMessage": "No Calls found", + "reloadItemsErrorMessage": "Reloading conversation items failed", + "tabLabelAll": "All", + "tabLabelCalls": "Calls", + "tabLabelFaxes": "Faxes", + "tabLabelVoicemails": "Voicemails" }, "reminder": { "toggleEnabled": "Reminder is enabled", diff --git a/src/store/conversations.js b/src/store/conversations.js index a36701d0..d1155ba9 100644 --- a/src/store/conversations.js +++ b/src/store/conversations.js @@ -194,22 +194,26 @@ export default { } }, actions: { - reloadItems(context, retryCount) { + reloadItems(context, options) { context.commit('reloadItemsRequesting'); let rows = context.state.currentPage * ROWS_PER_PAGE; let firstStateItemTimestamp = context.state.items[0] ? context.state.items[0].start_time : null; - if (retryCount < ReloadConfig.retryLimit) { - getConversations( - context.getters.getSubscriberId, - 1, - rows - ).then((result) => { + if (options.retryCount < ReloadConfig.retryLimit) { + getConversations({ + subscriberId: context.getters.getSubscriberId, + page: 1, + rows: rows, + type: options.type + }).then((result) => { let firstResultItemTimestamp = result.items[0] ? result.items[0].start_time : null; if (_.isEqual(firstStateItemTimestamp, firstResultItemTimestamp)) { setTimeout(() => { - context.dispatch('reloadItems', ++retryCount); + context.dispatch('reloadItems', { + retryCount: ++options.retryCount, + type: options.type + }); }, ReloadConfig.retryDelay); } else { @@ -247,15 +251,16 @@ export default { context.commit('playVoiceMailFailed', options.id, err.mesage); }); }, - nextPage(context) { + nextPage(context, type) { let page = context.getters.currentPage + 1; if(context.getters.lastPage === null || page <= context.getters.lastPage) { context.commit('nextPageRequesting'); - getConversations( - context.getters.getSubscriberId, - page, - ROWS_PER_PAGE - ).then((result) => { + getConversations({ + subscriberId: context.getters.getSubscriberId, + page: page, + rows: ROWS_PER_PAGE, + type: type + }).then((result) => { context.commit('nextPageSucceeded', result); }).catch((err)=>{ context.commit('nextPageFailed', err.message);