FirstLastNameFilter.diff

diff --git a/app/assets/javascripts/controllers/users_controller.js b/app/assets/javascripts/controllers/users_controller.js
index 933ba6c..73b3bf6 100644
--- a/app/assets/javascripts/controllers/users_controller.js
+++ b/app/assets/javascripts/controllers/users_controller.js
@@ -1,9 +1,56 @@
 const _ = require('lodash')
 
+/*
+ Adding filter for unique data's
+*/
+angular.module('forecastManager').filter('unique', function() {
+   return function(collection, keyname) {
+      var output = [], 
+          keys = [];
+
+      angular.forEach(collection, function(item) {
+          var key = item[keyname];
+          if(keys.indexOf(key) === -1) {
+              keys.push(key);
+              output.push(item);
+          }
+      });
+
+      return output;
+   };
+});
+
 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;    
+    }    
+   
+    // set selected first name
+    $scope.setSelectedFirstName = selectedFirstName =>{
+      $scope.selectedFirstName = selectedFirstName;
+      $scope.selectedLastName = null;
+    }
+
+    // clear selected first name
+     $scope.clearSelectedFirstName = () => {
+      $scope.selectedFirstName = null
+    }
+
+     // set selected last name
+    $scope.setSelectedLastName = selectedLastName =>{
+      $scope.selectedLastName = selectedLastName;
+      $scope.selectedFirstName = null;
+    }
+
+    // clear selected last name
+     $scope.clearSelectedLastName = () => {
+      $scope.selectedLastName = null
+    }  
+
     $scope.noNetworksSelected = () => {
       let networkSelected = _.some($scope.user.subscriptions, subscription => {
         return regexForPermissionsType.test(subscription.permissions)
@@ -78,4 +125,13 @@ angular.module('forecastManager')
 
       $scope.userFormTitle = 'Edit User'
     }
+
+    $scope.usersMatchesFilters = (user) => {    
+      const matchesUserFirstNameFilter = (!$scope.selectedFirstName || $scope.selectedFirstName === user.firstName);      
+      const matchesUserLastNameFilter = (!$scope.selectedLastName || $scope.selectedLastName === user.lastName);      
+      return matchesUserFirstNameFilter && matchesUserLastNameFilter;
+    }
+
   }])
+
+
diff --git a/app/views/users.ejs b/app/views/users.ejs
index 08ca718..1d9d0fc 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="two 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="clearSelectedFirstName()">
+                            Clear Filter
+                            <i class="close icon"></i>
+                        </div>
+                          <div class="item"
+                            ng-repeat="user in users | unique: 'firstName'"
+                            ng-click="setSelectedFirstName(user.firstName)">
+                            {{ user.firstName }}
+                          </div>
+                      </div>
+                    </div>
+                </th> 
+
+                <th class="two 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="clearSelectedLastName()">
+                            Clear Filter
+                            <i class="close icon"></i>
+                        </div>
+                          <div class="item"
+                            ng-repeat="user in users | unique: 'lastName'"
+                            ng-click="setSelectedLastName(user.lastName)">
+                            {{ 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