dialer-reports v1.0.0

Required Modules

1. Angular 1.4.8. npm install angular@1.4.8. JS
   • Also Angular Animate 1.4.8 and Angular Sanitize 1.4.8
2. jQuery. I will soon be removing this, because we can easily run the module without it. JS
3. D3. npm install d3. JS
4. nvd3. npm install angular-nvd3. JS CSS
5. bowser. npm install bowser. JS
6. lodash. npm install lodash. JS
7. moment. npm install moment. JS
8. Angular Ui Select. npm install angular-ui-select. JS CSS
9. Angular Strap. npm install angular-strap. JS
10. Angular Busy. npm install angular-busy. JS CSS
11. Angular nvd3. npm install angular-nvd3. JS
12. Angular Ui Router. npm install angular-ui-router. JS
13. Angular Local Storage. npm install angular-local-storage. JS
14. Angular Ui Grid. npm install angular-ui-grid. JS CSS
15. Angular Timer. npm install angular-timer. JS
    • Requires humanize-duration. npm install humanize-duration. JS
16. Bootstrap Additions. npm install bootstrap-additions. CSS

To use

1. Include the require modules
2. Include the files in 'dist'.

3. Inject vlfy.dialerReports into your app

   angular.module('myApp', [
   	vlfy.dialerReports
   ]);

Overriding Local Storage Prefix

angular.module('myApp', [vlfy.dialerReports])
	.config(myAppConfig);

function myAppConfig(localStorageServiceProvider) {
  localStorageServiceProvider.setPrefix('myLocalStoragePrefix');
}

UI Items

Loader

Put cg-busy="dialerDashLoadingPromise" on any page wrapper in which you want the dialer dashboard loader to appear.

Eg:

<div cg-busy="dialerDashLoadingPromise">
	<h1>My Dash Call History Page!</h1>
	<dash-call-history></dash-call-history>
</div>

Alert Box

If you would like there to be an alert box on the page, be sure to include a container with the class dd-alert-container.

Eg:

<div class="dd-alert-container"></div>

Call History

Very easy. Includes nothing specific except the title.

Eg:

<dash-call-history></dash-call-history>

Users

User Summary/User List

Added a scope function that looks like this: on-user-click="onUserClick(agentId, agentName, groupName, pageState, groupId, searchParams)"

This will give you all the parameters that you should need to go to the next page - ie: the clicked agentId, agentName, groupName, pageState, groupId and searchParams. Others can easily be added if necessary, as follows:

<dash-users 
	on-user-click="onUserClick(agentId, agentName, groupName, pageState, groupId, searchParams)">		
</dash-users>

Parameters:

User Details

The backbutton is added on the back, outside of the directive. Again, this is to avoid the weird mapping of routes.

The information is injected into the directive is done though scope parameters. We personally first tied the $stateParams to the scope to get these, but you can do this in any way you would like.

Eg:

<dash-user-detail 
	agent-id="userDetails.agentId" 
	agent-name="userDetails.user" 
	group-name="userDetails.groupName" 
	group-id="userDetails.groupId">	
</dash-user-detail>

Parameters:

Agents

Agent Status/Agent List

This requires one parameter, on-agent-select, which will fire when you click on an agent.

The parameter will look as follows: on-agent-select="onAgentSelect(agent)". It will return the agent on which the user clicked.

As shown in the code, you can then use your own custom code to open the sidepanel to avoid platform conflicts.

Eg:

<agent-status 
	on-agent-select="onAgentSelect(agent)"
	page-info-alert-container=".dd-alert-container"
	error-alert-container=".error-alert-container"
	show-live-agent-footer="false"
	>		
</agent-status>

You should structure it so that onAgentSelect() opens the sidebar.

Parameters:

Agent Detail

This is the trickiest one. In order to provide the most flexibility, this is seperated from any sidebar functionality. This preserves the functionality of the detail page, regardless of future changes. This way, major changes to the ui should not dramatically change the module functionality. It also ensures that we would be able to show this in other places - eg: in modals or separate pages.

The inner content is transcluded, so you are able to put things inside:

<live-agent-detail>
	<p>Some inner content!</p>
</live-agent-detail>

In order to access the data, put a directive as the first child:

<live-agent-detail>
	<my-directive></my-directive>
</live-agent-detail>

This directive exposes a controller, which contains all the data. Note how to access it in the below directive:

angular.module('myModule')
	.directive('myDirective', myDirective);

function myDirective() {
	return {
		require: "^liveAgentDetail",
		link: link
	};

	function link(scope, element, attrs, liveAgent) {
		scope.liveAgent = liveAgent;
	}
}

