TT#84209 CSC: As a Customer, I want to filter Conversations by time range

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

@@ -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
 }
-

src/components/pages/Conversations/Conversations.vue

@@ -40,9 +40,67 @@
                 @click="filterByType('voicemail')"
             />
         </q-tabs>
+
+        <div class="csc-conversations-filter-container">
+            <div
+                class="csc-conversations-filters-title"
+            >
+                    <q-btn
+                        flat
+                        icon="fa-filter"
+                        color="primary"
+                        v-if="showDaterangeFilter"
+                        @click="toggleDaterangeFilter()"
+                    >
+                        {{$t('pages.conversations.filterByTimeRange')}}
+                    </q-btn>
+            </div>
+            <div
+                class="csc-conversations-filter-fields-container"
+                v-if="!showDaterangeFilter"
+            >
+                <div>
+                    <q-field
+                      dark
+                      class="csc-conversations-daterange-container"
+                      :helper="$t('pages.conversations.filterByTimeRangeHelper')"
+                    >
+                        <q-datetime-range
+                            dark
+                            ref="filterTimeRange"
+                            type="datetime"
+                            v-model="dateFilterRange"
+                            format="DD/MM/YYYY - hh:mm"
+                            @change="filterByDaterange()"
+                        />
+
+                    </q-field>
+                </div>
+                <div class="csc-conversations-filter-buttons">
+                    <q-btn
+                        flat
+                        icon="clear"
+                        color="white"
+                        @click="resetDaterangeFilters"
+                    >
+                        {{ $t('pages.conversations.closeDaterangeFilters') }}
+                    </q-btn>
+                    <q-btn
+                        flat
+                        icon="fa-filter"
+                        color="red"
+                        @click="emptyDaterangeFilters"
+                    >
+                        {{$t('pages.conversations.resetFilterByTimerange')}}
+                    </q-btn>
+                </div>
+            </div>
+        </div>
+
         <div
             id="csc-conversation-content"
         >
+
             <q-list
                 v-if="items.length > 0"
                 no-border
@@ -75,7 +133,7 @@
                 {{ noResultsMessage }}
             </div>
             <div
-                v-if="isNextPageRequesting"
+                v-if="isNextPageRequesting || startFiltering"
                 class="row justify-center"
             >
                 <q-spinner-dots
@@ -121,6 +179,8 @@
         showToast
     } from '../../../helpers/ui'
     import {
+        QDatetimeRange,
+        QField,
         QScrollObservable,
         scroll,
         QList,
@@ -141,6 +201,12 @@
                 deletionId: null,
                 scrollEventEmitted: false,
                 selectedTab: 'call-fax-voicemail',
+                dateFilterRange: {
+                    from: null,
+                    to: null
+                },
+                showDaterangeFilter: true,
+                startFiltering: false,
                 tabs: [
                     {
                         label: this.$t('pages.conversations.tabLabelAll'),
@@ -165,6 +231,8 @@
             platformMixin
         ],
         components: {
+            QDatetimeRange,
+            QField,
             CscRemoveDialog,
             CscPage,
             CscConversationItem,
@@ -269,6 +337,9 @@
                     classes.push('csc-back-to-top-calling');
                 }
                 return classes;
+            },
+            openFilter(){
+                this.$refs.filterTimeRange.open();
             }
         },
         methods: {
@@ -279,7 +350,11 @@
                 if(!this.isNextPageRequesting && !this.scrollEventEmitted && data.direction === 'down' &&
                     data.position > 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
 </style>

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",

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)=>{