add company/investor selection with autocomplete

Author: hkal

app/scripts/controllers/crunchinator.js

@@ -16,16 +16,35 @@ angular.module('crunchinatorApp.controllers')
 })
 
 .controller('CrunchinatorCtrl', function CrunchinatorCtrl($scope, $http, ENV, CompanyModel, CategoryModel, InvestorModel) {
-    $scope.select2Options = {
-        minimumInputLength: 2
-    };
     $scope.environment = ENV;
 
     $scope.filteredCompaniesList = [];
     $scope.filteredCategoriesList = [];
     $scope.filteredInvestorsList = [];
     $scope.lookingForList = [];
 
+    $scope.select_investor = function() {
+        if($scope.selectedInvestors.indexOf($scope.selected_investor) === -1) {
+            $scope.selectedInvestors.push($scope.selected_investor);
+            inv_ids = _.pluck($scope.selectedInvestors, 'id');
+            $scope.filteredCompanies();
+
+            $scope.selected_investor = '';
+            $scope.clearLookingFor();
+        }
+    };
+
+    $scope.select_company = function() {
+        if($scope.selectedCompanies.indexOf($scope.selected_company) === -1) {
+            $scope.selectedCompanies.push($scope.selected_company);
+            company_ids = _.pluck($scope.selectedCompanies, 'id');
+            $scope.filteredInvestors();
+
+            $scope.selected_company = '';
+            $scope.clearLookingFor();
+        }
+    };
+
     $scope.geoJsonData = _.memoize(function(filteredCompanies) {
         var geojson = {
             'type': 'FeatureCollection',
@@ -50,7 +69,7 @@ angular.module('crunchinatorApp.controllers')
         return _.pluck(filteredCompanies, 'id').join('');
     });
 
-    $scope.totalRaisedGraphData = _.memoize(function(filteredCompanies) {
+    /*$scope.totalRaisedGraphData = _.memoize(function(filteredCompanies) {
         if (!filteredCompanies || !filteredCompanies.length) { return; }
         var total_raised_data = [];
         for(var i = 1; i <= 10; i++){
@@ -67,7 +86,7 @@ angular.module('crunchinatorApp.controllers')
         return total_raised_data;
     }, function(filteredCompanies) {
         return _.pluck(filteredCompanies, 'id').join('');
-    });
+    });*/
 
     $scope.resetSelection = function() {
         $scope.selectedCompanies = [];
@@ -115,7 +134,7 @@ angular.module('crunchinatorApp.controllers')
     $scope.filteredCompanies = function() {
         if(crossCompanies) {
             companiesDimension.filterAll(); //clear filter
-            companiesDimension.filter(function(c){ return ( cat_ids.length === 0 || cat_ids.indexOf(c.category_id) > -1) && (inv_ids.length === 0 || _.intersection(c.investor_ids, inv_ids).length > 0); });
+            companiesDimension.filter(function(c){ return ( cat_ids.length === 0 || cat_ids.indexOf(c.category_id) > -1) && (inv_ids.length === 0 || _.intersection(c.investor_ids[0], inv_ids).length > 0); });
 
             $scope.filteredCompaniesList = companiesByName.bottom(Infinity);
         }
@@ -159,16 +178,11 @@ angular.module('crunchinatorApp.controllers')
         var current_count = $scope.lookingForList.length;
         if($scope.lookingFor === 'companies') {
             next_items = $scope.filteredCompaniesList.slice(current_count, current_count+50);
-            console.log($scope.filteredCompaniesList.length);
         }
         else if($scope.lookingFor === 'investors') {
             next_items = $scope.filteredInvestorsList.slice(current_count, current_count+50);
-            console.log($scope.filteredInvestorsList.length);
         }
         $scope.lookingForList = $scope.lookingForList.concat(next_items);
-
-        console.log(next_items);
-
     };
 
     $scope.companies = CompanyModel;

app/styles/main.css

@@ -67,4 +67,6 @@ body {
   clear: both;
 }
 
-
+#investors .dataset, #companies .dataset {
+  height: 251px;
+}

app/views/main.tpl.html

@@ -61,10 +61,48 @@ <h3 class='pull-left'>
 
         <div ng-show='lookingFor == "companies"' class='col-sm-4 spacing-med'>
             <h3 class="pull-left">Investors</h3>
+            <div id="investors" class="textlist clear-both">
+                <div class="form-group">
+                    <div class="controls">
+                        <div class="input-group">
+                            <span class="input-group-addon"><i class="glyphicon glyphicon-leaf"></i></span>
+                            <input class="form-control" type="text" ng-model="selected_investor" typeahead-on-select="select_investor()" typeahead="investor as investor.name for investor in all_investors | filter:{name: $viewValue} | limitTo: 3" />
+                        </div>
+                    </div>
+                </div>
+                <div class="dataset">
+                    <table class="table">
+                        <tbody>
+                            <tr ng-repeat="investor in selectedInvestors">
+                                <td>{{investor.name}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
 
         <div ng-show='lookingFor == "investors"' class='col-sm-4 spacing-med'>
             <h3 class="pull-left">Companies</h3>
+            <div id="companies" class="textlist clear-both">
+                <div class="form-group">
+                    <div class="controls">
+                        <div class="input-group">
+                            <span class="input-group-addon"><i class="glyphicon glyphicon-bullhorn"></i></span>
+                            <input class="form-control" type="text" ng-model="selected_company" typeahead-on-select="select_company()" typeahead="company as company.name for company in all_companies | filter:{name: $viewValue} | limitTo: 3" />
+                        </div>
+                    </div>
+                </div>
+                <div class="dataset">
+                    <table class="table">
+                        <tbody>
+                            <tr ng-repeat="company in selectedCompanies">
+                                <td>{{company.name}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
     </div>
     <div class='row spacing-med'>

bower.json

@@ -7,7 +7,7 @@
     "es5-shim": "~2.1.0",
     "bootstrap": "~3.0.3",
     "d3": "~3.3.13",
-    "angular-bootstrap": "~0.3.0",
+    "angular-bootstrap": "~0.9.0",
     "angular-ui-router": "~0.0.1",
     "angular-ui-utils": "~0.0.3",
     "underscore": "~1.5.2",