In order to reference the relative agent, bind the agent to the controller through the scope, or inject it (<live-agent-detail agent="agent">). If the requesting agent id is not bound server side (as it is in LM), bind the requesting agent id to the controller through the scope, or inject it (<live-agent-detail requesting-agent-id="myId">). In order to get data on every poll, bind a function called onLiveAgentPoll to the controller.

angular.module('myModule')
	.directive('myDirective', myDirective);

function myDirective() {
	return {
		require: "^liveAgentDetail",
		link: link
	};

	function link(scope, element, attrs, liveAgent) {
		liveAgent.agent = scope.agent;
		liveAgent.requestingAgentId = scope.myId;
		liveAgent.onLiveAgentPoll = onLiveAgentPoll;

		function onLiveAgentPoll(resp) {
			console.log("I am the response from the poll -->", resp);
		}
	}
}

Module with all available parameters:

<live-agent-detail
	agent="agent"
	requesting-agent-id="myId"
	>
</live-agent-detail>

Parameters: | Name | Type | Default | Description | Example | | ------------- |-------------| -------- | ----------- | ----------| | agent| bindable "="|| The agent the for which the detail page will populate info | agent="agent"| | requestingAgentId | bindable "="|| The id of the current user (or agent) | requesting-agent-id="myId"|

Agent Detail Sub-directives

Header

The agent detail header will show the top part of the agent detail component.

The inner content is transcluded, so you are able to put things inside:

<live-agent-detail-header>
	<p>Some inner header content!</p>
</live-agent-detail-header>

The inside text will appear below the default header content.

Module with all available parameters:

<live-agent-detail-header
	agent-details="liveAgent" 
	show-monitor-btn="showMonitor" 
	is-monitor-connecting="isMonitorConnecting" 
	is-monitor-disabled="!isMonitorEnabled" 
	on-monitor-click="myMonitorFunction()" 
	monitor-btn-text="{{monitorButtonText}}" 
	monitor-loading-img="http://myimage.jpg" 
	monitor-error-msg="I made a boo boo :("
	show-default-header="false"
	>
</live-agent-detail-header>

Parameters: | Name | Type | Default | Description | Example | | ------------- |-------------| -------- | ----------- | ----------| | agentDetails| bindable "="|| The controller from <live-agent-detail></live-agent-detail> (liveAgent) | agent-details="liveAgent"| | showMonitorBtn | bindable "="||| show-monitor-btn="showMonitor"| | isMonitorConnecting| bindable "="||| is-monitor-connecting="isMonitorConnecting"| | isMonitorDisabled| bindable "="||| is-monitor-disabled="!isMonitorEnabled"| | onMonitorClick| function|| runs the function when the monitor btn is clicked| on-monitor-click="myMonitorFunction()"| | monitorBtnText| string "@"||| monitor-btn-text="Monitor Me!"| | monitorErrorMsg| string "@"|| This will always show when it is populated, so only populate it if there IS an error| monitor-error="I made a boo boo :("| | monitorLoadingImg| string "@"||| monitor-loading-img="http://myimage.jpg"| | showDefaultHeader| string "@"| true | If false, will show none of the header inner html, and you can fill it with your own content. | show-default-header="false"|

Body

The agent detail body will show the bottom part of the agent detail component.

<live-agent-detail-body>
	<p>Some inner body content!</p>
</live-agent-detail-body>

The inside text will appear below the default body content.

Module with all available parameters:

<live-agent-detail-body
	agent-details="liveAgent" 
	show-default-body="true"
	show-default-timeline="false"
	show-campaign="false"
	show-call-type="true"
	>
</live-agent-detail-body>

Parameters: | Name | Type | Default | Description | Example | | ------------- |-------------| -------- | ----------- | ----------| | agentDetails| bindable "="|| The controller from <live-agent-detail></live-agent-detail> (liveAgent) | agent-details="userDetails.agentId"| | showDefaultBody| string "@"| true | If false, will show none of the body inner html, and you can fill it with your own content. | show-default-body="false"| | showDefaultTimeline| string "@"| true | If false, it will not show the timeline (will not show either way if showDefaultBody is false) | show-default-timeline="false"| | showCampaign| string "@"| true | If false, it will not show the campaign | show-campaign="false"| | showCallType| string "@"| true | If false, it will not show the call type | show-call-type="false"|

Searchbar Filters

When a dropdown selection in the searchbar changes, the consumer is responsible for handling the event.

You need to provide a function pointer to onSearchFilter:

<dash-call-history on-search-filter="onSearchFilter(searchType, searchItem, searchModel)"></dash-call-history>

And inside the function, do whatever you need to do.

function onSearchFilter(searchType, searchItem, searchModel) {
	if (searchType === 'agentName') {
		onAgentSelected(searchItem.value, searchItem.name, searchItem.groupName, searchItem.pageState, searchItem.searchParams);
	}
}