[NEW] Save default filters in the Omnichannel Current Chats list (#16653)

* Store default filters on the Current Chats template.

* Fix lint erros.

* Fix agents default filter value.

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

@@ -1,7 +1,7 @@
 <template name="livechatCurrentChats">
 	{{#requiresPermission 'view-livechat-current-chats'}}
 		<fieldset>
-			<form class="form-inline" method="post">
+			<form class="form-inline" id="form-filters" method="post">
 				<div class="livechat-group-filters-wrapper">
 					<div class="livechat-group-filters-container">
 						<div class="livechat-current-chats-standard-filters">
@@ -9,7 +9,7 @@
 								<label class="rc-input__label">
 									<div class="rc-input__title">{{_ "Guest"}}</div>
 									<div class="rc-input__wrapper">
-										<input type="text" placeholder="{{_ "Name"}}" class="rc-input__element" name="name">
+										<input type="text" placeholder="{{_ "Name"}}" class="rc-input__element" id="name" name="name">
 									</div>
 								</label>
 							</div>
@@ -36,7 +36,7 @@
 								<label class="rc-input__label">
 									<div class="rc-input__title">{{_ "Status"}}</div>
 									<div class="rc-select">
-										<select class="rc-select__element" name="status">
+										<select class="rc-select__element" id="status" name="status">
 											<option class="rc-select__option" value="">{{_ "All"}}</option>
 											<option class="rc-select__option" value="opened">{{_ "Opened"}}</option>
 											<option class="rc-select__option" value="closed">{{_ "Closed"}}</option>
@@ -49,7 +49,7 @@
 								<label class="rc-input__label">
 									<div class="rc-input__title">{{_ "Department"}}</div>
 									<div class="rc-select">
-										<select class="rc-select__element" name="department">
+										<select class="rc-select__element" id="department" name="department">
 											<option class="rc-select__option" value="">{{_ "Select_a_department"}}</option>
 											{{#each departments}}
 												<option class="rc-select__option" value="{{_id}}">{{name}}</option>
@@ -108,11 +108,9 @@
 					<div class="livechat-group-filters-buttons">
 						<div class="rc-button__group">
 							<button class="rc-button rc-button--primary">{{_ "Filter"}}</button>
-							{{#if hasPopoverPermissions}}
-								<button class="livechat-current-chats-extra-actions">
-									{{> icon icon="menu" block="rc-icon--default-size"}}
-								</button>
-							{{/if}}
+							<button class="livechat-current-chats-extra-actions">
+								{{> icon icon="menu" block="rc-icon--default-size"}}
+							</button>
 						</div>
 					</div>
 				</div>

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

@@ -11,10 +11,31 @@ import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
 
 import { modal, call, popover } from '../../../../ui-utils';
 import { t, handleError, APIClient } from '../../../../utils/client';
-import { hasRole, hasPermission, hasAtLeastOnePermission } from '../../../../authorization';
+import { hasRole, hasPermission } from '../../../../authorization';
 import './livechatCurrentChats.html';
 
 const ROOMS_COUNT = 50;
+const FILTER_STORE_NAME = 'Filters.LivechatCurrentChats';
+
+const loadStoredFilters = () => {
+	let storedFilters;
+	try {
+		const storeItem = Meteor._localStorage.getItem(FILTER_STORE_NAME);
+		storedFilters = storeItem ? JSON.parse(Meteor._localStorage.getItem(FILTER_STORE_NAME)) : {};
+	} catch (e) {
+		storedFilters = {};
+	}
+
+	return storedFilters;
+};
+
+const storeFilters = (filters) => {
+	Meteor._localStorage.setItem(FILTER_STORE_NAME, JSON.stringify(filters));
+};
+
+const removeStoredFilters = () => {
+	Meteor._localStorage.removeItem(FILTER_STORE_NAME);
+};
 
 Template.livechatCurrentChats.helpers({
 	hasMore() {
@@ -69,9 +90,6 @@ Template.livechatCurrentChats.helpers({
 	tagId() {
 		return this;
 	},
-	hasPopoverPermissions() {
-		return hasAtLeastOnePermission(['remove-closed-livechat-rooms']);
-	},
 });
 
 Template.livechatCurrentChats.events({
@@ -160,6 +178,11 @@ Template.livechatCurrentChats.events({
 				groups: [
 					{
 						items: [
+							{
+								icon: 'customize',
+								name: t('Clear_filters'),
+								action: instance.clearFilters,
+							},
 							canRemoveAllClosedRooms
 							&& {
 								icon: 'trash',
@@ -276,11 +299,12 @@ Template.livechatCurrentChats.events({
 
 		const agents = instance.selectedAgents.get();
 		if (agents && agents.length > 0) {
-			filter.agents = [agents[0]._id];
+			filter.agents = [agents[0]];
 		}
 
 		instance.filter.set(filter);
 		instance.offset.set(0);
+		storeFilters(filter);
 	},
 	'click .remove-livechat-room'(event, instance) {
 		event.preventDefault();
@@ -323,7 +347,7 @@ Template.livechatCurrentChats.onCreated(async function() {
 	this.isLoading = new ReactiveVar(false);
 	this.offset = new ReactiveVar(0);
 	this.total = new ReactiveVar(0);
-	this.filter = new ReactiveVar({});
+	this.filter = new ReactiveVar(loadStoredFilters());
 	this.livechatRooms = new ReactiveVar([]);
 	this.selectedAgents = new ReactiveVar([]);
 	this.customFilters = new ReactiveVar([]);
@@ -357,7 +381,7 @@ Template.livechatCurrentChats.onCreated(async function() {
 			url += `&${ mountArrayQueryParameters('tags', tags) }`;
 		}
 		if (agents && Array.isArray(agents) && agents.length) {
-			url += `&${ mountArrayQueryParameters('agents', agents) }`;
+			url += `&${ mountArrayQueryParameters('agents', agents.map((agent) => agent._id)) }`;
 		}
 		if (customFields) {
 			url += `&customFields=${ JSON.stringify(customFields) }`;
@@ -371,6 +395,34 @@ Template.livechatCurrentChats.onCreated(async function() {
 		return url;
 	};
 
+	this.loadDefaultFilters = () => {
+		const defaultFilters = this.filter.get();
+
+		Object.keys(defaultFilters).forEach((key) => {
+			const value = defaultFilters[key];
+			if (!value) {
+				return;
+			}
+
+			switch (key) {
+				case 'agents':
+					return this.selectedAgents.set(value);
+				case 'from':
+				case 'to':
+					return $(`#${ key }`).datepicker('setDate', new Date(value));
+			}
+
+			$(`#${ key }`).val(value);
+		});
+	};
+
+	this.clearFilters = () => {
+		removeStoredFilters();
+		$('#form-filters').get(0).reset();
+		this.selectedAgents.set([]);
+		this.filter.set({});
+	};
+
 	this.loadRooms = async (filter, offset) => {
 		this.isLoading.set(true);
 		const { rooms, total } = await APIClient.v1.get(mountUrlWithParams(filter, offset));
@@ -405,6 +457,8 @@ Template.livechatCurrentChats.onCreated(async function() {
 			this.customFields.set(customFields);
 		}
 	});
+
+	setTimeout(this.loadDefaultFilters, 500);
 });
 
 Template.livechatCurrentChats.onRendered(function() {

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

@@ -637,6 +637,7 @@
   "clear": "Clear",
   "Clear_all_unreads_question": "Clear all unreads?",
   "clear_cache_now": "Clear Cache Now",
+  "Clear_filters": "Clear filters",
   "clear_history": "Clear History",
   "Click_here": "Click here",
   "Click_here_for_more_info": "Click here for more info",

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

@@ -601,6 +601,7 @@
   "clear": "Claro",
   "Clear_all_unreads_question": "Limpar todas não lidas?",
   "clear_cache_now": "Clear Cache Now",
+  "Clear_filters": "Limpar filtros",
   "clear_history": "Apagar o histórico",
   "Click_here": "Clique aqui",
   "Click_here_for_more_info": "Clique aqui para mais informações",