Implement member search for team adding.

Makefile

@@ -155,7 +155,7 @@ pulldb:
 	@rm snipt.dump.gz
 
 sass:
-	sass --watch -t compressed --scss media/css/style.scss:media/css/style.css
+	sass --sourcemap=none --watch -t compressed --scss media/css/style.scss:media/css/style.css
 
 .PHONY: assets, \
 	db, \

media/css/style.scss

@@ -3084,3 +3084,16 @@ a.snipt-promo {
     background: #55a955;
   }
 }
+
+div.team-controller {
+  div.add-member {
+    input {
+      margin-bottom: 0;
+      width: 50%;
+    }
+    ul {
+      margin-bottom: 0;
+      margin-top: 10px;
+    }
+  }
+}

media/js/src/team.js

@@ -8,15 +8,32 @@ if (typeof angular !== 'undefined') {
   var app = root.app;
 
   // Services.
-  app.factory('TeamStorage', function($http) {
+  app.factory('TeamStorage', function($http, $q) {
     return {
-
+      searchMembers: function(query) {
+        var promise = $http({
+          method: 'GET',
+          url: '/api/public/user/?format=json&username__contains=' + query
+        });
+        return promise;
+      }
     };
   });
 
   // Controllers.
-  controllers.TeamController = function($scope, TeamStorage) {
+  controllers.TeamController = function($scope, $timeout, TeamStorage) {
+    $scope.members = [];
+    $scope.$watch('search', function(val) {
+      $timeout.cancel($scope.timeout);
 
+      if (!val) return $scope.members = [];
+
+      $scope.timeout = $timeout(function() {
+        TeamStorage.searchMembers(val).then(function(response) {
+          $scope.members = response.data.objects;
+        });
+      }, 250);
+    });
   };
 
   // Assign the controllers.

teams/templates/teams/team-billing.html

@@ -15,6 +15,9 @@
     <aside>
       <ul class="nav nav-list ng-cloak" ng-cloak>
         <li class="nav-header">Team: {{ team.name }}</li>
+        <li>
+          <a href="/{{ team.slug }}/">Profile</a>
+        </li>
         <li>
           <a href="/{{ team.slug }}/members/">Members</a>
         </li>

teams/templates/teams/team-members.html

@@ -10,12 +10,15 @@
 {% endblock %}
 
 {% block content %}
-  <div ng-controller="TeamController">
+  <div ng-controller="TeamController" class="team-controller">
     <section class="snipts" id="snipts"></section>
     <section class="profile group">
       <aside>
         <ul class="nav nav-list ng-cloak" ng-cloak>
           <li class="nav-header">Team: {{ team.name }}</li>
+          <li>
+            <a href="/{{ team.slug }}/">Profile</a>
+          </li>
           <li class="active">
             <a href="/{{ team.slug }}/members/">Members</a>
           </li>
@@ -28,6 +31,17 @@
         <div class="def" data-title="Owner">
           {{ team.owner }}
         </div>
+        <div class="def add-member" data-title="Add member">
+          <input
+            ng-model="search"
+            placeholder="Search users..."
+            type="search"
+            value=""
+          />
+          <ul ng-cloak ng-if="members.length">
+            <li ng-repeat="member in members">{[{ member.username }]}</li>
+          </ul>
+        </div>
         <div class="def" data-title="Members ({{ team.members.all|length }} of {{ team.member_limit }})">
           <ul style="margin-bottom: 0">
             {% for member in team.members.all %}