Merge pull request #3942 from syndimann/feature/searchable-members-in-card-popup

Feature: Searchfields for members and assignees card popups

client/components/cards/cardDetails.jade

@@ -708,8 +708,9 @@ template(name="boardsAndLists")
     button.primary.confirm.js-done {{_ 'done'}}
 
 template(name="cardMembersPopup")
+  input.card-members-filter(type="text" placeholder="Search...")
   ul.pop-over-list.js-card-member-list
-    each board.activeMembers
+    each members
       li.item(class="{{#if isCardMember}}active{{/if}}")
         a.name.js-select-member(href="#")
           +userAvatar(userId=user._id)
@@ -720,9 +721,10 @@ template(name="cardMembersPopup")
             i.fa.fa-check
 
 template(name="cardAssigneesPopup")
+  input.card-assignees-filter(type="text" placeholder="Search...")
   unless currentUser.isWorker
     ul.pop-over-list.js-card-assignee-list
-      each board.activeMembers
+      each members
         li.item(class="{{#if isCardAssignee}}active{{/if}}")
           a.name.js-select-assignee(href="#")
             +userAvatar(userId=user._id)

client/components/cards/cardDetails.js

@@ -667,6 +667,40 @@ Template.editCardTitleForm.onRendered(function () {
   autosize(this.$('.js-edit-card-title'));
 });
 
+Template.cardMembersPopup.onCreated(function () {
+  const members = Boards.findOne(Session.get('currentBoard')).activeMembers();
+  this.members = new ReactiveVar(members);
+});
+
+Template.cardMembersPopup.events({
+  'keyup .card-members-filter'(event) {
+    const members = filterMembers(event.target.value);
+    Template.instance().members.set(members);
+  }
+});
+
+Template.cardMembersPopup.helpers({
+  members() {
+    return Template.instance().members.get();
+  },
+});
+
+const filterMembers = (filterTerm) => {
+  let members = Boards.findOne(Session.get('currentBoard')).activeMembers();
+
+  if (filterTerm) {
+    members = members
+      .map(member => ({
+        member,
+        user: Users.findOne(member.userId)
+      }))
+      .filter(({ user }) =>
+        user.profile.fullname.toLowerCase().indexOf(filterTerm.toLowerCase()) !== -1)
+      .map(({ member }) => member);
+  }
+  return members;
+}
+
 Template.editCardTitleForm.events({
   'keydown .js-edit-card-title'(event) {
     // If enter key was pressed, submit the data
@@ -1019,8 +1053,7 @@ BlazeComponent.extendComponent({
             //   https://github.com/wekan/wekan/issues/2785
             const message = `${TAPi18n.__(
               'delete-linked-card-before-this-card',
-            )} linkedId: ${
-              this._id
+            )} linkedId: ${this._id
               } at client/components/cards/cardDetails.js and https://github.com/wekan/wekan/issues/2785`;
             alert(message);
           }
@@ -1589,6 +1622,11 @@ EscapeActions.register(
   },
 );
 
+Template.cardAssigneesPopup.onCreated(function () {
+  const members = Boards.findOne(Session.get('currentBoard')).activeMembers();
+  this.members = new ReactiveVar(members);
+});
+
 Template.cardAssigneesPopup.events({
   'click .js-select-assignee'(event) {
     const card = Cards.findOne(Session.get('currentCard'));
@@ -1596,6 +1634,10 @@ Template.cardAssigneesPopup.events({
     card.toggleAssignee(assigneeId);
     event.preventDefault();
   },
+  'keyup .card-assignees-filter'(event) {
+    const members = filterMembers(event.target.value);
+    Template.instance().members.set(members);
+  },
 });
 
 Template.cardAssigneesPopup.helpers({
@@ -1606,6 +1648,10 @@ Template.cardAssigneesPopup.helpers({
     return _.contains(cardAssignees, this.userId);
   },
 
+  members() {
+    return Template.instance().members.get();
+  },
+
   user() {
     return Users.findOne(this.userId);
   },