GCW-3167 User mentions

addon/controllers/messages_base.js

@@ -13,12 +13,18 @@ export default Ember.Controller.extend({
   sortedElements: Ember.computed.sort("messagesAndVersions", "sortProperties"),
   isItemThread: Ember.computed.notEmpty("item"),
 
-  autoMarkAsRead: Ember.on('init',
-    Ember.observer('isActive', 'messages.[]', '[email protected]', function() {
-      if (this.get('isActive')) {
-        Ember.run.debounce(this, this.markConversationAsRead, 1500);
+  autoMarkAsRead: Ember.on(
+    "init",
+    Ember.observer(
+      "isActive",
+      "messages.[]",
+      "[email protected]",
+      function() {
+        if (this.get("isActive")) {
+          Ember.run.debounce(this, this.markConversationAsRead, 1500);
+        }
       }
-    })
+    )
   ),
 
   disabled: Ember.computed("offer.isCancelled", "item.isDraft", function() {
@@ -35,9 +41,9 @@ export default Ember.Controller.extend({
 
   messages: Ember.computed("allMessages.[]", "offer", "item", function() {
     var messages = this.get("allMessages");
-    messages = this.get("isItemThread") ?
-      messages.filterBy("itemId", this.get("item.id")) :
-      messages
+    messages = this.get("isItemThread")
+      ? messages.filterBy("itemId", this.get("item.id"))
+      : messages
           .filterBy("offerId", this.get("offer.id"))
           .filterBy("item", null);
     return messages.filter(m => {
@@ -139,14 +145,30 @@ export default Ember.Controller.extend({
   },
 
   actions: {
+    setMessageContext: function(message) {
+      this.set("body", message.parsedText);
+      this.set("displayText", message.displayText);
+    },
+
     sendMessage() {
       // To hide soft keyboard
       Ember.$("textarea").trigger("blur");
 
       this.set("inProgress", true);
-      var values = this.getProperties("body", "offer", "item", "isPrivate");
-      values.itemId = this.get("item.id");
-      values.offerId = this.get("offer.id");
+      var values = this.getProperties("offer", "item", "isPrivate");
+      values.body = this.get("body");
+      values.body = Ember.Handlebars.Utils.escapeExpression(values.body || "");
+      values.body = values.body.replace(/(\r\n|\n|\r)/gm, "<br>");
+      values.parsedBody = this.get("displayText");
+      const itemId = this.get("item.id");
+      const offerId = this.get("offer.id");
+      if (itemId) {
+        values.messageableType = "Item";
+        values.messageableId = itemId;
+      } else {
+        values.messageableType = "Offer";
+        values.messageableId = offerId;
+      }
       values.createdAt = new Date();
       values.sender = this.store.peekRecord(
         "user",

app/helpers/apply-line-break.js

@@ -1,12 +1,7 @@
 import Ember from "ember";
 
 export default Ember.Helper.helper(function(value) {
-  var text;
-  if(/<[a-z][\s\S]*>/i.test(value)) {
-    text = value;
-  } else {
-    text = Ember.Handlebars.Utils.escapeExpression(value);
-    text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
-  }
-  return new Ember.Handlebars.SafeString(text);
+  value = new Ember.Handlebars.SafeString(value[0] || "").string;
+  value = value.replace(/(\r\n|\n|\r)/gm, "<br>");
+  return new Ember.String.htmlSafe(value);
 });

app/models/message.js

@@ -21,6 +21,34 @@ export default DS.Model.extend({
     var session = getOwner(this).lookup("service:session");
     return this.get("sender.id") === session.get("currentUser.id");
   }),
+  messageableType: attr("string"),
+  messageableId: attr("string"),
+  lookup: attr("string"),
+  parsedBody: Ember.computed("body", function() {
+    let body = this.get("body");
+    let lookup = this.get("lookup");
+    lookup = JSON.parse(lookup);
+    Object.keys(lookup).forEach(key => {
+      body = body.replace(
+        new RegExp(`\\[:${key}\\]`, "g"),
+        `<span class='mentioned'>@${lookup[key].display_name}</span>`
+      );
+    });
+    return body;
+  }),
+
+  plainBody: Ember.computed("body", function() {
+    let body = this.get("body");
+    let lookup = this.get("lookup");
+    lookup = JSON.parse(lookup);
+    Object.keys(lookup).forEach(key => {
+      body = body.replace(
+        new RegExp(`\\[:${key}\\]`, "g"),
+        lookup[key].display_name
+      );
+    });
+    return body;
+  }),
 
   isMessage: Ember.computed("this", function() {
     return true;

app/serializers/application.js

@@ -1,14 +1,49 @@
-import { ActiveModelSerializer } from 'active-model-adapter';
+import { ActiveModelSerializer } from "active-model-adapter";
+import _ from "npm:lodash";
 
 // Polymorphic associations are not supported in ember-data beta version:
 // refer: https://github.com/emberjs/data/issues/1574
 
-export default ActiveModelSerializer.extend({
+function normalize(payload) {
+  const key =
+    (payload.hasOwnProperty("messages") && "messages") ||
+    (payload.hasOwnProperty("message") && "message");
+  if (key) {
+    const messages = Array.isArray(payload[key])
+      ? payload[key]
+      : Array(payload[key]);
+    messages.forEach(m => {
+      m[`${m.messageable_type.toLowerCase()}`] = m.messageable_id;
+    });
+  }
+
+  const messages = _.flatten([payload.messages, payload.message]).filter(
+    _.identity
+  );
+
+  _.each(messages, m => {
+    m[`${m.messageable_type.toLowerCase()}`] = m.messageable_id;
 
+    if (typeof m.lookup === "object") {
+      m.lookup = JSON.stringify(m.lookup);
+    }
+  });
+}
+
+export default ActiveModelSerializer.extend({
   keyForAttribute: function(attr, method) {
     if (attr === "addressable") {
       return "addressable_id";
     }
     return this._super(attr, method);
+  },
+  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
+    normalize(payload);
+    return this._super(...arguments);
+  },
+
+  pushPayload(store, payload) {
+    normalize(payload);
+    return this._super(...arguments);
   }
 });

app/styles/templates/_message_template.scss

@@ -1,5 +1,6 @@
 .message-textbar {
   padding-top: 0rem !important;
+  width: 50rem;
 }
 
 .message_bubble_box {
@@ -74,6 +75,7 @@
 }
 
 .message-section {
+
   .icon-empty-items {
     color: $body-font-color;
   }

app/styles/templates/components/_message_box.scss

@@ -2,6 +2,10 @@
   display: block;
 }
 
+.tribute-container {
+  margin-top: 1rem;
+}
+
 #messageBox {
   display: block;
   opacity: 1;

app/templates/message_template.hbs

@@ -21,7 +21,7 @@
                   {{display-datetime message.createdAt format="HH:mm"}}
                 </div>
 
-                {{{apply-line-break message.body}}}
+                {{{apply-line-break message.parsedBody}}}
               </div>
             {{else}}
               <div class="small-12 columns item_log">
@@ -35,8 +35,9 @@
   </div>
 </section>
 
-<div class="message-footer">
+<section class="message-footer">
   <div class="btm message-form">
+    <div class="message-textbar-container" />
     <div class="row message-textbar">
 
       {{#if displayChatNote}}
@@ -63,7 +64,8 @@
 
             <div class="row ui">
               <div class="small-9 large-10 medium-10 columns">
-                {{variable-height-textarea value=body name="body" required="true" disabled=disabled parentDiv="message-section"}}
+                {{variable-height-textarea value=body name="body" required="true" disabled=disabled isPrivate=isPrivate offerId=offer.id setMessageContext= (action 'setMessageContext')
+                menuContainer="message-textbar-container"}}
               </div>
               <div class="small-3 large-2 medium-2 columns">
                 {{#online-button disabledOverride=disabled tagName="button" disabled=inProgress}}{{t "send"}}{{/online-button}}
@@ -74,7 +76,7 @@
       </div>
     </div>
   </div>
-</div>
+</section>
 
 {{!-- This div holds the id of first unread message. As on page visit, it marked as read and lost the reference to first unread message --}}
 <div class="hidden unread_id"></div>

package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.6.0",
     "ember-ajax": "^2.4.1",
+    "ember-browserify": "^1.2.2",
     "ember-cli": "2.11.0",
     "ember-cli-app-version": "^3.1.0",
     "ember-cli-code-coverage": "0.1.2",
@@ -76,7 +77,10 @@
     "ember-cli-coffeescript": "^1.13.2",
     "ember-smart-banner": "0.1.3",
     "hoek": "4.2.1",
-    "minimatch": "^3.0.2"
+    "lodash": "^4.17.15",
+    "message-textbox": "git://github.com/crossroads/message-textbox#master",
+    "minimatch": "^3.0.2",
+    "tributejs": "^5.1.3"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"