From c3052c1c07ff27c33d93c4fd980e833755ed2732 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 9 Jul 2020 20:54:25 +0530 Subject: [PATCH] Search feature in Chat & broadcast --- src/app/chat-page/chat-page.component.html | 48 ++++-- src/app/chat-page/chat-page.component.scss | 56 +++++++ src/app/chat-page/chat-page.component.ts | 38 ++++- .../chat-window/chat-window.component.ts | 12 +- src/app/tabs/more/more.component.scss | 1 + src/assets/custom-icons/attendance-1.svg | 66 +++++++- src/assets/custom-icons/chat-color.svg | 2 +- src/assets/custom-icons/class.svg | 100 +----------- src/assets/custom-icons/duel.svg | 147 +++++++----------- src/assets/custom-icons/forum.svg | 68 +++++++- 10 files changed, 326 insertions(+), 212 deletions(-) diff --git a/src/app/chat-page/chat-page.component.html b/src/app/chat-page/chat-page.component.html index 342fdb1..2e6e3c9 100644 --- a/src/app/chat-page/chat-page.component.html +++ b/src/app/chat-page/chat-page.component.html @@ -10,15 +10,16 @@
- - - - - - + + +
-
+
diff --git a/src/app/chat-page/chat-page.component.scss b/src/app/chat-page/chat-page.component.scss index d5fbcbb..ae30c09 100644 --- a/src/app/chat-page/chat-page.component.scss +++ b/src/app/chat-page/chat-page.component.scss @@ -17,6 +17,13 @@ border-radius: 50%; overflow: hidden; margin: 0 10px 5px 0px; + display: flex; + align-items: center; + justify-content: center; + + &.hidden { + display: none; + } .icon { width: 18px; @@ -30,6 +37,17 @@ object-fit: cover; } } + + input { + border: 0px; + border-bottom: 2px solid var(--light-grey); + width: calc(100% - 60px); + margin-right: auto; + height: 40px; + background-color: transparent; + color: white; + font-size: 16px; + } } .segment-buttons { @@ -146,3 +164,41 @@ transform: translateY(0); } } + +.search-list { + header { + font-size: 16px; + font-weight: bold; + color: var(--dark-grey); + margin: 20px auto 0px; + } + + ul { + list-style: none; + } + + li { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 15px 0; + margin: 0px auto; + border-bottom: 1px solid #cecece; + } + + img { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 15px; + } + + label { + display: block; + font-size: 15px; + font-weight: 500; + color: var(--dark-grey); + width: calc(100% - 50px); + } +} diff --git a/src/app/chat-page/chat-page.component.ts b/src/app/chat-page/chat-page.component.ts index d4777d8..5873c37 100644 --- a/src/app/chat-page/chat-page.component.ts +++ b/src/app/chat-page/chat-page.component.ts @@ -10,6 +10,12 @@ import * as moment from 'moment'; export class ChatPageComponent implements OnInit { selectedSegment: string = 'messages'; selectedChat: any = null; + showSearch: boolean = false; + searchTerm: string = ''; + searchList = { + chatList: [], + broadCastList: [] + }; chatList = [{ user: { @@ -91,6 +97,13 @@ export class ChatPageComponent implements OnInit { message: 'I topped the class, hehe', user: 2 }] + }, { + user: { + id: 3, + name: 'Dwayne The Rock', + imgUrl: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg' + }, + conversation: [] }]; broadCastList = [{ @@ -106,13 +119,15 @@ export class ChatPageComponent implements OnInit { message: 'Hi Students, I have uploaded a question in the forum. Please take a look!', user: 0 }] - }] + }]; constructor( private location: Location ) { } ngOnInit(): void { + this.searchList.chatList = this.chatList; + this.searchList.broadCastList = this.broadCastList; } back() { @@ -133,8 +148,29 @@ export class ChatPageComponent implements OnInit { } } + getChatList() { + return this.chatList.filter((chat) => { + return chat.conversation && chat.conversation.length > 0; + }) + } + getFormattedDate() { return moment().format('ddd, hh:MM a') } + searchChats() { + if (this.searchTerm) { + this.searchList.chatList = this.chatList.filter((chat) => { + return chat.user.name.toLowerCase().includes(this.searchTerm.toLowerCase()); + }); + + this.searchList.broadCastList = this.broadCastList.filter((chat) => { + return chat.user.name.toLowerCase().includes(this.searchTerm.toLowerCase()); + }); + } else { + this.searchList.chatList = this.chatList; + this.searchList.broadCastList = this.broadCastList; + } + } + } diff --git a/src/app/chat-page/chat-window/chat-window.component.ts b/src/app/chat-page/chat-window/chat-window.component.ts index 77cad41..f88695b 100644 --- a/src/app/chat-page/chat-window/chat-window.component.ts +++ b/src/app/chat-page/chat-window/chat-window.component.ts @@ -39,10 +39,14 @@ export class ChatWindowComponent implements OnInit { } scrollToBottom() { - document.querySelector('.message-' + (this.conversation.conversation.length - 1)).scrollIntoView({ - behavior: 'smooth', - block: 'end' - }); + try { + document.querySelector('.message-' + (this.conversation.conversation.length - 1)).scrollIntoView({ + behavior: 'smooth', + block: 'end' + }); + } catch { + return; + } } closeChat() { diff --git a/src/app/tabs/more/more.component.scss b/src/app/tabs/more/more.component.scss index 958b2e0..dffb69c 100644 --- a/src/app/tabs/more/more.component.scss +++ b/src/app/tabs/more/more.component.scss @@ -168,6 +168,7 @@ height: 40px; display: block; margin: 0 auto; + fill: var(--dark-grey); } h4 { diff --git a/src/assets/custom-icons/attendance-1.svg b/src/assets/custom-icons/attendance-1.svg index 22621d1..1ffb690 100644 --- a/src/assets/custom-icons/attendance-1.svg +++ b/src/assets/custom-icons/attendance-1.svg @@ -1 +1,65 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/chat-color.svg b/src/assets/custom-icons/chat-color.svg index 07cbb85..286e187 100644 --- a/src/assets/custom-icons/chat-color.svg +++ b/src/assets/custom-icons/chat-color.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/src/assets/custom-icons/class.svg b/src/assets/custom-icons/class.svg index 114982f..8929827 100644 --- a/src/assets/custom-icons/class.svg +++ b/src/assets/custom-icons/class.svg @@ -1,99 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/custom-icons/duel.svg b/src/assets/custom-icons/duel.svg index 01768a6..8071fe5 100644 --- a/src/assets/custom-icons/duel.svg +++ b/src/assets/custom-icons/duel.svg @@ -1,100 +1,57 @@ - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + viewBox="0 0 305.093 305.093" style="enable-background:new 0 0 305.093 305.093;" xml:space="preserve"> + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/forum.svg b/src/assets/custom-icons/forum.svg index 1713bbf..b6360e8 100644 --- a/src/assets/custom-icons/forum.svg +++ b/src/assets/custom-icons/forum.svg @@ -1 +1,67 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +