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
5 years ago · e5b8339f7e
parent 8a0527d54a
commit e5b8339f7e
4 changed files with 172 additions and 12 deletions
--- 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
 }
-
--- a/src/components/pages/Conversations/Conversations.vue
+++ b/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>
--- 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",
--- 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)=>{