MT#62259 Add "Seats" button in subscriber phonebook for callback

A new "Seats" button has been added to the subscriber phonebook section,
allowing users to view all available seats and initiate callbacks
directly from the list.

Change-Id: Icb5b21b7394e9008617b27770142fd0ed83f68a8

src/api/subscriber.js

@@ -945,3 +945,10 @@ export async function generateGeneralPassword () {
 
     return password
 }
+export async function getSubscriberSeats (options) {
+    const list = await getList({
+        resource: 'pbxusers',
+        params: options
+    })
+    return list
+}

src/pages/CscPageSeats.vue

@@ -0,0 +1,166 @@
+<template>
+    <csc-page-sticky id="csc-page-seats">
+        <template
+            #header
+        >
+            <q-btn
+                color="primary"
+                flat
+                :label="$t('Subscriber Phonebook')"
+                @click="openSubscriberPhonebookTable"
+            />
+        </template>
+        <csc-page class="q-pa-lg">
+            <q-table
+                v-if="isPbxEnabled"
+                class="no-shadow"
+                :columns="columns"
+                :rows="filteredSubscriberSeats"
+                :loading="$wait.is('loadSubscriberSeats')"
+                row-key="id"
+                @request="fetchPaginatedRegistrations"
+            >
+                <template #loading>
+                    <q-inner-loading
+                        showing
+                        color="primary"
+                    >
+                        <csc-spinner />
+                    </q-inner-loading>
+                </template>
+                <template #body-cell-menu="{ row }">
+                    <td>
+                        <csc-more-menu>
+                            <csc-popup-menu-item
+                                icon="fas fa-phone-alt"
+                                color="primary"
+                                :label="$t('Call back')"
+                                @click="homePageCall(row)"
+                            />
+                        </csc-more-menu>
+                    </td>
+                </template>
+            </q-table>
+        </csc-page>
+    </csc-page-sticky>
+</template>
+
+<script>
+import CscMoreMenu from 'components/CscMoreMenu'
+import CscPage from 'components/CscPage'
+import CscPageSticky from 'components/CscPageSticky'
+import CscPopupMenuItem from 'components/CscPopupMenuItem'
+import CscSpinner from 'components/CscSpinner'
+import { LIST_DEFAULT_ROWS } from 'src/api/common'
+import { mapWaitingActions } from 'vue-wait'
+import { mapGetters, mapState } from 'vuex'
+export default {
+    name: 'CscPageSeats',
+    components: {
+        CscSpinner,
+        CscPage,
+        CscMoreMenu,
+        CscPopupMenuItem,
+        CscPageSticky
+    },
+    data () {
+        return {
+            data: [],
+            pagination: {
+                sortBy: 'id',
+                descending: false,
+                page: 1,
+                rowsPerPage: LIST_DEFAULT_ROWS,
+                rowsNumber: 0
+            }
+        }
+    },
+    computed: {
+        ...mapState('user', [
+            'subscriberSeats'
+        ]),
+        ...mapGetters('user', [
+            'isPbxEnabled'
+        ]),
+        filteredSubscriberSeats () {
+            return this.subscriberSeats.filter((seat) => seat.pbx_extension !== null)
+        },
+        columns () {
+            return [
+                {
+                    name: 'id',
+                    label: this.$t('Id'),
+                    align: 'left',
+                    field: (row) => row.id,
+                    sortable: true
+                },
+                {
+                    name: 'display_name',
+                    align: 'left',
+                    label: this.$t('Display Name'),
+                    field: (row) => {
+                        return row.display_name ? row.display_name : this.formatPhoneNumber(row.primary_number)
+                    },
+                    sortable: true
+                },
+                {
+                    name: 'primary_number',
+                    align: 'left',
+                    label: this.$t('Number'),
+                    field: (row) => this.formatPhoneNumber(row.primary_number),
+                    sortable: true
+                },
+                {
+                    name: 'pbx_extension',
+                    align: 'left',
+                    label: this.$t('Extension'),
+                    field: (row) => row.pbx_extension,
+                    sortable: true
+                },
+                {
+                    name: 'menu',
+                    required: true,
+                    align: 'left',
+                    label: '',
+                    sortable: true
+                }
+            ]
+        }
+    },
+    async mounted () {
+        await this.refresh()
+    },
+    methods: {
+        ...mapWaitingActions('user', {
+            loadSubscriberSeats: 'loadSubscriberSeats'
+        }),
+        async refresh () {
+            await this.fetchPaginatedRegistrations({
+                pagination: this.pagination
+            })
+        },
+        async fetchPaginatedRegistrations ({ pagination }) {
+            const count = await this.loadSubscriberSeats({
+                page: pagination.page,
+                rows: pagination.rowsPerPage,
+                order_by: pagination.sortBy,
+                order_by_direction: pagination.descending ? 'desc' : 'asc'
+            })
+            this.pagination = { ...pagination, rowsNumber: count }
+        },
+        openSubscriberPhonebookTable () {
+            this.$router.push('/user/subscriber-phonebook')
+        },
+        formatPhoneNumber (pn) {
+            return `${pn.cc}${pn.ac}${pn.sn}`
+        },
+        async homePageCall (row) {
+            const pn = row.primary_number
+            this.$router.push({
+                path: '/user/home',
+                query: { number: this.formatPhoneNumber(pn) }
+            })
+        }
+    }
+}
+</script>

