[IMPROVE] Layout of livechat manager pages to new style

app/livechat/client/index.js

@@ -10,6 +10,7 @@ import './views/app/analytics/livechatAnalyticsCustomDaterange';
 import './views/app/analytics/livechatAnalyticsDaterange';
 import './views/app/analytics/livechatRealTimeMonitoring';
 import './views/app/livechatAppearance';
+import './views/app/livechatAutocompleteUser';
 import './views/app/livechatCurrentChats';
 import './views/app/livechatCustomFields';
 import './views/app/livechatCustomFieldForm';

app/livechat/client/stylesheets/livechat.less

@@ -47,6 +47,8 @@
 		font-family: courier;
 		font-size: 12px;
 		display: block;
+
+		margin-bottom: 1rem;
 	}
 }
 
@@ -55,11 +57,14 @@
 	margin-bottom: 1em;
 }
 
+.livechat-content {
+	display: flex;
+	flex-direction: row;
+}
+
 .livechat-settings-div,
 .livechat-preview-div {
-	width: 50%;
-	float: left;
-	height: 95%;
+	flex: 1 1;
 	margin-bottom: 0 !important;
 	padding: 1em;
 }

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

@@ -9,15 +9,24 @@ <h2>{{_ "Webhooks"}}</h2>
 
 			<form id="integration-form">
 				<div class="input-line">
-					<label for="webhookUrl">{{_ "Webhook_URL"}}</label>
-					<div>
-						<input type="url" name="webhookUrl" id="webhookUrl" value="{{webhookUrl}}" placeholder="https://yourdomain.com/webhook/entrypoint">
+					<div class="rc-input">
+						<label class="rc-input__label">
+							<div class="rc-input__title">{{_ "Webhook_URL"}}</div>
+							<div class="rc-input__wrapper">
+								<input type="url" name="webhookUrl" id="webhookUrl" value="{{webhookUrl}}" placeholder="https://yourdomain.com/webhook/entrypoint" class="rc-input__element">
+							</div>
+						</label>
 					</div>
 				</div>
 				<div class="input-line">
-					<label for="secretToken">{{_ "Secret_token"}}</label>
-					<div>
-						<input type="text" name="secretToken" id="secretToken" value="{{secretToken}}">
+					<div class="rc-input">
+						<label class="rc-input__label">
+							<div class="rc-input__title">{{_ "Secret_token"}}</div>
+							<div class="rc-input__wrapper">
+								<input type="text" name="secretToken" id="secretToken" value="{{secretToken}}"
+								 class="rc-input__element">
+							</div>
+						</label>
 					</div>
 				</div>
 				<div class="input-line">
@@ -44,10 +53,10 @@ <h2>{{_ "Webhooks"}}</h2>
 						{{_ "Send_request_on_agent_message"}}
 					</label>
 				</div>
-				<div class="submit">
-					<button class="button danger reset-settings" type="button"><i class="icon-ccw"></i>{{_ "Reset"}}</button>
-					<button class="button secondary test" type="button" disabled="{{disableTest}}">{{_ "Send_Test"}}</button>
-					<button class="button primary save"><i class="icon-floppy"></i>{{_ "Save"}}</button>
+				<div class="rc-button__group submit">
+					<button class="rc-button rc-button--danger reset-settings" type="button"><i class="icon-ccw"></i>{{_ "Reset"}}</button>
+					<button class="rc-button rc-button--secondary test" type="button" disabled="{{disableTest}}">{{_ "Send_Test"}}</button>
+					<button class="rc-button rc-button--primary save"><i class="icon-floppy"></i>{{_ "Save"}}</button>
 				</div>
 			</form>
 		</div>

app/livechat/client/views/app/livechatAutocompleteUser.html

