1 files changed, 101 insertions, 2 deletions

diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js
index 25aeffcc..36b60d06 100644
--- a/client/components/lists/listBody.js
+++ b/client/components/lists/listBody.js
@@ -11,7 +11,7 @@ BlazeComponent.extendComponent({
     options = options || {};
     options.position = options.position || 'top';
 
-    const forms = this.childrenComponents('inlinedForm');
+    const forms = this.childComponents('inlinedForm');
     let form = forms.find((component) => {
       return component.data().position === options.position;
     });
@@ -26,8 +26,10 @@ BlazeComponent.extendComponent({
     const firstCardDom = this.find('.js-minicard:first');
     const lastCardDom = this.find('.js-minicard:last');
     const textarea = $(evt.currentTarget).find('textarea');
-    const title = textarea.val().trim();
     const position = this.currentData().position;
+    const title = textarea.val().trim();
+
+    const formComponent = this.childComponents('addCardForm')[0];
     let sortIndex;
     if (position === 'top') {
       sortIndex = Utils.calculateIndex(null, firstCardDom).base;
@@ -35,9 +37,14 @@ BlazeComponent.extendComponent({
       sortIndex = Utils.calculateIndex(lastCardDom, null).base;
     }
 
+    const members = formComponent.members.get();
+    const labelIds = formComponent.labels.get();
+
     if (title) {
       const _id = Cards.insert({
         title,
+        members,
+        labelIds,
         listId: this.data()._id,
         boardId: this.data().board()._id,
         sort: sortIndex,
@@ -53,6 +60,8 @@ BlazeComponent.extendComponent({
       if (position === 'bottom') {
         this.scrollToBottom();
       }
+
+      formComponent.reset();
     }
   },
 
@@ -100,11 +109,39 @@ BlazeComponent.extendComponent({
   },
 }).register('listBody');
 
+function toggleValueInReactiveArray(reactiveValue, value) {
+  const array = reactiveValue.get();
+  const valueIndex = array.indexOf(value);
+  if (valueIndex === -1) {
+    array.push(value);
+  } else {
+    array.splice(valueIndex, 1);
+  }
+  reactiveValue.set(array);
+}
+
 BlazeComponent.extendComponent({
   template() {
     return 'addCardForm';
   },
 
+  onCreated() {
+    this.labels = new ReactiveVar([]);
+    this.members = new ReactiveVar([]);
+  },
+
+  reset() {
+    this.labels.set([]);
+    this.members.set([]);
+  },
+
+  getLabels() {
+    const currentBoardId = Session.get('currentBoard');
+    return Boards.findOne(currentBoardId).labels.filter((label) => {
+      return this.labels.get().indexOf(label._id) > -1;
+    });
+  },
+
   pressKey(evt) {
     // Pressing Enter should submit the card
     if (evt.keyCode === 13) {
@@ -140,4 +177,66 @@ BlazeComponent.extendComponent({
       keydown: this.pressKey,
     }];
   },
+
+  onRendered() {
+    const editor = this;
+    this.$('textarea').escapeableTextComplete([
+      // User mentions
+      {
+        match: /\B@(\w*)$/,
+        search(term, callback) {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          callback($.map(currentBoard.members, (member) => {
+            const user = Users.findOne(member.userId);
+            return user.username.indexOf(term) === 0 ? user : null;
+          }));
+        },
+        template(user) {
+          return user.username;
+        },
+        replace(user) {
+          toggleValueInReactiveArray(editor.members, user._id);
+          return '';
+        },
+        index: 1,
+      },
+
+      // Labels
+      {
+        match: /\B#(\w*)$/,
+        search(term, callback) {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          callback($.map(currentBoard.labels, (label) => {
+            if (label.name.indexOf(term) > -1 ||
+                label.color.indexOf(term) > -1) {
+              return label;
+            }
+          }));
+        },
+        template(label) {
+          return Blaze.toHTMLWithData(Template.autocompleteLabelLine, {
+            hasNoName: !Boolean(label.name),
+            colorName: label.color,
+            labelName: label.name || label.color,
+          });
+        },
+        replace(label) {
+          toggleValueInReactiveArray(editor.labels, label._id);
+          return '';
+        },
+        index: 1,
+      },
+    ], {
+      // When the autocomplete menu is shown we want both a press of both `Tab`
+      // or `Enter` to validation the auto-completion. We also need to stop the
+      // event propagation to prevent the card from submitting (on `Enter`) or
+      // going on the next column (on `Tab`).
+      onKeydown(evt, commands) {
+        if (evt.keyCode === 9 || evt.keyCode === 13) {
+          evt.stopPropagation();
+          return commands.KEY_ENTER;
+        }
+      },
+    });
+  },
 }).register('addCardForm');