Add broadcast UI + softcoding

src/app/chat-page/add-broadcast/add-broadcast.component.html

@@ -1 +1,24 @@
-<p>add-broadcast works!</p>
+<section class="info">
+    <img src="{{tempBroadcastInfo.user.imgUrl}}">
+    <div class="input-holder">
+        <input type="text" placeholder="Enter name of the Channel" [(ngModel)]="tempBroadcastInfo.user.name">
+        <input type="text" placeholder="Paste the image URL" [(ngModel)]="tempBroadcastInfo.user.imgUrl">
+    </div>
+</section>
+
+<div class="friend-list-holder">
+    <header> Select Members </header>
+    <input type="text" [(ngModel)]="searchTerm" placeholder="Search Members" (input)="searchMembers()">
+    <ul>
+        <li *ngFor="let friend of tempFriendList" [ngClass]="{'active' : isFriendMember(friend.user.id) }"
+        (click)="toggleMember(friend.user.id)">
+            <img src="{{ friend.user.imgUrl }}" alt="">
+            <label> {{ friend.user.name }} </label>
+        </li>
+    </ul>
+</div>
+
+<button class="add-broadcast-button" (click)="closeBroadcast()" [ngClass]="{'active' : tempBroadcastInfo.user.name }">
+    <svg-icon *ngIf="tempBroadcastInfo.user.name" [applyClass]="true" class="icon" src="assets/custom-icons/check.svg"></svg-icon>
+    <svg-icon *ngIf="!tempBroadcastInfo.user.name" [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+</button>

src/app/chat-page/add-broadcast/add-broadcast.component.scss

@@ -0,0 +1,125 @@
+.info {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .input-holder {
+        width: calc(100% - 100px);
+    }
+
+    img {
+        width: 80px;
+        height: 80px;
+        border: 2px solid var(--teal-green);
+        background-color: #cecece;
+        overflow: hidden;
+        border-radius: 50%;
+        object-fit: cover;
+        display: block;
+    }
+
+    input {
+        width: 100%;
+        display: block;
+        border: 0px;
+        border-bottom: 2px solid var(--light-grey);
+        color: var(--dark-grey);
+        padding: 10px 0;
+        font-size: 16px;
+        margin-bottom: 10px;
+        font-weight: 600;
+    }
+}
+
+.friend-list-holder {
+    header {
+        font-size: 16px;
+        font-weight: bold;
+        color: var(--dark-grey);
+        margin: 30px auto 0px;
+    }
+
+    ul {
+        list-style: none;
+        margin-top: 20px;
+    }
+
+    li {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        padding: 15px;
+        margin: 0px auto;
+        border-bottom: 1px solid #cecece;
+
+        &.active {
+            background-color: var(--teal-green);
+            border-radius: 7px;
+            label {
+                color: white;
+            }
+        }
+    }
+
+    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);
+    }
+
+
+    input {
+        width: 100%;
+        display: block;
+        border: 0px;
+        border-bottom: 2px solid var(--light-grey);
+        color: var(--dark-grey);
+        font-size: 14px;
+        padding: 10px 0;
+        font-weight: 600;
+    }
+}
+
+.add-broadcast-button {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    z-index: 1;
+    background-color: var(--danger);
+    border: 0px;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid white;
+
+    .icon {
+        width: 60%;
+        position: relative;
+        top: 1px;
+        fill: white;
+    }
+
+    &.active {
+        background-color: var(--teal-green);
+
+        .icon {
+            width: 70%;
+            fill: white;
+        }
+    }
+}

src/app/chat-page/add-broadcast/add-broadcast.component.ts

