Search user in admin panel

client/components/settings/peopleBody.jade

@@ -3,8 +3,10 @@ template(name="people")
     unless currentUser.isAdmin
       | {{_ 'error-notAuthorized'}}
     else
-      .content-title
+      .content-title.ext-box
         span {{_ 'people'}}
+        input#searchInput(placeholder="{{_ 'search'}}")
+        button#searchButton {{_ 'enter'}}
       .content-body
         .side-menu
           ul
@@ -103,4 +105,4 @@ template(name="editUserPopup")
       | {{_ 'password'}}
       input.js-profile-password(type="password")
 
-    input.primary.wide(type="submit" value="{{_ 'save'}}")
+    input.primary.wide(type="submit" value="{{_ 'save'}}")

client/components/settings/peopleBody.js

@@ -8,6 +8,7 @@ BlazeComponent.extendComponent({
     this.error = new ReactiveVar('');
     this.loading = new ReactiveVar(false);
     this.people = new ReactiveVar(true);
+    this.findUsersOptions = new ReactiveVar({});
 
     this.page = new ReactiveVar(1);
     this.loadNextPageLocked = false;
@@ -26,6 +27,25 @@ BlazeComponent.extendComponent({
       });
     });
   },
+  events() {
+    return [{
+      'click #searchButton'(event) {
+        const value = $('#searchInput').first().val();
+        if (value === '') {
+          this.findUsersOptions.set({});
+        } else {
+          const regex = new RegExp(value, 'i');
+          this.findUsersOptions.set({
+            $or: [
+              { username: regex },
+              { 'profile.fullname': regex },
+              { 'emails.address': regex },
+            ]
+          });
+        }
+      }
+    }];
+  },
   loadNextPage() {
     if (this.loadNextPageLocked === false) {
       this.page.set(this.page.get() + 1);
@@ -49,7 +69,8 @@ BlazeComponent.extendComponent({
     this.loading.set(w);
   },
   peopleList() {
-    return Users.find({}, {
+    // get users in front to cache them
+    return Users.find(this.findUsersOptions.get(), {
       fields: {_id: true},
     });
   },

client/components/settings/peopleBody.styl

@@ -13,3 +13,20 @@ table
 
   tr:nth-child(even)
     background-color: #dddddd;
+
+.ext-box
+  display: flex;
+  flex-direction: row;
+  height: 34px;
+
+  span
+    vertical-align: center;
+    line-height: 34px;
+    margin-right: 10px;
+
+  input, button
+    margin: 0 10px 0 0;
+    padding: 0;
+
+  button
+    min-width: 60px;