Dialer Vue Components

VueJS components for telephony and dialer functions.

Documentation

The documentation for the Dialer Vue Components can be found at Confluence.

Project structure

The project is structured as follows:

• ./docs - documentation in markdown format
• ./public - public assets for the HTML generation
• ./src - source code
• ./tests - unit test specs files

Prerequisites

node version 18.0.0 is required

Development

Initial setup

npm install

Start frontend

The following command starts the vite runner with file watcher

npm run dev

Unit tests

Starting unit tests with file watcher. The code coverage threshold is set to be >= 90%

npm run test:unit

Linting

Starts linter with default settings

npm run lint

Fixing the linting issues

npm run lint:fix

Tips and tricks

• Recomended IDE for this project is Visual Studio Code. Download

Usage

The dialer-vue-component can be used directly by initial the telephoneAdapter (globalProperties or inject) and execute the certain functions. It is also possible to use the call-controller vue componente which provides an UI with all necessary functions to connect, call, hangup ect.

Direct Use

To use the plugin it is necessary to provide a type (e.g. 'hermes') so that the correct adapter will be used.

app.use(plugin, { type: "hermes" });

The telephony adapter can be used via globalProperties as well as via inject (Vue3 provide/inject).

const telephonyAdapter = getCurrentInstance()?.appContext.config.globalProperties.$telephonyAdapter;

or

const telephonyAdapter = inject('telephonyAdapter');

Following functions are available:

setConfig(config: any): void Set the necessary settings to be able to connect to the phone system

init(isLoggingEnabled: boolean): void

Initial the connection to the phone system Logging can be activated/disabled by parameter (per default deactivated)

login(username: string, password: string, extension: string): void

Logs in the client to the phone system All parameters are necessary

logout(): void

Logs out the client

call(phonennumber: string): void

Starts the call

hangup(): void

Stops the call

getSessionId(): string

Provides the current session id when a call is in place

getManualCampaigns(): {id: string, description: string}[]

Provides the manual campaigns Client must be logged in

setManualCamapaign({id: string, description: string}): void

Set a manual camapaign Client must be logged in

getState(): string

Provides the current adapter state

startRecording(filaName: string): void

Starts the recording Client must be logged in filename (path) must be provided

stopRecording(): void

Stops the recording

Vue Component Use

app.use(plugin, { type: "hermes" });

<call-controller
  :type="hermes"
  :config="config"
  :credentials="{
    username: 'test',
    password: 'test'
  }"
  :campaign="{
    id: 'campaingId'
    description: 'campaignDescription'
  }"
  :snackbarActive="true"
  :isIframe="true"
  :snackbarActive="true"
  :isLoggingEnabled="true"
  @status="forwardStatusFunc"
  @error="forwardErrorFunc"
/>

Listen to Events

The plugin provides events on which you can listen, to start deticated actions. To listen to the events, just use the on() function following by the event type

telephonyAdapter.on('ERROR', (message: string) => {
  setNotification(message);
})

Notifications

Per default the vue componente has a (toast) notification for the upcoming errors. This can be switch on/off via snackbarActive prop.

Possible Event Types

LOGGED_IN User logged in

LOGGED_OUT User logged out

CONNECTED The plugin is connected to the phone system

DISCONNECTED The plugin is disconnected from the phone system

SESSION_START Call is established and session is generated

SESSION_END End of the call

RECORD_START Recording of the current call session started

RECORD_STOP Recording of the current call session ended

ERROR Error was detected