MT#58739 Add possibility to configure the customer phonebook

- remove some spaces and some code in comment
- change icon for upload
- adding an error for the number when it is duplicated in add/edit pages

Change-Id: I3f1ca01e70a1b3bcf068bdea3c5cc98668f74c9f

package.json

@@ -38,6 +38,7 @@
     "decode-uri-component": "^0.4.0",
     "eventsource": "^2.0.2",
     "file-saver": "^2.0.2",
+    "content-disposition": "^0.5.4",
     "jest-junit": "^11.1.0",
     "jssip": "3.8.2",
     "jwt-decode": "^2.2.0",
@@ -46,6 +47,7 @@
     "lodash": "4.17.21",
     "moment": "^2.29.4",
     "npm": "^9.0.0",
+    "path": "0.12.7",
     "qrcode": "1.5.0",
     "quasar": "2",
     "stream": "npm:stream-browserify",

src/api/common.js

@@ -9,7 +9,7 @@ import {
     hasJwt
 } from 'src/auth'
 import { getCurrentLangAsV1Format } from 'src/i18n'
-
+import saveAs from 'file-saver'
 export const LIST_DEFAULT_PAGE = 1
 export const LIST_DEFAULT_ROWS = 24
 export const LIST_ALL_ROWS = 1000
@@ -397,3 +397,41 @@ export function getAsBlob (options) {
         })
     })
 }
+export async function apiGet (options = {
+    path: undefined,
+    resource: undefined,
+    resourceId: undefined,
+    config: {}
+}) {
+    let path = options.path
+    if (options.resource && options.resourceId) {
+        path = 'api/' + options.resource + '/' + options.resourceId
+    } else if (options.resource) {
+        path = 'api/' + options.resource + '/'
+    }
+    return httpApi.get(path, options.config).catch(handleResponseError)
+}
+export async function apiPost (options = {
+    resource: undefined,
+    data: undefined,
+    config: {}
+}) {
+    let path = options.path
+    if (options.resource) {
+        path = options.resource + '/'
+    }
+    return httpApi.post(path, options.data, _.merge({
+        headers: {
+            Prefer: 'return=representation'
+        }
+    }, options.config)).catch(handleResponseError)
+}
+export async function apiDownloadFile ({ apiGetOptions, defaultFileName, defaultContentType }) {
+    const res = await apiGet(apiGetOptions)
+    const fileName = defaultFileName
+    saveAs(new Blob([res.data], { type: res.headers['content-type'] || defaultContentType }), fileName)
+}
+export async function apiUploadCsv (options) {
+    const res = await apiPost(options)
+    return res
+}

src/api/subscriber.js