@@ -0,0 +1,20 @@
+<template name="livechatAutocompleteUser">
+	<div class="rc-input" id='search-{{name}}' {{disabled}}>
+		<label class="rc-input__label">
+			<div class="rc-input__wrapper">
+				{{# if icon}}
+				<div class="rc-input__icon">
+					{{> icon block="rc-input__icon-svg" icon=icon}}
+				</div>
+				{{/if}}
+				<div class="rc-tags{{# unless icon}} rc-tags--no-icon{{/unless}}">
+					{{#each item in list}} {{> tag item}} {{/each}}
+					<input type="text" id="{{name}}" class="rc-tags__input" placeholder="{{_ placeholder}}" name="{{name}}" autocomplete="off"
+					 {{disabled}} />
+				</div>
+			</div>
+			{{#with config}} {{#if autocomplete 'isShowing'}} {{#if autocomplete 'isLoaded'}} {{> popupList data=config items=items}}
+			{{/if}} {{/if}} {{/with}}
+		</label>
+	</div>
+</template>

app/livechat/client/views/app/livechatAutocompleteUser.js

@@ -0,0 +1,109 @@
+import { Blaze } from 'meteor/blaze';
+import { Template } from 'meteor/templating';
+import { AutoComplete } from 'meteor/mizzao:autocomplete';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+import './livechatAutocompleteUser.html';
+
+Template.livechatAutocompleteUser.helpers({
+	list() {
+		return this.list;
+	},
+	items() {
+		return Template.instance().ac.filteredList();
+	},
+	config() {
+		const { filter } = Template.instance();
+		const { noMatchTemplate, templateItem, modifier } = Template.instance().data;
+		return {
+			filter: filter.get(),
+			template_item: templateItem,
+			noMatchTemplate,
+			modifier(text) {
+				return modifier(filter, text);
+			},
+		};
+	},
+	autocomplete(key) {
+		const instance = Template.instance();
+		const param = instance.ac[key];
+		return typeof param === 'function' ? param.apply(instance.ac) : param;
+	},
+});
+
+Template.livechatAutocompleteUser.events({
+	'input input'(e, t) {
+		const input = e.target;
+		const position = input.selectionEnd || input.selectionStart;
+		const { length } = input.value;
+		document.activeElement === input && e && /input/i.test(e.type) && (input.selectionEnd = position + input.value.length - length);
+		t.filter.set(input.value);
+	},
+	'click .rc-popup-list__item'(e, t) {
+		t.ac.onItemClick(this, e);
+	},
+	'keydown input'(e, t) {
+		t.ac.onKeyDown(e);
+		if ([8, 46].includes(e.keyCode) && e.target.value === '') {
+			const { deleteLastItem } = t;
+			return deleteLastItem && deleteLastItem();
+		}
+	},
+	'keyup input'(e, t) {
+		t.ac.onKeyUp(e);
+	},
+	'focus input'(e, t) {
+		t.ac.onFocus(e);
+	},
+	'blur input'(e, t) {
+		t.ac.onBlur(e);
+	},
+	'click .rc-tags__tag'({ target }, t) {
+		const { onClickTag } = t;
+		return onClickTag && onClickTag(Blaze.getData(target));
+	},
+});
+
+Template.livechatAutocompleteUser.onRendered(function() {
+	const { name } = this.data;
+
+	this.ac.element = this.firstNode.querySelector(`[name=${ name }]`);
+	this.ac.$element = $(this.ac.element);
+	this.deleteLastItem = this.data.deleteLastItem;
+});
+
+Template.livechatAutocompleteUser.onCreated(function() {
+	this.filter = new ReactiveVar('');
+	this.selected = new ReactiveVar([]);
+	this.onClickTag = this.data.onClickTag;
+	const filter = {};
+	this.autorun(() => {
+		const { exceptions } = Template.currentData();
+		filter.exceptions = exceptions;
+	});
+	const { collection, subscription, field, sort, onSelect, selector = (match) => ({ term: match }) } = this.data;
+	this.ac = new AutoComplete({
+		selector: {
+			anchor: '.rc-input__label',
+			item: '.rc-popup-list__item',
+			container: '.rc-popup-list__list',
+		},
+		onSelect,
+		position: 'fixed',
+		limit: 10,
+		inputDelay: 300,
+		rules: [
+			{
+				filter,
+				collection,
+				subscription,
+				field,
+				matchAll: true,
+				doNotChangeWidth: false,
+				selector,
+				sort,
+			},
+		],
+	});
+	this.ac.tmplInst = this;
+});

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

@@ -3,47 +3,82 @@
 		<fieldset>
 			<form class="form-inline" method="post">
 				<div class="form-group">
-					<label for="name">{{_ "Name"}}</label>
-					<input type="text" class="rc-input__element" name="name">
+					<input type="text" placeholder="{{_ "Name"}}" class="rc-input__element" name="name">
 				</div>
-
 				<div class="form-group">
-					<label for="agent">{{_ "Served_By"}}</label>
-					{{> inputAutocomplete settings=agentAutocompleteSettings id="agent" class="rc-input__element" autocomplete="off"}}
+					{{> livechatAutocompleteUser
+						onClickTag=onClickTagAgent
+						list=selectedAgents
+						onSelect=onSelectAgents
+						collection='UserAndRoom'
+						subscription='userAutocomplete'
+						field='username'
+						sort='username'
+						label="Served_By"
+						placeholder="Served_By"
+						name="agent"
+						icon="at"
+						noMatchTemplate="userSearchEmpty"
+						templateItem="popupList_item_default"
+						modifier=agentModifier
+					}}
 				</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 class="rc-select">
+						<select class="rc-select__element" 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>
+						</select>
+						{{> icon block="rc-select__arrow" icon="arrow-down" }}
+					</div>
 				</div>
 				<div class="form-group input-daterange">
-					<span class="input-group-addon">{{_ "Date_From"}}</span>
-					<input type="text" class="form-control rc-input__element" id="from" name="from" >
-						<span class="input-group-addon">{{_ "Date_to"}}</span>
-					<input type="text" class="form-control rc-input__element" id="to" name="to">
+					<input autocomplete="off" type="text" placeholder="{{_ "Date_From"}}" class="rc-input__element" id="from" name="from" >
+					<input autocomplete="off" type="text" placeholder="{{_ "Date_to"}}" class="rc-input__element" id="to" name="to">
+				</div>
+				<div class="form-group">
+					<button class="rc-button rc-button--primary">{{_ "Filter"}}</button>
 				</div>
-				<button class="button">{{_ "Filter"}}</button>
 			</form>
 		</fieldset>
-		<div class="list">
-			<table>
+		<div class="rc-table-content">
+			{{#table fixed='true' onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
 				<thead>
 					<tr>
-						<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="20%">{{_ "Status"}}</th>
-						<th>&nbsp;</th>
+						<th width="25%">
+							<div class="table-fake-th">{{_ "Name"}}</div>
+						</th>
+						<th width="25%">
+							<div class="table-fake-th">{{_ "Served_By"}}</div>
+						</th>
+						<th width="15%">
+							<div class="table-fake-th">{{_ "Started_At"}}</div>
+						</th>
+
+						<th width="15%">
+							<div class="table-fake-th">{{_ "Last_Message_At"}}</div>
+						</th>
+						<th width="15%">
+							<div class="table-fake-th">{{_ "Status"}}</div>
+						</th>
+
+						<th width="5%"><div class="table-fake-th">&nbsp;</div></th>
 					</tr>
 				</thead>
 				<tbody>
 					{{#each livechatRoom}}
-						<tr class="row-link">
-							<td>{{fname}}</td>
+						<tr class="rc-table-tr manage row-link" data-name="{{latest.name}}">
+
+							<td>
+								<div class="rc-table-wrapper">
+									<div class="rc-table-info">
+										<span class="rc-table-title">
+											{{fname}}
+										</span>
+									</div>
+								</div>
+							</td>
 							<td>{{servedBy}}</td>
 							<td>{{startedAt}}</td>
 							<td>{{lastMessage}}</td>
@@ -59,11 +94,18 @@
 							{{/requiresPermission}}
 						</tr>
 					{{/each}}
+					{{#unless isReady}}
+						<tr class="table-no-click">
+							<td colspan="5" class="table-loading-td">{{> loading}}</td>
+						</tr>
+					{{/unless}}
 				</tbody>
-			</table>
-		</div>
-		<div class="text-center">
-			<button class="button load-more">{{_ "Load_more"}}</button>
+			{{/table}}
 		</div>
+		{{#if hasMore}}
+			<div class="rc-button__group">
+				<button class="rc-button rc-button--primary js-load-more">{{_ "Load_more"}}</button>
+			</div>
+		{{/if}}
 	{{/requiresPermission}}
 </template>