@kmhgmbh/dialer-vue-components
v1.0.2
Published
VueJS components for telephony and dialer functions
Downloads
356
Readme
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"
: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