#452 Changes to Connect ID dropdown

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

@@ -154,10 +154,26 @@ angular.module('topcoderX')
           "Authorization": "Bearer " + AuthService.getTokenV3()
         },
         params: {
-          fields: 'id,name,status',
+          fields: 'id,name',
           sort: 'lastActivityAt desc',
           perPage: perPage,
-          page: page
+          page: page,
+          status: 'active'
+        }
+      });
+    };
+
+    /**
+     * Get connect project by id
+     * @param id the id
+     */
+    ProjectService.getConnectProject = function(id) {
+      return $http({
+        method: 'GET',
+        url: $rootScope.appConfig.TC_API_V5_URL + '/projects/' + id,
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": "Bearer " + AuthService.getTokenV3()
         }
       });
     };

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

@@ -26,6 +26,7 @@ angular.module('topcoderX').controller('ProjectController', ['currentUser', '$sc
       archived: false,
       createCopilotPayments: false
     };
+    $scope.connectProjects = [];
     if ($rootScope.project) {
       $scope.title = 'Manage a Project';
       $scope.project = $rootScope.project;
@@ -34,14 +35,23 @@ angular.module('topcoderX').controller('ProjectController', ['currentUser', '$sc
       $scope.project.owner = $rootScope.project.owner;
       $scope.project.repoUrl = $rootScope.project.repoUrls.join(',');
       $scope.editing = true;
+      if ($rootScope.project.tcDirectId) {
+        ProjectService.getConnectProject($rootScope.project.tcDirectId).then(function (resp) {
+          var connectProject = {
+            id: resp.data.id,
+            name: resp.data.name
+          };
+          $scope.connectProjects.unshift(connectProject);
+        });
+      }
     } else {
       $scope.title = 'Add a Project';
       $scope.editing = false;
     }
 
     $scope.isAdminUser = Helper.isAdminUser(currentUser);
     $scope.loadingConnectProjects = true;
-    $scope.connectProjects = [];
+
     $scope.fetchConnectProjects = function($event) {
       if (!$event) {
         $scope.page = 1;
@@ -57,7 +67,10 @@ angular.module('topcoderX').controller('ProjectController', ['currentUser', '$sc
       }
       $scope.loadingConnectProjects = true;
       ProjectService.getConnectProjects(20, $scope.page).then(function(resp) {
-        $scope.connectProjects = $scope.connectProjects.concat(resp.data);
+        var projects = resp.data.filter(function (p) {
+          return $rootScope.project && $rootScope.project.tcDirectId ? p.id !== $rootScope.project.tcDirectId : true;
+        });
+        $scope.connectProjects = $scope.connectProjects.concat(projects);
       })['finally'](function() {
         $scope.loadingConnectProjects = false;
       });

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

@@ -55,26 +55,26 @@ <h2>{{title}}</h2>
               project Title is required.</span>
             <br />
             <br />
-            <label class="form-label">Connect ID:</label>
+            <label class="form-label">Connect Project:</label>
             <ui-select ng-model="project.tcDirectId" theme="bootstrap">
               <ui-select-match placeholder="Select...">
-                {{$select.selected.id}}
+                {{$select.selected.name}}
               </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}}
+                <span ng-bind-html="cp.name | highlight: $select.search"></span>
                 <div ng-if="$index == $select.items.length-1">
                   <button
                     class="btn btn-xs btn-success"
-                    style="width: 100%; margin-top: 5px;"
+                    style="width: 100%; margin-top: 10px;"
                     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
+            <small class="form-hint">Select the Topcoder Connect Project to be associated with. 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
-              TC Connect Project ID is required.</span>
+              TC Connect Project is required.</span>
             <br />
             <br />
             <label class="form-label">Repo URLs:</label>

src/front/src/app/vendor.less

@@ -13,24 +13,24 @@
 	width: 300px;
 	text-align: center;
 	background-color: #fff;
-	
+
 	.logo-header {
 		padding: 13px;
 		border: solid 2px #fff;
 		background-color: #3e3e3e
 	}
-	
+
 	h3 {
 		color: #4a4a4a;
 		font-weight: 200;
 		font-family: 'sofia-pro';
 		text-transform: uppercase;
 	}
-	
+
 	form {
 		padding: 20px;
 	}
-	
+
 	button {
 		text-transform: uppercase;
 	}
@@ -87,3 +87,9 @@ multiselect .btn-default {
   outline: 0;
   box-shadow: none;
 }
+.ui-select-bootstrap .ui-select-choices-row.active > span {
+  background: #23c6c8 !important;
+}
+.ui-select-bootstrap .ui-select-choices-row.active:last-child > span {
+  background: linear-gradient(180deg, #23c6c8 40%, transparent 0%) !important;
+}