Add empty item in agents table

app.js

@@ -792,6 +792,11 @@ var app = {
 	settingsQueueAgentsPanelExtractAgentsData: function(selectedAgentsIdList, usersList) {
 		// fill agents list
 		var agentsList = [];
+
+		if(!selectedAgentsIdList) {
+			return agentsList;
+		}
+
 		for(var a=0, alen= selectedAgentsIdList.length; a<alen; a++) {
 			for(var u=0, ulen= usersList.length; u<ulen; u++) {
 				if(selectedAgentsIdList[a] === usersList[u].id) {
@@ -862,19 +867,11 @@ var app = {
 					.replace('{{id}}', userId)
 					.replace('{{name}}', userName);
 
-
+			$agentsList.find('.js-empty-item').remove();
 			$agentsList.append(userItemHTML);
 			self.settingsQueueAgentsPanelBindEvents($agentsList);
 			self.settingsQueueAgentsPanelUpdateUserTable();
 		}).addClass(handledClass);
-
-		$parent.find('.js-edit-user').not('.js-handled').on('click', function(e) {
-			e.preventDefault();
-
-			// TODO: open popup with user settings for editing
-
-			$(this).addClass('js-handled');
-		}).addClass(handledClass);
 	},
 
 	settingsQueueAgentsPanelUpdateUserTable: function() {
@@ -910,7 +907,7 @@ var app = {
 			columnDefs: [
 				{
 					targets: 0,
-					width: '5%'
+					width: '4%'
 				},
 				{
 					targets  : 'no-sort',
@@ -952,7 +949,7 @@ var app = {
 			console.log(data);
 
 			var agentsIdList = [];
-			$('#queue-agents-list').find('li').each(function(i, el) {
+			$('#queue-agents-list').find('li[data-user-id]').each(function(i, el) {
 				var userId = $(el).data('user-id');
 				if(userId) {
 					agentsIdList.push(userId);

style/app.scss

@@ -1000,6 +1000,10 @@
         a i.fa {
             font-size: 17px;
         }
+
+        li.empty-item {
+            list-style-type: none;
+        }
     }
 
     table .mini-btn {

views/settings_queue_agents.html

@@ -3,14 +3,18 @@
 		<div class="agents-list-wrapper well-list">
 			<h3>Selected</h3>
 			<ul id="queue-agents-list">
-				{{#each this.agents}}
-					<li data-user-id="{{ id }}">
-						<span class="item-name">{{ first_name }} {{ last_name }}</span>
-						<a href="#" class="js-remove-agent remove-agent-btn">
-							<i class="fa fa-remove"></i>
-						</a>
-					</li>
-				{{/each}}
+				{{#if this.agents}}
+					{{#each this.agents}}
+						<li data-user-id="{{ id }}">
+							<span class="item-name">{{ first_name }} {{ last_name }}</span>
+							<a href="#" class="js-remove-agent remove-agent-btn">
+								<i class="fa fa-remove"></i>
+							</a>
+						</li>
+					{{/each}}
+				{{else}}
+					<li class="js-empty-item empty-item">None</li>
+				{{/if}}
 			</ul>
 		</div>
 	</div>
@@ -18,7 +22,7 @@
 		<table id="queue-users-table" class="table table-condensed table-striped table-hover">
 			<thead>
 				<tr>
-					<th class="no-sort">Actions</th>
+					<th class="no-sort">Add</th>
 					<th>User Name</th>
 				</tr>
 			</thead>
@@ -29,9 +33,6 @@
 					<a href="#" class="mini-btn js-add-agent add-agent-btn">
 						<i class="fa fa-arrow-left"></i>
 					</a>
-					<a href="#" class="mini-btn js-edit-user edit-agent-btn">
-						<i class="fa fa-pencil-square-o"></i>
-					</a>
 				</td>
 				<td class="js-user-name">{{ first_name }} {{ last_name }}</td>
 			</tr>