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

@@ -180,7 +180,7 @@ BlazeComponent.extendComponent({
             integration,
             'CardSelected',
             params,
-            () => {},
+            () => { },
           );
         });
       }
@@ -541,8 +541,8 @@ BlazeComponent.extendComponent({
 }).register('exportCardPopup');
 
 // only allow number input
-Template.editCardSortOrderForm.onRendered(function() {
-  this.$('input').on("keypress paste", function(event) {
+Template.editCardSortOrderForm.onRendered(function () {
+  this.$('input').on("keypress paste", function (event) {
     let keyCode = event.keyCode;
     let charCode = String.fromCharCode(keyCode);
     let regex = new RegExp('[-0-9.]');
@@ -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,9 +1053,8 @@ BlazeComponent.extendComponent({
             //   https://github.com/wekan/wekan/issues/2785
             const message = `${TAPi18n.__(
               'delete-linked-card-before-this-card',
-            )} linkedId: ${
-              this._id
-            } at client/components/cards/cardDetails.js and https://github.com/wekan/wekan/issues/2785`;
+            )} linkedId: ${this._id
+              } at client/components/cards/cardDetails.js and https://github.com/wekan/wekan/issues/2785`;
             alert(message);
           }
           Utils.goBoardId(this.boardId);
@@ -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);
   },