[IMPROVE] Filter agents with autocomplete input instead of select element (#13730)

Closes #13728

app/livechat/client/views/app/livechatCurrentChats.html

@@ -9,12 +9,7 @@
 
 				<div class="form-group">
 					<label for="agent">{{_ "Served_By"}}</label>
-					<select name="agent">
-						<option value=""></option>
-						{{#each agents}}
-							<option value="{{_id}}">{{username}}</option>
-						{{/each}}
-					</select>
+					{{> inputAutocomplete settings=agentAutocompleteSettings id="agent" class="rc-input__element" autocomplete="off"}}
 				</div>
 				<div class="form-group">
 					<label for="status">{{_ "Status"}}</label>
@@ -57,11 +52,11 @@
 								{{#if isClosed}}
 									<td><a href="#remove" class="remove-livechat-room"><i class="icon-trash"></i></a></td>
 								{{else}}
-									<td>&nbsp;</td>	
-								{{/if}}	
-							{{else}}						
+									<td>&nbsp;</td>
+								{{/if}}
+							{{else}}
 								<td>&nbsp;</td>
-							{{/requiresPermission}}									
+							{{/requiresPermission}}
 						</tr>
 					{{/each}}
 				</tbody>

app/livechat/client/views/app/livechatCurrentChats.js

@@ -3,9 +3,8 @@ import { Mongo } from 'meteor/mongo';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
-import { modal } from '../../../../ui-utils';
-import { t, handleError } from '../../../../utils';
-import { AgentUsers } from '../../collections/AgentUsers';
+import { modal } from '/app/ui-utils';
+import { t, handleError } from '/app/utils';
 import _ from 'underscore';
 import moment from 'moment';
 
@@ -27,12 +26,27 @@ Template.livechatCurrentChats.helpers({
 	status() {
 		return this.open ? t('Opened') : t('Closed');
 	},
-	agents() {
-		return AgentUsers.find({}, { sort: { name: 1 } });
-	},
 	isClosed() {
 		return !this.open;
 	},
+	agentAutocompleteSettings() {
+		return {
+			limit: 10,
+			inputDelay: 300,
+			rules: [{
+				collection: 'UserAndRoom',
+				subscription: 'userAutocomplete',
+				field: 'username',
+				template: Template.userSearch,
+				noMatchTemplate: Template.userSearchEmpty,
+				matchAll: true,
+				selector(match) {
+					return { term: match };
+				},
+				sort: 'username',
+			}],
+		};
+	},
 });
 
 Template.livechatCurrentChats.events({
@@ -64,6 +78,10 @@ Template.livechatCurrentChats.events({
 			delete filter.to;
 		}
 
+		if (!_.isEmpty(instance.selectedAgent.get())) {
+			filter.agent = instance.selectedAgent.get();
+		}
+
 		instance.filter.set(filter);
 		instance.limit.set(20);
 	},
@@ -95,14 +113,22 @@ Template.livechatCurrentChats.events({
 			});
 		});
 	},
+	'autocompleteselect input[id=agent]'(event, template, agent) {
+		template.selectedAgent.set(agent._id);
+	},
+
+	'input [id=agent]'(event, template) {
+		const input = event.currentTarget;
+		if (input.value === '') {
+			template.selectedAgent.set();
+		}
+	},
 });
 
 Template.livechatCurrentChats.onCreated(function() {
 	this.limit = new ReactiveVar(20);
 	this.filter = new ReactiveVar({});
-
-	this.subscribe('livechat:agents');
-
+	this.selectedAgent = new ReactiveVar;
 	this.autorun(() => {
 		this.subscribe('livechat:rooms', this.filter.get(), 0, this.limit.get());
 	});