Group Chat Work flow

Bindable Properties

  1. getDataCallback
  2. evtSendCallback
  3. options

Overview

Basic Group Chat component.

Features/Functionality

  • Previous messages are shown with latest at end.
  • New message can be sent.
  • For desktops, scroll bar will be shown on hover.
  • For small screens it will already be shown.

Defaults

  1. If !options, then options will be an object with containerClass empty. But a default class will be applied to container with background-image. No defaults taken for data.

Breakdown

Set Data

  • Call data callback.

  • Set data and set default options.

  • Convert date and time to proper format and set it.

  • Group messages according to date.

  • Set Colors

    • Set users and colors upto the colors we have by taking darkest colors of all shades.
    • If there is another user then set color as 'black'.

Page Load and Design Creation

  • Scroll to the end to show recent messages.

Send button Click

  • Create the message object to be sent and one to be pushed.
  • Get the current date and time to send.
  • Convert data and time to proper format to display.
  • Push the object to display and scroll to bottom.
  • Call method to send message.

Resend Message Click

  • Call method to Send Message

Send Message

  • Initiate Sending.
  • Call send message callback.
  • After response comes, stop sending and set variables according to returned status.