[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/customerChatHistory.html

@@ -0,0 +1,73 @@
+<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 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 previousChats}}
+					<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>
+					{{/each}}
+				{{/if}}
+				</ul>      
+			</div>
+		{{else}}
+			{{#if isChatClicked}}
+				{{> customerChatHistoryMessages}}
+			{{/if}}
+		{{/if}}
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,138 @@
+import { Template } from 'meteor/templating';
+import moment from 'moment';
+import { ReactiveVar } from 'meteor/reactive-var';
+import './customerChatHistory.html';
+import { APIClient, t } from '../../../../../utils/client';
+import { Session } from 'meteor/session';
+
+const ITEMS_COUNT = 50;
+let  historyResult 
+let len, msgs
+let allHistoryChat ;
+Template.customerChatHistory.helpers({
+	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
+		var r = Session.get('searchResult');
+		return 	Template.instance().searchResult.get();
+	},
+	previousChats() {
+		// will return pervious chats list
+		let history = Template.instance().history.get();
+		let newHisTory = []
+		for(i=1; i<history.length; i++){
+			history[i].time = moment(history[i].ts).format('LT');
+			history[i].count = history[i].msgs-3;
+			newHisTory.push(history[i]);
+		}
+		return newHisTory;
+	},
+	title() {
+
+		let title = moment(this.ts).format('L LTS');
+
+		if (this.label) {
+			title += ` - ${ this.label }`;
+		}
+		return title;
+	},
+});
+
+Template.customerChatHistory.onCreated(function() {
+	const currentData = Template.currentData();
+	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 () => {
+
+		if (!this.visitorId.get() || !currentData || !currentData.rid) {
+			return;
+		}
+		const offset = this.offset.get();
+		const { history, total } = await APIClient.v1.get(`livechat/visitors.chatHistory/room/${ currentData.rid }/visitor/${ this.visitorId.get() }?count=${ ITEMS_COUNT }&offset=${ offset }`);
+		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){ 
+		template.isSearching.set(true);
+		searchResults = [];
+		let text = event.target.value;
+		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([]);
+			let history = Template.instance().history.get();
+			let array = [];
+			for(var j=0; j<history.length; j++){
+				var rid = history[j]._id;
+				const search  =  await APIClient.v1.get(`chat.search?roomId=${rid}&searchText=${text}`);
+				for(k=0; k<search.messages.length; k++){
+					search.messages[k].time = moment(search.messages[k].ts).format('LT');
+					array.push(search.messages[k]);
+				}
+			}
+			if(array.length >0){
+					Session.set('found',true); 
+					Session.set('searchResult',array);
+					template.searchResult.set(array)
+				}	
+	}},
+	'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';
+	}
+})

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