TT#23958 Implement infinite scroll

Change-Id: Iae794486adfefea685799802ab036ee4c1957542

src/api/conversations.js

@@ -1,11 +1,18 @@
 
 import Vue from 'vue';
+import _ from 'lodash';
 import { getJsonBody } from './utils'
 
-export function getConversations(id) {
+export function getConversations(id, page, rows) {
+    let params = { subscriber_id: id, page: page, rows: rows };
     return new Promise((resolve, reject) => {
-        Vue.http.get('/api/conversations/?subscriber_id=' + id).then((result)=>{
-            resolve(getJsonBody(result.body)._embedded['ngcp:conversations']);
+        Vue.http.get('/api/conversations/', { params: params }).then((result)=>{
+            let jsonBody = getJsonBody(result.body);
+            if (_.has(jsonBody, "_embedded.ngcp:conversations")) {
+                resolve(jsonBody._embedded['ngcp:conversations']);
+            } else {
+                reject(new Error('No items returned for this page.'))
+            };
         }).catch((err)=>{
             reject(err);
         });

src/components/pages/Conversations.vue

@@ -1,5 +1,6 @@
 <template>
     <csc-page :title="$t('pages.conversations.title')">
+        <q-infinite-scroll :handler="loadMore" :offset=1 ref="infinite">
             <q-card v-for="conversation in conversations" :key="conversation.caller"
                 class="conversation-card">
                 <csc-collapsible :icon="getCollapsibleIcons(conversation)"
@@ -13,6 +14,10 @@
                     </q-card-actions>
                 </div>
             </q-card>
+            <div slot="message" class="row justify-center">
+                <q-spinner-dots :size="40"></q-spinner-dots>
+            </div>
+        </q-infinite-scroll>
     </csc-page>
 </template>
 
@@ -20,30 +25,36 @@
     import CscPage from '../CscPage'
     import CscCollapsible from '../card/CscCollapsible'
     import { QBtn, QCardActions, QCard,
-        QCardSeparator } from 'quasar-framework'
+        QCardSeparator, QInfiniteScroll, QSpinnerDots } from 'quasar-framework'
     export default {
         data () {
             return {
-                conversations: []
             }
         },
-        mounted() {
-            this.$store.dispatch('conversations/loadConversations').then(() => {
-                this.conversations = this.$store.state.conversations.
-                    conversations;
-            }).catch((err) => {
-                console.log(err);
-            });
-        },
         components: {
             CscPage,
             QBtn,
             QCard,
             QCardActions,
             QCardSeparator,
-            CscCollapsible
+            CscCollapsible,
+            QInfiniteScroll,
+            QSpinnerDots
+        },
+        computed: {
+            conversations() {
+                return this.$store.state.conversations.conversations;
+            }
         },
         methods: {
+            loadMore(index, done) {
+                this.$store.dispatch('conversations/loadConversations').then(() => {
+                    done();
+                }).catch((err) => {
+                    done();
+                    this.$refs.infinite.stop();
+                });
+            },
             hasCallOption(type) {
                 return (['call', 'call forward', 'sms', 'voicemail']
                     .indexOf(type) > -1);
@@ -85,4 +96,6 @@
     padding 15px
     .q-btn
         margin-bottom -10px
+.q-infinite-scroll-message
+    margin-bottom 50px
 </style>

src/store/conversations.js

@@ -7,6 +7,8 @@ import { getConversations } from '../api/conversations';
 export default {
     namespaced: true,
     state: {
+        page: 1,
+        rows: 10,
         conversations: [
         ]
     },
@@ -21,13 +23,14 @@ export default {
                 };
                 list.push(item);
             })
-            state.conversations = list;
+            state.conversations = state.conversations.concat(list);
+            state.page++;
         }
     },
     actions: {
         loadConversations(context) {
             return new Promise((resolve, reject)=>{
-                getConversations(localStorage.getItem('subscriberId'))
+                getConversations(localStorage.getItem('subscriberId'), context.state.page, context.state.rows)
                     .then((result)=>{
                         context.commit('loadConversations', result);
                         resolve();