Merge pull request #29 from frontend-park-mail-ru/develop

rk4 chat UI
frontend-park-mail-ru · Dec 16, 2019 · 7c9d94a · 7c9d94a · vercel · Dec 16, 2019
2 parents 26d5f13 + 810918c
commit 7c9d94a
Show file tree

Hide file tree

Showing 8 changed files with 379 additions and 12 deletions.
diff --git a/src/app/components/ClientChat/index.handlebars b/src/app/components/ClientChat/index.handlebars
@@ -0,0 +1,61 @@
+<div id="{{_id}}" class="chat">
+	{{#loggedIn}}
+		<div class="chat-wrapper">
+			<div class="chat-header">
+				<h2 class="chat-header__title">Чат</h2>
+			</div>
+			<div class="chat-messages-screen">
+
+				<div class="chat-messages">
+					<div class="date">Сегодня</div>
+					{{#each messages}}
+						<div class="message message_is-first-in-block">
+							<div class="content-wrapper {{#isSender}}content-wrapper_user{{/isSender}}">
+								<div class="content">
+									<div class="message-text-wrapper {{#isSender}}message-text-wrapper_user{{/isSender}}">
+										<span class="message-text">{{message}}</span>
+										<div class="message-text-footer">
+											<i class="message-text__state fas fa-check"></i>
+											<span class="message-time">{{time}}</span>
+										</div>
+									</div>
+
+								</div>
+							</div>
+						</div>
+					{{/each}}
+
+					{{!--				<div class="message message_is-first-in-block">--}}
+					{{!--					<div class="content-wrapper">--}}
+					{{!--						<div class="content">--}}
+					{{!--							<div class="message-text-wrapper">--}}
+					{{!--								<span class="message-text">Hello</span>--}}
+					{{!--								<div class="message-text-footer">--}}
+					{{!--									<i class="message-text__state fas fa-check"></i>--}}
+					{{!--									<span class="message-time">12:20</span>--}}
+					{{!--								</div>--}}
+					{{!--							</div>--}}
+
+					{{!--						</div>--}}
+					{{!--					</div>--}}
+					{{!--				</div>--}}
+				</div>
+				<div class="chat-input">
+					<div class="chat-input__text">
+					<textarea class="message-textarea" placeholder="Напишите сообщение..."
+							  aria-label="Сообщение"></textarea>
+					</div>
+					<div class="chat-input__controls">
+						<button class="send-message-button fas fa-arrow-up"></button>
+					</div>
+				</div>
+			</div>
+
+		</div>
+	{{else}}
+		<div class="no-access-wrap">
+			<div class="no-access-text">Нет доступа</div>
+		</div>
+	{{/loggedIn}}
+
+</div>
diff --git a/src/app/components/ClientChat/index.js b/src/app/components/ClientChat/index.js
@@ -0,0 +1,119 @@
+import Component from '@frame/Component';
+import template from './index.handlebars';
+import './index.scss';
+
+const messages = [
+	{ isSender: true, message: 'Привет', time: '18:30' },
+	{ isSender: false, message: 'Чем могу помочь?', time: '18:31' },
+];
+
+export default class ClientChat extends Component {
+	constructor({ children = [], ...props }) {
+		super(props);
+
+		// const loggedIn = AuthService.isLoggedIn();
+		const loggedIn = true;
+		//
+		this.data = {
+			children,
+			messages,
+			loggedIn,
+		};
+
+		// bus.on(busEvents.USER_UPDATED, this.userUpdated);
+		// Socket.subscribe('ws_message', this.onMessage);
+		// Socket.send('init', {
+		// 	action: 'init',
+		// 	payload: {
+		// 		AccountId: '10',
+		// 		Message: ''
+		// 	}
+		// });
+	}
+
+	render() {
+		this.html = template({
+			...this.props,
+			...this.data,
+		});
+
+		// this.attachToParent();
+
+		return this.html;
+	}
+
+	postRender() {
+		this.sendBtn = this.el.querySelector('.send-message-button');
+		if (this.sendBtn) {
+			this.sendBtn.addEventListener('click', this.send);
+		}
+		this.textArea = this.el.querySelector('.message-textarea');
+		if (this.textArea) {
+			this.textArea.addEventListener('keypress', this.onKeyPress);
+		}
+		this.messages = this.el.querySelector('.chat-messages');
+	}
+
+	onKeyPress = (event) => {
+		const code = event.keyCode ? event.keyCode : event.which;
+
+		if (code === 13) {
+			event.preventDefault();
+			this.send(event);
+			return;
+		}
+	};
+
+	send = (event) => {
+		event.preventDefault();
+		this.addMessage(this.textArea.value);
+		this.textArea.focus();
+	};
+
+	addMessage = (message) => {
+		const d = new Date();
+		const time = d.getHours() + ':' + d.getMinutes();
+
+		this.data.messages.push({
+			isSender: true,
+			message,
+			time,
+		});
+
+		// Socket.send('send-message', {
+		// 	message,
+		// 	// accountId: this.data.user.id,
+		// 	author: 'id',
+		// 	body: message,
+		// 	time,
+		// });
+
+		this.stateChanged();
+
+		this.scrollToBottom();
+	};
+
+	// userUpdated = (data) => {
+	// 	const user = store.get(['user']);
+	// 	// const loggedIn = AuthService.isLoggedIn();
+	// 	const loggedIn = true;
+	//
+	// 	this.data = {
+	// 		user,
+	// 		loggedIn,
+	// 	};
+	//
+	// 	this.stateChanged();
+	// };
+
+	// onMessage = data => {
+	// 	console.log(data)
+	// };
+
+	scrollToBottom = () => {
+		this.messages = this.el.querySelector('.chat-messages');
+		if (this.messages) {
+			this.messages.scrollTop = this.messages.scrollHeight;
+		}
+	};
+}
diff --git a/src/app/components/ClientChat/index.scss b/src/app/components/ClientChat/index.scss
@@ -0,0 +1,175 @@
+$primary-color: #1f7ce7;
+
+.chat {
+	display: block;
+	height: 100%;
+	width: 100%;
+}
+
+.chat-wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	background-color: #fff;
+}
+
+.chat-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 18px 12px;
+	height: 60px;
+	background-color: #fff;
+	border-bottom: 1px solid #dddfe0;
+
+	&__title {
+		font-weight: 400;
+		font-size: 16px;
+		width: 100%;
+		text-align: center;
+	}
+}
+
+.chat-messages-screen {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	flex-basis: 0;
+	min-height: 0;
+}
+
+.chat-messages {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	min-height: 0;
+	height: 100%;
+	padding: 8px 12px 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.chat-input {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	position: relative;
+	border-top: 1px solid #dddfe0;
+	margin-bottom: 10px;
+}
+
+.chat-input__text {
+	min-height: 110px;
+	box-sizing: border-box;
+	padding: 14px 64px 0 16px;
+	max-height: 200px;
+	overflow-y: auto;
+	word-wrap: break-word;
+}
+
+.message-textarea {
+	height: 80px;
+	overflow: hidden;
+	margin: 0 auto 0 0;
+	padding: 0 0 10px;
+	border: 0;
+	outline: 0;
+	resize: none;
+	width: 100%;
+}
+
+.chat-input__controls {
+	position: absolute;
+	top: 10px;
+	right: 12px;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+}
+
+.send-message-button {
+	margin: 0 0 8px;
+	padding: 0;
+	border: 0;
+	//background: 0 0;
+	width: 34px;
+	height: 34px;
+	border-radius: 50%;
+	cursor: pointer;
+	outline: 0;
+	background-color: $primary-color;
+	color: #fff;
+}
+
+.date {
+	font-weight: 400;
+	font-size: 13px;
+	font-family: tuiText, Roboto, sans-serif;
+	line-height: 1.23;
+	color: #959ba4;
+	margin-bottom: 12px;
+	margin-top: 12px;
+	text-align: center;
+	text-transform: uppercase;
+}
+
+.content-wrapper {
+	display: flex;
+	flex-direction: row;
+}
+
+.content-wrapper_user {
+	flex-direction: row-reverse;
+}
+
+.content {
+	max-width: 87%;
+}
+
+.message-text-wrapper {
+	border-radius: 17px;
+	background-color: #eef2f7;;
+
+	margin-right: 8px;
+	padding: 5px 8px 6px 10px;
+	display: flex;
+	flex-direction: column;
+
+}
+
+.message-text-wrapper_user {
+	background-color: $primary-color;
+	color: #ffffff;
+	align-items: flex-end;
+}
+
+.message {
+	//display: block;
+	//flex-shrink: 0;
+	word-break: break-word;
+	line-height: 20px;
+	max-width: 100%;
+
+}
+
+.message_is-first-in-block {
+	margin-top: 16px;
+}
+
+.message-text-footer {
+	display: flex;
+	font-size: 13px;
+	justify-content: flex-end;
+	margin-top: 4px;
+	opacity: .5;
+	align-items: center;
+}
+
+.message-text__state {
+	margin-right: 5px;
+}
+
+
+
diff --git a/src/app/containers/Contract/content.handlebars b/src/app/containers/Contract/content.handlebars
@@ -121,14 +121,11 @@
 				</div>
 			</div>
 		{{/feedbackEnabled}}
-		<div class="tp-container card">
+		<div class="tp-container card fwork-chat-wrapper">
 			{{{ messagesTitle }}}
 			<div class="tp-container">
-				<div class="job-details__inner-item">
-					<textarea></textarea>
-					<div>
-						<button>Отправить</button>
-					</div>
+				<div class="fwork-chat">
+					{{{chat}}}
 				</div>
 			</div>
 		</div>