Search revamp: takes several arguments and sorts users based on usern…

…ame.

kolibri/plugins/management/assets/src/vue/user-roster.vue

@@ -99,12 +99,15 @@
     computed: {
       visibleUsers() {
         const roleFilter = this.roleFilter;
-        const searchFilter = new RegExp(this.searchFilter, 'i');
+        // creates array of words in filter, removes empty strings
+        const searchFilter = this.searchFilter.split(' ').filter(Boolean).map(
+          // returns an array of search parameters, ignoring case
+          (query) => new RegExp(query, 'i'));
 
         return this.users.filter((user) => {
           // fullname created using es6 templates
           const fullname = `${user.first_name} ${user.last_name}`;
-          const names = [fullname, user.first_name, user.last_name, user.username];
+          const names = [fullname, user.username];
 
           let hasRole = true;
           let hasName = true;
@@ -127,20 +130,23 @@
           }
 
           // makes sure there's text in the search box
-          if (this.searchFilter) {
+          if (searchFilter.length) {
             hasName = false;
 
             // check for searchFilter phrase in user's names
             for (const name of names) {
-              if (searchFilter.test(name)) {
+              // test name through all filters
+              if (searchFilter.every(nameFilter => nameFilter.test(name))) {
                 hasName = true;
               }
             }
           }
 
           // determines whether name should be on list
           return hasRole && hasName;
-        });
+
+          // aphabetize based on username
+        }).sort((user1, user2) => user1.username[0] > user2.username[0]);
       },
     },
     vuex: {