Add filter to current livechats screen

.eslintrc

@@ -67,7 +67,7 @@
 		"curly": [2, "all"],
 		"eqeqeq": [2, "allow-null"],
 		"new-cap":  [2, {
-			"capIsNewExceptions": ["Match.Optional"]
+			"capIsNewExceptions": ["Match.Optional", "Match.Maybe"]
 		}],
 		"use-isnan": 2,
 		"valid-typeof": 2,

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1077,6 +1077,7 @@
   "Send_welcome_email" : "Send welcome email",
   "Send_your_JSON_payloads_to_this_URL" : "Send your JSON payloads to this URL.",
   "Sending" : "Sending...",
+  "Served_By" : "Served By",
   "Service" : "Service",
   "Set_as_moderator" : "Set as moderator",
   "Set_as_owner" : "Set as owner",
@@ -1140,6 +1141,7 @@
   "Statistics" : "Statistics",
   "Statistics_reporting" : "Send statistics to Rocket.Chat",
   "Statistics_reporting_Description" : "By sending your statistics, you'll help us identify how many instances of Rocket.Chat are deployed, as well as how good the system is behaving, so we can further improve it. Don't worry, as no user information is sent and all the information we receive is kept confidential.",
+  "Status" : "Status",
   "Stats_Active_Users" : "Active Users",
   "Stats_Avg_Channel_Users" : "Average Channel Users",
   "Stats_Avg_Private_Group_Users" : "Average Private Group Users",

packages/rocketchat-i18n/i18n/pt.i18n.json

@@ -988,6 +988,7 @@
   "Send_welcome_email" : "Enviar e-mail de boas-vindas",
   "Send_your_JSON_payloads_to_this_URL" : "Envie seu payload  JSON para esta URL.",
   "Sending" : "Enviando ...",
+  "Served_By" : "Atendido Por",
   "Service" : "Serviço",
   "Set_as_moderator" : "Definir como moderador",
   "Set_as_owner" : "Definir como proprietário",
@@ -1038,6 +1039,7 @@
   "Statistics" : "Estatísticas",
   "Statistics_reporting" : "Enviar estatísticas para Rocket.Chat",
   "Statistics_reporting_Description" : "Ao enviar suas estatísticas, você vai nos ajudar a identificar quantas instâncias de Rocket.Chat são implantadas, bem como o quão bom o sistema está se comportando, para que possamos melhorar ainda mais isso. Não se preocupe, pois nenhuma informação de usuário é enviado e toda a informação que recebemos é mantida em sigilo.",
+  "Status" : "Situação",
   "Stats_Active_Users" : "Usuários Ativos",
   "Stats_Avg_Channel_Users" : "Média de Usuários por Canal",
   "Stats_Avg_Private_Group_Users" : "Média de Usuários por Grupo Privado",

packages/rocketchat-livechat/client/views/app/livechatCurrentChats.html

 <template name="livechatCurrentChats">
+	<fieldset>
+		<form class="form-inline" method="post">
+			<div class="form-group">
+				<label for="name">{{_ "Name"}}</label>
+				<input type="text" name="name">
+			</div>
+
+			<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>
+			</div>
+			<div class="form-group">
+				<label for="status">{{_ "Status"}}</label>
+				<select name="status">
+					<option value=""></option>
+					<option value="opened">{{_ "Opened"}}</option>
+					<option value="closed">{{_ "Closed"}}</option>
+				</select>
+			</div>
+			<button class="button">{{_ "Filter"}}</button>
+		</form>
+	</fieldset>
 	<div class="list">
 		<table>
 			<thead>
 				<tr>
