TT#120900 CSC: CallRecording - Integrate server side pagination

Change-Id: If64a6291671e205a0b3f109260fd599b5dee87bd

src/api/subscriber.js

@@ -561,22 +561,23 @@ export async function getBrandingLogo (subscriberId) {
     }
 }
 
-export async function getRecordings (subscriberId) {
-    let retArr = []
+export async function getRecordings (options) {
+    const data = { recordings: [], total_count: 0 }
     const res = await Vue.http.get('api/callrecordings/', {
-        subscriber_id: subscriberId
+        params: options
     })
     if (res.body.total_count > 0) {
         const recordings = getJsonBody(res.body)._embedded['ngcp:callrecordings']
-        retArr = recordings.map(recording => {
+        data.recordings = recordings.map(recording => {
             return {
                 id: recording.id,
                 time: recording.start_time,
                 files: []
             }
         })
+        data.total_count = res.body.total_count
     }
-    return retArr
+    return data
 }
 
 export async function getRecordingStreams (recId) {

src/pages/CscPageCallRecording.vue

@@ -9,6 +9,9 @@
                     :columns="columns"
                     :loading="$wait.is('csc-call-recordings')"
                     row-key="name"
+                    flat
+                    :pagination.sync="pagination"
+                    @request="fetchPaginatedRecordings"
                 >
                     <template v-slot:header="props">
                         <q-tr :props="props">
@@ -194,7 +197,14 @@ export default {
 
             ],
             data: [],
-            rowStatus: []
+            rowStatus: [],
+            pagination: {
+                sortBy: 'id',
+                descending: false,
+                page: 1,
+                rowsPerPage: 5,
+                rowsNumber: 0
+            }
         }
     },
     computed: {
@@ -214,7 +224,9 @@ export default {
         }
     },
     async mounted () {
-        await this.fetchRecordings()
+        await this.fetchPaginatedRecordings({
+            pagination: this.pagination
+        })
     },
     methods: {
         ...mapWaitingActions('callRecordings', {
@@ -223,6 +235,17 @@ export default {
             deleteRecording: 'csc-call-recordings',
             downloadRecording: 'csc-call-recordings'
         }),
+        async fetchPaginatedRecordings (props) {
+            const { page, rowsPerPage, sortBy, descending } = props.pagination
+            const count = await this.fetchRecordings({
+                page: page,
+                rows: rowsPerPage,
+                order_by: sortBy,
+                order_by_direction: descending ? 'desc' : 'asc'
+            })
+            this.pagination = { ...props.pagination }
+            this.pagination.rowsNumber = count
+        },
         confirmRowDeletion (rowId) {
             this.$refs['confirmDelete-' + rowId].open()
         },
@@ -230,7 +253,9 @@ export default {
             try {
                 await this.deleteRecording(rowId)
                 showToast(this.$t('Recording successfully deleted'))
-                await this.fetchRecordings()
+                await this.fetchPaginatedRecordings({
+                    pagination: this.pagination
+                })
             } catch (err) {
                 showGlobalError(this.$t('Something went wrong. Please retry later'))
             }

src/store/call-recordings.js

@@ -23,9 +23,13 @@ export default {
         }
     },
     actions: {
-        async fetchRecordings (context) {
-            const recs = await getRecordings(context.getters.subscriberId)
-            context.commit('callRecordings', recs)
+        async fetchRecordings (context, options) {
+            const recs = await getRecordings({
+                ...options,
+                subscriber_id: context.getters.subscriberId
+            })
+            context.commit('callRecordings', recs.recordings)
+            return recs.total_count
         },
         async fetchStreams (context, recId) {
             const streams = await getRecordingStreams(recId)