GCW-3167 User mentions UI

app/components/variable-height-textarea.js

@@ -0,0 +1,90 @@
+import Ember from "ember";
+import Tribute from "npm:tributejs";
+
+import AjaxPromise from "goodcity/utils/ajax-promise";
+
+let users = null;
+let selectedUsers = [];
+const remoteSearch = cb => {
+  const token = JSON.parse(window.localStorage.authToken);
+  new AjaxPromise("/mentionable_users", "GET", token, {
+    roles: "Order administrator, Order fulfilment"
+  }).then(data => {
+    users = data.users;
+    return cb(users);
+  });
+};
+
+const fullName = item =>
+  `${item.first_name} ${item.last_name ? item.last_name : ""}`;
+
+export default Ember.Component.extend({
+  tagName: "p",
+  contentEditable: true,
+  attributeBindings: ["disabled", "value", "setBody"],
+  classNames: "message-bar mentionable",
+  disabled: false,
+
+  didDestroyElement: function() {
+    Ember.$("body").css({ "overflow-x": "hidden" });
+  },
+
+  didDestroyElement: function() {
+    Ember.$("body").css({ "overflow-x": "hidden" });
+  },
+
+  valueObserver: function() {
+    Ember.run.once(this, "processValue");
+  }.observes("value"),
+
+  processValue: function() {
+    if (!this.value) {
+      this.element.innerText = "";
+      window.scrollTo(0, document.body.scrollHeight);
+    }
+  },
+
+  didInsertElement() {
+    const _this = this;
+    const tribute = new Tribute({
+      values: function(text, cb) {
+        if (!users) {
+          return remoteSearch(users => cb(users));
+        }
+        return cb(users);
+      },
+      menuItemTemplate: item => {
+        return `<div class='item'><img class='mentionedImage' src="assets/images/user.svg"></img> ${fullName(
+          item.original
+        )}</div>`;
+      },
+      selectTemplate: function(item) {
+        if (typeof item === "undefined") return null;
+
+        selectedUsers.push(item.original);
+        return `<span class='mentioned' contenteditable="false">@${fullName(
+          item.original
+        )}</span>`;
+      },
+      selectClass: "highlight",
+      noMatchTemplate: e => `<div style="display: 'none'"/>`,
+      menuContainer: document.getElementsByClassName(
+        "message-textbar-container"
+      )[0]
+    });
+
+    tribute.attach(Ember.$(this.element));
+
+    this.element.addEventListener("input", function() {
+      let parsedText = this.innerText;
+      selectedUsers.forEach(user => {
+        parsedText = parsedText.replace(
+          new RegExp(`@${fullName(user)}`, "g"),
+          `[:${user.id}]`
+        );
+      });
+
+      _this.setMessageContext({ parsedText, displayText: this.innerText });
+    });
+  }
+});

app/controllers/review_item/donor_messages.js

@@ -2,6 +2,7 @@ import Ember from "ember";
 import MessagesBaseController from "shared-goodcity/controllers/messages_base";
 
 export default MessagesBaseController.extend({
-  review_item: Ember.inject.controller('review_item'),
-  item: Ember.computed.alias("review_item.model")
+  review_item: Ember.inject.controller("review_item"),
+  item: Ember.computed.alias("review_item.model"),
+  isPrivate: false
 });

app/styles/_mentions.scss

@@ -0,0 +1,79 @@
+$mentioned-user-display-color: rgb(249, 193, 118);
+$mentioned-user-display-border: rgba(235,176,97,1);
+$mentioned-user-textbox-color: rgba(196,221,255,1);
+$mentioned-user-textbox-border: rgba(156,198,255,1);
+
+
+.tribute-container {
+  position: absolute;
+  display: block;
+  top: -14rem !important;
+  max-height: 10rem;
+  border-radius: 6px;
+  width: 15rem;
+  line-height: 2px;
+  top: auto;
+  overflow-y: scroll;
+  background: black;
+}
+
+.tribute-container > ul {
+  list-style-type: none;
+  margin: 0px;
+  line-height: 2rem;
+}
+
+ul > li:hover,
+.highlight {
+  background: #0079d3;
+}
+
+.item {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.mentionable {
+  border: none;
+  margin: 0rem 1rem;
+  max-width: 95%;
+  background: white;
+  box-shadow: none;
+  -webkit-box-sizing: none;
+  -moz-box-sizing: none;
+  box-sizing: none;
+  transition: none;
+  margin: 0rem;
+  height: 3rem;
+  padding: 0.4rem 0.2rem;
+  display: block;
+  text-align: left;
+  color: black;
+  overflow-x: scroll;
+  max-height: 5rem;
+}
+
+.mentioned {
+  background: $mentioned-user-textbox-color;
+  border: 1.6px solid $mentioned-user-textbox-border;
+  border-radius: 5px;
+  padding: 5px;
+  color: black;
+}
+
+.mentioned-message-display {
+  background: $mentioned-user-display-color;
+  border: 1.6px solid $mentioned-user-display-border;
+  border-radius: 5px;
+  color: black;
+  padding: 7px;
+}
+
+.mentionedImage {
+  margin-left: 10px;
+  width: 1rem;
+  height: 1rem;
+  color: white;
+  border-radius: 10px;
+  background-color: white;
+}

app/styles/app.scss

@@ -45,4 +45,5 @@
 @import "global_styles";
 @import "templates/companies/new";
 @import "templates/donors/new";
+@import "mentions";
 

app/styles/templates/_review_item.scss

@@ -131,3 +131,11 @@
     color: black;
   }
 }
