MT#57605 allow the deletion of current registered devices

Change-Id: Ia9179a29f37c2c158ff3b27e838883aa531c04a6

src/pages/CscPageRegisteredDevices.vue

@@ -32,6 +32,17 @@
                     {{ $t('Refresh') }}
                 </q-btn>
             </template>
+            <template v-slot:body-cell-menu="{ row }">
+                <td>
+                <q-icon
+                    name="delete"
+                    color="negative"
+                    size="25px"
+                    @click="deleteRow(row)"
+                    style="cursor: pointer;"
+                />
+            </td>
+                </template>
         </q-table>
     </csc-page>
 </template>
@@ -74,6 +85,14 @@ export default {
                     field: row => row.id,
                     sortable: true
                 },
+                {
+                    name: 'username',
+                    required: true,
+                    label: this.$t('Username'),
+                    align: 'left',
+                    field: row => row.subscriber_id_expand.username,
+                    sortable: true
+                },
                 {
                     name: 'user_agent',
                     required: true,
@@ -109,9 +128,9 @@ export default {
                 {
                     name: 'menu',
                     required: true,
-                    align: 'right',
+                    align: 'left',
                     label: '',
-                    sortable: false
+                    sortable: true
                 }
             ]
         }
@@ -121,7 +140,8 @@ export default {
     },
     methods: {
         ...mapWaitingActions('user', {
-            loadSubscriberRegistrations: 'loadSubscriberRegistrations'
+            loadSubscriberRegistrations: 'loadSubscriberRegistrations',
+            removeSubscriberRegistration: 'removeSubscriberRegistration'
         }),
         async refresh () {
             await this.fetchPaginatedRegistrations({
@@ -138,7 +158,19 @@ export default {
             })
             this.pagination = { ...props.pagination }
             this.pagination.rowsNumber = count
-        }
+        },
+        async deleteRow (row) {
+            this.$q.dialog({
+                title: this.$t('Delete registered device'),
+                message: this.$t('You are about to delete this registered device'),
+                color: 'negative',
+                cancel: true,
+                persistent: true
+            }).onOk(async data => {
+                await this.removeSubscriberRegistration(row)
+                await this.refresh()
+            })
+        },
     }
 }
 </script>

src/store/user.js

@@ -1,5 +1,5 @@
 'use strict'
-
+import Vue from 'vue'
 import _ from 'lodash'
 import {
     RequestState
@@ -389,7 +389,7 @@ export default {
         async loadSubscriberRegistrations ({ commit, dispatch, state, rootGetters }, options) {
             try {
                 const list = await getSubscriberRegistrations({
-                    ...options
+                    ...options, ...{ expand: 'subscriber_id' }
                 })
                 commit('setSubscriberRegistrations', list.items)
                 return list.totalCount
@@ -398,6 +398,9 @@ export default {
                 throw err
             }
         },
+        async removeSubscriberRegistration (context, row) {
+            await Vue.http.delete('api/subscriberregistrations/' + row.id)
+        },
         async fetchAuthToken ({ commit, state, getters }, expiringTime = 300) {
             const subscriber = state.subscriber
             const expireDate = date.addToDate(new Date(), { seconds: expiringTime })