[IMPROVE][Omnichannel] More info and better design of Past Chats List

app/livechat/client/ui.js

@@ -35,7 +35,7 @@ TabBar.addButton({
 	id: 'visitor-history',
 	i18nTitle: 'Past_Chats',
 	icon: 'clock',
-	template: 'visitorHistory',
+	template: 'customerChatHistory',
 	order: 11,
 });
 

app/livechat/client/views/app/tabbar/chatRoomHistoryItem.html

@@ -0,0 +1,26 @@
+<template name='chatRoomHistoryItem'>
+	<li class='list-chat' id='{{_id}}' aria='{{v.token}}' >
+		<div class="history-div">
+			<div class="visitor-img">
+				<img src="/avatar/{{responseBy.username}}" alt="">
+			</div>
+			<div class="visitor-history-details">
+				<div class="visitor-details">
+					<h1>{{responseBy.username}}</h1>
+						{{#if open}}
+							<p class='open'>Open</p>
+						{{else}}
+							<p>Close at time {{time}}</p>
+						{{/if}}
+				</div>
+				<div class="total-messages">
+					<p>{{room.msgs}} messages</p>
+				</div>
+				<div class="agent-comment">
+					<p class="comment-heading">Agent comment:</p>
+					<p class="comment-text">"{{lastMessage.msg}}"</p>
+				</div>
+			</div>
+		</div>
+	</li>
+</template>

app/livechat/client/views/app/tabbar/customerChatHistory.html

@@ -0,0 +1,55 @@
+<template name='customerChatHistory'>
+	<div class="content">
+		<div class="list-view">
+			<div>
+				<div class="active-pink-4 mb-4 inner-addon right-addon">
+					<i class="glyphicon glyphicon-search icon-search"></i>
+					<input type="text" id="searchInput"  class="" placeholder="Search" aria-label="Search">
+				</div>
+			</div>
+			{{#if hasChatHistory}}
+				{{#if isAllChat}}
+				<div class="vistior-history-block">
+					<ul id='allist'>
+					{{#if isSearching}}
+						{{#if isfound }}
+							{{#each searchResults}} 
+								<li class='search-li'>
+									<div class="history-main">
+										<div class="history-img">
+											<img src="/avatar/{{u.username}}" >
+										</div>
+										<div class="history-detail-main">
+											<div class="detail-main-upper">
+												<h1>{{u.name}}</h1>
+												<p>{{time}}</p>
+											</div>
+											<div class="detail-main-lower">
+												<p>{{msg}}</p>
+											</div>
+										</div>
+									</div>
+								</li>
+							{{/each}}
+						{{else}}
+							<h1 class='noresult'>No result found</h1> 
+						{{/if}}
+					{{else}}
+						{{#each room in previousChats}}
+							{{> chatRoomHistoryItem room}}
+						{{/each}}
+					{{/if}}
+					</ul>      
+				</div>
+				{{else}}
+					{{#if isChatClicked}}
+						{{> customerChatHistoryMessages}}
+					{{/if}}
+				{{/if}}
+			{{else}}
+				<h1 class='noresult'>No Previous Chats found</h1> 
+			{{/if}}
+		</div>
+	</div>
+</template>
+

app/livechat/client/views/app/tabbar/customerChatHistory.js

@@ -0,0 +1,161 @@
+import { Template } from 'meteor/templating';
+import moment from 'moment';
+import { ReactiveVar } from 'meteor/reactive-var';
+import './customerChatHistory.html';
+import './chatRoomHistoryItem.html';
+import { APIClient, t } from '../../../../../utils/client';
+import { Session } from 'meteor/session';
+import _ from 'underscore';
+const ITEMS_COUNT = 50;
+let isChanged;
+Template.customerChatHistory.helpers({
+
+	hasChatHistory() {
+		// will return if user has any chatHistory or not
+		return Template.instance().hasHistory.get()
+	},
+	isSearching() {
+		return Template.instance().isSearching.get()
+	},
+	isAllChat() {
+        // will return is have to load all chat 
+		return Template.instance().isAllChat.get();
+	},
+	isChatClicked() {
+		// will return that if you have clicked in a single chatHistory
+		return Template.instance().isChatClicked.get();
+	},
+	isfound() {
+		// will return if find any search result
+		return Session.get('found');
+	},
+	searchResults(){
+		// will return search result
+		return 	Template.instance().searchResult.get();
+	},
+	previousChats() {
+		// will return pervious chats list
+		return addTime(Template.instance().history.get(),'true');
+	},
+	title() {
+
+		let title = moment(this.ts).format('L LTS');
+
+		if (this.label) {
+			title += ` - ${ this.label }`;
+		}
+		return title;
+	},
+});
+
+const DEBOUNCE_TIME_FOR_SEARCH_DEPARTMENTS_IN_MS = 300;
+Template.customerChatHistory.onCreated(function() {
+	isChanged = false;
+	const currentData = Template.currentData();
+	this.filter = new ReactiveVar('');
+	this.hasHistory = new ReactiveVar(false);
+	this.visitorId = new ReactiveVar();
+	this.history = new ReactiveVar([]);
+	this.offset = new ReactiveVar(0);
+	this.total = new ReactiveVar(0);
+	this.isAllChat = new ReactiveVar(true);
+	this.isSearching = new ReactiveVar(false);
+	this.isChatClicked = new ReactiveVar(true);
+	this.autorun(async () => {
+		const { room } = await APIClient.v1.get(`rooms.info?roomId=${ currentData.rid }`);
+		if (room && room.v) {
+			this.visitorId.set(room.v._id);
+		}
+	});
+	this.autorun(async () => {
+		const filter = this.filter.get()
+		if (!this.visitorId.get() || !currentData || !currentData.rid) {
+			return;
+		}
+		const offset = this.offset.get();
+		const searchText='null';
+		let baseUrl = `livechat/visitors.chatHistory/room/${ currentData.rid}/visitor/${ this.visitorId.get() }?searchText=${searchText}&count=${ ITEMS_COUNT }&offset=${ offset }`
+		const { history, total,resultArray } = await APIClient.v1.get(baseUrl);
+		if(history.length > 0){
+			for(var i=0 ;i<history.length; i++){
+				if(!history[i].open){
+					this.hasHistory.set(true);
+				}
+			}
+		}
+		this.total.set(total);
+		this.history.set(this.history.get().concat(history));	
+	});	
+});
+
+Template.customerChatHistory.events({
+	'scroll .visitor-scroll': _.throttle(function(e, instance) {
+		if (e.target.scrollTop >= (e.target.scrollHeight - e.target.clientHeight)) {
+			const history = instance.history.get();
+			if (instance.total.get() <= history.length) {
+				return;
+			}
+			return instance.offset.set(instance.offset.get() + ITEMS_COUNT);
+		}
+	}, 200),
+	'keyup #searchInput':  async function(event,template){ 
+		const offset = template.offset.get();
+		template.isSearching.set(true);
+		template.isChatClicked.set(false);
+		template.isAllChat.set(true);
+		Session.set('found',false);
+		if(event.target.value == ''){
+			template.isSearching.set(false);
+		}else{
+				Template.instance().searchResult = new ReactiveVar([]);	
+				var result = loadRoom(event.target.value ,Template.currentData().rid,template.visitorId.get(),offset)
+				result.then(function(v){
+					if(v != null){
+					Session.set('found',true); 
+					Session.set('searchResult',v);
+					template.searchResult.set(v);
+					}
+				})	
+	}},
+	'click .list-chat': async function(event,template){
+		event.preventDefault();
+		template.isAllChat.set(false);
+		template.isChatClicked.set(true);
+		let id = event.currentTarget.id
+		let token = event.currentTarget.attributes.aria.value;
+		Session.set('FetchID',id);
+		Session.set('FetchToken',token)
+	}
+
+});
+
+Template.customerChatHistory.onDestroyed(function(){
+	var header = document.getElementsByClassName('Contextualheading');
+	if(header[0]){
+		header[0].innerText = ''
+		header[0].className = 'contextual-bar__header-title';
+	}
+})
+
+loadRoom = async (searchTerm,rid,visitorId,offset) =>{
+	let baseUrl = `livechat/visitors.chatHistory/room/${ rid}/visitor/${ visitorId }?searchText=${searchTerm}&count=${ ITEMS_COUNT }&offset=${ offset }`
+		const { resultArray } = await APIClient.v1.get(baseUrl);
+		if(resultArray.length==0){
+			return null;
+		}else{
+			return  addTime(resultArray);
+		}
+}
+
+addTime = (array,value='false') => {
+	if(value=='true'){
+		if(!isChanged){
+			array.shift();
+			isChanged = true;
+		}
+	}
+	for(var i=0; i<array.length;i++){
+			array[i].time = moment(array[i].ts).format('LT');
+	};
+	return array;
+}

app/livechat/client/views/app/tabbar/customerChatHistoryMessages.html

@@ -0,0 +1,56 @@
+<template name='customerChatHistoryMessages'>
+    {{#if isLoading}}
+        <h2 class='loding'>
+            {{_ "Loading..."}}
+        </h2>
+    {{else}}
+        <div class="chatHistory">
+            <div class='msgcount'>
+                <p><span>{{len}} messages</span></p>
+            </div>
+            <ul>
+                {{#each historyResult}}
+                    {{#unless t}}
+                        <li>
+                            <div class="history-main">
+                                <div class="history-img">
+                                    <img src="/avatar/{{u.username}}" >
+                                </div>
+                                <div class="history-detail-main">
+                                    <div class="detail-main-upper">
+                                        <h1>{{u.name}}</h1>
+                                        <p>{{time}}</p>
+                                    </div>
+                                    <div class="detail-main-lower">
+                                        <p>{{msg}}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    {{else}}
+                        {{#if u.name}}
+                            <div class="closed-div">
+                                <p class='closed-div-p'><span>Conversation closed</span></p>
+                                <div class="history-main">
+                                    <div class="history-img">
+                                        <div class='belldiv'>
+                                            <i class="icon-bell"></i>
+                                        </div>
+                                    </div>
+                                    <div class="history-detail-main">
+                                        <div class="detail-main-upper closed-h1">
+                                            <h1>Agent comment:</h1>
+                                        </div>
+                                        <div class="detail-main-lower closed-p">
+                                            <p>"{{msg}}".</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        {{/if}}
+                    {{/unless}}
+                {{/each}}
+            </ul>
+        </div>
+    {{/if}}	
+</template>

app/livechat/client/views/app/tabbar/customerChatHistoryMessages.js

@@ -0,0 +1,54 @@
+import { Template } from 'meteor/templating';
+import moment from 'moment';
+import './customerChatHistoryMessages.html';
+import { APIClient, t } from '../../../../../utils/client';
+import { Session } from 'meteor/session';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+Template.customerChatHistoryMessages.helpers({
+	historyResult() {
+		// will return all the messages in history room
+		return Template.instance().historyResult.get();
+    },
+    len() {
+		// will return length of total messages in room
+		let len = Template.instance().historyResult.get();
+		return len = len.length;
+	},
+})
+Template.customerChatHistoryMessages.onCreated(function() {
+    this.historyResult = new ReactiveVar([]);
+    this.history = new ReactiveVar([]);
+    var id = Session.get('FetchID');
+    var token = Session.get('FetchToken')
+    this.autorun(async () => {
+		const{ messages }  =  await APIClient.v1.get(`livechat/messages.history/${ id }?token=${token}`); 
+    // will return pervious chats list
+        this.history.set(messages);
+        let allMessages = addTIME(this.history.get());
+        var header = document.getElementsByClassName('contextual-bar__header-title');
+        var day,agentName;
+
+        if(allMessages.length !== 0){
+          var len = allMessages.length-1;
+          agentName = allMessages[len].u.username;
+          day = moment(allMessages[len].ts).format('dddd'); 
+        }
+        if(header[0]){
+        header[0].innerText= `${agentName}, closed at ${day}`
+        header[0].className = 'Contextualheading';
+		}
+        this.historyResult.set(allMessages);  
+    })
+})
+addTIME = (array) => {
+	let newArray = [];
+	for(var j=array.length-2; j>=1;j--){
+      array[j].time = moment(array[j].ts).format('LT');
+      newArray.push(array[j])
+  };
+  return newArray;
+
+}
+
+