MT#63089 Match the calling/called number into the phonebook

For outgoing or incoming calls show the
name saved in the phonebook (if it exists).
Note when retrieving phonebook entries
we always return the first entry.
As a result of that:
- if there are duplicates we only show
  one name.
- if there isn't an exact match, as per
today, it won't find any entries.

Change-Id: I5c4307b8e22e6bc65f8efe159867d462d72f0d0d

src/api/call.js

@@ -0,0 +1,8 @@
+import { getList } from 'src/api/common'
+
+export async function fetchPhonebookEntries (number) {
+    return getList({
+        resource: 'subscriberphonebookentries',
+        params: { number }
+    })
+}

src/boot/ngcp-call.js

@@ -53,9 +53,8 @@ export default async ({ app, store }) => {
     callEvent.on('outgoingEnded', callFailed)
     callEvent.on('incomingEnded', callFailed)
     callEvent.on('incoming', (session) => {
-        store.commit('call/incomingCall', {
-            number: _.get(session, 'remote_identity.uri.user', 'Unknown')
-        })
+        const number = _.get(session, 'remote_identity.uri.user', 'Unknown')
+        store.dispatch('call/processIncomingCall', number)
     })
     callEvent.on('localStream', (stream) => {
         if (store.state.call.microphoneEnabled) {

src/components/call/CscCall.vue

@@ -47,21 +47,21 @@
                             <span
                                 v-if="isInitiating"
                             >
-                                {{ $t('Calling {number}...', {number: callNumberFormatted || callNumberQuery }) }}</span>
+                                {{ $t('Calling {number}...', { number: callDisplayName}) }}</span>
                             <span
                                 v-else-if="isRinging"
                             >
-                                {{ $t('Ringing at {number}...', {number: callNumberFormatted || callNumberQuery }) }}</span>
+                                {{ $t('Ringing at {number}...', { number: callDisplayName}) }}</span>
                             <span
                                 v-else-if="isIncoming"
                             >
-                                {{ $t('Incoming call from {number}...', {number: callNumberFormatted || callNumberQuery }) }}</span>
+                                {{ $t('Incoming call from {number}...', { number: callDisplayName}) }}</span>
                         </div>
                         <div
                             v-else-if="isEnded"
                             class="csc-call-error"
                         >
-                            {{ $filters.startCase(endedReason) }} ({{ callNumberFormatted || callNumberQuery }})
+                            {{ $filters.startCase(endedReason) }} ({{ callDisplayName }})
                         </div>
                     </div>
                 </div>
@@ -86,7 +86,7 @@
                         size="24px"
                     />
                     <div>
-                        {{ $t('In call with {number}', {number: callNumberFormatted || callNumberQuery }) }}
+                        {{ $t('In call with {number}', { number: callDisplayName}) }}
                     </div>
                     <q-btn
                         v-if="!dialpadOpened"
@@ -181,7 +181,7 @@
                         class="q-mr-sm"
                         round
                         size="large"
-                        :disable="islocalOnHold || isremoteOnHold || transferEnabled"
+                        :disable="isLocalOnHold || isRemoteOnHold || transferEnabled"
                         @click="toggleHold()"
                     />
 
@@ -193,7 +193,7 @@
                         text-color="dark"
                         round
                         size="large"
-                        :disable="islocalOnHold || isremoteOnHold"
+                        :disable="isLocalOnHold || isRemoteOnHold"
                         @click="initiateTransfer()"
                     />
                 </div>
@@ -323,7 +323,7 @@
                         <div
                             class="csc-call-info-number"
                         >
-                            {{ callNumberFormatted || callNumberQuery }}
+                            {{ callDisplayName }}
                         </div>
                     </div>
                 </div>
@@ -339,7 +339,7 @@
                     <div
                         class="csc-call-info-number"
                     >
-                        {{ callNumberFormatted || callNumberQuery }}
+                        {{ callDisplayName }}
                     </div>
                 </div>
             </div>
@@ -367,7 +367,7 @@
 <script>
 import CscCallDialpad from 'components/CscCallDialpad'
 import CscMedia from 'components/CscMedia'
-import numberFormat, { normalizeDestination } from 'src/filters/number-format'
+import { normalizeDestination } from 'src/filters/number-format'
 import { showCallNotification } from 'src/helpers/ui'
 import platformMixin from 'src/mixins/platform'
 import { CallStateTitle } from 'src/store/call/common'
@@ -391,6 +391,10 @@ export default {
             type: String,
             required: true
         },
+        phonebookEntryName: {
+            type: String,
+            required: true
+        },
         numberInput: {
             type: String,
             required: true
@@ -548,6 +552,9 @@ export default {
         callNumberQuery () {
             return normalizeDestination(this.$route.query.number)
         },
+        callDisplayName () {
+            return this.phonebookEntryName || this.callNumberFormatted || this.callNumberQuery
+        },
         iconToggleMicrophone () {
             if (this.microphoneEnabled) {
                 return 'mic'
@@ -608,10 +615,10 @@ export default {
         isNumberInputDefined () {
             return this.numberInput !== '' && this.numberInput !== null
         },
-        islocalOnHold () {
+        isLocalOnHold () {
             return this.localOnHold
         },
-        isremoteOnHold () {
+        isRemoteOnHold () {
             return this.remoteOnHold
         }
     },
@@ -620,12 +627,19 @@ export default {
             if (state === 'ringing' || state === 'incoming') {
                 this.playCallSound()
                 if (state === 'incoming') {
-                    showCallNotification(numberFormat(this.callNumber))
+                    showCallNotification(this.callDisplayName)
                 }
             } else {
                 this.stopCallSound()
             }
         },
+        phonebookEntryName (name, oldName) {
+            if (oldName !== name) {
+                this.$nextTick(() => {
+                    showCallNotification(name)
+                })
+            }
+        },
         closed (closed) {
             if (closed && this.$refs.startButton) {
                 this.$refs.startButton.hide()

src/layouts/CscLayoutMain.vue

@@ -190,6 +190,7 @@
             ref="call"
             :call-state="callState"
             :call-number="number"
+            :phonebook-entry-name="phonebookEntryName"
             :number-input="numberInput"
             :ended-reason="endedReason"
             :full-view="isFullView"
@@ -313,6 +314,7 @@ export default {
             'callState',
             'number',
             'numberInput',
+            'phonebookEntryName',
             'endedReason',
             'localMediaStream',
             'remoteMediaStream',
@@ -445,7 +447,7 @@ export default {
             return ''
         },
         callNumberFormatted () {
-            return normalizeDestination(this.number)
+            return this.phonebookEntryName || normalizeDestination(this.number)
         },
         callEndedReasonFormatted () {
             return startCase(this.endedReason)

src/store/call/actions.js

@@ -1,4 +1,5 @@
 import { i18n } from 'boot/i18n'
+import { fetchPhonebookEntries } from 'src/api/call'
 import {
     callAccept,
     callAddCamera,
@@ -26,6 +27,7 @@ let errorVisibilityTimer = null
 export default {
     async start (context, localMedia) {
         const number = context.getters.callNumberInput.replaceAll('(', '').replaceAll(')', '').replaceAll(' ', '').replaceAll('-', '')
+        context.dispatch('fetchPhonebookEntryName', number)
         context.commit('startCalling', number)
         const isStarted = await callStart({
             number,
@@ -38,6 +40,23 @@ export default {
             showGlobalError(i18n.global.t('No microphone authorized.'))
         }
     },
+    async fetchPhonebookEntryName (context, number) {
+        try {
+            const phoneBookEntryArray = await fetchPhonebookEntries(number)
+            const phoneBookEntry = phoneBookEntryArray?.items[0] || null
+            if (phoneBookEntry) {
+                context.commit('fetchPhonebookEntrySuccess', phoneBookEntry.name)
+            }
+        } catch (err) {
+            context.commit('fetchPhonebookEntryFailure')
+        }
+    },
+    async processIncomingCall (context, number) {
+        await context.dispatch('fetchPhonebookEntryName', number)
+        context.commit('incomingCall', {
+            number
+        })
+    },
     async accept (context, localMedia) {
         await callAccept({
             localMedia

src/store/call/mutations.js

@@ -70,6 +70,7 @@ export default {
         state.remoteVideoEnabled = false
         state.localMediaStream = null
         state.remoteMediaStream = null
+        state.newPhonebookEntryName = null
     },
     toggleMicrophone (state, enabled) {
         state.microphoneEnabled = enabled
@@ -129,5 +130,11 @@ export default {
         } else {
             state.transferEnabled = false
         }
+    },
+    fetchPhonebookEntrySuccess (state, phonebookEntryName) {
+        state.phonebookEntryName = phonebookEntryName
+    },
+    fetchPhonebookEntryFailure (state) {
+        state.phonebookEntryName = null
     }
 }

src/store/call/state.js

@@ -6,6 +6,7 @@ export default {
     endedReason: null,
     callState: CallState.input,
     number: '',
+    phonebookEntryName: null,
     numberInput: '',
     localMediaStream: null,
     remoteMediaStream: null,