Extract bf-chat into component initial commit

addon/components/bf-chat-item.js

@@ -0,0 +1,28 @@
+import Ember from 'ember';
+import layout from '../templates/components/bf-chat-item';
+
+export default Ember.Component.extend({
+  layout: layout,
+  tagName: 'div',
+  nameAlign: Ember.computed('user.id', 'currentUser.id', function() {
+    if (this.get('user.id') == this.get('currentUser.id')) {
+      return 'pull-right';
+    } else {
+      return 'pull-left';
+    }
+  }),
+  timeStampAlign: Ember.computed('user.id', 'currentUser.id', function() {
+    if (this.get('user.id') == this.get('currentUser.id')) {
+      return 'pull-left';
+    } else {
+      return 'pull-right';
+    }
+  }),
+  messageAlign: Ember.computed('user.id', 'currentUser.id', function() {
+    if (this.get('user.id') == this.get('currentUser.id')) {
+      return 'right';
+    } else {
+      return '';
+    }
+  })
+});

addon/components/bf-chat.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+import layout from '../templates/components/bf-chat';
+
+export default Ember.Component.extend({
+  layout: layout,
+  label: Ember.computed('chats.@each', function() {
+    return this.get('chats').length + ' messages';
+  }),
+  numberOfChatMessages: Ember.computed('chats.@each', function() {
+    return this.get('chats').length;
+  }),
+  actions: {
+    sendMessage: function() {
+      this.sendAction('action', this);
+    }
+  }
+});

addon/templates/components/bf-chat-item.hbs

@@ -0,0 +1,14 @@
+<div class="direct-chat-msg {{messageAlign}}">
+  <div class="direct-chat-info clearfix">
+    <span class="direct-chat-name {{nameAlign}}">
+      {{user.name}}
+    </span>
+    <span class="direct-chat-timestamp {{timeStampAlign}}">
+      {{moment timestamp}}
+    </span>
+  </div>
+  <img class="direct-chat-img" src="{{user.image}}">
+  <div class="direct-chat-text">{{message}}</div>
+</div>
+
+{{yield}}

addon/templates/components/bf-chat.hbs

@@ -0,0 +1,22 @@
+{{#bf-box title="Direct Chat" label=label color="warning"}}
+  <div class="box-body no-padding direct-chat-warning">
+    <div class="direct-chat-messages">
+      {{#each chat in chats}}
+        {{bf-chat-item message=chat.message user=chat.user currentUser=currentUser}}
+      {{/each}}
+    </div>
+  </div>
+  <div class="box-footer">
+    <form {{action "sendMessage" on="submit"}}>
+      <div class="input-group">
+        {{input value=message class="form-control" placeholder="Type a message..."}}
+        <span class="input-group-btn">
+          <button type="submit" class="btn btn-warning btn-flat">Send</button>
+        </span>
+      </div>
+    </form>
+  </div>
+{{/bf-box}}
+
+{{yield}}
+

app/components/bf-chat-item.js

@@ -0,0 +1,3 @@
+import bfChatItem from 'bf-chat/components/bf-chat-item';
+
+export default bfChatItem;

app/components/bf-chat.js

@@ -0,0 +1,3 @@
+import bfChat from 'bf-chat/components/bf-chat';
+
+export default bfChat;

package.json

@@ -37,9 +37,10 @@
     "ember-addon"
   ],
   "dependencies": {
-    "ember-cli-babel": "^5.0.0"
+    "ember-cli-babel": "^5.0.0",
+    "ember-cli-htmlbars": "0.7.4"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }
-}
+}

tests/unit/components/bf-chat-item-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('bf-chat-item', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});

tests/unit/components/bf-chat-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('bf-chat', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});