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

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import * as moment from 'moment';

@Component({
	selector: 'app-chat-page',
	templateUrl: './chat-page.component.html',
	styleUrls: ['./chat-page.component.scss']
})
export class ChatPageComponent implements OnInit {
    selectedSegment: string = 'broadcasts';
    selectedChat: any = null;
    selectedBroadcastChat: any;
    showSearch: boolean = false;
    searchTerm: string = '';
    searchList = {
        chatList: [],
        broadCastList: []
    };
    showAddBroadCast: boolean = false;

    chatList = [{
        user: {
            id: 1,
            name: 'Jordan Janardhan',
            imgUrl: 'https://c-sf.smule.com/rs-s79/arr/c1/0b/83a9328a-1469-4bfd-9e94-622f7ca7b1b5.jpg'
        },
        conversation: [{
            message: 'Hi, What\'s up!?',
            user: 1
        }, {
            message: 'Nothing, Was checking upon you!',
            user: 0
        }, {
            message: 'How you?',
            user: 1
        }, {
            message: 'All Good! you?',
            user: 0
        }, {
            message: 'Dont you feel sad?',
            user: 1
        }, {
            message: 'Why?',
            user: 0
        }, {
            message: 'Cause you flunked the quiz and probably will end up writing a lot of assignments',
            user: 1
        }, {
            message: 'Meh, I will game!',
            user: 0
        }, {
            message: 'Nice! Which game?',
            user: 1
        }, {
            message: 'WOW',
            user: 0
        }, {
            message: 'WOW?',
            user: 1
        }, {
            message: 'World of warcraft you newb!',
            user: 0
        }]
    }, {
        user: {
            id: 2,
            name: 'Sannidhi Mahajan',
            imgUrl: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
        },
        conversation: [{
            message: 'Did you get to answer Today\'s Quiz?',
            user: 2
        }, {
            message: 'Yes!, wbu?',
            user: 0
        }, {
            message: 'I Flunked as usual',
            user: 0
        }, {
            message: 'Oh, tats sad! Learn to study daa',
            user: 2
        }, {
            message: 'I topped the class, hehe',
            user: 2
        }, {
            message: 'Did you get to answer Today\'s Quiz?',
            user: 2
        }, {
            message: 'Yes!, wbu?',
            user: 0
        }, {
            message: 'I Flunked as usual',
            user: 0
        }, {
            message: 'Oh, tats sad! Learn to study daa',
            user: 2
        }, {
            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 = [{
        user: {
            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
        }, {
            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() {
        this.location.back();
    }

    openPersonalChat(index: number) {
        this.selectedChat = this.chatList[index];
    }

    openBroadcastChat(index: number) {
        this.selectedChat = this.broadCastList[index];
    }

    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;
        }
    }

    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;
        }
    }

    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;
        }
    }

}