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

<section class="page-container full-bg" color="ash-black">
    <header class="nav-header" shadow="true">
        <button class="close-button" (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>
        <h5>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/chat.svg"></svg-icon>
            <span> Chat with friends </span>
        </h5>
    </header>

    <div class="members-holder">
        <input type="text" [(ngModel)]="searchTerm" placeholder="Search Friends & Broadcasts" *ngIf="showSearch"
        (input)="searchChats()">
        <button (click)="showSearch = !showSearch">
            <svg-icon *ngIf="!showSearch" [applyClass]="true" class="icon" src="assets/custom-icons/search.svg"></svg-icon>
            <svg-icon *ngIf="showSearch" [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>
        <button [ngClass]="{'hidden' : showSearch }" *ngFor="let chat of chatList; let i = index;" (click)="openPersonalChat(i)"> <img src="{{ chat.user.imgUrl }}" alt=""> </button>
    </div>

    <section class="segment-buttons" *ngIf="!showSearch">
        <button [ngClass]="{'active' : selectedSegment === 'messages'}"
        (click)="selectedSegment = 'messages'"> Messages </button>
        <button [ngClass]="{'active' : selectedSegment === 'broadcasts'}"
        (click)="selectedSegment = 'broadcasts'"> Broadcasts </button>
    </section>

    <section class="segment-details">

        <div *ngIf="selectedSegment === 'messages' && !showSearch">
            <ul class="chat-list">
                <li *ngFor="let chat of getChatList(); let i = index" (click)="openPersonalChat(i)">
                    <img src="{{ chat.user.imgUrl }}">
                    <div class="content">
                        <label> {{ chat.user.name }} </label>
                        <p>
                            {{ chat.conversation[chat.conversation.length - 1].message }}
                        </p>
                    </div>
                    <div class="time-stamp">
                        {{ getFormattedDate() }}
                    </div>
                </li>
            </ul>
        </div>

        <div *ngIf="selectedSegment === 'broadcasts' && !showSearch">
            <ul class="chat-list" *ngIf="!showAddBroadCast">
                <li *ngFor="let chat of broadCastList; let i = index" (click)="openBroadcastChat(i)">
                    <img src="{{ chat.user.imgUrl }}">
                    <div class="content">
                        <label> {{ chat.user.name }} </label>
                        <p>
                            {{ chat.conversation[chat.conversation.length - 1].message }}
                        </p>
                    </div>
                    <div class="time-stamp">
                        {{ getFormattedDate() }}
                    </div>
                </li>
            </ul>

            <button class="add-broadcast-button" (click)="showAddBroadCast = !showAddBroadCast">
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon>
            </button>

            <app-add-broadcast *ngIf="showAddBroadCast"></app-add-broadcast>

        </div>

        <section class="search-list" *ngIf="showSearch">

            <div *ngIf="searchList.chatList.length > 0">
                <header> Friends </header>
                <ul>
                    <li *ngFor="let chat of searchList.chatList; let i = index" (click)="openPersonalChat(i)">
                        <img src="{{ chat.user.imgUrl }}">
                        <label> {{ chat.user.name }} </label>
                    </li>
                </ul>
            </div>

            <div *ngIf="searchList.broadCastList.length > 0">
                <header> Broadcasts </header>
                <ul>
                    <li *ngFor="let chat of searchList.broadCastList; let i = index" (click)="openPersonalChat(i)">
                        <img src="{{ chat.user.imgUrl }}">
                        <label> {{ chat.user.name }} </label>
                    </li>
                </ul>
            </div>

            <div class="no-results" *ngIf="searchList.broadCastList.length === 0 && searchList.chatList.length === 0">
                <header> No results found </header>
            </div>

        </section>
    </section>


    <section class="chat-window-slideup" [ngClass]="{'active' : selectedChat}">
        <app-chat-window [conversation]="selectedChat" *ngIf="selectedChat"
        (hideChat)="getChatEvent($event)"></app-chat-window>
    </section>

</section>