From e5b8339f7e2b02b22e2dbf7d7fc9c7da44e15959 Mon Sep 17 00:00:00 2001 From: Carlo Venusino Date: Thu, 13 Aug 2020 16:49:08 +0200 Subject: [PATCH] TT#84209 CSC: As a Customer, I want to filter Conversations by time range MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AC: √ Can set start date √ Can set end date √ Can unset start date √ Can unset end date √ Can see default loading indicator during filtering Change-Id: I8588280db954d129066f9d92455fadd0b0c4689e --- src/api/conversations.js | 9 +- .../pages/Conversations/Conversations.vue | 153 +++++++++++++++++- src/locales/en.json | 6 +- src/store/conversations/actions.js | 16 +- 4 files changed, 172 insertions(+), 12 deletions(-) diff --git a/src/api/conversations.js b/src/api/conversations.js index 20c3105b..05e5e36c 100644 --- a/src/api/conversations.js +++ b/src/api/conversations.js @@ -15,6 +15,8 @@ import { export function getConversations(options) { return new Promise((resolve, reject) => { let type = _.get(options, 'type', null); + let from = _.get(options, 'from', null); + let to = _.get(options, 'to', null); let params ={ subscriber_id: _.get(options, 'subscriberId'), order_by: _.get(options, 'order_by', 'timestamp'), @@ -27,6 +29,12 @@ export function getConversations(options) { if (type !== null) { params.type = type; } + if (from !== null){ + params.from = from; + } + if (to !== null){ + params.to = to; + } getList({ path: 'api/conversations/', root: '_embedded.ngcp:conversations', @@ -104,4 +112,3 @@ export async function deleteVoicemail(id) { const res = await Vue.http.delete('api/voicemails/' + id) return res.status >= 200 } - diff --git a/src/components/pages/Conversations/Conversations.vue b/src/components/pages/Conversations/Conversations.vue index ae5c82dd..c114a8bf 100644 --- a/src/components/pages/Conversations/Conversations.vue +++ b/src/components/pages/Conversations/Conversations.vue @@ -40,9 +40,67 @@ @click="filterByType('voicemail')" /> + +
+
+ + {{$t('pages.conversations.filterByTimeRange')}} + +
+
+
+ + + + +
+
+ + {{ $t('pages.conversations.closeDaterangeFilters') }} + + + {{$t('pages.conversations.resetFilterByTimerange')}} + +
+
+
+
+
scroll.getScrollHeight(this.$refs.page.$el) - window.innerHeight - 90) { this.scrollEventEmitted = true; - this.nextPage(this.selectedTab); + this.nextPage({ + type: this.selectedTab, + from: this.dateFilterRange.from, + to: this.dateFilterRange.to + }); } else if(data.position <= scroll.getScrollHeight(this.$refs.page.$el) - window.innerHeight - 90) { this.scrollEventEmitted = false; @@ -289,7 +364,11 @@ if(type === 'call-fax-voicemail') { type = null; } - this.$store.dispatch('conversations/nextPage', type); + this.$store.dispatch('conversations/nextPage', { + type: type, + from: this.dateFilterRange.from, + to: this.dateFilterRange.to + }); }, startCall(number) { this.$store.commit('call/numberInputChanged', number); @@ -314,15 +393,39 @@ } this.$store.dispatch('conversations/reloadItems', { retryCount: 1, - type: type + type: type, + from: this.dateFilterRange.from, + to: this.dateFilterRange.to }); }, filterByType(type) { if(type !== this.selectedTab) { this.$store.commit('conversations/resetList'); - this.$store.dispatch('conversations/nextPage', type); + this.$store.dispatch('conversations/nextPage', { + type: type, + from: this.dateFilterRange.from, + to: this.dateFilterRange.to + }); } }, + filterByDaterange(){ + this.$store.commit('conversations/resetList'); + this.nextPage({ + filterByDaterange: true, + type: this.selectedTab, + from: this.dateFilterRange.from, + to: this.dateFilterRange.to + }); + }, + resetDaterangeFilters(){ + this.emptyDaterangeFilters(); + this.toggleDaterangeFilter(); + }, + emptyDaterangeFilters(){ + this.dateFilterRange.from = null; + this.dateFilterRange.to = null; + this.filterByDaterange(); + }, toggleBlockIncoming(options) { this.$store.dispatch('conversations/toggleBlockIncoming', options); }, @@ -348,6 +451,9 @@ else { return this.isNumberOutgoingBlocked(item.caller); } + }, + toggleDaterangeFilter(){ + this.showDaterangeFilter = !this.showDaterangeFilter; } }, watch: { @@ -436,4 +542,41 @@ bottom $call-footer-height-big + 15px .csc-conversation-list-item padding $flex-gutter-sm + .csc-conversations-filter-container + text-align center + color $secondary + .csc-conversations-filter-fields-container + margin-top -15px + .csc-conversations-daterange-container + width 450px + display inline-block + .csc-conversations-filter-buttons + margin-top 15px + .csc-conversations-filters-title + margin-top 50px + display inline-block + .q-field-label-inner + color $primary + font-weight bold + span + width 100% + text-align left + min-width 150px + .csc-conversations-clear-btn + cursor pointer + font-size 20px + margin-left 10px + .q-datetime-range-left + margin-right 10px + .q-datetime-weekdays + color $tertiary + .q-datetime-days div:not(.q-datetime-day-active), + .q-datetime-dark + color $white !important + .q-datetime-range .q-icon, + .q-datetime-range .q-item-icon + color $primary !important + .q-datetime-range.row .q-datetime-range-right, + .q-datetime-range.row .q-datetime-range-left + padding-left 20px diff --git a/src/locales/en.json b/src/locales/en.json index f748bdaa..9bb17c5f 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -196,7 +196,11 @@ "from": "from", "call": "Call", "callForwarded": "Call forwarded", - "callDuration": "Duration" + "callDuration": "Duration", + "filterByTimeRange": "Filter by daterange", + "filterByTimeRangeHelper": "Pick start and / or end date", + "resetFilterByTimerange": "Reset filters", + "closeDaterangeFilters": "Close filters" }, "reminder": { "toggleEnabled": "Reminder is enabled", diff --git a/src/store/conversations/actions.js b/src/store/conversations/actions.js index a781b0d4..622b3b57 100644 --- a/src/store/conversations/actions.js +++ b/src/store/conversations/actions.js @@ -34,7 +34,9 @@ export default { subscriberId: context.getters.getSubscriberId, page: 1, rows: rows, - type: options.type + type: options.type, + from: options.from || null, + to: options.to || null }).then((result) => { let firstResultItemTimestamp = result.items[0] ? result.items[0].start_time : null; @@ -42,7 +44,9 @@ export default { setTimeout(() => { context.dispatch('reloadItems', { retryCount: ++options.retryCount, - type: options.type + type: options.type, + from: options.from || null, + to: options.to || null }); }, ReloadConfig.retryDelay); } @@ -81,14 +85,16 @@ export default { context.commit('playVoiceMailFailed', options.id, err.mesage); }); }, - nextPage(context, type) { - if (!context.getters.isLastPage) { + nextPage(context, data) { + if (!context.getters.isLastPage || data.filterByDaterange) { context.commit('nextPageRequesting'); getConversations({ subscriberId: context.getters.getSubscriberId, page: context.getters.currentPage + 1, rows: ROWS_PER_PAGE, - type: type + type: data.type, + from: data.from || null, + to: data.to || null }).then((result) => { context.commit('nextPageSucceeded', result); }).catch((err)=>{