src/pages/CscPageSubscriberPhonebook.vue

@@ -14,6 +14,14 @@
                 :label="$t('Add Phonebook')"
                 @click="openAddPhonebook()"
             />
+            <q-btn
+                v-if="isPbxEnabled"
+                icon="person"
+                color="primary"
+                flat
+                :label="$t('Seats')"
+                @click="openSeatTable"
+            />
         </template>
         <csc-page
             class="q-pa-lg"
@@ -91,7 +99,7 @@ import CscPopupMenuItem from 'components/CscPopupMenuItem'
 import CscSpinner from 'components/CscSpinner'
 import { LIST_DEFAULT_ROWS } from 'src/api/common'
 import { mapWaitingActions } from 'vue-wait'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 export default {
     name: 'CscPageSubscriberPhonebook',
     components: {
@@ -117,6 +125,9 @@ export default {
         ...mapState('user', [
             'subscriberPhonebook'
         ]),
+        ...mapGetters('user', [
+            'isPbxEnabled'
+        ]),
         columns () {
             return [
                 {
@@ -218,6 +229,9 @@ export default {
         },
         async toggleShared (row) {
             await this.updateValueShared(row)
+        },
+        openSeatTable () {
+            this.$router.push('/user/seats')
         }
     }
 }

src/router/routes.js

@@ -36,6 +36,7 @@ import CscPagePbxSoundSets from 'pages/CscPagePbxSoundSets'
 import CscPagePbxStatisticsCdr from 'pages/CscPagePbxStatisticsCdr'
 import CscPageRegisteredDevices from 'pages/CscPageRegisteredDevices'
 import CscPageReminder from 'pages/CscPageReminder'
+import CscPageSeats from 'pages/CscPageSeats'
 import CscPageSpeedDial from 'pages/CscPageSpeedDial'
 import CscPageSubscriberPhonebook from 'pages/CscPageSubscriberPhonebook'
 import CscPageSubscriberPhonebookAdd from 'pages/CscPageSubscriberPhonebookAdd'
@@ -121,6 +122,15 @@ const routes = [
                     }
                 }
             },
+            {
+                path: 'seats',
+                component: CscPageSeats,
+                meta: {
+                    get title () {
+                        return i18n.global.t('Seats')
+                    }
+                }
+            },
             {
                 path: 'call-forwarding',
                 component: CscPageCf,

src/store/user.js

@@ -19,6 +19,7 @@ import {
     getSubscriberPhonebook,
     getSubscriberProfile,
     getSubscriberRegistrations,
+    getSubscriberSeats,
     recoverPassword,
     resetPassword,
     setPreference,
@@ -77,6 +78,7 @@ export default {
         defaultBranding: {},
         subscriberRegistrations: [],
         subscriberPhonebook: [],
+        subscriberSeats: [],
         customerPhonebook: [],
         phonebookMap: {},
         platformInfo: null,
@@ -329,6 +331,9 @@ export default {
         setSubscriberPhonebook (state, value) {
             state.subscriberPhonebook = value
         },
+        setSubscriberSeats (state, value) {
+            state.subscriberSeats = value
+        },
         setCustomerPhonebook (state, value) {
             state.customerPhonebook = value
         },
@@ -700,6 +705,17 @@ export default {
             const password = await generateGeneralPassword()
 
             return password
+        },
+        async loadSubscriberSeats ({ commit }, options) {
+            try {
+                const list = await getSubscriberSeats({
+                    ...options
+                })
+                commit('setSubscriberSeats', list.items)
+            } catch (err) {
+                commit('setSubscriberSeats', [])
+                throw err
+            }
         }
     }
 }