@@ -11,11 +11,61 @@ export class AddBroadcastComponent implements OnInit {
     @Input() friendList: any = [];
     searchTerm: string = '';
     tempFriendList: any = [];
+    tempBroadcastInfo: any = {}
 
     constructor() { }
 
     ngOnInit(): void {
+        if (this.broadcastInfo) {
+            this.tempBroadcastInfo = this.broadcastInfo;
+        } else {
+            this.tempBroadcastInfo = {
+                user: {
+                    id: null,
+                    name: '',
+                    imgUrl: ''
+                },
+                members: [],
+                conversation: []
+            };
+        }
         this.tempFriendList = this.friendList;
     }
 
+    isFriendMember(id: string | number) {
+        return this.tempBroadcastInfo.members.includes(id);
+    }
+
+    toggleMember(id: string | number) {
+        if (this.tempBroadcastInfo.members.includes(id)) {
+            let index = this.tempBroadcastInfo.members.indexOf(id);
+            this.tempBroadcastInfo.members.splice(index, 1);
+        } else {
+            this.tempBroadcastInfo.members.push(id);
+        }
+    }
+
+    searchMembers() {
+        if (this.searchTerm) {
+            this.tempFriendList = this.friendList.filter((friend) => {
+                return friend.user.name.toLowerCase().includes(this.searchTerm.toLowerCase());
+            });
+        } else {
+            this.tempFriendList = this.friendList;
+        }
+    }
+
+    closeBroadcast() {
+        if (this.tempBroadcastInfo.user.name) {
+            this.addBroadcastEvents.emit({
+                type: 'data',
+                data: this.tempBroadcastInfo
+            });
+        } else {
+            this.addBroadcastEvents.emit({
+                type: 'close'
+            });
+        }
+    }
+
 }

src/app/chat-page/chat-page.component.html

@@ -51,7 +51,8 @@
                     <img src="{{ chat.user.imgUrl }}">
                     <div class="content">
                         <label> {{ chat.user.name }} </label>
-                        <p>
+                        <p> {{ chat.members.length }} Member(s) </p>
+                        <p *ngIf="chat.conversation.length > 0">
                             {{ chat.conversation[chat.conversation.length - 1].message }}
                         </p>
                     </div>
@@ -61,11 +62,11 @@
                 </li>
             </ul>
 
-            <button class="add-broadcast-button" (click)="showAddBroadCast = !showAddBroadCast">
+            <button class="add-broadcast-button" (click)="selectedBroadcastChat = null; showAddBroadCast = true" *ngIf="!showAddBroadCast">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon>
             </button>
 
-            <app-add-broadcast *ngIf="showAddBroadCast"></app-add-broadcast>
+            <app-add-broadcast (addBroadcastEvents)="getAddBroadcastEvents($event)" [friendList]="chatList" [broadcastInfo]="selectedBroadcastChat" *ngIf="showAddBroadCast" #addbroadcast></app-add-broadcast>
 
         </div>
 
@@ -101,7 +102,7 @@
 
     <section class="chat-window-slideup" [ngClass]="{'active' : selectedChat}">
         <app-chat-window [conversation]="selectedChat" *ngIf="selectedChat"
-        (hideChat)="getChatEvent($event)"></app-chat-window>
+        (chatEvents)="getChatEvent($event)"></app-chat-window>
     </section>
 
 </section>

src/app/chat-page/chat-page.component.ts

