# Dialer Vue Components

VueJS components for telephony and dialer functions.

## Documentation

The documentation for the Dialer Vue Components can be found at [Confluence](https://kmhgmbh.atlassian.net/l/cp/V0fWa8B1).

## 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](https://code.visualstudio.com/)


## 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*