[IMPROVE] Livechat User Management Improvements

app/livechat/client/collections/LivechatRoom.js

@@ -0,0 +1,3 @@
+import { Mongo } from 'meteor/mongo';
+
+export const LivechatRoom = new Mongo.Collection('livechatRoom');

app/livechat/client/index.js

@@ -8,6 +8,7 @@ import './views/app/analytics/livechatAnalytics';
 import './views/app/analytics/livechatAnalyticsCustomDaterange';
 import './views/app/analytics/livechatAnalyticsDaterange';
 import './views/app/analytics/livechatRealTimeMonitoring';
+import './views/app/livechatAgents';
 import './views/app/livechatAppearance';
 import './views/app/livechatAutocompleteUser';
 import './views/app/livechatCurrentChats';
@@ -21,8 +22,9 @@ import './views/app/livechatQueue';
 import './views/app/livechatReadOnly';
 import './views/app/livechatTriggers';
 import './views/app/livechatTriggersForm';
-import './views/app/livechatUsers';
+import './views/app/livechatManagers';
 import './views/app/livechatNotSubscribed.html';
+import './views/app/livechatRoomTagSelector.html';
 import './views/app/integrations/livechatIntegrationWebhook';
 import './views/app/integrations/livechatIntegrationFacebook';
 import './views/app/tabbar/externalSearch';

app/livechat/client/route.js

@@ -3,7 +3,7 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { AccountBox } from '../../ui-utils';
 import './views/app/livechatDashboard.html';
 
