eclipse-vorto#2088:

* Improved combobox * Cleaned up some garbage Signed-off-by: Menahem Julien Raccah Lisei <[email protected]>
bosch-io · Jan 8, 2020 · 46bc35b · 46bc35b
1 parent dee6a6e
commit 46bc35b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 30 deletions.
diff --git a/repository/repository-web/dist/js/controllers/manage/tenantUserManagement.js b/repository/repository-web/dist/js/controllers/manage/tenantUserManagement.js
@@ -114,18 +114,36 @@ repositoryControllers.controller("createOrUpdateUserController",
         $scope.selectedUser = null;
         $scope.retrievedUsers = [];
 
-        $scope.selectUser = function() {
-            document.getElementById('userId').value = $scope.selectedUser.username;
+        $scope.selectUser = function(user) {
+            if (user) {
+                $scope.selectedUser = user;
+                document.getElementById('userId').value = $scope.selectedUser.username;
+            }
+            $scope.retrievedUsers = [];
+        }
+
+        $scope.highlightUser = function(user) {
+            var element = document.getElementById(user.username);
+            if (element) {
+                element.style.backgroundColor = '#7fc6e7';
+                element.style.color = '#ffffff'
+            }
+        }
+
+        $scope.unhighlightUser = function(user) {
+            var element = document.getElementById(user.username);
+            if (element) {
+                element.style.backgroundColor = 'initial';
+                element.style.color = 'initial';
+            }
         }
 
         $scope.findUsers = function() {
             // only initiates user search if partial name is larger >= 4 characters
             // this is to prevent unmanageably large drop-downs
             if ($scope.userPartial && $scope.userPartial.length >= 4) {
-                //document.getElementById("userSearchSelect").style.visibility = 'visible';
                 $http.get("./rest/accounts/search/" + $scope.userPartial)
                 .then(function (result) {
-                    console.log(result);
                     if (result.data) {
                         $scope.retrievedUsers = result.data;
                         if ($scope.retrievedUsers.length == 1) {

diff --git a/repository/repository-web/dist/partials/admin/createOrUpdateUser.html b/repository/repository-web/dist/partials/admin/createOrUpdateUser.html
@@ -4,6 +4,17 @@
 			display:block;
 			visibility: hidden;
 		}
+		.dropDownUL {
+			list-style-type:none;
+			margin:0;
+			padding:0;
+			min-height:40px;
+			max-height:160px;
+			overflow:auto;
+			width:auto;
+			border:1px solid #7fc6e7;
+			z-index: 99;
+		}
 	</style>
 	<div class="modal-header">
 		<button ng-disabled="isCurrentlyAddingOrUpdating" type="button" class="close" ng-click="cancel()">&times;</button>
@@ -27,40 +38,37 @@ <h4 class="modal-title">{{ mode }} User <a class="help-icon"
 					 ng-model-options="{ debounce: 1000 }" ng-change="findUsers()">
 				</div>
 			</div>
-
-			<div class="row" ng-show="retrievedUsers.length > 0">
+			<div class="row">
 				<div class="col-sm-offset-2 col-sm-10">
-					<select class="form-control" id="userSearchSelect"
-						ng-options="user as user.username for user in retrievedUsers track by user.username"
-						ng-model="selectedUser"
-						ng-value="retrievedUsers[0].username"
-						ng-show="retrievedUsers.length > 0"
-						ng-change="selectUser()"
-					>
-					</select>
-
+					<ul class="dropDownUL" ng-show="retrievedUsers.length > 0" ng->
+						<li id="{{user.username}}" ng-repeat="user in retrievedUsers track by user.username"
+								ng-model="selectedUser" ng-click="selectUser(user)" ng-mouseover="highlightUser(user)"
+								ng-mouseleave="unhighlightUser(user)">
+							{{user.username}}
+						</li>
+					</ul>
 				</div>
 			</div>
 		</div>
 
-			<div class="form-group">
-				<div class="col-sm-offset-2 col-sm-10">
-					<div class="checkbox">
-						<label>
-							<input type="checkbox" ng-model="user.roleUser"> VIEW <small>permission to browse models</small>
-						</label>
-					</div>
+		<div class="form-group">
+			<div class="col-sm-offset-2 col-sm-10">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" ng-model="user.roleUser"> VIEW <small>permission to browse models</small>
+					</label>
 				</div>
 			</div>
+		</div>
 
-			<div class="form-group">
-				<div class="col-sm-offset-2 col-sm-10">
-					<div class="checkbox">
-						<label>
-							<input type="checkbox" ng-model="user.roleModelCreator"> CREATE <small>permission to create and modify models</small>
-								</label>
-							</div>
-				</div>
+		<div class="form-group">
+			<div class="col-sm-offset-2 col-sm-10">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" ng-model="user.roleModelCreator"> CREATE <small>permission to create and modify models</small>
+							</label>
+						</div>
+			</div>
 		</div>
 
 		<div class="form-group">