@@ -8,8 +8,9 @@ import * as moment from 'moment';
 	styleUrls: ['./chat-page.component.scss']
 })
 export class ChatPageComponent implements OnInit {
-    selectedSegment: string = 'messages';
+    selectedSegment: string = 'broadcasts';
     selectedChat: any = null;
+    selectedBroadcastChat: any;
     showSearch: boolean = false;
     searchTerm: string = '';
     searchList = {
@@ -109,10 +110,11 @@ export class ChatPageComponent implements OnInit {
 
     broadCastList = [{
         user: {
-            id: 0,
+            id: 1,
             name: '10th Standard Channel',
             imgUrl: 'https://lh3.googleusercontent.com/9vppS4or0GIIqIdxU7vrMFbHMOOhO3FgFWPN1WYUH4xXd9GwFvZzeCGYrhezckELzAM'
         },
+        members: [],
         conversation: [{
             message: 'Hi Students, Hope your all are doing well. You will have special classes tomorrow by DK sir @4.30PM. \n Followed by Quiz. ATB!',
             user: 0
@@ -143,8 +145,14 @@ export class ChatPageComponent implements OnInit {
         this.selectedChat = this.broadCastList[index];
     }
 
-    getChatEvent(e: boolean) {
-        if (e) {
+    getChatEvent(e: string) {
+        if (e === 'close') {
+            this.selectedChat = null;
+        }
+
+        if (e === 'edit') {
+            this.showAddBroadCast = true;
+            this.selectedBroadcastChat = JSON.parse(JSON.stringify(this.selectedChat));
             this.selectedChat = null;
         }
     }
@@ -156,7 +164,7 @@ export class ChatPageComponent implements OnInit {
     }
 
     getFormattedDate() {
-        return moment().format('ddd, hh:MM a')
+        return moment().format('ddd, hh:MM a');
     }
 
     searchChats() {
@@ -174,4 +182,27 @@ export class ChatPageComponent implements OnInit {
         }
     }
 
+    getAddBroadcastEvents(e: any) {
+        if (e.type === 'close') {
+            this.showAddBroadCast = false;
+        }
+
+        if (e.type === 'data') {
+            let broadcastData = e.data;
+
+            if (!broadcastData.user.id) {
+                broadcastData.user.id = this.broadCastList[this.broadCastList.length - 1].user.id + 1;
+                this.broadCastList.push(broadcastData);
+            } else {
+                let index = this.broadCastList.findIndex((broadcast) => {
+                    return broadcast.user.id === broadcastData.user.id;
+                });
+
+                this.broadCastList[index] = broadcastData;
+            }
+
+            this.showAddBroadCast = false;
+        }
+    }
+
 }

src/app/chat-page/chat-window/chat-window.component.html

@@ -1,8 +1,11 @@
 <header>
     <h5>
         {{ conversation.user.name }}
+        <br>
+        <span *ngIf="conversation.members"> {{ conversation.members.length }} Member(s) </span>
     </h5>
 
+    <button (click)="editBroadcast()" class="edit-button" *ngIf="conversation.members"> <svg-icon [applyClass]="true" class="icon edit" src="assets/custom-icons/pencil.svg"></svg-icon> </button>
     <button (click)="closeChat()"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon> </button>
 </header>
 <ul>

src/app/chat-page/chat-window/chat-window.component.scss

@@ -12,10 +12,12 @@ header {
         letter-spacing: 1px;
         font-size: 18px;
         color: var(--ash-black);
-        max-width: 50%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        width: calc(100% - 90px);
+
+        span {
+            color: var(--dark-grey);
+            font-size: 14px;
+        }
     }
 
     button {
@@ -25,6 +27,16 @@ header {
         background-color: var(--light-grey);
         border: 0px;
 
+        &.edit-button {
+            background-color: var(--teal-green);
+
+            .icon {
+                fill: white;
+                width: 15px;
+                height: 15px;
+            }
+        }
+
         .icon {
             width: 12px;
             height: 12px;

src/app/chat-page/chat-window/chat-window.component.ts

@@ -9,7 +9,7 @@ import * as moment from 'moment';
 export class ChatWindowComponent implements OnInit {
     @Input() conversation: any;
     messageText: string = '';
-    @Output() hideChat = new EventEmitter();
+    @Output() chatEvents = new EventEmitter();
 
 	constructor() { }
 
@@ -50,6 +50,10 @@ export class ChatWindowComponent implements OnInit {
     }
 
     closeChat() {
-        this.hideChat.emit(true);
+        this.chatEvents.emit('close');
+    }
+
+    editBroadcast() {
+        this.chatEvents.emit('edit');
     }
 }

src/assets/custom-icons/check.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375
+			l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4
+			c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/custom-icons/pencil.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<polygon points="51.2,353.28 0,512 158.72,460.8 		"/>
+	</g>
+</g>
+<g>
+	<g>
+
+			<rect x="89.73" y="169.097" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -95.8575 260.3719)" width="353.277" height="153.599"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M504.32,79.36L432.64,7.68c-10.24-10.24-25.6-10.24-35.84,0l-23.04,23.04l107.52,107.52l23.04-23.04
+			C514.56,104.96,514.56,89.6,504.32,79.36z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>