Use ui-select (https://angular-ui.github.io/ui-select/) as dropdown selector for lazy loading the connect projects.

Author: gets0ul

package.json

@@ -87,6 +87,7 @@
         "superagent-promise": "^1.1.0",
         "typescript": "~2.3.3",
         "uuid": "^3.3.2",
+        "ui-select": "~0.19.8",
         "winston": "^2.3.1",
         "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.1"
     },

src/front/src/app/app.js

@@ -7,6 +7,7 @@ angular.module('topcoderX', [
   'ngAnimate',
   'ngCookies',
   'ngTouch',
+  'ui.select',
   'ngSanitize',
   'ngResource',
   'ui.router',

src/front/src/app/projects/project.service.js

@@ -142,48 +142,25 @@ angular.module('topcoderX')
 
     /**
      * Get associated connect projects that the current user has access to
+     * @param perPage the items to retrieve per page
+     * @param page the page index
      */
-    ProjectService.getConnectProjects = function() {
-      function createProjectRequest(pagingParams) {
-        return $http({
-          method: 'GET',
-          url: $rootScope.appConfig.TC_API_V5_URL + '/projects/',
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": "Bearer " + AuthService.AuthService.getTokenV3()
-          },
-          params: {
-            fields: 'id,name,status',
-            sort: 'lastActivityAt desc',
-            perPage: pagingParams.perPage,
-            page: pagingParams.page
-          }
-        });
-      }
-
-      function getAll(getter, perPage, page, prev) {
-        return getter({
+    ProjectService.getConnectProjects = function(perPage, page) {
+      return $http({
+        method: 'GET',
+        url: $rootScope.appConfig.TC_API_V5_URL + '/projects/',
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": "Bearer " + AuthService.getTokenV3()
+        },
+        params: {
+          fields: 'id,name,status',
+          sort: 'lastActivityAt desc',
           perPage: perPage,
           page: page
-        }).then(function (res) {
-          if (res.status === 200) {
-            var data = res.data;
-            if (!data.length) return prev || [];
-            var current = [];
-            if (prev) {
-              current = prev.concat(data);
-            } else {
-              current = data;
-            }
-            return getAll(getter, perPage, 1 + page, current);
-          }
-          return prev || [];
-        });
-      }
-      return getAll(function (params) { return createProjectRequest(params) }, 20, 1).then(function(response) {
-        return response;
+        }
       });
-    }
+    };
 
     return ProjectService;
   }]);

src/front/src/app/upsertproject/upsertproject.controller.js

@@ -41,17 +41,28 @@ angular.module('topcoderX').controller('ProjectController', ['currentUser', '$sc
 
     $scope.isAdminUser = Helper.isAdminUser(currentUser);
     $scope.loadingConnectProjects = true;
-    ProjectService.getConnectProjects().then(function (result) {
-      $scope.loadingConnectProjects = false;
-      $scope.connectProjects = result.map(function (p) {
-        return {
-          label: 'ID: ' + p.id + ', NAME: ' + p.name + ', STATUS: ' + p.status,
-          value: p.id
-        }
+    $scope.connectProjects = [];
+    $scope.fetchConnectProjects = function($event) {
+      if (!$event) {
+        $scope.page = 1;
+        $scope.connectProjects = [];
+      } else {
+        $event.stopPropagation();
+        $event.preventDefault();
+        $scope.page++;
+      }
+      if ($scope.page === 500) {
+        $scope.loadingConnectProjects = false;
+        return;
+      }
+      $scope.loadingConnectProjects = true;
+      ProjectService.getConnectProjects(20, $scope.page).then(function(resp) {
+        $scope.connectProjects = $scope.connectProjects.concat(resp.data);
+      })['finally'](function() {
+        $scope.loadingConnectProjects = false;
       });
-    }).catch(function (error) {
-      Alert.error(error.data.message, $scope);
-    });
+    };
+    $scope.fetchConnectProjects();
 
     // function to add labels to the current project.
     $scope.addLabels = function () {

src/front/src/app/upsertproject/upsertproject.html

@@ -56,9 +56,21 @@ <h2>{{title}}</h2>
             <br />
             <br />
             <label class="form-label">Connect ID:</label>
-            <select ng-options="option.value as option.label for option in connectProjects" ng-model="project.tcDirectId"
-              class="form-control" ng-disabled="loadingConnectProjects" required>
-            </select>
+            <ui-select ng-model="project.tcDirectId" theme="bootstrap">
+              <ui-select-match placeholder="Select...">
+                {{$select.selected.id}}
+              </ui-select-match>
+              <ui-select-choices repeat="cp.id as cp in connectProjects | filter: $select.search">
+                id: {{cp.id}}, name: {{cp.name}}, status: {{cp.status}}
+                <div ng-if="$index == $select.items.length-1">
+                  <button
+                    class="btn btn-xs btn-success"
+                    style="width: 100%; margin-top: 5px;"
+                    ng-click="fetchConnectProjects($event);"
+                    ng-disabled="loadingConnectProjects">Load more...</button>
+                </div>
+              </ui-select-choices>
+            </ui-select>
             <small class="form-hint">Select the Topcoder Connect Project ID of the project. The above list contains all Topcoder Connect Projects
               you have access to.</small>
             <span ng-show="projectForm.project.tcDirectId.$touched && projectForm.project.tcDirectId.$invalid">The

src/front/src/app/vendor.less

@@ -75,3 +75,15 @@ multiselect .btn-default {
   overflow-x: visible;
   min-height: 0.01%;
 }
+
+.ui-select-container {
+  margin: 20px 0px 3px;
+
+  .ui-select-search {
+    width: 100% !important;
+  }
+}
+.ui-select-match.btn-default-focus {
+  outline: 0;
+  box-shadow: none;
+}

src/front/src/index.css

@@ -2,4 +2,5 @@
 
 @import url("../../../node_modules/metismenu/dist/metisMenu.css");
 @import url("../../../node_modules/footable/css/footable.core.css");
-@import url("../../../node_modules/angularjs-datepicker/dist/angular-datepicker.min.css");
+@import url("../../../node_modules/angularjs-datepicker/dist/angular-datepicker.min.css");
+@import url("../../../node_modules/ui-select/dist/select.min.css");

src/front/src/index.js

@@ -30,4 +30,5 @@ require('pace-js');
 require('footable');
 require('jquery-ui-dist/jquery-ui');
 require('angularjs-datepicker');
+require('ui-select');
 window.shortid = require('shortid')