userFilter.diff

diff --git a/app/assets/javascripts/controllers/users_controller.js b/app/assets/javascripts/controllers/users_controller.js
index 933ba6c..1bb8f62 100644
--- a/app/assets/javascripts/controllers/users_controller.js
+++ b/app/assets/javascripts/controllers/users_controller.js
@@ -4,6 +4,19 @@ angular.module('forecastManager')
   .controller('UsersController', ['blackboard', '$scope', '$http', (blackboard, $scope, $http) => {
     const regexForPermissionsType = /influence|view/
 
+    $scope.init = (networks, users) => {
+      $scope.networks = networks;      
+      $scope.users = users;    
+    }    
+
+    $scope.setSelectedUserSso = selectedUserSso => {     
+      $scope.selectedUserSso = selectedUserSso
+    }
+
+    $scope.clearSelectedUserSso = () => {
+      $scope.selectedUserSso = null
+    }
+
     $scope.noNetworksSelected = () => {
       let networkSelected = _.some($scope.user.subscriptions, subscription => {
         return regexForPermissionsType.test(subscription.permissions)
@@ -78,4 +91,11 @@ angular.module('forecastManager')
 
       $scope.userFormTitle = 'Edit User'
     }
+
+    $scope.usersMatchesFilters = (user) => {
+      const matchesUserFilter = (!$scope.selectedUserSso || $scope.selectedUserSso === user.sso);
+      return matchesUserFilter;
+    }
+
+
   }])
diff --git a/app/views/users.ejs b/app/views/users.ejs
index 08ca718..b940011 100644
--- a/app/views/users.ejs
+++ b/app/views/users.ejs
@@ -1,4 +1,4 @@
-<main ng-controller="UsersController" ng-init="networks = <%= JSON.stringify(networks) %>">
+<main ng-controller="UsersController" ng-init="init(<%= JSON.stringify(networks) %>, <%= JSON.stringify(users) %>)">
   <%- include('partials/message') %>
   <%- include('partials/edit_user_form') %>
 
@@ -27,9 +27,47 @@
         <div class="sticky-table-wrapper">
           <table class="ui simple table">
             <thead fix-head>
-              <tr>
-                <th class="two wide">First Name</th>
-                <th class="two wide">Last Name</th>
+              <tr> 
+                <th class="one wide">
+                  <div ng-cloak ng-if="users.length <= 1">First Name</div>
+                    <div class="ui simple dropdown" ng-if="users.length > 1">
+                      First Name
+                      <i class="filter icon" ng-cloak ng-show="users.length > 1"></i>
+                      <div class="menu">
+                        <div class="ui top attached segment item"
+                          ng-click="clearSelectedUserSso()">
+                            Clear Filter
+                            <i class="close icon"></i>
+                        </div>
+                          <div class="item"
+                            ng-repeat="user in users"
+                            ng-click="setSelectedUserSso(user.sso)">
+                            {{ user.firstName }}
+                          </div>
+                      </div>
+                    </div>
+                </th> 
+
+                <th class="one wide">
+                  <div ng-cloak ng-if="users.length <= 1">Last Name</div>
+                    <div class="ui simple dropdown" ng-if="users.length > 1">
+                      Last Name
+                      <i class="filter icon" ng-cloak ng-show="users.length > 1"></i>
+                      <div class="menu">
+                        <div class="ui top attached segment item"
+                          ng-click="clearSelectedUserSso()">
+                            Clear Filter
+                            <i class="close icon"></i>
+                        </div>
+                          <div class="item"
+                            ng-repeat="user in users"
+                            ng-click="setSelectedUserSso(user.sso)">
+                            {{ user.lastName }}
+                          </div>
+                      </div>
+                    </div>
+                </th>                     
+
                 <th class="two wide">SSO</th>
                 <th class="two wide">Email</th>
                 <th class="two wide">User Admin</th>
@@ -37,10 +75,10 @@
                 <th class="three wide">Networks</th>
                 <th class="one wide"></th>
               </tr>
-            </thead>
+            </thead>    
             <tbody>
               <% users.forEach(user => { %>
-                <tr class="top aligned">
+                <tr class="top aligned" ng-show="usersMatchesFilters(<%= JSON.stringify(user) %>)">
                   <td><%= user.firstName %></td>
                   <td><%= user.lastName %></td>
                   <td><%= user.sso %></td>
@@ -67,3 +105,9 @@
     </div>
   </section>
 </main>
+
+<style>
+.ui.simple.table{
+  overflow: visible !important
+}
+</style>
\ No newline at end of file