@@ -12,7 +12,8 @@ import {
     patchRemove,
     patchReplaceFull,
     patchAddFull,
-    httpApi
+    httpApi,
+    apiUploadCsv
 } from './common'
 
 import {
@@ -62,15 +63,20 @@ export async function setPreferencePhonebook (id, field, value) {
         try {
             await replacePreferencePhonebook(id, field, value)
         } catch (err) {
-            const errCode = err.status + ''
+            if (err) {
-            if (errCode === '422') {
+                throw err
-                // eslint-disable-next-line no-useless-catch
+            }
-                try {
+        }
-                    await addPreferencePhonebook(id, field, value)
+    }
-                } catch (innerErr) {
+}
-                    throw innerErr
+export async function setPreferencePhonebookCustomer (id, field, value) {
-                }
+    if (value === undefined || value === null || value === '' || (Array.isArray(value) && !value.length)) {
-            } else {
+        await removePreferencePhonebookCustomer(id, field)
+    } else {
+        try {
+            await replacePreferencePhonebookCustomer(id, field, value)
+        } catch (err) {
+            if (err) {
                 throw err
             }
         }
@@ -111,23 +117,16 @@ export async function removePreferencePhonebook (id, field) {
         fieldPath: field
     })
 }
-export function addPreference (id, field, value) {
+export async function removePreferencePhonebookCustomer (id, field) {
-    return new Promise((resolve, reject) => {
+    return await patchRemove({
-        patchAdd({
+        path: 'api/customerphonebookentries/' + id,
-            path: 'api/subscriberpreferences/' + id,
+        fieldPath: field
-            fieldPath: field,
-            value: value
-        }).then(() => {
-            resolve()
-        }).catch((err) => {
-            reject(err)
-        })
     })
 }
-export function addPreferencePhonebook (id, field, value) {
+export function addPreference (id, field, value) {
     return new Promise((resolve, reject) => {
         patchAdd({
-            path: 'api/subscriberphonebookentries/' + id,
+            path: 'api/subscriberpreferences/' + id,
             fieldPath: field,
             value: value
         }).then(() => {
@@ -177,6 +176,19 @@ export function replacePreferencePhonebook (id, field, value) {
         })
     })
 }
+export function replacePreferencePhonebookCustomer (id, field, value) {
+    return new Promise((resolve, reject) => {
+        patchReplace({
+            path: 'api/customerphonebookentries/' + id,
+            fieldPath: field,
+            value: value
+        }).then(() => {
+            resolve()
+        }).catch((err) => {
+            reject(err)
+        })
+    })
+}
 export function prependItemToArrayPreference (id, field, value) {
     return new Promise((resolve, reject) => {
         Promise.resolve().then(() => {
@@ -766,6 +778,24 @@ export async function getSubscriberPhonebook (options) {
     })
     return list
 }
+export async function getCustomerPhonebook (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: 'customerphonebookentries',
+        all,
+        params: options
+    })
+    return list
+}
 export async function createPhonebook (data) {
     const payLoad = {
         name: data.name,
@@ -774,15 +804,41 @@ export async function createPhonebook (data) {
     }
     return await httpApi.post('api/subscriberphonebookentries/', payLoad)
 }
+export async function createCustomerPhonebook (data) {
+    const payLoad = {
+        name: data.name,
+        number: data.number
+    }
+    return await httpApi.post('api/customerphonebookentries/', payLoad)
+}
+export async function uploadCsv (context, formData) {
+    const config = {
+        headers: {
+            'Content-Type': 'text/csv'
+        }
+    }
+    const purgeExistingValue = formData?.purge_existing ? '1' : '0'
+    await apiUploadCsv({
+        path: 'api/customerphonebookentries' + '/?purge_existing=' + purgeExistingValue + '&customer_id=' + formData.customer_id,
+        data: formData.file,
+        config
+    })
+}
 export function setValueShared (id, value) {
     return setPreferencePhonebook(id, 'shared', value)
 }
 export function setValueName (id, value) {
     return setPreferencePhonebook(id, 'name', value)
 }
+export function setValueNameCustomer (id, value) {
+    return setPreferencePhonebookCustomer(id, 'name', value)
+}
 export function setValueNumber (id, value) {
     return setPreferencePhonebook(id, 'number', value)
 }
+export function setValueNumberCustomer (id, value) {
+    return setPreferencePhonebookCustomer(id, 'number', value)
+}
 export async function getRecordingStream (fileId) {
     return await getAsBlob({
         path: 'api/callrecordingfiles/' + fileId

src/components/CscMainMenuTop.vue

@@ -210,6 +210,12 @@ export default {
                             icon: 'dialpad',
                             label: this.$t('Auto Attendant'),
                             visible: this.hasSubscriberProfileAttribute(PROFILE_ATTRIBUTE_MAP.auto_attendant)
+                        },
+                        {
+                            to: '/user/pbx-configuration/customer-phonebook',
+                            icon: 'person',
+                            label: this.$t('Customer Phonebook'),
+                            visible: true
                         }
                     ]
                 },

src/pages/CscPageCustomerPhonebook.vue

@@ -0,0 +1,228 @@
+<!-- eslint-disable vue/no-v-model-argument -->
+
+<template>
+    <csc-page-sticky
+        id="csc-page-customer-phonebook"
+    >
+        <template
+            #header
+        >
+            <q-btn
+                icon="add"
+                color="primary"
+                flat
+                :label="$t('Add Phonebook')"
+                @click="openAddPhonebook()"
+            />
+            <q-btn
+                icon="fas fa-download"
+                color="primary"
+                flat
+                :label="$t('Download CSV')"
+                @click="downloadCSV()"
+            />
+            <q-btn
+                icon="fas fa-upload"
+                color="primary"
+                flat
+                :label="$t('Upload CSV')"
+                @click="openUploadPhonebook()"
+            />
+        </template>
+        <csc-page
+            class="q-pa-lg"
+        >
+            <q-table
+                v-model:pagination="pagination"
+                class="no-shadow"
+                :columns="columns"
+                :rows="customerPhonebook"
+                :loading="$wait.is('loadCustomerPhonebook')"
+                row-key="id"
+                @request="fetchPaginatedRegistrations"
+            >
+                <template #loading>
+                    <q-inner-loading
+                        showing
+                        color="primary"
+                    >
+                        <csc-spinner />
+                    </q-inner-loading>
+                </template>
+
+                <template #top-left>
+                    <q-btn
+                        icon="refresh"
+                        size="sm"
+                        flat
+                        @click="refresh"
+                    >
+                        {{ $t('Refresh') }}
+                    </q-btn>
+                </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-popup-menu-item
+                                icon="fas fa-pen"
+                                color="primary"
+                                :label="$t('Edit')"
+                                @click="showPhonebookDetails(row)"
+                            />
+                            <csc-popup-menu-item
+                                icon="delete"
+                                color="negative"
+                                :label="$t('Delete')"
+                                @click="deleteRow(row)"
+                            />
+                        </csc-more-menu>
+                    </td>
+                </template>
+            </q-table>
+        </csc-page>
+    </csc-page-sticky>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import CscPage from 'components/CscPage'
+import CscMoreMenu from 'components/CscMoreMenu'
+import CscPopupMenuItem from 'components/CscPopupMenuItem'
+import { mapWaitingActions } from 'vue-wait'
+import CscSpinner from 'components/CscSpinner'
+import { LIST_DEFAULT_ROWS } from 'src/api/common'
+import CscPageSticky from 'components/CscPageSticky'
+export default {
+    name: 'CscPageCustomerPhonebook',
+    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', [
+            'customerPhonebook'
+        ]),
+        ...mapGetters('user', [
+            'getCustomerId'
+        ]),
+        columns () {
+            return [
+                {
+                    name: 'id',
+                    required: true,
+                    label: this.$t('Id'),
+                    align: 'left',
+                    field: row => row.id,
+                    sortable: true
+                },
+                {
+                    name: 'name',
+                    required: true,
+                    align: 'left',
+                    label: this.$t('Name'),
+                    field: row => row.name,
+                    sortable: true
+                },
+                {
+                    name: 'number',
+                    required: true,
+                    align: 'left',
+                    label: this.$t('Number'),
+                    field: row => row.number,
+                    sortable: true
+                },
+                {
+                    name: 'menu',
+                    required: true,
+                    align: 'left',
+                    label: '',
+                    sortable: true
+                }
+            ]
+        }
+    },
+    async mounted () {
+        await this.refresh()
+    },
+    methods: {
+        ...mapWaitingActions('user', {
+            loadCustomerPhonebook: 'loadCustomerPhonebook',
+            removeCustomerPhonebook: 'removeCustomerPhonebook',
+            ajaxDownloadPhonebookCSV: 'ajaxDownloadPhonebookCSV'
+        }),
+        async refresh () {
+            await this.fetchPaginatedRegistrations({
+                pagination: this.pagination
+            })
+        },
+        async fetchPaginatedRegistrations (props) {
+            const { page, rowsPerPage, sortBy, descending } = props.pagination
+            const count = await this.loadCustomerPhonebook({
+                page,
+                rows: rowsPerPage,
+                order_by: sortBy,
+                order_by_direction: descending ? 'desc' : 'asc'
+            })
+            this.pagination = { ...props.pagination }
+            this.pagination.rowsNumber = count
+        },
+        async showPhonebookDetails (row) {
+            this.$router.push('/user/pbx-configuration/customer-phonebook/' + row.id)
+        },
+        async openAddPhonebook () {
+            this.$router.push('/user/pbx-configuration/customer-phonebook/create')
+        },
+        async openUploadPhonebook () {
+            this.$router.push('/user/pbx-configuration/customer-phonebook/upload')
+        },
+        async homePageCall (row) {
+            let newnumber = ''
+            if (row.number.includes('@')) {
+                newnumber = row.number.split('@')[0]
+            } else {
+                newnumber = row.number
+            }
+            this.$router.push({
+                path: '/user/home',
+                query: { number: newnumber }
+            })
+        },
+        async deleteRow (row) {
+            this.$q.dialog({
+                title: this.$t('Delete customer phonebook'),
+                message: this.$t('You are about to delete this phonebook'),
+                color: 'negative',
+                cancel: true,
+                persistent: true
+            }).onOk(async data => {
+                await this.removeCustomerPhonebook(row)
+                await this.refresh()
+            })
+        },
+        async downloadCSV () {
+            await this.ajaxDownloadPhonebookCSV(this.getCustomerId)
+        }
+    }
+}
+</script>

src/pages/CscPageCustomerPhonebookAdd.vue

@@ -0,0 +1,138 @@
+<template>
+    <csc-page-sticky
+        id="csc-page-customer-phonebook-add"
+        ref="pageSticky"
+    >
+        <template
+            #header
+        >
+            <q-breadcrumbs
+                class="absolute-left q-ml-md text-weight-light"
+                active-color="primary"
+                separator-color="primary"
+            >
+                <q-breadcrumbs-el
+                    class="cursor-pointer"
+                    to="/user/pbx-configuration/customer-phonebook"
+                    :label="$t('Customer Phonebook')"
+                    icon="fas fa-user"
+                />
+                <q-breadcrumbs-el
+                    :label="$t('Add')"
+                />
+            </q-breadcrumbs>
+        </template>
+        <q-item
+            class="col col-xs-12"
+        >
+            <q-list
+                class="col col-xs-12"
+                side
+                top
+                no-wrap
+            >
+                <q-input
+                    v-model="formData.name"
+                    :label="$t('Name')"
+                    :error="v$.formData.name.$errors.length > 0"
+                    :error-message="nameErrorMessage"
+                    @update:model-value="v$.formData.name.$touch()"
+                />
+                <q-input
+                    v-model="formData.number"
+                    :label="$t('Number')"
+                    :error="numberError"
+                    :error-message="numberErrorMessage"
+                    @update:model-value="v$.formData.number.$touch()"
+                />
+            </q-list>
+        </q-item>
+        <div class="text-center">
+            <q-btn
+                icon="clear"
+                color="white"
+                flat
+                :label="$t('Cancel')"
+                @click="cancel"
+            />
+            <q-btn
+                icon="check"
+                :label="$t('Confirm')"
+                unelevated
+                text-color="primary"
+                @click="confirm"
+            />
+        </div>
+    </csc-page-sticky>
+</template>
+<script>
+import { required } from 'vuelidate/lib/validators'
+import { mapWaitingActions } from 'vue-wait'
+import CscPageSticky from 'components/CscPageSticky'
+import useValidate from '@vuelidate/core'
+export default {
+    name: 'CscPageCustomerPhonebookAdd',
+    components: {
+        CscPageSticky
+    },
+    validations: {
+        formData: {
+            name: {
+                required
+            },
+            number: {
+                required
+            }
+        }
+    },
+    data () {
+        return {
+            formData: this.getDefaultFormData(),
+            v$: useValidate(),
+            numberErrorMessage: '',
+            numberError: false
+        }
+    },
+    computed: {
+        nameErrorMessage () {
+            const errorsTab = this.v$.formData.name.$errors
+            if (errorsTab && errorsTab.length > 0 && errorsTab[0].$validator === 'required') {
+                return this.$t('{field} is required', {
+                    field: this.$t('Name')
+                })
+            } else {
+                return ''
+            }
+        }
+    },
+    methods: {
+        ...mapWaitingActions('user', {
+            createPhonebookCustomer: 'createPhonebookCustomer'
+        }),
+        getDefaultFormData () {
+            return {
+                name: '',
+                number: ''
+            }
+        },
+        cancel () {
+            this.$router.push('/user/pbx-configuration/customer-phonebook/')
+            this.$emit('cancel')
+        },
+        async confirm () {
+            try {
+                await this.createPhonebookCustomer(this.formData)
+                this.$router.push('/user/pbx-configuration/customer-phonebook/')
+            } catch (error) {
+                if (error.response && error.response.status === 422) {
+                    this.numberError = true
+                    this.numberErrorMessage = this.$t('This number is already in use.')
+                } else {
+                    console.error('An error occurred:', error)
+                }
+            }
+        }
+
+    }
+}
+</script>

src/pages/CscPageCustomerPhonebookDetails.vue

@@ -0,0 +1,145 @@
+<template>
+    <csc-page-sticky
+        id="csc-page-customer-phonebook-details"
+        ref="pageSticky"
+    >
+        <template
+            #header
+        >
+            <q-breadcrumbs
+                class="absolute-left q-ml-md text-weight-light"
+                active-color="primary"
+                separator-color="primary"
+            >
+                <q-breadcrumbs-el
+                    class="cursor-pointer"
+                    to="/user/pbx-configuration/customer-phonebook"
+                    :label="$t('Customer Phonebook')"
+                    icon="fas fa-user"
+                />
+                <q-breadcrumbs-el
+                    :label="name"
+                />
+            </q-breadcrumbs>
+        </template>
+        <q-item
+            class="col col-xs-12"
+        >
+            <q-list
+                class="col col-xs-12"
+                side
+                top
+                no-wrap
+            >
+                <q-input
+                    v-model="formData.name"
+                    :label="$t('Name')"
+                    @update:model-value="v$.formData.name.$touch()"
+                />
+
+                <q-input
+                    v-model="formData.number"
+                    :label="$t('Number')"
+                    :error="numberError"
+                    :error-message="numberErrorMessage"
+                    @update:model-value="v$.formData.number.$touch()"
+                />
+            </q-list>
+        </q-item>
+        <div class="text-center">
+            <q-btn
+                icon="clear"
+                color="white"
+                flat
+                :label="$t('Cancel')"
+                @click="cancel"
+            />
+            <q-btn
+                icon="check"
+                :label="$t('Confirm')"
+                unelevated
+                text-color="primary"
+                @click="confirm"
+            />
+        </div>
+    </csc-page-sticky>
+</template>
+
+<script>
+import { mapWaitingActions } from 'vue-wait'
+import { required } from 'vuelidate/lib/validators'
+import CscPageSticky from 'components/CscPageSticky'
+import useValidate from '@vuelidate/core'
+export default {
+    name: 'CscPageCustomerPhonebookDetails',
+    components: {
+        CscPageSticky
+    },
+    validations: {
+        formData: {
+            name: {
+                required
+            },
+            number: {
+                required
+            }
+        }
+    },
+    data () {
+        return {
+            id: this.$route.params.id,
+            formData: this.getDefaultFormData(),
+            v$: useValidate(),
+            numberErrorMessage: '',
+            numberError: false
+        }
+    },
+    async mounted () {
+        await this.getPhonebook(this.id)
+    },
+    methods: {
+        ...mapWaitingActions('user', {
+            getPhonebookCustomerDetails: 'getPhonebookCustomerDetails',
+            getValueNameCustomer: 'getValueNameCustomer',
+            getValueNumberCustomer: 'getValueNumberCustomer'
+        }),
+        async getPhonebook (id) {
+            const response = await this.getPhonebookCustomerDetails(id)
+            this.formData.name = response.data.name
+            this.formData.number = response.data.number
+        },
+        getDefaultFormData () {
+            return {
+                name: '',
+                number: ''
+            }
+        },
+        cancel () {
+            this.$router.push('/user/pbx-configuration/customer-phonebook/')
+            this.$emit('cancel')
+        },
+        async changeValueName () {
+            await this.getValueNameCustomer({
+                phonebookId: this.id,
+                name: this.formData.name
+            })
+        },
+        async changeValueNumber () {
+            await this.getValueNumberCustomer({
+                phonebookId: this.id,
+                number: this.formData.number
+            })
+        },
+        async confirm () {
+            try {
+                await this.changeValueNumber()
+                await this.changeValueName()
+                await this.$router.push('/user/pbx-configuration/customer-phonebook/')
+            } catch (error) {
+                this.numberError = true
+                this.numberErrorMessage = this.$t('This number is already in use.')
+            }
+        }
+    }
+}
+</script>

src/pages/CscPageCustomerPhonebookUpload.vue

@@ -0,0 +1,117 @@
+<template>
+    <csc-page-sticky
+        id="csc-page-customer-phonebook-add"
+        ref="pageSticky"
+    >
+        <template
+            #header
+        >
+            <q-breadcrumbs
+                class="absolute-left q-ml-md text-weight-light"
+                active-color="primary"
+                separator-color="primary"
+            >
+                <q-breadcrumbs-el
+                    class="cursor-pointer"
+                    to="/user/pbx-configuration/customer-phonebook"
+                    :label="$t('Upload CSV')"
+                    icon="fas fa-upload"
+                />
+            </q-breadcrumbs>
+        </template>
+        <q-item
+            class="col col-xs-12"
+        >
+            <q-list
+                class="col col-xs-12"
+                side
+                top
+                no-wrap
+            >
+                <csc-input-file
+                    accept=".csv"
+                    data-cy="sendfax-fileinput"
+                    @file-selected="toggleFileSelected"
+                />
+                <br>
+                <q-toggle
+                    v-model="formData.purge_existing"
+                    dense
+                    :label="$t('Purge existing')"
+                    data-cy="phonebook-purge"
+                    :disable="loading"
+                />
+            </q-list>
+        </q-item>
+        <div class="text-center">
+            <q-btn
+                icon="clear"
+                color="white"
+                flat
+                :label="$t('Cancel')"
+                @click="cancel"
+            />
+            <q-btn
+                icon="check"
+                :label="$t('Confirm')"
+                unelevated
+                text-color="primary"
+                @click="confirm"
+            />
+        </div>
+    </csc-page-sticky>
+</template>
+<script>
+import { required } from 'vuelidate/lib/validators'
+import { mapWaitingActions } from 'vue-wait'
+import CscPageSticky from 'components/CscPageSticky'
+import useValidate from '@vuelidate/core'
+import CscInputFile from 'components/form/CscInputFile'
+import { mapGetters } from 'vuex'
+export default {
+    name: 'CscPageCustomerPhonebookUpload',
+    components: {
+        CscPageSticky,
+        CscInputFile
+    },
+    validations: {
+        formData: {
+            file: {
+                required
+            }
+        }
+    },
+    data () {
+        return {
+            formData: this.getDefaultFormData(),
+            v$: useValidate()
+        }
+    },
+    methods: {
+        ...mapWaitingActions('user', {
+            uploadPhonebookCustomer: 'uploadPhonebookCustomer'
+        }),
+        ...mapGetters('user', [
+            'getCustomerId'
+        ]),
+        getDefaultFormData () {
+            return {
+                file: null,
+                purge_existing: false,
+                customer_id: this.getCustomerId()
+            }
+        },
+        cancel () {
+            this.$router.push('/user/pbx-configuration/customer-phonebook/')
+            this.$emit('cancel')
+        },
+        async confirm () {
+            await this.uploadPhonebookCustomer(this.formData)
+            await this.$router.push('/user/pbx-configuration/customer-phonebook/')
+        },
+        toggleFileSelected (value) {
+            this.formData.file = value
+        }
+    }
+}
+</script>

src/router/routes.js

@@ -15,6 +15,7 @@ import CscPageSpeedDial from 'src/pages/CscPageSpeedDial'
 import CscPagePbxGroups from 'src/pages/CscPagePbxGroups'
 import CscPagePbxGroupDetails from 'src/pages/CscPagePbxGroupDetails'
 import CscPagePbxSeats from 'src/pages/CscPagePbxSeats'
+import CscPageCustomerPhonebook from 'src/pages/CscPageCustomerPhonebook'
 import CscPagePbxSeatDetails from 'src/pages/CscPagePbxSeatDetails'
 import CscPagePbxDevices from 'src/pages/CscPagePbxDevices'
 import CscPagePbxCallQueues from 'src/pages/CscPagePbxCallQueues'
@@ -36,7 +37,10 @@ import CscPagePbxSettingsMsConfigs from 'pages/CscPagePbxSettingsMsConfigs'
 import CscPagePbxSettingsCallQueues from 'pages/CscPagePbxSettingsCallQueues'
 import CscPagePbxSoundSetDetails from 'src/pages/CscPagePbxSoundSetDetails'
 import CscPageSubscriberPhonebookDetails from 'src/pages/CscPageSubscriberPhonebookDetails'
+import CscPageCustomerPhonebookDetails from 'src/pages/CscPageCustomerPhonebookDetails'
 import CscPageSubscriberPhonebookAdd from 'src/pages/CscPageSubscriberPhonebookAdd'
+import CscPageCustomerPhonebookAdd from 'src/pages/CscPageCustomerPhonebookAdd'
+import CscPageCustomerPhonebookUpload from 'src/pages/CscPageCustomerPhonebookUpload'
 import CscPagePbxStatisticsCdr from 'src/pages/CscPagePbxStatisticsCdr'
 import { i18n } from 'src/boot/i18n'
 
@@ -251,6 +255,45 @@ const routes = [
                     }
                 }
             },
+            {
+                path: 'pbx-configuration/customer-phonebook',
+                component: CscPageCustomerPhonebook,
+                meta: {
+                    get title () {
+                        return i18n.global.tc('PBX Configuration')
+                    },
+                    get subtitle () {
+                        return i18n.global.tc('Customer Phonebook')
+                    }
+                }
+            },
+            {
+                path: 'pbx-configuration/customer-phonebook/create',
+                component: CscPageCustomerPhonebookAdd,
+                meta: {
+                    get title () {
+                        return i18n.global.tc('Add Phonebook')
+                    }
+                }
+            },
+            {
+                path: 'pbx-configuration/customer-phonebook/upload',
+                component: CscPageCustomerPhonebookUpload,
+                meta: {
+                    get title () {
+                        return i18n.global.tc('Upload CSV')
+                    }
+                }
+            },
+            {
+                path: 'pbx-configuration/customer-phonebook/:id',
+                component: CscPageCustomerPhonebookDetails,
+                meta: {
+                    get title () {
+                        return i18n.global.tc('Customer Phonebook')
+                    }
+                }
+            },
             {
                 path: 'pbx-configuration/seat/:id',
                 component: CscPagePbxSeatDetails,

src/store/user.js

@@ -15,12 +15,17 @@ import {
     getBrandingLogo,
     getSubscriberRegistrations,
     getSubscriberPhonebook,
+    getCustomerPhonebook,
     getSubscriberProfile,
     setValueShared,
     setValueName,
+    setValueNameCustomer,
+    setValueNumberCustomer,
     setValueNumber,
     changeSIPPassword,
     createPhonebook,
+    createCustomerPhonebook,
+    uploadCsv,
     getNcosLevels,
     getNcosSet,
     getPreferences,
@@ -37,7 +42,8 @@ import { setLocal } from 'src/storage'
 import { getSipInstanceId } from 'src/helpers/call-utils'
 import { PROFILE_ATTRIBUTE_MAP } from 'src/constants'
 import {
-    httpApi
+    httpApi,
+    apiDownloadFile
 } from 'src/api/common'
 
 export default {
@@ -68,6 +74,7 @@ export default {
         defaultBranding: {},
         subscriberRegistrations: [],
         subscriberPhonebook: [],
+        customerPhonebook: [],
         phonebookMap: {},
         platformInfo: null,
         qrCode: null,
@@ -289,6 +296,9 @@ export default {
         setSubscriberPhonebook (state, value) {
             state.subscriberPhonebook = value
         },
+        setCustomerPhonebook (state, value) {
+            state.customerPhonebook = value
+        },
         setProfile (state, value) {
             state.profile = value
         },
@@ -433,12 +443,45 @@ export default {
                 throw err
             }
         },
+        async loadCustomerPhonebook ({ commit, dispatch, state, rootGetters }, options) {
+            try {
+                const list = await getCustomerPhonebook({
+                    ...options
+                })
+                commit('setCustomerPhonebook', list.items)
+                return list.totalCount
+            } catch (err) {
+                commit('setCustomerPhonebook', [])
+                throw err
+            }
+        },
+        async ajaxDownloadPhonebookCSV ({ commit }, customerId = 0) {
+            const apiGetOptions = {
+                resource: 'customerphonebookentries',
+                config: {
+                    headers: {
+                        Accept: 'text/csv'
+                    },
+                    params: {
+                        customer_id: customerId
+                    }
+                }
+            }
+            await apiDownloadFile({
+                apiGetOptions,
+                defaultFileName: 'customer_phonebook_entries.csv',
+                defaultContentType: 'text/csv'
+            })
+        },
         async removeSubscriberRegistration (context, row) {
             await httpApi.delete('api/subscriberregistrations/' + row.id)
         },
         async removeSubscriberPhonebook (context, row) {
             await httpApi.delete('api/subscriberphonebookentries/' + row.id)
         },
+        async removeCustomerPhonebook (context, row) {
+            await httpApi.delete('api/customerphonebookentries/' + row.id)
+        },
         async getNcosLevelsSubscriber () {
             const ncosLevel = []
             const list = await getNcosLevels()
@@ -478,6 +521,10 @@ export default {
             const list = await httpApi.get('api/subscriberphonebookentries/' + id)
             return list
         },
+        async getPhonebookCustomerDetails (context, id) {
+            const list = await httpApi.get('api/customerphonebookentries/' + id)
+            return list
+        },
         async getValueShared (context, options) {
             await setValueShared(options.phonebookId, options.shared)
         },
@@ -488,12 +535,24 @@ export default {
         async getValueName (context, options) {
             await setValueName(options.phonebookId, options.name)
         },
+        async getValueNameCustomer (context, options) {
+            await setValueNameCustomer(options.phonebookId, options.name)
+        },
         async getValueNumber (context, options) {
             await setValueNumber(options.phonebookId, options.number)
         },
+        async getValueNumberCustomer (context, options) {
+            await setValueNumberCustomer(options.phonebookId, options.number)
+        },
         async createPhonebookSubscriber (context, data) {
             await createPhonebook(data)
         },
+        async createPhonebookCustomer (context, data) {
+            await createCustomerPhonebook(data)
+        },
+        async uploadPhonebookCustomer (context, data) {
+            await uploadCsv(context, data)
+        },
         async fetchAuthToken ({ commit, state, getters }, expiringTime = 300) {
             const subscriber = state.subscriber
             const expireDate = date.addToDate(new Date(), { seconds: expiringTime })

yarn.lock

@@ -4198,7 +4198,7 @@ consolidate@0.16.0:
   dependencies:
     bluebird "^3.7.2"
 
-content-disposition@0.5.4, content-disposition@^0.5.2:
+content-disposition@0.5.4, content-disposition@^0.5.2, content-disposition@^0.5.4:
   version "0.5.4"
   resolved "https://npm-registry.sipwise.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
   integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
@@ -9801,6 +9801,14 @@ path-type@^4.0.0:
   resolved "https://npm-registry.sipwise.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+path@0.12.7:
+  version "0.12.7"
+  resolved "https://npm-registry.sipwise.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 pathval@^1.1.1:
   version "1.1.1"
   resolved "https://npm-registry.sipwise.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
@@ -10216,7 +10224,7 @@ process-nextick-args@~2.0.0:
   resolved "https://npm-registry.sipwise.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.10:
+process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://npm-registry.sipwise.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
@@ -12207,6 +12215,13 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://npm-registry.sipwise.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://npm-registry.sipwise.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 utila@~0.4:
   version "0.4.0"
   resolved "https://npm-registry.sipwise.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"