diff --git a/package.json b/package.json
index 5841435..bfdcca2 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/front/src/app/app.js b/src/front/src/app/app.js
index fa0b206..31fb36e 100644
--- a/src/front/src/app/app.js
+++ b/src/front/src/app/app.js
@@ -7,6 +7,7 @@ angular.module('topcoderX', [
'ngAnimate',
'ngCookies',
'ngTouch',
+ 'ui.select',
'ngSanitize',
'ngResource',
'ui.router',
diff --git a/src/front/src/app/projects/project.service.js b/src/front/src/app/projects/project.service.js
index 730b939..be09d68 100644
--- a/src/front/src/app/projects/project.service.js
+++ b/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;
}]);
diff --git a/src/front/src/app/upsertproject/upsertproject.controller.js b/src/front/src/app/upsertproject/upsertproject.controller.js
index c6dc417..239ac14 100644
--- a/src/front/src/app/upsertproject/upsertproject.controller.js
+++ b/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 () {
diff --git a/src/front/src/app/upsertproject/upsertproject.html b/src/front/src/app/upsertproject/upsertproject.html
index 2563a07..ac295c3 100644
--- a/src/front/src/app/upsertproject/upsertproject.html
+++ b/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
diff --git a/src/front/src/app/vendor.less b/src/front/src/app/vendor.less
index a17ba74..85e6993 100644
--- a/src/front/src/app/vendor.less
+++ b/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;
+}
diff --git a/src/front/src/index.css b/src/front/src/index.css
index 8b80263..9fab00a 100644
--- a/src/front/src/index.css
+++ b/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");
\ No newline at end of file
+@import url("../../../node_modules/angularjs-datepicker/dist/angular-datepicker.min.css");
+@import url("../../../node_modules/ui-select/dist/select.min.css");
\ No newline at end of file
diff --git a/src/front/src/index.js b/src/front/src/index.js
index 95a2e5c..02f3bf5 100644
--- a/src/front/src/index.js
+++ b/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')
\ No newline at end of file