TT#32966 Update Conversations List After Call

What has been done:
- TT#37310, Fix infinite scroll component update mechanism
- TT#37313, Implement update of infinite scroll on call ended event

Change-Id: Ib3ffd236d64a7948252a4d2e220fe7e50965977f

src/api/conversations.js

@@ -5,8 +5,8 @@ import _ from 'lodash'
 import crypto from 'crypto-browserify'
 import { getJsonBody } from './utils'
 
-export function getConversations(id, page, rows) {
-    let params = { subscriber_id: id, page: page, rows: rows,
+export function getConversations(options) {
+    let params = { subscriber_id: options.id, page: options.page, rows: options.rows,
         order_by: 'timestamp', order_by_direction: 'desc' };
     return new Promise((resolve, reject) => {
         Vue.http.get('api/conversations/', { params: params })
@@ -63,9 +63,3 @@ export function downloadFax(id) {
             });
     });
 }
-
-
-
-
-
-

src/components/CscConversations.vue

@@ -1,40 +0,0 @@
-<template>
-    <div>
-        <q-infinite-scroll :handler="loadMore" :offset=1 ref="infinite">
-            <csc-conversation v-for="(conversation, index) in conversations"
-                :conversation="conversation" :key="conversation._id">
-            </csc-conversation>
-            <div slot="message" class="row justify-center">
-                <q-spinner-dots :size="40"></q-spinner-dots>
-            </div>
-        </q-infinite-scroll>
-    </div>
-</template>
-
-<script>
-    import CscConversation from './CscConversation'
-    import { QInfiniteScroll, QSpinnerDots } from 'quasar-framework'
-    export default {
-        name: 'csc-conversations',
-        props: ['conversations'],
-        components: {
-            CscConversation,
-            QInfiniteScroll,
-            QSpinnerDots
-        },
-        methods: {
-            loadMore(index, done) {
-                this.$store.dispatch('conversations/loadConversations')
-                    .then(() => {
-                        done();
-                    }).catch(() => {
-                        done();
-                        this.$refs.infinite.stop();
-                    });
-            }
-        }
-    }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-</style>

src/components/pages/Conversations/Conversations.vue

@@ -6,10 +6,10 @@
 
 <script>
     import { mapState } from 'vuex'
-    import CscPage from '../CscPage'
-    import CscConversations from '../CscConversations'
+    import CscPage from '../../CscPage'
+    import CscConversations from './CscConversations'
     import { startLoading, stopLoading,
-        showGlobalError, showToast } from '../../helpers/ui'
+        showGlobalError, showToast } from '../../../helpers/ui'
     export default {
         data () {
             return {

src/components/pages/Conversations/CscConversation.vue

@@ -71,10 +71,10 @@
 </template>
 
 <script>
-    import CscCardCollapsible from './card/CscCardCollapsible'
+    import CscCardCollapsible from '../../card/CscCardCollapsible'
     import { QBtn, QPopover, QItem, QList, QCardActions,
         QChip, QCardSeparator } from 'quasar-framework'
-    import numberFormat from '../filters/number-format'
+    import numberFormat from '../../../filters/number-format'
     export default {
         name: 'csc-conversation',
         props: [

src/components/pages/Conversations/CscConversations.vue

@@ -0,0 +1,71 @@
+<template>
+    <q-infinite-scroll
+        :handler="loadMore"
+        :offset=1
+        ref="infinite"
+    >
+        <csc-conversation
+            v-for="(conversation, index) in conversations"
+            :conversation="conversation"
+            :key="conversation._id"
+        />
+        <div
+            slot="message"
+            class="row justify-center"
+        >
+            <q-spinner-dots :size="40" />
+        </div>
+    </q-infinite-scroll>
+</template>
+
+<script>
+    import CscConversation from './CscConversation'
+    import { mapGetters } from 'vuex'
+    import {
+        QInfiniteScroll,
+        QSpinnerDots
+    } from 'quasar-framework'
+    export default {
+        name: 'csc-conversations',
+        props: ['conversations'],
+        components: {
+            CscConversation,
+            QInfiniteScroll,
+            QSpinnerDots
+        },
+        computed: {
+            ...mapGetters('call', [
+                'callState'
+            ])
+        },
+        methods: {
+            reloadConversations() {
+                this.$store.dispatch('conversations/reloadConversations', 1);
+                this.$refs.infinite.reset();
+                this.$refs.infinite.resume();
+            },
+            loadMore(index, done) {
+                this.$store.dispatch('conversations/loadConversations')
+                    .then(() => {
+                        done();
+                    }).catch(() => {
+                        done();
+                        this.$refs.infinite.stop();
+                    });
+            }
+        },
+        watch: {
+            callState(newState, oldState) {
+                let endedA = newState === 'ended';
+                let endedB = oldState === 'established' && newState === 'input';
+                let endedC = oldState === 'ringing' && newState === 'input';
+                if (endedA || endedB || endedC) {
+                    this.reloadConversations();
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+</style>

src/routes.js

@@ -1,7 +1,7 @@
 
 import DefaultLayout from './components/layouts/Default'
 import Home from './components/pages/Home'
-import Conversations from './components/pages/Conversations'
+import Conversations from './components/pages/Conversations/Conversations'
 import CallForwardAlways from './components/pages/CallForward/Always'
 import CallForwardCompanyHours from './components/pages/CallForward/CompanyHours'
 import CallForwardAfterHours from './components/pages/CallForward/AfterHours'

src/store/call-blocking.js

@@ -17,7 +17,6 @@ import { enableIncomingCallBlocking,
     getPrivacyCallBlocking
 } from '../api/call-blocking';
 
-
 export default {
     namespaced: true,
     state: {

src/store/conversations.js

@@ -1,6 +1,12 @@
 'use strict';
 
-import { getConversations, downloadVoiceMail, downloadFax } from '../api/conversations'
+import _ from 'lodash';
+import { i18n } from '../i18n';
+import {
+    getConversations,
+    downloadVoiceMail,
+    downloadFax
+} from '../api/conversations'
 
 const RequestState = {
     button: 'button',
@@ -9,6 +15,11 @@ const RequestState = {
     failed: 'failed'
 };
 
+const ReloadConfig = {
+    retryLimit: 5,
+    retryDelay: 5000
+};
+
 export default {
     namespaced: true,
     state: {
@@ -19,7 +30,21 @@ export default {
         downloadVoiceMailState: RequestState.button,
         downloadVoiceMailError: null,
         downloadFaxState: RequestState.button,
-        downloadFaxError: null
+        downloadFaxError: null,
+        reloadConversationsState: RequestState.button,
+        reloadConversationsError: null
+    },
+    getters: {
+        getSubscriberId(state, getters, rootState, rootGetters) {
+            return rootGetters['user/getSubscriberId'];
+        },
+        reloadConversationsState(state) {
+            return state.reloadConversationsState;
+        },
+        reloadConversationsError(state) {
+            return state.reloadConversationsError ||
+                i18n.t('pages.conversations.reloadConversationsErrorMessage');
+        }
     },
     mutations: {
         loadConversations(state, options) {
@@ -49,18 +74,63 @@ export default {
         downloadFaxFailed(state, error) {
             state.downloadFaxState = RequestState.failed;
             state.downloadFaxError = error;
+        },
+        reloadConversationsRequesting(state) {
+            state.reloadConversationsState = RequestState.requesting;
+            state.reloadConversationsError = null;
+        },
+        reloadConversationsSucceeded(state) {
+            state.reloadConversationsState = RequestState.succeeded;
+            state.reloadConversationsError = null;
+        },
+        reloadConversationsFailed(state, error) {
+            state.reloadConversationsState = RequestState.failed;
+            state.reloadConversationsError = error;
+        },
+        resetConversations(state) {
+            state.page = 1;
+        },
+        reloadConversations(state, result) {
+            state.conversations = result;
+            state.page++;
         }
     },
     actions: {
+        reloadConversations(context, retryCount) {
+            context.commit('resetConversations');
+            let firstItem = context.state.conversations[0];
+            if (retryCount < ReloadConfig.retryLimit) {
+                getConversations({
+                    id: context.getters.getSubscriberId,
+                    page: context.state.page,
+                    rows: context.state.rows
+                }).then((result) => {
+                    if (_.isEqual(firstItem, result[0])) {
+                        setTimeout(() => {
+                            context.dispatch('reloadConversations', ++retryCount);
+                        }, ReloadConfig.retryDelay);
+                    }
+                    else {
+                        context.commit('reloadConversations', result);
+                        context.commit('reloadConversationsSucceeded');
+                    }
+                }).catch(() => {
+                    context.commit('reloadConversationsFailed');
+                });
+            }
+        },
         loadConversations(context) {
             return new Promise((resolve, reject) => {
-                getConversations(localStorage.getItem('subscriberId'), context.state.page, context.state.rows)
-                    .then((result) => {
-                        context.commit('loadConversations', result);
-                        resolve();
-                    }).catch((err)=>{
-                        reject(err);
-                    });
+                getConversations({
+                    id: context.getters.getSubscriberId,
+                    page: context.state.page,
+                    rows: context.state.rows
+                }).then((result) => {
+                    context.commit('loadConversations', result);
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
             });
         },
         downloadVoiceMail(context, id) {