+
+.review-item-background {
+  background: $light-grey;
+
+  li:hover {
+    background: $light-grey;
+  }
+}

app/templates/offer/recent_item_message.hbs

@@ -25,7 +25,7 @@
 
       <div class="small-10 columns">
         <div class='ellipsis two-line-ellipsis message-text'>
-          {{item.lastMessage.body}}
+          {{item.lastMessage.plainBody}}
         </div>
       </div>
 

app/templates/offer/recent_offer_message.hbs

@@ -20,7 +20,7 @@
     </div>
     <div class="small-10 columns">
       <div class='ellipsis two-line-ellipsis message-text'>
-        {{{model.lastMessage.body}}}
+        {{{model.lastMessage.plainBody}}}
       </div>
     </div>
     <div class="small-1 columns right">

app/templates/review_item.hbs

@@ -13,13 +13,11 @@
     {{/if}}
   </section>
 </nav>
-<section class="main-section review_item">
-  <div class="row">
+<section class="main-section offer_details offer_messages_section">
     <div class="small-12 columns">
       <div class='row'>
         {{partial 'item/status_message'}}
       </div>
-
       <div class="item-details">
         <div class="row top-bottom-margin">
           <div class="small-2 columns">
@@ -45,15 +43,14 @@
           {{/if}}
         </div>
       </div>
-
       <div class="row top-bottom-margin">
         <div class="small-12 columns link item_lable_input">
           {{#link-to "search_label" model classNames="search_label_input"}}
             {{input value=(if itemType itemType.name "") placeholder=(t "review_item.add_item_label")}}
           {{/link-to}}
         </div>
       </div>
-      <div class="row row-grey">
+      <div class="row">
         <dl class="tabs" data-tab>
           {{#link-to 'review_item.accept' tagName="dd" classNames="small-3 columns text-center"}}
             {{#link-to 'review_item.accept'}}
@@ -86,11 +83,10 @@
             {{/link-to}}
           {{/link-to}}
         </dl>
-        <div class="tabs-content {{if model.offer.isFinished 'disable-canceloffer-review'}}">
+      </div>
+        <div class="{{if model.offer.isFinished 'disable-canceloffer-review'}}">
           <br />
           {{outlet}}
         </div>
-      </div>
-    </div>
   </div>
 </section>

app/templates/review_item/accept.hbs

@@ -1,5 +1,5 @@
 <section class="main-section accept_widget">
-  <div class="row ">
+  <div class="review-item-background row">
     {{#if itemType}}
       {{#validatable-form class="form-horizontal" action="save" on="submit"}}
         {{#each packages key="@index" as |pkg index|}}

app/templates/review_item/reject.hbs

@@ -1,5 +1,5 @@
 <section class="main-section reject-offer">
-  <div class="row">
+  <div class="row review-item-background">
     {{#if itemTypeId}}
       <div class="small-12 columns">
         <div class="ui">

package.json

@@ -48,6 +48,7 @@
     "connect-restreamer": "^1.0.2",
     "cors": "^2.8.4",
     "ember-ajax": "^3.1.0",
+    "ember-browserify": "^1.2.2",
     "ember-cli": "2.15.0",
     "ember-cli-app-version": "^3.2.0",
     "ember-cli-babel": "5.2.4",
@@ -108,6 +109,7 @@
     "npm": "^3.8.3",
     "phantomjs-prebuilt": "^2.1.14",
     "shared-goodcity": "git://github.com/crossroads/shared.goodcity.git#master",
-    "slick-carousel": "^1.5.8"
+    "slick-carousel": "^1.5.8",
+    "tributejs": "^5.1.3"
   }
 }

tests/acceptance/complete_review_offer_test.js

@@ -58,7 +58,7 @@ test("check offer-messages replace [click_here|transport] to click_here link", f
   andThen(function() {
     assert.equal(currentURL(), url);
     andThen(function() {
-      fillIn(".message-base textarea", "[click_here|transport_page]");
+      fillIn(".message-base p", "[click_here|transport_page]");
       andThen(function() {
         click(".message-base button");
         andThen(function() {

tests/acceptance/reject-test.js

@@ -128,7 +128,7 @@ test("visit reject item tab without item_type", function(assert) {
   console.log(rejectionReason1.id);
   visit("/offers/" + offer.id + "/review_item/" + item1.id + "/reject");
   andThen(function() {
-    click($("li label:contains('Quality')"));
+    click($("#1_reason"));
     andThen(function() {
       assert.equal(
         $("#rejectMessage").val(),

tests/acceptance/reviewer-offer-tab-test.js

@@ -81,7 +81,7 @@ test("offer-messages thread details", function(assert) {
 
     // display latest offer message in 'General Messages' thread
     assert.equal(
-      offer_message_thread_text.indexOf(message1.get("body")) > 0,
+      offer_message_thread_text.indexOf(message1.get("plainBody")) > 0,
       true
     );