-const livechatManagerRoutes = FlowRouter.group({
+export const livechatManagerRoutes = FlowRouter.group({
 	prefix: '/livechat-manager',
 	name: 'livechat-manager',
 });
@@ -41,11 +41,19 @@ AccountBox.addRoute({
 }, livechatManagerRoutes);
 
 AccountBox.addRoute({
-	name: 'livechat-users',
-	path: '/users',
+	name: 'livechat-managers',
+	path: '/managers',
 	sideNav: 'livechatFlex',
-	i18nPageTitle: 'Livechat_Users',
-	pageTemplate: 'livechatUsers',
+	i18nPageTitle: 'Livechat_managers',
+	pageTemplate: 'livechatManagers',
+}, livechatManagerRoutes);
+
+AccountBox.addRoute({
+	name: 'livechat-agents',
+	path: '/agents',
+	sideNav: 'livechatFlex',
+	i18nPageTitle: 'Livechat_agents',
+	pageTemplate: 'livechatAgents',
 }, livechatManagerRoutes);
 
 AccountBox.addRoute({

app/livechat/client/stylesheets/livechat.less

@@ -177,8 +177,6 @@
 }
 
 .visitor-edit {
-	padding: 20px;
-
 	h3 {
 		font-size: 24px;
 		margin-bottom: 8px;
@@ -533,3 +531,31 @@
 		max-width: 100%;
 	}
 }
+
+.livechat-current-chats-add-filter-button {
+	margin-top: 17px;
+}
+
+.livechat-current-chats-filters-wrapper {
+	display: flex;
+}
+
+.livechat-current-chats-filters {
+	flex: 8 0;
+}
+
+.livechat-current-chats-filters-buttons {
+	flex: 0 0 auto;
+	margin-top: 26px;
+	padding-left: 30px;
+	border-left: 1px solid #cccccc;
+}
+
+.livechat-current-chats-tag-filter-wrapper {
+	display: flex;
+
+	& a {
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+}

app/livechat/client/views/app/analytics/livechatRealTimeMonitoring.html

@@ -1,5 +1,5 @@
 <template name="livechatRealTimeMonitoring">
-	{{#requiresPermission 'view-livechat-analytics'}}
+	{{#requiresPermission 'view-livechat-real-time-monitoring'}}
 	<div class="lc-analytics-overview">
 		{{#each conversationsOverview}}
 		<div class="lc-analytics-ov-col">
@@ -73,4 +73,4 @@
 		</div>
 	</div>
 	{{/requiresPermission}}
-</template>
+</template>

app/livechat/client/views/app/integrations/livechatIntegrationFacebook.html

@@ -1,39 +1,41 @@
 <template name="livechatIntegrationFacebook">
-	<form id="profile" autocomplete="off" class="container">
-		<fieldset class="rc-form-legend">
-			<div class="rc-form-group">
-				{{#if enabled}}
-					<button class="button reload">{{_ "Reload_Pages"}}</button>
-					<button class="button danger disable">{{_ "Disable"}}</button>
-				{{else}}
-					<button class="button primary enable" {{enableButtonDisabled}}>{{_ "Enable"}}</button>
-					{{#unless hasToken}}
-						<p>{{_ "You_have_to_set_an_API_token_first_in_order_to_use_the_integration"}}</p>
-						<p>{{_ "Please_go_to_the_Administration_page_then_Livechat_Facebook"}}</p>
-					{{/unless}}
-				{{/if}}
-			</div>
-			{{#if isLoading}}
-				{{> loading}}
-			{{else}}
-				{{#each pages}}
-					<div class="rc-form-group">
-						<div class="rc-switch">
-							<label class="rc-switch__label" tabindex="-1">
-								<input type="checkbox" class="rc-switch__input" name="subscribe" value="true"  {{subscribed}}>
-								<span class="rc-switch__button">
-									<span class="rc-switch__button-inside"></span>
-								</span>
-								<span class="rc-switch__text">{{name}}</span>
-							</label>
-						</div>
-					</div>
-				{{else}}
+	{{#requiresPermission 'view-livechat-facebook'}}
+		<form id="profile" autocomplete="off" class="container">
+			<fieldset class="rc-form-legend">
+				<div class="rc-form-group">
 					{{#if enabled}}
-						<p>{{_ "No_pages_yet_Try_hitting_Reload_Pages_button"}}</p>
+						<button class="button reload">{{_ "Reload_Pages"}}</button>
+						<button class="button danger disable">{{_ "Disable"}}</button>
+					{{else}}
+						<button class="button primary enable" {{enableButtonDisabled}}>{{_ "Enable"}}</button>
+						{{#unless hasToken}}
+							<p>{{_ "You_have_to_set_an_API_token_first_in_order_to_use_the_integration"}}</p>
+							<p>{{_ "Please_go_to_the_Administration_page_then_Livechat_Facebook"}}</p>
+						{{/unless}}
 					{{/if}}
-				{{/each}}
-			{{/if}}
-		</fieldset>
-	</form>
+				</div>
+				{{#if isLoading}}
+					{{> loading}}
+				{{else}}
+					{{#each pages}}
+						<div class="rc-form-group">
+							<div class="rc-switch">
+								<label class="rc-switch__label" tabindex="-1">
+									<input type="checkbox" class="rc-switch__input" name="subscribe" value="true"  {{subscribed}}>
+									<span class="rc-switch__button">
+										<span class="rc-switch__button-inside"></span>
+									</span>
+									<span class="rc-switch__text">{{name}}</span>
+								</label>
+							</div>
+						</div>
+					{{else}}
+						{{#if enabled}}
+							<p>{{_ "No_pages_yet_Try_hitting_Reload_Pages_button"}}</p>
+						{{/if}}
+					{{/each}}
+				{{/if}}
+			</fieldset>
+		</form>
+	{{/requiresPermission}}
 </template>

app/livechat/client/views/app/integrations/livechatIntegrationWebhook.html

@@ -1,5 +1,5 @@
 <template name="livechatIntegrationWebhook">
-	{{#requiresPermission 'view-livechat-manager'}}
+	{{#requiresPermission 'view-livechat-webhooks'}}
 		<div class="rocket-form">
 			<h2>{{_ "Webhooks"}}</h2>
 			<p>

app/livechat/client/views/app/livechatAgents.html

@@ -0,0 +1,89 @@
+<template name="livechatAgents">
+		{{#requiresPermission 'manage-livechat-agents'}}
+			<form id="form-agent" class="form-inline">
+				<div class="form-group">
+					{{> livechatAutocompleteUser
+						onClickTag=onClickTagAgents
+						list=selectedAgents
+						deleteLastItem=deleteLastAgent
+						onSelect=onSelectAgents
+						collection='UserAndRoom'
+						subscription='userAutocomplete'
+						field='username'
+						sort='username'
+						label="Search_by_username"
+						placeholder="Search_by_username"
+						name="username"
+						exceptions=exceptionsAgents
+						icon="at"
+						noMatchTemplate="userSearchEmpty"
+						templateItem="popupList_item_default"
+						modifier=agentModifier
+					}}
+				</div>
+				<div class="form-group">
+					<button name="add" class="rc-button rc-button--primary add" disabled='{{isloading}}'>{{_ "Add"}}</button>
+				</div>
+			</form>
+
+			<div class="rc-table-content">
+				<form class="search-form" role="form">
+					<div class="rc-input__wrapper">
+						<div class="rc-input__icon">
+							{{#if isReady}}
+								{{> icon block="rc-input__icon-svg" icon="magnifier" }}
+							{{else}}
+								{{> loading }}
+							{{/if}}
+						</div>
+						<input id="agents-filter" type="text" class="rc-input__element"
+								placeholder="{{_ "Search"}}" autofocus dir="auto">
+					</div>
+				</form>
+				<div class="results">
+					{{{_ "Showing_results" agents.length}}}
+				</div>
+
+				{{#table fixed='true' onScroll=onTableScroll}}
+					<thead>
+						<tr>
+							<th><div class="table-fake-th">{{_ "Name"}}</div></th>
+							<th width="33%"><div class="table-fake-th">{{_ "Username"}}</div></th>
+							<th width="33%"><div class="table-fake-th">{{_ "Email"}}</div></th>
+							<th width='40px'><div class="table-fake-th">&nbsp;</div></th>
+						</tr>
+					</thead>
+					<tbody>
+						{{#each agents}}
+							<tr class="rc-table-tr user-info row-link" data-id="{{_id}}">
+								<td>
+									<div class="rc-table-wrapper">
+										<div class="rc-table-avatar user-image status-{{status}}">{{> avatar username=username}}</div>
+										<div class="rc-table-info">
+											<span class="rc-table-title">
+												{{name}}
+											</span>
+										</div>
+									</div>
+									<div class="rc-table-wrapper">
+										<div class="rc-table-info">
+											<span class="rc-table-title">
+												{{fname}}
+											</span>
+										</div>
+									</div>
+								</td>
+								<td>{{username}}</td>
+								<td>{{emailAddress}}</td>
+								<td>
+									<a href="#remove" class="remove-agent">
+										<i class="icon-trash"></i>
+									</a>
+								</td>
+							</tr>
+						{{/each}}
+					</tbody>
+				{{/table}}
+			</div>
+		{{/requiresPermission}}
+	</template>