TT#96358 As a Subscriber, I want to see a list of my SubscriberRegistrations

AC:
Can see a list of SubscriberRegistrations of the logged in Subscriber
Can browse the list by using a pagination
Can sort the columns

Change-Id: Ia9fdfe0712627ba4780fcb46b03708d6444761b5

src/api/common.js

@@ -100,7 +100,8 @@ export async function getList (options) {
     }
     return {
         items: items,
-        lastPage: lastPage
+        lastPage: lastPage,
+        totalCount
     }
 }
 

src/api/subscriber.js

@@ -597,3 +597,22 @@ export async function downloadRecordingStream (fileId) {
     const res = await Vue.http.get('api/callrecordingfiles/' + fileId, { responseType: 'blob' })
     return res.body
 }
+
+export async function getSubscriberRegistrations (options) {
+    let all = false
+    if (options.rows === 0) {
+        delete options.rows
+        delete options.page
+        all = true
+    }
+    if (!options.order_by) {
+        delete options.order_by
+        delete options.order_by_direction
+    }
+    const list = await getList({
+        resource: 'subscriberregistrations',
+        all,
+        params: options
+    })
+    return list
+}

src/components/CscMainMenuTop.vue

@@ -193,6 +193,12 @@ export default {
                     icon: 'settings',
                     label: this.$t('PBX Settings'),
                     visible: this.isPbxEnabled
+                },
+                {
+                    to: '/user/registered-devices',
+                    icon: 'devices',
+                    label: this.$t('Registered Devices'),
+                    visible: true
                 }
             ]
         }

src/pages/CscPageRegisteredDevices.vue

@@ -0,0 +1,130 @@
+
+<template>
+    <csc-page
+        id="csc-page-pbx-settings"
+        class="q-pa-lg"
+    >
+        <q-table
+            :columns="columns"
+            :data="subscriberRegistrations"
+            :loading="$wait.is('loadSubscriberRegistrations')"
+            row-key="id"
+            :pagination.sync="pagination"
+            @request="fetchPaginatedRegistrations"
+        >
+            <template v-slot:loading>
+                <q-inner-loading
+                    showing
+                    color="primary"
+                >
+                    <csc-spinner />
+                </q-inner-loading>
+            </template>
+        </q-table>
+    </csc-page>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CscPage from 'components/CscPage'
+import { mapWaitingActions } from 'vue-wait'
+import CscSpinner from 'components/CscSpinner'
+export default {
+    name: 'CscPageRegisteredDevices',
+    components: {
+        CscSpinner,
+        CscPage
+    },
+    data () {
+        return {
+            data: [],
+            pagination: {
+                sortBy: 'id',
+                descending: false,
+                page: 1,
+                rowsPerPage: 5,
+                rowsNumber: 0
+            }
+        }
+    },
+    computed: {
+        ...mapState('user', [
+            'subscriberRegistrations'
+        ]),
+        columns () {
+            return [
+                {
+                    name: 'id',
+                    required: true,
+                    label: this.$t('Id'),
+                    align: 'left',
+                    field: row => row.id,
+                    sortable: true
+                },
+                {
+                    name: 'user_agent',
+                    required: true,
+                    align: 'left',
+                    label: this.$t('User Agent'),
+                    field: row => row.user_agent,
+                    sortable: true
+                },
+                {
+                    name: 'contact',
+                    required: true,
+                    align: 'left',
+                    label: this.$t('Contact'),
+                    field: row => row.contact,
+                    sortable: true
+                },
+                {
+                    name: 'expires',
+                    required: true,
+                    align: 'left',
+                    label: this.$t('Expires'),
+                    field: row => row.expires,
+                    sortable: true
+                },
+                {
+                    name: 'q',
+                    required: true,
+                    align: 'left',
+                    label: this.$t('Q-Value'),
+                    field: row => row.q,
+                    sortable: true
+                },
+                {
+                    name: 'menu',
+                    required: true,
+                    align: 'right',
+                    label: '',
+                    sortable: false
+                }
+            ]
+        }
+    },
+    watch: {
+    },
+    async mounted () {
+        await this.fetchPaginatedRegistrations({
+            pagination: this.pagination
+        })
+    },
+    methods: {
+        ...mapWaitingActions('user', {
+            loadSubscriberRegistrations: 'loadSubscriberRegistrations'
+        }),
+        async fetchPaginatedRegistrations (props) {
+            const { page, rowsPerPage, sortBy, descending } = props.pagination
+            const count = await this.loadSubscriberRegistrations({
+                page,
+                rows: rowsPerPage,
+                order_by: sortBy,
+                order_by_direction: descending ? 'desc' : 'asc'
+            })
+            this.pagination = { ...props.pagination }
+            this.pagination.rowsNumber = count
+        }
+    }
+}
+</script>

src/router/routes.js

@@ -31,6 +31,7 @@ import CscPageError404 from 'src/pages/CscPageError404'
 import CscRecoverPassword from 'src/pages/CscRecoverPassword'
 import CscPageCf from 'pages/CscPageCf'
 import CscPageCallSettings from 'pages/CscPageCallSettings'
+import CscPageRegisteredDevices from 'pages/CscPageRegisteredDevices'
 
 const getToken = (route) => {
     return {
@@ -247,6 +248,14 @@ export default function routes (app) {
                         subtitle: i18n.t('Set your PBX settings')
                     }
                 },
+                {
+                    path: 'registered-devices',
+                    component: CscPageRegisteredDevices,
+                    meta: {
+                        title: i18n.t('Registered Devices'),
+                        subtitle: i18n.t('List of registered devices for the subscriber')
+                    }
+                },
                 {
                     path: '*',
                     component: CscPageError404

src/store/user.js

@@ -13,7 +13,13 @@ import {
     login,
     getUserData
 } from '../api/user'
-import { changePassword, resetPassword, recoverPassword, getBrandingLogo } from '../api/subscriber'
+import {
+    changePassword,
+    resetPassword,
+    recoverPassword,
+    getBrandingLogo,
+    getSubscriberRegistrations
+} from '../api/subscriber'
 import { deleteJwt, getJwt, getSubscriberId, setJwt, setSubscriberId } from 'src/auth'
 import { setSession } from 'src/storage'
 
@@ -47,7 +53,8 @@ export default {
         logoRequesting: false,
         logoRequested: false,
         resellerBranding: null,
-        defaultBranding: {}
+        defaultBranding: {},
+        subscriberRegistrations: []
     },
     getters: {
         isLogged (state) {
@@ -281,6 +288,9 @@ export default {
         },
         setDefaultBranding (state, value) {
             state.defaultBranding = value
+        },
+        setSubscriberRegistrations (state, value) {
+            state.subscriberRegistrations = value
         }
     },
     actions: {
@@ -391,6 +401,19 @@ export default {
             if (value) {
                 context.commit('setDefaultBranding', value)
             }
+        },
+        async loadSubscriberRegistrations ({ commit, dispatch, state, rootGetters }, options) {
+            try {
+                const list = await getSubscriberRegistrations({
+                    ...options,
+                    subscriber_id: getSubscriberId()
+                })
+                commit('setSubscriberRegistrations', list.items)
+                return list.totalCount
+            } catch (err) {
+                commit('setSubscriberRegistrations', [])
+                throw err
+            }
         }
     }
 }