-					<th width="34%">{{_ "Name"}}</th>
-					<th width="33%">{{_ "Started_At"}}</th>
-					<th width="33%">{{_ "Last_Message_At"}}</th>
+					<th width="25%">{{_ "Name"}}</th>
+					<th width="25%">{{_ "Served_By"}}</th>
+					<th width="15%">{{_ "Started_At"}}</th>
+					<th width="15%">{{_ "Last_Message_At"}}</th>
+					<th width="10%">{{_ "Status"}}</th>
 				</tr>
 			</thead>
 			<tbody>
 				{{#each livechatRoom}}
 					<tr class="row-link">
 						<td>{{label}}</td>
+						<td>{{servedBy}}</td>
 						<td>{{startedAt}}</td>
 						<td>{{lastMessage}}</td>
+						<td>{{status}}</td>
 					</tr>
 				{{/each}}
 			</tbody>
 		</table>
 	</div>
+	<div class="text-center">
+		<button class="button load-more lightblue">{{_ "Load_more"}}</button>
+	</div>
 </template>

packages/rocketchat-livechat/client/views/app/livechatCurrentChats.js

@@ -7,15 +7,47 @@ Template.livechatCurrentChats.helpers({
 	},
 	lastMessage() {
 		return moment(this.lm).format('L LTS');
+	},
+	servedBy() {
+		return this.servedBy && this.servedBy.username;
+	},
+	status() {
+		return this.open ? t('Opened') : t('Closed');
+	},
+	agents() {
+		return AgentUsers.find({}, { sort: { name: 1 } });
 	}
 });
 
 Template.livechatCurrentChats.events({
 	'click .row-link'() {
 		FlowRouter.go('live', { code: this.code });
+	},
+	'click .load-more'(event, instance) {
+		instance.limit.set(instance.limit.get() + 20);
+	},
+	'submit form'(event, instance) {
+		event.preventDefault();
+
+		let filter = {};
+		$(':input', event.currentTarget).each(function() {
+			if (this.name) {
+				filter[this.name] = $(this).val();
+			}
+		});
+
+		instance.filter.set(filter);
+		instance.limit.set(20);
 	}
 });
 
 Template.livechatCurrentChats.onCreated(function() {
-	this.subscribe('livechat:rooms');
+	this.limit = new ReactiveVar(20);
+	this.filter = new ReactiveVar({});
+
+	this.subscribe('livechat:agents');
+
+	this.autorun(() => {
+		this.subscribe('livechat:rooms', this.filter.get(), 0, this.limit.get());
+	});
 });

packages/rocketchat-livechat/server/models/Rooms.js

@@ -31,10 +31,10 @@ RocketChat.models.Rooms.updateLivechatDataByToken = function(token, key, value)
 	return this.update(query, update);
 };
 
-RocketChat.models.Rooms.findLivechat = function(offset = 0, limit = 20) {
-	const query = {
+RocketChat.models.Rooms.findLivechat = function(filter = {}, offset = 0, limit = 20) {
+	const query = _.extend(filter, {
 		t: 'l'
-	};
+	});
 
 	return this.find(query, { sort: { ts: - 1 }, offset: offset, limit: limit });
 };

packages/rocketchat-livechat/server/publications/livechatRooms.js

-Meteor.publish('livechat:rooms', function(offset = 0, limit = 20) {
+Meteor.publish('livechat:rooms', function(filter = {}, offset = 0, limit = 20) {
 	if (!this.userId) {
 		return this.error(new Meteor.Error('error-not-authorized', 'Not authorized', { publish: 'livechat:rooms' }));
 	}
@@ -7,5 +7,26 @@ Meteor.publish('livechat:rooms', function(offset = 0, limit = 20) {
 		return this.error(new Meteor.Error('error-not-authorized', 'Not authorized', { publish: 'livechat:rooms' }));
 	}
 
-	return RocketChat.models.Rooms.findLivechat(offset, limit);
+	check(filter, {
+		name: Match.Maybe(String), // room name to filter
+		agent: Match.Maybe(String), // agent _id who is serving
+		status: Match.Maybe(String) // either 'opened' or 'closed'
+	});
+
+	let query = {};
+	if (filter.name) {
+		query.label = new RegExp(filter.name, 'i');
+	}
+	if (filter.agent) {
+		query['servedBy._id'] = filter.agent;
+	}
+	if (filter.status) {
+		if (filter.status === 'opened') {
+			query.open = true;
+		} else {
+			query.open = { $exists: false };
+		}
+	}
+
+	return RocketChat.models.Rooms.findLivechat(query, offset, limit);
 });

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -1418,11 +1418,15 @@ label.required:after {
 	overflow-y: hidden;
 	.content {
 		&:extend(.fill-all);
-		padding: 25px 40px 0px;
+		padding: 25px 40px;
 		overflow-y: scroll;
 		margin-top: 60px;
 		-webkit-overflow-scrolling: touch;
 		.calc(height, ~'100% - 60px');
+
+		fieldset {
+			margin-bottom: 1em;
+		}
 	}
 }
 
@@ -4316,16 +4320,6 @@ body:not(.is-cordova) {
 	}
 }
 
-.load-more {
-	text-transform: lowercase;
-	text-align: center;
-	line-height: 40px;
-	font-style: italic;
-	.load-more-loading {
-		color: #aaa;
-	}
-}
-
 .search-messages-list {
 	.message-cog-container {
 		.message-action {
@@ -4593,6 +4587,22 @@ a + br.only-after-a {
 	}
 }
 
+.form-inline {
+	input, select {
+		display: inline-block;
+		width: auto;
+		vertical-align: middle;
+	}
+	label {
+		display: inline-block;
+		max-width: 100%;
+	}
+
+	.form-group {
+		display: inline-block;
+	}
+}
+
 .embedded-view {
 	.main-content.main-modal {
 		right: 0;